refactor post model

src/app/feed/pages/PostPage.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import { Post } from '../posts/posts.ts'
 import { PostsService } from '../posts/postsService.ts'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
 import NavBar from '../../../components/NavBar.tsx'
@@ -8,6 +7,9 @@ import AuthNavButtons from '../../auth/components/AuthNavButtons.tsx'
 import PostItem from '../components/PostItem.tsx'
 import NavButton from '../../../components/buttons/NavButton.tsx'
 import { useTranslations } from '../../i18n/translations.ts'
+import { usePostViewModel } from '../posts/usePostViewModel.ts'
+import { Temporal } from '@js-temporal/polyfill'
+import { useUserStore } from '../../user/user.ts'
 
 interface PostPageProps {
   postsService: PostsService
@@ -15,85 +17,32 @@ interface PostPageProps {
 
 export default function PostPage({ postsService }: PostPageProps) {
   const { postId } = useParams<{ postId: string }>()
-  const [post, setPost] = useState<Post | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const { posts, setPosts, addReaction, reactions, removeReaction } = usePostViewModel()
   const { t } = useTranslations()
+  const username = useUserStore((state) => state.user?.username)
+
+  const post = posts.at(0)
 
   useEffect(() => {
-    const fetchPost = async () => {
-      if (!postId) {
-        setError('Post ID is required')
-        setLoading(false)
-        return
-      }
-
-      try {
-        // Load posts and find the one with matching ID
-        const { posts } = await postsService.loadPublicFeed(null, 100)
-        const foundPost = posts.find((p) => p.postId === postId)
-
-        if (foundPost) {
-          setPost(foundPost)
-        } else {
-          setError('Post not found')
-        }
-      } catch (e: unknown) {
-        setError((e as Error).message)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchPost()
-  }, [postId, postsService])
+    if (!postId) return
+    postsService.load(postId).then((post) => setPosts(post ? [post] : []))
+  }, [postId, postsService, setPosts])
 
   const onAddReaction = async (emoji: string) => {
+    if (!username) return
     if (!post) return
 
     await postsService.addReaction(post.postId, emoji)
 
-    setPost((prevPost) => {
-      if (!prevPost) return null
-
-      const updatedReactions = [...prevPost.reactions]
-      const theReaction = updatedReactions.find((r) => r.emoji === emoji)
-
-      if (theReaction) {
-        theReaction.count++
-        theReaction.didReact = true
-      } else {
-        updatedReactions.push({ emoji, count: 1, didReact: true })
-      }
-
-      return {
-        ...prevPost,
-        reactions: updatedReactions,
-      }
-    })
+    addReaction(post.postId, emoji, username, Temporal.Now.instant())
   }
 
   const onClearReaction = async (emoji: string) => {
+    if (!username) return
     if (!post) return
 
     await postsService.removeReaction(post.postId, emoji)
-
-    setPost((prevPost) => {
-      if (!prevPost) return null
-
-      const updatedReactions = [...prevPost.reactions]
-      const theReaction = updatedReactions.find((r) => r.emoji === emoji)
-
-      if (theReaction) {
-        theReaction.count = Math.max(theReaction.count - 1, 0)
-        theReaction.didReact = false
-      }
-
-      return {
-        ...prevPost,
-        reactions: updatedReactions,
-      }
-    })
+    removeReaction(post.postId, emoji, username)
   }
 
   return (
@@ -106,14 +55,11 @@ export default function PostPage({ postsService }: PostPageProps) {
       }
     >
       <main className="w-full max-w-3xl mx-auto">
-        {loading && <div className="text-center py-8">Loading...</div>}
-
-        {error && <div className="text-center py-8 text-red-500">Error: {error}</div>}
-
         {post && (
           <div className="w-full">
             <PostItem
               post={post}
+              reactions={reactions[post.postId] ?? []}
               addReaction={onAddReaction}
               clearReaction={onClearReaction}
               hideViewButton={true}