實作個人收藏、個人活動紀錄

components/like-button.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { ThumbsUp } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useAuth } from "@/contexts/auth-context"
@@ -14,15 +14,40 @@ interface LikeButtonProps {
   size?: "sm" | "default" | "lg"
   className?: string
   showCount?: boolean
+  likeCount?: number
+  userLiked?: boolean
 }
 
-export function LikeButton({ appId, size = "default", className, showCount = true }: LikeButtonProps) {
-  const { user, likeApp, getAppLikes, hasLikedToday } = useAuth()
+export function LikeButton({ appId, size = "default", className, showCount = true, likeCount: propLikeCount, userLiked: propUserLiked }: LikeButtonProps) {
+  const { user, toggleLike, getAppLikes, isLiked } = useAuth()
   const { toast } = useToast()
   const [isLoading, setIsLoading] = useState(false)
+  const [localLikeCount, setLocalLikeCount] = useState(propLikeCount || 0)
+  const [localUserLiked, setLocalUserLiked] = useState(propUserLiked || false)
 
-  const likeCount = getAppLikes(appId)
-  const hasLiked = user ? hasLikedToday(appId) : false
+  const likeCount = localLikeCount
+  const hasLiked = user ? isLiked(appId) : localUserLiked
+
+  // 載入用戶的按讚狀態
+  useEffect(() => {
+    if (user) {
+      const liked = isLiked(appId)
+      setLocalUserLiked(liked)
+    }
+  }, [user, appId, isLiked])
+
+  // 同步外部 props 變化
+  useEffect(() => {
+    if (propLikeCount !== undefined) {
+      setLocalLikeCount(propLikeCount)
+    }
+  }, [propLikeCount])
+
+  useEffect(() => {
+    if (propUserLiked !== undefined) {
+      setLocalUserLiked(propUserLiked)
+    }
+  }, [propUserLiked])
 
   const handleLike = async (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -36,25 +61,37 @@ export function LikeButton({ appId, size = "default", className, showCount = tru
       return
     }
 
-    if (hasLiked) {
-      toast({
-        title: "今日已按讚",
-        description: "您今天已經為這個應用按過讚了",
-        variant: "destructive",
-      })
-      return
-    }
-
     setIsLoading(true)
+    
+    // 立即更新本地狀態
+    const newLikedState = !hasLiked
+    const newLikeCount = hasLiked ? likeCount - 1 : likeCount + 1
+    
+    setLocalUserLiked(newLikedState)
+    setLocalLikeCount(newLikeCount)
+    
     try {
-      await likeApp(appId)
-      toast({
-        title: "按讚成功！",
-        description: "感謝您的支持",
-      })
+      const success = await toggleLike(appId)
+      if (newLikedState) {
+        // 剛剛按讚了
+        toast({
+          title: "按讚成功！",
+          description: "感謝您的支持",
+        })
+      } else {
+        // 剛剛取消按讚了
+        toast({
+          title: "取消按讚",
+          description: "已取消對該應用的按讚",
+        })
+      }
     } catch (error) {
+      console.error("按讚操作失敗:", error)
+      // 如果操作失敗，回滾本地狀態
+      setLocalUserLiked(hasLiked)
+      setLocalLikeCount(likeCount)
       toast({
-        title: "按讚失敗",
+        title: "操作失敗",
         description: "請稍後再試",
         variant: "destructive",
       })
@@ -85,7 +122,7 @@ export function LikeButton({ appId, size = "default", className, showCount = tru
         sizeClasses[size],
         "flex items-center",
         hasLiked
-          ? "text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+          ? "text-blue-600 bg-blue-50 border-blue-200 hover:text-blue-700 hover:bg-blue-100"
           : "text-gray-500 hover:text-blue-600 hover:bg-blue-50",
         "transition-all duration-200",
         className,