3.26 Migrate UserPosts Components

[flyblackbox]

3.26 Migrate UserPosts Components

Summary

Migrate all user-post listing components from src-old/components/UserPosts/ into components/UserPosts/. Replace Material UI UI elements with shadcn/ui and Tailwind, convert JSX to TSX, update per-user post data fetching with Apollo Client, and validate that user-specific post lists render correctly.

Tasks

• Create components/UserPosts/ if missing
• Copy all components from src-old/components/UserPosts/*
• Convert all .jsx → .tsx
• Replace MUI elements (lists, cards, buttons) with shadcn/ui and Tailwind
• Add TypeScript types for user post lists, items, and handlers
• Integrate Apollo Client queries to fetch posts for a specific user
• Ensure integration with Post components and shared UI primitives
• Update all imports to reference @/components/UserPosts
• Remove legacy UserPosts components from src-old
• Test user post listing, empty states, and pagination (if any)
• Commit migrated components

Expected Behavior

UserPosts components render all posts authored by a specific user with updated styling, typed props, and reliable GraphQL-backed data fetching.

Tech Notes

• Mark components with "use client" where they handle local state (filters, pagination, etc.).
• Coordinate post card layout and behavior with the migrated Post components.
• Ensure loading and error states follow the new Alert/LoadingSpinner patterns.

Acceptance Criteria

• All user-post listing components exist under components/UserPosts/ in TypeScript
• No MUI imports remain in user-post code
• User-specific posts load correctly via GraphQL
• TypeScript checks and builds pass without errors
• UserPosts lists integrate cleanly with Profile pages

Test Instructions

1. Create app/test/user-posts/page.tsx that renders user post lists for a given user ID.
2. Verify that posts display correctly, including count, ordering, and metadata.
3. Test empty-state behavior when a user has no posts.
4. Run npm run dev and npm run build to confirm stable behavior.

Labels

frontend migration typescript components posts profile phase3

[flyblackbox]

QuoteVote/quotevote-monorepo#282

@motirebuma @mzpolini