feat(video): ✨ implement refetch on comment submission and improve UI

- Add conditional rendering for login state in CommentPost form.
PatchyVideo · Jul 4, 2024 · a29204b · a29204b
1 parent 5442a1c
commit a29204b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/components/video/CommentPost.vue b/components/video/CommentPost.vue
@@ -67,7 +67,7 @@ async function onSubmit() {
 
   // If the comment submission is successful, reset the input and refetch the thread
   onReset()
-  emit('refetchThread', res.data.postComment.thread.id.toHexString())
+  emit('refetchThread', res.data.postComment.thread.id)
 }
 
 // Handler for input content changes
@@ -132,7 +132,7 @@ function togglePreview() {
   </div>
 
   <!-- Comment submission form -->
-  <form class="flex flex-row items-center gap-2 mt-1" @submit.prevent="onSubmit" @reset.prevent="onReset">
+  <form v-if="isLogin" class="flex flex-row items-center gap-2 mt-1" @submit.prevent="onSubmit" @reset.prevent="onReset">
     <!-- Submit button -->
     <button
       type="submit"

diff --git a/pages/video/[vid].vue b/pages/video/[vid].vue
@@ -161,6 +161,11 @@ const authors = computed(() =>
         .filter(v => !!v) as Author[])
     : [],
 )
+
+const aKey = ref(0)
+function handleRefetchThread() {
+  aKey.value++
+}
 </script>
 
 <template>
@@ -196,8 +201,8 @@ const authors = computed(() =>
         <ToolbarTag v-for="item in getVideo.tags" :key="item.id" :tag="item" class="mr-1 mt-1" />
       </div>
       <MarkdownCommentBlock :text="getVideo.item.desc ? getVideo.item.desc : '简介：暂无简介'" />
-      <VideoCommentPost :video-id="vid" />
-      <CommentList v-if="getVideo.commentThread" :tid="getVideo.commentThread?.id" />
+      <VideoCommentPost :video-id="vid" @refetch-thread="handleRefetchThread" />
+      <CommentList v-if="getVideo.commentThread" :key="aKey" :tid="getVideo.commentThread?.id" />
       <VideoDetailModuleTitle v-else text="暂无评论" />
     </div>
     <div class="w-full lg:w-3/10 lg:pl-2 space-y-2">