Fix comment pagination and change show limit to 8 items

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;
+            }
         },
     );