[QUIZ-144][QUIZ-167] feat: handle realtime comment

src/components/group/comment/FormSend.vue

@@ -19,8 +19,8 @@ const resetData = () => {
 }
 
 const props = defineProps<{
-  refComment?: boolean
-  idPost: string
+  focusOnMount?: boolean
+  postId: string
   member: any
   parentId?: string
 }>()
@@ -60,16 +60,16 @@ const onSubmit = async () => {
     files: listImageUpload,
   }
 
-  await postStore.createCommentPost(props.idPost, data)
+  await postStore.createCommentPost(props.postId, data)
   resetData()
-  // postStore.fetchComments(props.idPost)
+  // postStore.fetchComments(props.postId)
   isLoading.value = false
 }
 
 const inputRef = ref()
 
 onMounted(() => {
-  if (props.refComment === true) {
+  if (props.focusOnMount === true) {
     inputRef.value.$el.focus()
   }
 })

src/components/group/comment/ListComment.vue

@@ -6,7 +6,9 @@ import { formatCommentDateTime } from '@/utils/time'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import FormSend from '@/components/group/comment/FormSend.vue'
 import ListReply from './ListReply.vue'
+import { useConfirmDialog } from '@/stores/modal'
 
+const confirmDialog = useConfirmDialog()
 const postStore = usePostStore()
 const route = useRoute()
 
@@ -45,6 +47,18 @@ async function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
     }, 500)
   }
 }
+
+const handleDeletePost = async (id: string) => {
+  const result = await confirmDialog.open({
+    title: 'Are you want to delete this comment?',
+    question: 'All data in your comment will be lost',
+    warning: true,
+  })
+
+  if (result.isConfirmed) {
+    postStore.handleDeleteComment(id)
+  }
+}
 </script>
 
 <template>
@@ -89,7 +103,7 @@ async function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
                         <PopoverContent class="p-0 w-full">
                           <div
                             class="rounded-md cursor-pointer py-1 px-1.5 shadow-md bg-white"
-                            @click.prevent="postStore.handleDeleteComment(item.id)"
+                            @click.prevent="handleDeletePost(item.id)"
                           >
                             <p class="py-1 px-3 text-xs text-red-500 hover:bg-slate-100 rounded-sm">
                               Delete
@@ -124,12 +138,12 @@ async function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
                 <FormSend
                   v-if="item.isShowReply"
                   v-motion
-                  :ref-comment="isFocus"
+                  :focus-on-mount="isFocus"
                   :initial="{ opacity: 0, y: 100 }"
                   :enter="{ opacity: 1, y: 0, scale: 1 }"
                   :delay="300"
                   :member="item.member"
-                  :id-post="postId"
+                  :post-id="postId"
                   :parent-id="item.id"
                 />
               </div>

src/components/group/comment/ListReply.vue

@@ -8,7 +8,9 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import type { IPaging } from '@/types'
 import { useSocketStore } from '@/stores/socket'
+import { useConfirmDialog } from '@/stores/modal'
 
