From f52aa068c656e7988cff7a71b7ddff2d5b981aac Mon Sep 17 00:00:00 2001
From: Dblue <89646192+trungdong11@users.noreply.github.com>
Date: Thu, 28 Nov 2024 11:57:29 +0700
Subject: [PATCH] [QUIZ-144][QUIZ-165] feat: post feature in group (#93)

* [QUIZ-144][QUIZ-165] feat: post feature in group

* [QUIZ-144][QUIZ-165] feat: post feature in group
---
 src/components/group/Activity.vue            | 182 +++++++++++---
 src/components/group/comment/FormSend.vue    |  34 +++
 src/components/group/modal/MCreatePost.vue   | 246 +++++++++++++------
 src/components/group/modal/MListQuizzfly.vue |  29 +--
 src/services/group.ts                        |  13 +
 src/services/user.ts                         |   6 +-
 src/types/group.ts                           |  31 ++-
 7 files changed, 399 insertions(+), 142 deletions(-)
 create mode 100644 src/components/group/comment/FormSend.vue

diff --git a/src/components/group/Activity.vue b/src/components/group/Activity.vue
index eb1ea4b..c8e28a9 100644
--- a/src/components/group/Activity.vue
+++ b/src/components/group/Activity.vue
@@ -8,10 +8,13 @@ import { useAuthStore } from '@/stores/auth'
 import { usePostStore } from '@/stores/group/post'
 import { formatDateTime } from '@/utils/time'
 import { useConfirmDialog } from '@/stores/modal'
+import FormSend from './comment/FormSend.vue'
 
 const confirmDialog = useConfirmDialog()
 const authStore = useAuthStore()
 const postStore = usePostStore()
+const router = useRouter()
+const route = useRoute()
 
 const getUser = computed(() => {
   return authStore.getUser
@@ -21,6 +24,8 @@ const listPosts = computed(() => {
   return postStore.getPosts
 })
 
+const groupId = route.params.groupId as string
+
 const isShowModal = ref(false)
 const isShowQuizzlfyModal = ref(false)
 
@@ -52,6 +57,10 @@ const handleDeletePost = async (id: string) => {
     postStore.handleDeleteGroup(id)
   }
 }
+
+const handPosted = () => {
+  postStore.fetchPosts(1, groupId)
+}
 </script>
 
 <template>
@@ -92,12 +101,12 @@ const handleDeletePost = async (id: string) => {
           <div class="p-6 flex items-center gap-2 w-full justify-between">
             <div class="flex items-center gap-2">
               <Avatar class="w-10 h-10">
-                <AvatarImage src="" />
-                <AvatarFallback>M</AvatarFallback>
+                <AvatarImage :src="item.member.avatar" />
+                <AvatarFallback>{{ item.member.name.charAt(0).toUpperCase() }}</AvatarFallback>
               </Avatar>
               <div class="flex flex-col gap-0">
                 <div class="flex items-center gap-2">
-                  <h4 class="text-base font-semibold">Trung dong</h4>
+                  <h4 class="text-base font-semibold">{{ item.member.name }}</h4>
                   <p class="text-x font-normal text-slate-600">posted a message</p>
                 </div>
                 <p class="text-x text-slate-600">Host</p>
@@ -120,54 +129,122 @@ const handleDeletePost = async (id: string) => {
           </div>
           <div class="h-px w-full bg-slate-200"></div>
           <div class="px-6 py-4">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-4">
               <p v-html="$sanitize(item?.content)"></p>
-              <img
-                class="h-64 w-full rounded-xl object-cover"
-                src="@/assets/img/bg-image-1.jpg"
-                alt=""
-              />
+
+              <div
+                v-if="item.files.length"
+                class="flex h-[328px] overflow-hidden w-full gap-1"
+              >
+                <div class="overflow-hidden flex-1 h-full">
+                  <img
+                    :src="item.files[0].url"
+                    class="w-full h-full object-cover cursor-pointer rounded-lg"
+                    alt="image Item"
+                  />
+                </div>
+                <div
+                  class="overflow-hidden flex-1 grid gap-1"
+                  :class="`grid__${item.files.length > 5 ? 4 : item.files.length - 1}`"
+                >
+                  <div
+                    v-for="(image, index) in item.files.slice(1, 5)"
+                    :key="index"
+                    class="image w-full h-full object-cover cursor-pointer rounded-lg relative"
+                  >
+                    <img
+                      :src="image.url"
+                      class="w-full h-full object-cover cursor-pointer rounded-lg"
+                      alt="Service"
+                    />
+                    <div
+                      v-if="index == 3 && item.files.length > 5"
+                      class="bg-black bg-opacity-30 rounded-lg absolute w-full h-full top-0 left-0 right-0 bottom-0 flex items-center justify-center text-base font-bold text-white"
+                    >
+                      + {{ item.files.length - 5 }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <Card v-if="item.quizzfly?.id">
+                <div class="flex w-full h-28">
+                  <div>
+                    <img
+                      v-image
+                      class="w-[188px] h-28 object-cover rounded-s-md"
+                      :src="item.quizzfly.cover_image || ''"
+                      alt=""
+                    />
+                  </div>
+                  <div class="flex justify-between items-center w-full">
+                    <div class="flex flex-col w-full justify-between p-3 h-full">
+                      <div class="flex items-center justify-between">
+                        <div class="flex item-center gap-1">
+                          <span
+                            class="i-material-symbols-light-grid-view-outline-rounded h-6 w-6"
+                          ></span>
+                          <h2 class="title text-base font-medium">
+                            {{ item.quizzfly.title || 'Untitled' }}
+                          </h2>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <div class="flex gap-1 items-center">
+                          <Avatar class="h-6 w-6">
+                            <AvatarImage :src="item.member?.avatar" />
+                            <AvatarFallback>{{
+                              item.member.name.charAt(0).toUpperCase()
+                            }}</AvatarFallback>
+                          </Avatar>
+                          <p class="text-sm text-gray-500">{{ item.member.name }}</p>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mr-3 flex items-center gap-2">
+                      <Button
+                        class="h-8 w-20"
+                        @click.prevent.stop="
+                          router.push({
+                            name: 'host-live',
+                            params: { quizzflyId: item.quizzfly.id },
+                          })
+                        "
+                      >
+                        Play
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        class="h-8 w-20"
+                        @click.prevent.stop="
+                          router.push({
+                            name: 'quizzfly-create',
+                            params: { quizzflyId: item.quizzfly.id },
+                          })
+                        "
+                      >
+                        Edit
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Card>
             </div>
             <div class="flex items-center gap-6 mt-6">
               <div class="flex items-center gap-1 cursor-pointer">
                 <span class="text-slate-500 i-solar-like-broken h-5 w-5"></span>
-                <p class="font-x text-slate-600">12 Likes</p>
+                <p class="font-x text-slate-600">{{ item.react_count }} Likes</p>
               </div>
               <div class="flex items-center gap-1 cursor-pointer">
                 <span
                   class="i-material-symbols-light-add-comment-outline h-5 w-5 text-slate-500"
                 ></span>
-                <p class="font-x text-slate-600">25 Comments</p>
+                <p class="font-x text-slate-600">{{ item.comment_count }} Comments</p>
               </div>
             </div>
           </div>
           <div class="h-px w-full bg-slate-300"></div>
-          <div class="flex items-center justify-between p-6 gap-12 w-full">
-            <div class="flex items-center gap-2 w-full">
-              <Avatar>
-                <AvatarImage src="" />
-                <AvatarFallback>M</AvatarFallback>
-              </Avatar>
-              <div
-                class="w-full flex items-center cursor-pointer h-11 border rounded-full px-6 py-3 text-sm font-normal text-gray-600"
-                @click="openModal"
-              >
-                Write your comment...
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <div
-                class="flex items-center justify-center rounded-full w-10 h-10 border cursor-pointer"
-              >
-                <span class="i-material-symbols-light-attach-file w-6 h-6"></span>
-              </div>
-              <div
-                class="flex items-center justify-center border-primary rounded-full w-10 h-10 border cursor-pointer"
-              >
-                <span class="i-material-symbols-light-send-rounded w-7 h-7 text-primary"></span>
-              </div>
-            </div>
-          </div>
+          <FormSend :member="item.member" />
         </div>
       </Card>
     </div>
@@ -176,6 +253,7 @@ const handleDeletePost = async (id: string) => {
       v-if="isShowModal"
       @open-quizzflys="openQuizzflysModal"
       @close="closeModal"
+      @create="handPosted"
     />
     <MListQuizzfly
       v-if="isShowQuizzlfyModal"
@@ -184,4 +262,32 @@ const handleDeletePost = async (id: string) => {
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.grid__0 {
+  display: none;
+}
+.grid__1 {
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+}
+.grid__2 {
+  grid-template-columns: auto;
+  grid-template-rows: 162px 162px;
+
+  & > img {
+    width: 100%;
+  }
+}
+.grid__3 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 162px);
+
+  & > .image:nth-child(3) {
+    grid-column: 1 / span 2;
+  }
+}
+.grid__4 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 162px);
+}
+</style>
diff --git a/src/components/group/comment/FormSend.vue b/src/components/group/comment/FormSend.vue
new file mode 100644
index 0000000..1d6bd34
--- /dev/null
+++ b/src/components/group/comment/FormSend.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import Avatar from '@/components/ui/avatar/Avatar.vue'
+import Input from '@/components/ui/input/Input.vue'
+
+const props = defineProps<{
+  member: any
+}>()
+</script>
+<template>
+  <div class="flex items-center justify-between p-6 gap-12 w-full">
+    <div class="flex items-center gap-2 w-full">
+      <Avatar>
+        <AvatarImage :src="props.member.avatar" />
+        <AvatarFallback>{{ props.member.name.charAt(0).toUpperCase() }}</AvatarFallback>
+      </Avatar>
+      <Input
+        placeholder="Write your comment..."
+        class="outline-none items-center h-11 border rounded-full px-6 py-3 text-sm font-normal text-gray-600"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <div class="flex items-center justify-center rounded-full w-10 h-10 border cursor-pointer">
+        <span class="i-material-symbols-light-attach-file w-6 h-6"></span>
+      </div>
+      <div
+        class="flex items-center justify-center border-primary rounded-full w-10 h-10 border cursor-pointer"
+      >
+        <span class="i-material-symbols-light-send-rounded w-7 h-7 text-primary"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/group/modal/MCreatePost.vue b/src/components/group/modal/MCreatePost.vue
index fab41df..fe493d9 100644
--- a/src/components/group/modal/MCreatePost.vue
+++ b/src/components/group/modal/MCreatePost.vue
@@ -9,8 +9,9 @@ import sanitizeHtml from 'sanitize-html'
 import { type ICreatePost } from '@/types/group'
 import { useQuizzflyStore } from '@/stores/quizzfly/quizzfly'
 import { usePostStore } from '@/stores/group/post'
-import ImagePicker from '@/components/base/ImagePicker.vue'
 import ScrollArea from '@/components/ui/scroll-area/ScrollArea.vue'
+import { uploadMultiFileApi } from '@/services/file'
+import { showToast } from '@/utils/toast'
 
 const quizzflyStore = useQuizzflyStore()
 const postStore = usePostStore()
@@ -38,9 +39,58 @@ const closeModal = () => {
 
 const content = ref('')
 const type = ref<'SHARE' | 'POST'>('POST')
-const files = ref([])
+const refImage = ref<HTMLInputElement | null>(null)
+const listImage = ref<string[]>([])
+const ImageUpload = ref<File[]>([])
+
+const onChangeBg = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const files = target?.files
+
+  if (files && files.length > 0) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      ImageUpload.value.push(file)
+      listImage.value.push(URL.createObjectURL(file))
+    }
+  }
+}
+
+const showChooseImage = () => {
+  refImage.value?.click()
+}
+
+const removeBg = (data: string) => {
+  const index = listImage.value.indexOf(data)
+  if (index > -1) {
+    ImageUpload.value.splice(index, 1)
+    listImage.value.splice(index, 1)
+  }
+}
+
 const onSubmit = async () => {
   isLoading.value = true
+  const listImageUpload = [] as any
+
+  if (ImageUpload.value.length > 0) {
+    const formData = new FormData()
+
+    for (let i = 0; i < ImageUpload.value.length; i++) {
+      formData.append('files', ImageUpload.value[i])
+    }
+
+    try {
+      await uploadMultiFileApi(formData).then((res) => {
+        listImageUpload.push(...res.data)
+      })
+    } catch (error) {
+      showToast({
+        description: 'Upload files failed',
+        variant: 'destructive',
+      })
+    }
+  }
+
   if (quizzflyShared.value.id) {
     type.value = 'SHARE'
     idQuizzfly.value = quizzflyShared.value.id
@@ -48,15 +98,17 @@ const onSubmit = async () => {
     type.value = 'POST'
     idQuizzfly.value = ''
   }
+
   const data: ICreatePost = {
     type: type.value,
     content: sanitizeHtml(content.value),
     quizzfly_id: quizzflyShared.value?.id,
-    files: files.value,
+    files: listImageUpload,
   }
-  postStore.createPost(idGroup, data)
-  isLoading.value = false
+
+  await postStore.createPost(idGroup, data)
   emits('created')
+  isLoading.value = false
   closeModal()
 }
 
@@ -69,11 +121,11 @@ const handleRemoveQuizzfly = () => {
 <template>
   <BaseModal @click="closeModal()">
     <form
-      class="post-container bg-white w-[700px] mx-auto my-11 rounded-3xl shadow-lg p-6 flex flex-col gap-6"
-      @submit="onSubmit"
+      class="post-container bg-white w-[700px] mx-auto my-11 rounded-3xl shadow-lg py-6 flex flex-col gap-6"
+      @submit.prevent="onSubmit"
       @click.stop
     >
-      <div class="flex items-center justify-between">
+      <div class="flex items-center justify-between px-6">
         <div
           class="cursor-pointer -ml-2"
           @click="closeModal()"
@@ -84,93 +136,145 @@ const handleRemoveQuizzfly = () => {
           <span class="i-solar-menu-dots-bold rotate-90"></span>
         </div>
       </div>
-      <ScrollArea>
-        <div class="flex flex-col gap-8 overflow-y-auto overflow-hidden">
+      <ScrollArea class="flex px-6 flex-col gap-8 overflow-y-auto overflow-hidden">
+        <div class="flex flex-col gap-8">
           <div class="flex flex-col h-52">
             <div class="form-data h-52">
               <QuillEditor
                 v-model:content="content"
                 content-type="html"
                 theme="snow"
-                toolbar="full"
               />
             </div>
           </div>
-          <div class="form-data pt-14 flex flex-auto justify-center h-44">
-            <ImagePicker v-model="files[0]" />
-          </div>
           <div
-            :class="{ 'h-auto rounded-lg px-4 py-3': quizzflyShared?.id }"
-            class="hover:bg-slate-100 flex h-11 items-center justify-center cursor-pointer rounded-full border border-primary"
-            @click="emits('openQuizzflys')"
+            v-if="quizzflyShared?.id || listImage.length > 0"
+            class="mt-12 flex flex-col gap-6"
           >
+            <ScrollArea
+              v-if="listImage.length > 0"
+              class="h-[300px] overflow-hidden overflow-y-auto"
+            >
+              <div
+                class="rounded-lg px-4 py-3 flex flex-col items-center justify-center cursor-pointer border border-primary gap-4"
+              >
+                <div
+                  v-for="item in listImage"
+                  :key="item"
+                  class="relative w-full"
+                >
+                  <img
+                    class="h-[200px] w-full object-cover rounded-lg"
+                    :src="item"
+                  />
+                  <div
+                    class="flex items-center justify-center absolute -top-2 -right-2 cursor-pointer w-7 h-7 rounded-full bg-slate-100"
+                    @click="removeBg(item)"
+                  >
+                    <span
+                      class="i-material-symbols-light-close-small-outline-rounded h-6 w-6"
+                    ></span>
+                  </div>
+                </div>
+              </div>
+            </ScrollArea>
             <div
               v-if="quizzflyShared?.id"
-              class="w-full"
+              :class="{ 'h-auto rounded-lg px-4 py-3': quizzflyShared?.id }"
+              class="hover:bg-slate-100 flex h-11 items-center justify-center cursor-pointer rounded-full border border-primary"
+              @click="emits('openQuizzflys')"
             >
-              <Card>
-                <div class="flex w-full h-98 cursor-pointer">
-                  <!-- left -->
-                  <div>
-                    <img
-                      v-image
-                      class="w-[148px] h-[98px] object-cover rounded-s-md"
-                      :src="quizzflyShared.cover_image || ''"
-                      alt=""
-                    />
-                  </div>
-                  <div class="flex justify-between items-center w-full">
-                    <div class="flex flex-col w-full justify-between p-3 h-full">
-                      <div class="flex items-center justify-between">
-                        <div class="flex item-center gap-1">
-                          <span
-                            class="i-material-symbols-light-grid-view-outline-rounded h-6 w-6"
-                          ></span>
-                          <h2 class="title text-base font-medium">
-                            {{ quizzflyShared.title || 'Untitled' }}
-                          </h2>
-                        </div>
-                      </div>
-                      <div class="flex items-center gap-2">
-                        <div class="flex gap-1 items-center">
-                          <Avatar class="h-7 w-7">
-                            <AvatarImage :src="quizzflyShared.avatar" />
-                            <AvatarFallback>{{
-                              quizzflyShared.username.charAt(0).toUpperCase()
-                            }}</AvatarFallback>
-                          </Avatar>
-                          <div class="text-sm text-gray-500">@{{ quizzflyShared.username }}</div>
+              <div class="w-full">
+                <Card>
+                  <div class="flex w-full h-98 cursor-pointer">
+                    <!-- left -->
+                    <div>
+                      <img
+                        v-image
+                        class="w-[148px] h-[98px] object-cover rounded-s-md"
+                        :src="quizzflyShared.cover_image || ''"
+                        alt=""
+                      />
+                    </div>
+                    <div class="flex justify-between items-center w-full">
+                      <div class="flex flex-col w-full justify-between p-3 h-full">
+                        <div class="flex items-center justify-between">
+                          <div class="flex item-center gap-1">
+                            <span
+                              class="i-material-symbols-light-grid-view-outline-rounded h-6 w-6"
+                            ></span>
+                            <h2 class="title text-base font-medium">
+                              {{ quizzflyShared.title || 'Untitled' }}
+                            </h2>
+                          </div>
                         </div>
-                        <div class="flex gap-1 items-center">
-                          <span class="i-material-symbols-light-person h-5 w-5"></span>
-                          <p class="text-sm text-gray-500">private</p>
+                        <div class="flex items-center gap-2">
+                          <div class="flex gap-1 items-center">
+                            <Avatar class="h-7 w-7">
+                              <AvatarImage :src="quizzflyShared.avatar" />
+                              <AvatarFallback>{{
+                                quizzflyShared.username.charAt(0).toUpperCase()
+                              }}</AvatarFallback>
+                            </Avatar>
+                            <div class="text-sm text-gray-500">@{{ quizzflyShared.username }}</div>
+                          </div>
+                          <div class="flex gap-1 items-center">
+                            <span class="i-material-symbols-light-person h-5 w-5"></span>
+                            <p class="text-sm text-gray-500">private</p>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div class="mr-3">
-                      <Button
-                        variant="secondary"
-                        class="h-8"
-                        @click.prevent.stop="handleRemoveQuizzfly"
-                      >
-                        Remove
-                      </Button>
+                      <div class="mr-3">
+                        <Button
+                          variant="secondary"
+                          class="h-8"
+                          @click.prevent.stop="handleRemoveQuizzfly"
+                        >
+                          Remove
+                        </Button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Card>
+                </Card>
+              </div>
+            </div>
+          </div>
+          <div
+            :class="{ 'mt-12': !quizzflyShared?.id && listImage.length === 0 }"
+            class="form-data flex h-11 items-center justify-center rounded-full border border-primary gap-11"
+          >
+            <p class="text-primary">Add to your post you want to share</p>
+            <div class="flex items-center gap-1">
+              <div
+                class="hover:bg-slate-100 h-8 w-8 flex items-center justify-center rounded-full cursor-pointer"
+                @click="showChooseImage"
+              >
+                <span
+                  class="i-material-symbols-light-photo-library-rounded h-7 w-6 text-primary"
+                ></span>
+                <input
+                  ref="refImage"
+                  type="file"
+                  accept="image/jpeg, image/png, image/jpg"
+                  multiple
+                  class="hidden"
+                  @input="onChangeBg"
+                />
+              </div>
+              <div
+                class="hover:bg-slate-100 h-8 w-8 flex items-center justify-center rounded-full cursor-pointer"
+                @click="emits('openQuizzflys')"
+              >
+                <span
+                  class="i-material-symbols-light-grid-view-outline-rounded h-6 w-6 text-primary"
+                ></span>
+              </div>
             </div>
-            <p
-              v-else
-              class="text-primary"
-            >
-              Click to choose the quizzfly you want to share
-            </p>
           </div>
         </div>
       </ScrollArea>
 
-      <div class="flex justify-end">
+      <div class="flex justify-end pr-6">
         <Button
           :disabled="isLoading"
           type="submit"
diff --git a/src/components/group/modal/MListQuizzfly.vue b/src/components/group/modal/MListQuizzfly.vue
index 1aa4014..90a7d26 100644
--- a/src/components/group/modal/MListQuizzfly.vue
+++ b/src/components/group/modal/MListQuizzfly.vue
@@ -36,33 +36,9 @@ const debouncedFn = useDebounceFn((value) => {
   search.value = value
 }, 500)
 
-// const route = useRoute()
-
 const emits = defineEmits<{
   (e: 'close'): void
 }>()
-
-const isLoading = ref(false)
-
-const onSubmit = async () => {
-  isLoading.value = false
-  //   try {
-  //     await inviteGroupApi(groupId, listEmails.value)
-  //     showToast({
-  //       title: 'Success',
-  //       description: 'Invite members success',
-  //       variant: 'default',
-  //     })
-  //   } catch (error) {
-  //     console.error(error)
-  //     showToast({
-  //       description: apiError(error).message,
-  //       variant: 'destructive',
-  //     })
-  //   }
-  isLoading.value = true
-  emits('close')
-}
 </script>
 
 <template>
@@ -72,10 +48,7 @@ const onSubmit = async () => {
       @click.stop
     >
       <div class="text-4xl w-full text-center font-semibold">Select Quizzfly</div>
-      <form
-        class="mt-10 flex flex-col gap-10"
-        @submit.prevent="onSubmit"
-      >
+      <form class="mt-10 flex flex-col gap-10">
         <div class="flex flex-col gap-6 w-full">
           <div class="relative max-w-full items-center">
             <Input
diff --git a/src/services/group.ts b/src/services/group.ts
index 3b3309b..2262a43 100644
--- a/src/services/group.ts
+++ b/src/services/group.ts
@@ -90,3 +90,16 @@ export const deletePostApi = async (idPost: string): Promise<BaseResponse<IPost>
     method: 'DELETE',
   })
 }
+
+export const reactPostApi = async (idPost: string): Promise<BaseResponse<IPost>> => {
+  return $api(`/posts/${idPost}/reacts`, {
+    method: 'POST',
+  })
+}
+
+export const commentPostApi = async (idPost: string, data: any): Promise<BaseResponse<IPost>> => {
+  return $api(`/posts/${idPost}/comments`, {
+    method: 'POST',
+    body: data,
+  })
+}
diff --git a/src/services/user.ts b/src/services/user.ts
index 23b6d4e..bd251db 100644
--- a/src/services/user.ts
+++ b/src/services/user.ts
@@ -11,11 +11,11 @@ export const getInfoApi = async (): Promise<BaseResponse<IUser>> => {
   })
 }
 
-export const getUserApi = async (id: string): Promise<BaseResponse<IUser[]>> => {
-  return $api(`/users/profiles`, {
+export const getUserApi = async (id: string): Promise<BaseResponse<IUser>> => {
+  return $api(`/users`, {
     method: 'GET',
     query: {
-      ids: id,
+      userId: id,
     },
   })
 }
diff --git a/src/types/group.ts b/src/types/group.ts
index 69e27a4..c72c146 100644
--- a/src/types/group.ts
+++ b/src/types/group.ts
@@ -36,8 +36,35 @@ export interface IPost {
   member_id: string
   type: string
   content: string
-  quizzfly_id: string
-  files: Array<string>
+  files: [
+    {
+      url: string
+      bytes: number
+      format: string
+      public_id: string
+      resource_type: string
+      original_filename: string
+    },
+  ]
+  quizzfly: IQuizzfly
+  react_count: number
+  comment_count: number
+  member: {
+    id: string
+    username: string
+    name: string
+    avatar: string
+  }
+}
+
+export interface IQuizzfly {
+  id: string
+  title: string
+  description: string
+  cover_image: string
+  theme: string
+  is_public: boolean
+  quizzfly_status: string
 }
 
 export interface ICreatePost {