feat: Complete Phase 5 - Social Features (Favorites)

claude · claude · commit f2929ac23e5b · 2025-11-11T09:10:38.000Z
Implement comprehensive favorites functionality:

- Created favorite mutations and hooks in queries-client.ts
  - useAddFavoriteTechnology/useRemoveFavoriteTechnology
  - useAddFavoriteTechStack/useRemoveFavoriteTechStack
  - useFavoriteTechnologies/useFavoriteTechStacks
  - Automatic query invalidation on mutations

- Built FavoriteButton component with optimistic updates
  - Heart icon with filled state
  - Real-time count updates
  - Auth check with sign-in prompt
  - Error handling with rollback

- Created TechnologyHeader and StackHeader components
  - Client components wrapping page headers
  - Integrated FavoriteButton with proper props

- Updated detail pages to use new header components
  - /tech/[slug] with technology favorite button
  - /stacks/[slug] with stack favorite button

- Completely rebuilt /favorites page
  - Fetches real user favorites from API
  - Displays favorited technologies and stacks
  - Auth check with sign-in prompt
  - Empty state with browse action buttons
  - Loading states with GridSkeleton

All features include optimistic UI updates and proper error handling.

Build: 12 routes, 175 kB largest page
diff --git a/app-next/src/app/(browse)/favorites/page.tsx b/app-next/src/app/(browse)/favorites/page.tsx
@@ -1,17 +1,52 @@
+'use client'
+
+import Link from 'next/link'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { GridSkeleton } from '@/components/shared/loading-skeleton'
+import { useFavoriteTechnologies, useFavoriteTechStacks } from '@/lib/api/queries-client'
+import { useAuth } from '@/lib/api/auth'
+import { Button } from '@/components/ui/button'
 
 export default function FavoritesPage() {
-  // Mock favorites - in real app, this would come from user's session
-  const favoriteTechs = [
-    { id: 1, name: 'React', tier: 'Frontend Library' },
-    { id: 2, name: 'TypeScript', tier: 'Programming Language' },
-    { id: 3, name: 'Next.js', tier: 'Frontend Framework' },
-  ]
+  const { isAuthenticated, signInWithGitHub } = useAuth()
+  const { data: techResponse, isLoading: techLoading } = useFavoriteTechnologies()
+  const { data: stackResponse, isLoading: stackLoading } = useFavoriteTechStacks()
 
-  const favoriteStacks = [
-    { id: 1, name: 'Modern Web Stack', techCount: 8 },
-    { id: 2, name: 'E-commerce Platform', techCount: 12 },
-  ]
+  if (!isAuthenticated) {
+    return (
+      <div className="container py-8">
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="text-6xl mb-4">🔐</div>
+            <h3 className="text-xl font-semibold mb-2">Sign in to view favorites</h3>
+            <p className="text-muted-foreground mb-6">
+              You need to sign in to view your favorite technologies and stacks.
+            </p>
+            <Button onClick={signInWithGitHub} size="lg">
+              Sign in with GitHub
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (techLoading || stackLoading) {
+    return (
+      <div className="container py-8">
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold tracking-tight">My Favorites</h1>
+          <p className="text-lg text-muted-foreground mt-2">
+            Technologies and stacks you&apos;ve favorited
+          </p>
+        </div>
+        <GridSkeleton />
+      </div>
+    )
+  }
+
+  const favoriteTechs = techResponse?.results || []
+  const favoriteStacks = stackResponse?.results || []
 
   return (
     <div className="container py-8">
@@ -27,40 +62,80 @@ export default function FavoritesPage() {
           <CardContent className="flex flex-col items-center justify-center py-16">
             <div className="text-4xl mb-4">❤️</div>
             <h3 className="text-xl font-semibold mb-2">No favorites yet</h3>
-            <p className="text-muted-foreground text-center max-w-md">
-              Start exploring technologies and stacks, then favorite the ones you love to see them here!
+            <p className="text-muted-foreground text-center max-w-md mb-6">
+              Start exploring technologies and stacks, then favorite the ones you love to see them
+              here!
             </p>
+            <div className="flex gap-4">
+              <Button asChild>
+                <Link href="/tech">Browse Technologies</Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <Link href="/stacks">Browse Stacks</Link>
+              </Button>
+            </div>
           </CardContent>
         </Card>
       ) : (
         <div className="space-y-8">
           {favoriteTechs.length > 0 && (
             <div>
-              <h2 className="text-2xl font-bold mb-4">Favorite Technologies</h2>
+              <h2 className="text-2xl font-bold mb-4">
+                Favorite Technologies ({favoriteTechs.length})
+              </h2>
               <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                 {favoriteTechs.map((tech) => (
-                  <Card key={tech.id}>
-                    <CardHeader>
-                      <CardTitle>{tech.name}</CardTitle>
-                      <CardDescription>{tech.tier}</CardDescription>
-                    </CardHeader>
-                  </Card>
+                  <Link key={tech.id} href={`/tech/${tech.slug}`}>
+                    <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
+                      <CardHeader>
+                        <CardTitle>{tech.name}</CardTitle>
+                        <CardDescription>
+                          {tech.tier || 'Technology'}
+                          {tech.vendorName && ` by ${tech.vendorName}`}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground line-clamp-2">
+                          {tech.description || 'No description available'}
+                        </p>
+                        <div className="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
+                          <span>❤️ {tech.favCount || 0} favorites</span>
+                          <span>👁️ {tech.viewCount || 0} views</span>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
                 ))}
               </div>
             </div>
           )}
 
           {favoriteStacks.length > 0 && (
             <div>
-              <h2 className="text-2xl font-bold mb-4">Favorite Stacks</h2>
+              <h2 className="text-2xl font-bold mb-4">
+                Favorite Stacks ({favoriteStacks.length})
+              </h2>
               <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                 {favoriteStacks.map((stack) => (
-                  <Card key={stack.id}>
-                    <CardHeader>
-                      <CardTitle>{stack.name}</CardTitle>
-                      <CardDescription>{stack.techCount} technologies</CardDescription>
-                    </CardHeader>
-                  </Card>
+                  <Link key={stack.id} href={`/stacks/${stack.slug}`}>
+                    <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
+                      <CardHeader>
+                        <CardTitle>{stack.name}</CardTitle>
+                        <CardDescription>
+                          {stack.vendorName && `by ${stack.vendorName}`}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground line-clamp-2">
+                          {stack.description || 'No description available'}
+                        </p>
+                        <div className="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
+                          <span>❤️ {stack.favCount || 0} favorites</span>
+                          <span>👁️ {stack.viewCount || 0} views</span>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
                 ))}
               </div>
             </div>
diff --git a/app-next/src/app/(browse)/stacks/[slug]/page.tsx b/app-next/src/app/(browse)/stacks/[slug]/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { getTechnologyStack } from '@/lib/api/queries-server'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
+import { StackHeader } from '@/components/stack/stack-header'
 
 export const dynamic = 'force-dynamic'
 
@@ -31,15 +32,12 @@ export default async function StackDetailPage({
   return (
     <div className="container py-8">
       <div className="mb-8">
-        <div className="flex items-start justify-between">
-          <div>
-            <h1 className="text-4xl font-bold tracking-tight">{stack.name}</h1>
-            <p className="text-lg text-muted-foreground mt-2">
-              {stack.vendorName && `by ${stack.vendorName}`}
-            </p>
-          </div>
-          <Button size="lg">❤️ Favorite</Button>
-        </div>
+        <StackHeader
+          name={stack.name}
+          vendorName={stack.vendorName}
+          id={stack.id}
+          favCount={stack.favCount || 0}
+        />
       </div>
 
       <div className="grid gap-8 lg:grid-cols-3">
diff --git a/app-next/src/app/(browse)/tech/[slug]/page.tsx b/app-next/src/app/(browse)/tech/[slug]/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { getTechnology } from '@/lib/api/queries-server'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
+import { TechnologyHeader } from '@/components/technology/technology-header'
 
 export const dynamic = 'force-dynamic'
 
@@ -31,16 +32,13 @@ export default async function TechDetailPage({
   return (
     <div className="container py-8">
       <div className="mb-8">
-        <div className="flex items-start justify-between">
-          <div>
-            <h1 className="text-4xl font-bold tracking-tight">{technology.name}</h1>
-            <p className="text-lg text-muted-foreground mt-2">
-              {technology.tier}
-              {technology.vendorName && ` by ${technology.vendorName}`}
-            </p>
-          </div>
-          <Button size="lg">❤️ Favorite</Button>
-        </div>
+        <TechnologyHeader
+          name={technology.name}
+          tier={technology.tier}
+          vendorName={technology.vendorName}
+          id={technology.id!}
+          favCount={technology.favCount || 0}
+        />
       </div>
 
       <div className="grid gap-8 lg:grid-cols-3">
diff --git a/app-next/src/components/shared/favorite-button.tsx b/app-next/src/components/shared/favorite-button.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { useState } from 'react'
+import { Heart } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/lib/api/auth'
+import {
+  useAddFavoriteTechnology,
+  useRemoveFavoriteTechnology,
+  useAddFavoriteTechStack,
+  useRemoveFavoriteTechStack,
+} from '@/lib/api/queries-client'
+
+interface FavoriteButtonProps {
+  type: 'technology' | 'stack'
+  itemId: number
+  initialFavorited?: boolean
+  initialCount?: number
+  size?: 'sm' | 'default' | 'lg'
+  variant?: 'default' | 'outline' | 'ghost'
+}
+
+export function FavoriteButton({
+  type,
+  itemId,
+  initialFavorited = false,
+  initialCount = 0,
+  size = 'default',
+  variant = 'outline',
+}: FavoriteButtonProps) {
+  const { isAuthenticated, signInWithGitHub } = useAuth()
+  const [isFavorited, setIsFavorited] = useState(initialFavorited)
+  const [favCount, setFavCount] = useState(initialCount)
+
+  const addTechMutation = useAddFavoriteTechnology()
+  const removeTechMutation = useRemoveFavoriteTechnology()
+  const addStackMutation = useAddFavoriteTechStack()
+  const removeStackMutation = useRemoveFavoriteTechStack()
+
+  const handleClick = async () => {
+    if (!isAuthenticated) {
+      signInWithGitHub()
+      return
+    }
+
+    // Optimistic update
+    const newFavorited = !isFavorited
+    setIsFavorited(newFavorited)
+    setFavCount((prev) => (newFavorited ? prev + 1 : prev - 1))
+
+    try {
+      if (type === 'technology') {
+        if (newFavorited) {
+          await addTechMutation.mutateAsync(itemId)
+        } else {
+          await removeTechMutation.mutateAsync(itemId)
+        }
+      } else {
+        if (newFavorited) {
+          await addStackMutation.mutateAsync(itemId)
+        } else {
+          await removeStackMutation.mutateAsync(itemId)
+        }
+      }
+    } catch (error) {
+      // Revert optimistic update on error
+      setIsFavorited(!newFavorited)
+      setFavCount((prev) => (newFavorited ? prev - 1 : prev + 1))
+      console.error('Failed to update favorite:', error)
+    }
+  }
+
+  const isPending =
+    addTechMutation.isPending ||
+    removeTechMutation.isPending ||
+    addStackMutation.isPending ||
+    removeStackMutation.isPending
+
+  return (
+    <Button
+      variant={isFavorited ? 'default' : variant}
+      size={size}
+      onClick={handleClick}
+      disabled={isPending}
+      className="gap-2"
+    >
+      <Heart
+        className={`h-4 w-4 ${isFavorited ? 'fill-current' : ''}`}
+        aria-hidden="true"
+      />
+      <span>{favCount}</span>
+      <span className="sr-only">{isFavorited ? 'Unfavorite' : 'Favorite'}</span>
+    </Button>
+  )
+}
diff --git a/app-next/src/components/stack/stack-header.tsx b/app-next/src/components/stack/stack-header.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { FavoriteButton } from '@/components/shared/favorite-button'
+
+interface StackHeaderProps {
+  name: string
+  vendorName?: string
+  id: number
+  favCount: number
+}
+
+export function StackHeader({ name, vendorName, id, favCount }: StackHeaderProps) {
+  return (
+    <div className="flex items-start justify-between">
+      <div>
+        <h1 className="text-4xl font-bold tracking-tight">{name}</h1>
+        {vendorName && <p className="text-lg text-muted-foreground mt-2">by {vendorName}</p>}
+      </div>
+      <FavoriteButton type="stack" itemId={id} initialCount={favCount} size="lg" />
+    </div>
+  )
+}
diff --git a/app-next/src/components/technology/technology-header.tsx b/app-next/src/components/technology/technology-header.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { FavoriteButton } from '@/components/shared/favorite-button'
+
+interface TechnologyHeaderProps {
+  name: string
+  tier?: string
+  vendorName?: string
+  id: number
+  favCount: number
+}
+
+export function TechnologyHeader({
+  name,
+  tier,
+  vendorName,
+  id,
+  favCount,
+}: TechnologyHeaderProps) {
+  return (
+    <div className="flex items-start justify-between">
+      <div>
+        <h1 className="text-4xl font-bold tracking-tight">{name}</h1>
+        <p className="text-lg text-muted-foreground mt-2">
+          {tier}
+          {vendorName && ` by ${vendorName}`}
+        </p>
+      </div>
+      <FavoriteButton type="technology" itemId={id} initialCount={favCount} size="lg" />
+    </div>
+  )
+}
diff --git a/app-next/src/lib/api/queries-client.ts b/app-next/src/lib/api/queries-client.ts
