Update comments section

frontend/components/product/ProductComments.vue

@@ -1,29 +1,96 @@
 <script setup lang="ts">
 
+// import
+
+import useGetComments from "~/composables/api/product/useGetComments";
+import useCreateComment from "~/composables/api/product/useCreateComment";
+import { useAuth } from "~/composables/api/auth/useAuth";
+
+// state
+
+const route = useRoute();
+
+const id = route.params.id as string | undefined;
+const page = ref(1);
+
+const { token } = useAuth();
+const userComment = ref("");
+
+const { data: comments, refetch : refetchComments } = useGetComments(id, page);
+const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
+
+// method
+
+const submitComment = async () => {
+    if (userComment.value.length > 3) {
+        await createComment({
+            content: userComment.value
+        });
+
+        userComment.value = "";
+
+        await refetchComments();
+    }
+};
+
 </script>
 
 <template>
     <section class="bg-slate-50">
-        <div class="flex gap-12 my-42 container">
-            <div class="flex flex-col gap-6 min-w-fit">
+        <div class="flex relative gap-8 my-42 container">
+            <div class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200">
                 <h3 class="typo-h-3">
                     نظرات کاربران
                 </h3>
                 <div class="flex flex-col gap-2">
                     <Rating />
                     <span class="typo-p-sm">
-                    بر اساس ۴ نظر
+                        بر اساس {{ comments?.count }} نظر
                     </span>
                 </div>
-                <Button class="rounded-full">
+                <form @submit.prevent="submitComment" class="flex flex-col gap-6">
+                    <textarea
+                        :disabled="!token"
+                        class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
+                        v-model="userComment"
+                        placeholder="نظر خود را بنویسید..."
+                    />
+                    <Button
+                        v-if="token"
+                        type="submit"
+                        class="rounded-full w-full"
+                        :loading="isCreateCommentPending"
+                        :disabled="isCreateCommentPending"
+                    >
                         نظر بنویسید
                     </Button>
+                    <NuxtLink v-else to="/signin">
+                        <Button
+                            type="button"
+                            class="rounded-full w-full"
+                        >
+                            وارد شوید
+                        </Button>
+                    </NuxtLink>
+                </form>
             </div>
-            <div class="flex flex-col gap-12">
-                <Comment />
-                <Comment />
-                <Comment />
+            <div class="flex flex-col gap-8 w-full">
+                <Comment
+                    v-for="comment in comments!.results"
+                    :key="comment.id"
+                    title=""
+                    :content="comment.content"
+                    :date="comment.timestamp"
+                    :username="'منصور مرزبان'"
+                />
+                <div class="flex items-center justify-center w-full">
+                    <Pagination
+                        :total="comments!.count"
+                        :items="comments!.results.map((item, i) => ({ type: 'page', value: i }))"
+                    />
                 </div>
             </div>
+
+        </div>
     </section>
 </template>