Fix comment pagination and change show limit to 8 items

frontend/components/product/ProductComments.vue

@@ -19,7 +19,6 @@ const props = defineProps<Props>();
 const route = useRoute();
 
 const id = route.params.id as string | undefined;
-const page = ref(1);
 
 const { token } = useAuth();
 const userTitle = ref("");
@@ -28,7 +27,7 @@ const selectedRating = ref(5);
 
 const showMoreComments = ref(false);
 
-const { data: comments, refetch: refetchComments } = useGetComments(id, page);
+const { data: comments, refetch: refetchComments } = useGetComments(id);
 const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
 const { mutateAsync: rateProduct, isPending: isRateProductPending } = useRateProduct(props.product.slug);
 
@@ -209,10 +208,10 @@ const limitedComments = computed(() => {
                         v-if="showMoreComments"
                         :total="comments.count"
                         :items="comments.results.map((item, i) => ({ type: 'page', value: i }))"
-                        :per-page="3"
+                        :per-page="8"
                     />
                     <Button
-                        v-else
+                        v-else-if="comments.count > 3"
                         type="button"
                         variant="primary"
                         @click="showMoreComments = !showMoreComments"

frontend/composables/api/product/useGetComments.ts

@@ -1,28 +1,35 @@
 // imports
 
 import { useQuery } from "@tanstack/vue-query";
+import { useAppParams } from "~/composables/global/useAppParams";
 import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
 
 // types
 
 export type GetCommentsResponse = ApiPaginated<UserComment>;
 
-const useGetComments = (id: string | number | undefined, page: Ref<number>) => {
+const useGetComments = (id: string | number | undefined) => {
-
     // state
 
     const { $axios: axios } = useNuxtApp();
 
+    const { page } = useAppParams();
+
     // methods
 
     const handleGetComments = async () => {
-        const { data } = await axios.get<GetCommentsResponse>(`${API_ENDPOINTS.product.comments}/${id}`);
+        const { data } = await axios.get<GetCommentsResponse>(`${API_ENDPOINTS.product.comments}/${id}`, {
+            params: {
+                offset: Number(page.value) * 8 - 8,
+                limit: 8,
+            },
+        });
         return data;
     };
 
     return useQuery({
         queryKey: [QUERY_KEYS.comments, id, page],
-        queryFn: () => handleGetComments()
+        queryFn: () => handleGetComments(),
     });
 };
 

frontend/composables/global/useAppParams.ts

@@ -3,6 +3,7 @@ import { PRODUCT_RANGE } from "~/constants";
 export const useAppParams = () => {
     // state
 
+    const route = useRoute();
     const { y } = useWindowScroll({ behavior: "smooth" });
 
     const slug = useRouteParams<string | undefined>("slug");
@@ -58,7 +59,9 @@ export const useAppParams = () => {
     watch(
         () => page.value,
         () => {
-            y.value = 0;
+            if (route.name !== "product-id") {
+                y.value = 0;
+            }
         },
     );
 

frontend/pages/product/[id].vue

@@ -4,13 +4,15 @@
 import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
 import ProductsSlider from "~/components/global/product-detail/ProductsSlider.vue";
+import { useAppParams } from "~/composables/global/useAppParams";
 
 // state
 
 const route = useRoute();
-
 const id = route.params.id as string | undefined;
 
+const { page } = useAppParams();
+
 const { suspense: suspenseProduct, data: product } = useGetProduct(id);
 
 useSeoMeta({
@@ -49,6 +51,12 @@ if (productResponse.isError) {
         statusMessage: `error : product ${id} prefetch error`,
     });
 }
+
+// lifecycle
+
+onMounted(() => {
+    page.value = 1;
+});
 </script>
 
 <template>