wip comments

src/app/feed/pages/PostPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { PostsService } from '../posts/postsService.ts'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
@@ -11,6 +11,7 @@ import { usePostViewModel } from '../posts/usePostViewModel.ts'
 import { Temporal } from '@js-temporal/polyfill'
 import { useUserStore } from '../../user/user.ts'
 import { PostTimeline } from '../components/PostTimeline.tsx'
+import NewCommentWidget from '../components/NewCommentWidget.tsx'
 
 interface PostPageProps {
   postsService: PostsService
@@ -24,11 +25,15 @@ export default function PostPage({ postsService }: PostPageProps) {
   const post = posts.at(0)
   const reactions = (post?.postId ? _reactions[post.postId] : []) ?? []
 
-  useEffect(() => {
+  const loadPost = useCallback(() => {
     if (!postId) return
     postsService.load(postId).then((post) => setPosts(post ? [post] : []))
   }, [postId, postsService, setPosts])
 
+  useEffect(() => {
+    loadPost()
+  }, [loadPost])
+
   const onAddReaction = async (emoji: string) => {
     if (!username) return
     if (!post) return
@@ -46,6 +51,22 @@ export default function PostPage({ postsService }: PostPageProps) {
     removeReaction(post.postId, emoji, username)
   }
 
+  async function onSubmitComment(content: string) {
+    if (!postId) return
+    if (!content.trim()) return
+
+    try {
+      setIsSubmittingComment(true)
+      await postsService.addComment(postId, content)
+    } finally {
+      setIsSubmittingComment(false)
+    }
+
+    loadPost()
+  }
+
+  const [isSubmittingComment, setIsSubmittingComment] = useState(false)
+
   return (
     <SingleColumnLayout
       navbar={
@@ -65,7 +86,8 @@ export default function PostPage({ postsService }: PostPageProps) {
               clearReaction={onClearReaction}
               hideViewButton={true}
             />
-            <PostTimeline reactions={reactions} />
+            <PostTimeline reactions={reactions} comments={post.comments} />
+            <NewCommentWidget onSubmit={onSubmitComment} isSubmitting={isSubmittingComment} />
           </div>
         )}
       </main>