api/src/routes/discussion.ts

@@ -6,7 +6,7 @@ import { requireLogin, requireMemberState, requireRole } from '../middleware/aut
 import { logger } from '../services/logging/logger';
 import { audit } from '../services/logging/auditLog';
 import { MemberState } from '@app/shared/types/member';
-import { createDiscussion, getAllDiscussions, getDiscussionById, postComment } from '../services/db/discussionService';
+import { createDiscussion, getAllDiscussions, getDiscussionById, getPostComments, postComment } from '../services/db/discussionService';
 import { ModRequest } from '@app/shared/schemas/modRequest';
 import { DiscussionComment } from '@app/shared/types/discussion';
 
@@ -20,10 +20,22 @@ router.post('/comment', async (req: Request, res: Response) => {
         console.log(comment);
 
         await postComment(comment, req.user.id);
-
+        
         res.sendStatus(201);
     } catch (error) {
+        logger.error('app', "Failed to post comments", error);
+        res.sendStatus(500);
+    }
+});
 
+router.get('/:postId/comments', async (req: Request, res: Response) => {
+    try {
+        const postId = parseInt(req.params.postId);
+        const comments = await getPostComments(postId);
+        res.json(comments);
+    } catch (error) {
+        logger.error('app', "Failed to fetch comments", error);
+        res.sendStatus(500);
     }
 });
 

ui/src/api/discussion.ts

@@ -20,3 +20,17 @@ export async function postComment(comment: DiscussionComment) {
     }
 }
 
+export async function getPostComments(postId: number): Promise<DiscussionComment[]> {
+    const res = await fetch(`${addr}/discussions/${postId}/comments`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        credentials: 'include',
+    });
+    if (!res.ok) {
+        throw new Error("Failed to fetch comments");
+    }
+    return res.json();
+}
+

ui/src/components/discussion/CommentThread.vue

@@ -1,17 +1,26 @@
 <script setup lang="ts">
 
-import { DiscussionComment } from '@shared/types/discussion';
+    import { DiscussionComment } from '@shared/types/discussion';
-import DiscussionCommentView from './DiscussionCommentView.vue';
+    import DiscussionCommentView from './DiscussionCommentView.vue';
-import CommentForm from './CommentForm.vue';
+    import CommentForm from './CommentForm.vue';
+    import { ref } from 'process';
+    import { getPostComments } from '@/api/discussion';
 
-const props = defineProps<{
+    const props = defineProps<{
-    parentId: number;
+        parentId: number,
-    comments: DiscussionComment[];
+        comments: DiscussionComment[]
-}>();
+    }>()
 
-function onCommentPosted() {
+    const emit = defineEmits<{
-  // TODO: Refresh comments if needed
+        (e: 'commentsUpdated', comments: DiscussionComment[]): void
-}
+    }>()
+
+    async function onCommentPosted() {
+        const res = await getPostComments(props.parentId);
+        console.log(res);
+        // tell parent to update state
+        emit('commentsUpdated', res);
+    }
 </script>
 
 <template>

ui/src/components/modRequests/ViewModRequest.vue

@@ -96,7 +96,7 @@
             </div>
 
             <!-- discussion placeholder -->
-            <CommentThread :parent-id="post.id" :comments="post.comments" />
+            <CommentThread :parent-id="post.id" :comments="post.comments" @comments-updated="post.comments = $event" />
 
         </div>
         <div v-else>