use reactions from post

src/app/feed/components/PostItem.tsx

@@ -55,9 +55,6 @@ interface PostReactionsProps {
 }
 
 function PostReactions({ post }: PostReactionsProps) {
-  // State to track user's reactions
-  const [userReactions, setUserReactions] = useState<Set<string>>(new Set())
-
   // Function to format reaction count
   const formatCount = (count: number): string => {
     if (count < 1000) return count.toString()
@@ -65,34 +62,33 @@ function PostReactions({ post }: PostReactionsProps) {
     return `${Math.floor(count / 1000)}K`
   }
 
-  // Function to handle reaction click
+  // NOOP handlers for react/unreact functionality
   const handleReactionClick = (emoji: string) => {
-    setUserReactions((prev) => {
-      const newReactions = new Set(prev)
-      if (newReactions.has(emoji)) {
-        newReactions.delete(emoji)
-      } else {
-        newReactions.add(emoji)
-      }
-      return newReactions
-    })
+    console.log(`Reaction clicked: ${emoji}`)
+    // This would normally call an API to add/remove a reaction
   }
 
+  // Find existing reactions to display
+  const reactionMap = new Map(post.reactions.map(r => [r.emoji, r]))
+
   return (
     <div className="flex flex-wrap gap-2 mt-3 justify-end">
-      {post.reactions.map((reaction) => {
-        const isSelected = userReactions.has(reaction.emoji)
+      {post.possibleReactions.map((emoji) => {
+        const reaction = reactionMap.get(emoji)
+        const count = reaction?.count || 0
+        const didReact = reaction?.didReact || false
+
         return (
           <button
-            key={reaction.emoji}
-            onClick={() => handleReactionClick(reaction.emoji)}
+            key={emoji}
+            onClick={() => handleReactionClick(emoji)}
             className={`flex items-center px-2 py-1 rounded-full border ${
-              isSelected ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
+              didReact ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
             } hover:bg-gray-100 transition-colors`}
           >
-            <span className="mr-1">{reaction.emoji}</span>
+            <span className="mr-1">{emoji}</span>
             <span className="text-xs text-gray-600">
-              {formatCount(reaction.count + (isSelected ? 1 : 0))}
+              {formatCount(count)}
             </span>
           </button>
         )