refactor post model

src/app/feed/components/PostItem.tsx

@@ -1,15 +1,24 @@
-import { Post, PostMedia } from '../posts/posts.ts'
+import { PostMedia, PostReaction } from '../posts/posts.ts'
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { PostInfo } from '../posts/usePostViewModel.ts'
+import { useUserStore } from '../../user/user.ts'
 
 interface PostItemProps {
-  post: Post
+  post: PostInfo
+  reactions: PostReaction[]
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
   hideViewButton?: boolean
 }
 
-export default function PostItem({ post, addReaction, clearReaction, hideViewButton = false }: PostItemProps) {
+export default function PostItem({
+  post,
+  reactions,
+  addReaction,
+  clearReaction,
+  hideViewButton = false,
+}: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -53,26 +62,30 @@ export default function PostItem({ post, addReaction, clearReaction, hideViewBut
         </div>
       )}
 
-      <PostReactions post={post} addReaction={addReaction} clearReaction={clearReaction} />
+      <PostReactions
+        post={post}
+        reactions={reactions}
+        addReaction={addReaction}
+        clearReaction={clearReaction}
+      />
     </article>
   )
 }
 
 interface PostReactionsProps {
-  post: Post
+  post: PostInfo
+  reactions: PostReaction[]
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
 }
 
-function PostReactions({ post, addReaction, clearReaction }: PostReactionsProps) {
-  const reactionMap = new Map(post.reactions.map((r) => [r.emoji, r]))
-
+function PostReactions({ post, reactions, addReaction, clearReaction }: PostReactionsProps) {
+  const username = useUserStore((state) => state.user?.username)
   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 = reactions.filter((r) => r.emoji === emoji).length
+        const didReact = reactions.some((r) => r.emoji == emoji && r.authorName == username)
         const onClick = () => {
           if (didReact) {
             clearReaction(emoji)