+const confirmDialog = useConfirmDialog()
 const socketStore = useSocketStore()
 
 const getMessage = computed(() => {
@@ -23,15 +25,13 @@ const listReply = ref<IComment[]>([])
 const metaPage = ref<IPaging>()
 const isLoading = ref(true)
 
-onMounted(() => {
+onBeforeMount(() => {
   getListReply(props.idParent)
 })
 
 watch(getMessage, (val: any) => {
-  if (val.event === 'commentPost') {
-    if (val.data.parent_comment_id !== null) {
-      listReply.value.unshift(val.data)
-    }
+  if (val.event === 'commentPost' && val.data.parent_comment_id !== null) {
+    listReply.value.unshift(val.data)
   }
 })
 
@@ -73,6 +73,18 @@ const handleDeleteComment = async (idComment: string) => {
     })
   }
 }
+
+const confirmDeleteComment = async (id: string) => {
+  const result = await confirmDialog.open({
+    title: 'Are you want to delete this comment?',
+    question: 'All data in your comment will be lost',
+    warning: true,
+  })
+
+  if (result.isConfirmed) {
+    handleDeleteComment(id)
+  }
+}
 </script>
 <template>
   <div v-if="listReply.length">
@@ -114,7 +126,7 @@ const handleDeleteComment = async (idComment: string) => {
                     <PopoverContent class="p-0 w-full">
                       <div
                         class="rounded-md cursor-pointer py-1 px-1.5 shadow-md bg-white"
-                        @click.prevent.stop="handleDeleteComment(el.id)"
+                        @click.prevent.stop="confirmDeleteComment(el.id)"
                       >
                         <p class="py-1 px-3 text-xs text-red-500 hover:bg-slate-100 rounded-sm">
                           Delete

src/components/layout/sidebar/SidebarMenu.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useSocketStore } from '@/stores/socket'
-import { useAuthStore } from '@/stores/auth'
+// import { useSocketStore } from '@/stores/socket'
+// import { useAuthStore } from '@/stores/auth'
 
-onMounted(() => {
-  if (useAuthStore().getUser?.id) {
-    useSocketStore().setupGroupSocketStore()
-    console.log('group socket init')
-  }
-})
+// onMounted(() => {
+
+// })
 defineProps<{
   isCollapsed: boolean
 }>()

src/main.ts

@@ -25,6 +25,7 @@ import 'vue-awesome-paginate/dist/style.css'
 import { setupI18n } from './plugins/i18n'
 import Vue3Toastify from './plugins/toast'
 import { useSocketStore } from './stores/socket'
+import { useAuthStore } from './stores/auth'
 import vue3GoogleLogin from 'vue3-google-login'
 import sanitizeHTML from 'sanitize-html'
 
@@ -65,6 +66,9 @@ const initApp = async () => {
   app.config.globalProperties.$sanitize = sanitizeHTML
 
   await initAuthStore()
+  if (useAuthStore().getUser?.id) {
+    useSocketStore().setupGroupSocketStore()
+  }
   // await initWebSocketStore();
   // await initMasterStore();
   app.use(router)

src/pages/groups/detail/post-detail.vue

@@ -45,11 +45,9 @@ const getMessage = computed(() => {
 })
 
 watch(getMessage, (val: any) => {
-  if (val.event === 'commentPost') {
-    if (val.data.parent_comment_id == null) {
-      postStore.handleCommentByPostId(val.data)
-      commentCount.value += 1
-    }
+  if (val.event === 'commentPost' && val.data.parent_comment_id == null) {
+    postStore.handleCommentByPostId(val.data)
+    commentCount.value += 1
   }
 })
 
@@ -322,7 +320,7 @@ onBeforeMount(() => {
           <!-- <div class="h-px w-full bg-slate-200"></div> -->
           <FormSend
             :member="postInfo?.member"
-            :id-post="postInfo?.id"
+            :post-id="postInfo?.id"
           />
           <ListComment :id-post="postId" />
         </div>

src/stores/group/post.ts

@@ -109,10 +109,10 @@ export const usePostStore = defineStore({
         throw error
       }
     },
-    async getCommentByPostId(postId: any) {
+    async getCommentByPostId(postId: string) {
       try {
-        const { data: comments } = await getCommentPostApi(postId)
-        this.setCommentByPostId(comments)
+        const data = await getCommentPostApi(postId)
+        this.setCommentByPostId(data.data)
       } catch (error) {
         console.error(error)
         showToast({
@@ -153,13 +153,13 @@ export const usePostStore = defineStore({
         })
       }
     },
-    setCommentByPostId(data: any) {
+    setCommentByPostId(data: IComment[]) {
       this.listComnentByPostId = data
       this.listComnentByPostId.forEach((el) => {
         el.isShowReply = false
       })
     },
-    handleCommentByPostId(data: any) {
+    handleCommentByPostId(data: IComment) {
       this.listComnentByPostId.unshift(data)
       this.listComnentByPostId.forEach((el) => {
         el.isShowReply = false