add and remove reactions

src/app/feed/components/PostItem.tsx

@@ -4,9 +4,11 @@ import { useEffect, useState } from 'react'
 
 interface PostItemProps {
   post: Post
+  addReaction: (emoji: string) => void
+  clearReaction: (emoji: string) => void
 }
 
-export default function PostItem({ post }: PostItemProps) {
+export default function PostItem({ post, addReaction, clearReaction }: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -45,58 +47,71 @@ export default function PostItem({ post }: PostItemProps) {
         </div>
       )}
 
-      <PostReactions post={post} />
+      <PostReactions post={post} addReaction={addReaction} clearReaction={clearReaction} />
     </article>
   )
 }
 
 interface PostReactionsProps {
   post: Post
+  addReaction: (emoji: string) => void
+  clearReaction: (emoji: string) => void
 }
 
-function PostReactions({ post }: PostReactionsProps) {
-  // Function to format reaction count
-  const formatCount = (count: number): string => {
-    if (count < 1000) return count.toString()
-    if (count < 10000) return `${(count / 1000).toFixed(1)}K`
-    return `${Math.floor(count / 1000)}K`
-  }
-
-  // NOOP handlers for react/unreact functionality
-  const handleReactionClick = (emoji: string) => {
-    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]))
+function PostReactions({ post, addReaction, clearReaction }: PostReactionsProps) {
+  const reactionMap = new Map(post.reactions.map((r) => [r.emoji, r]))
 
   return (
     <div className="flex flex-wrap gap-2 mt-3 justify-end">
       {post.possibleReactions.map((emoji) => {
         const reaction = reactionMap.get(emoji)
-        const count = reaction?.count || 0
-        const didReact = reaction?.didReact || false
+        const count = reaction?.count ?? 0
+        const didReact = reaction?.didReact ?? false
+        const onClick = () => {
+          if (didReact) {
+            clearReaction(emoji)
+          } else {
+            addReaction(emoji)
+          }
+        }
 
         return (
-          <button
-            key={emoji}
-            onClick={() => handleReactionClick(emoji)}
-            className={`flex items-center px-2 py-1 rounded-full border ${
-              didReact ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
-            } hover:bg-gray-100 transition-colors`}
-          >
-            <span className="mr-1">{emoji}</span>
-            <span className="text-xs text-gray-600">
-              {formatCount(count)}
-            </span>
-          </button>
+          <PostReactionButton
+            emoji={emoji}
+            didReact={didReact}
+            count={count}
+            onClick={() => onClick()}
+          />
         )
       })}
     </div>
   )
 }
 
+interface PostReactionButtonProps {
+  emoji: string
+  didReact: boolean
+  count: number
+  onClick: () => void
+}
+
+function PostReactionButton({ emoji, didReact, onClick, count }: PostReactionButtonProps) {
+  const formattedCount = count < 100 ? count.toString() : `99+`
+
+  return (
+    <button
+      key={emoji}
+      onClick={onClick}
+      className={`flex items-center px-2 py-1 rounded-full border ${
+        didReact ? 'bg-gray-100 border-gray-400' : 'bg-white border-gray-200'
+      } hover:bg-gray-100 transition-colors`}
+    >
+      <span className="mr-1">{emoji}</span>
+      <span className="text-xs text-gray-600">{formattedCount}</span>
+    </button>
+  )
+}
+
 interface PostMediaProps {
   media: PostMedia
 }