refactor(community): extract comment store and post/comment API adapters

components/post-like-button.tsx

@@ -1,18 +1,21 @@
 "use client"
 
 import { Heart } from "lucide-react"
-import { useState } from "react"
+import { togglePostLike } from "@/lib/api/posts"
 import { useRequireAuth } from "@/lib/use-require-auth"
+import { usePostStore } from "@/store/posts"
 
 interface PostLikeButtonProps {
-  initialLiked: boolean
-  initialCount: number
+  postId: string
 }
 
-export function PostLikeButton({ initialLiked, initialCount }: PostLikeButtonProps) {
+export function PostLikeButton({ postId }: PostLikeButtonProps) {
   const { requireAuth } = useRequireAuth()
-  const [liked, setLiked] = useState(initialLiked)
-  const [count, setCount] = useState(initialCount)
+  const post = usePostStore((state) => state.posts.find((item) => item.id === postId))
+
+  if (!post) {
+    return null
+  }
 
   return (
     <button
@@ -20,16 +23,12 @@ export function PostLikeButton({ initialLiked, initialCount }: PostLikeButtonPro
       className="flex items-center gap-1 hover:text-foreground transition-colors"
       onClick={() =>
         requireAuth(() => {
-          setLiked((prevLiked) => {
-            const nextLiked = !prevLiked
-            setCount((prevCount) => (nextLiked ? prevCount + 1 : Math.max(0, prevCount - 1)))
-            return nextLiked
-          })
+          togglePostLike(postId)
         })
       }
     >
-      <Heart className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`} />
-      {count}
+      <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
+      {post.likeCount}
     </button>
   )
 }