updated params logic

frontend/pages/products.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import useGetProducts, {
@@ -9,17 +8,19 @@ import { PRODUCT_RANGE } from "~/constants";
 
 // state
 
-const params: GetProductsFilters = useUrlSearchParams("history", {
-    initialValue: {
-        search: "",
-        sort: "newest",
-        price_gte: PRODUCT_RANGE.min,
-        price_lte: PRODUCT_RANGE.max,
-        in_stock: false,
-        has_discount: false,
-        category: "",
-        page: "1",
-    },
+const params: GetProductsFilters = useUrlSearchParams("history");
+
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "newest",
+        search: params.search ?? "",
+        price_gte: params.price_gte ?? PRODUCT_RANGE.min,
+        price_lte: params.price_lte ?? PRODUCT_RANGE.max,
+        in_stock: params.in_stock ?? false,
+        has_discount: params.has_discount ?? false,
+        category: params.category ?? undefined,
+        page: params.page ?? 1,
+    };
 });
 
 const search = ref(params.search ?? "");
@@ -31,7 +32,7 @@ provide("params", params);
 
 // queries
 
-const { data, isLoading: productsIsLoading } = useGetProducts(params);
+const { data, isLoading: productsIsLoading } = useGetProducts(filters);
 
 const products = computed(() => {
     return data.value?.results.flat();
@@ -55,17 +56,17 @@ watch(
 
 <template>
     <div class="w-full container flex flex-col">
-        <div class="w-full flex justify-end items-center py-[5rem]">
+        <div class="w-full flex justify-end items-end py-[5rem]">
             <div
                 class="flex flex-col items-start gap-[1.5rem] text-black w-full"
             >
-                <!-- <div class="flex-center gap-[.75rem]">
+                <div class="flex-center gap-[.75rem]">
                     <span>خانه</span>
                     <span>/</span>
                     <span>محصولات</span>
                     <span>/</span>
                     <span>همه</span>
-                </div> -->
+                </div>
                 <h1 class="typo-h-3">لیست محصولات</h1>
             </div>
 
@@ -86,7 +87,14 @@ watch(
                         </div>
                     </template>
                 </Input>
-                <FilterButton />
+                <!-- <Suspense>
+                    <FilterButton />
+                    <template #fallback>
+                        <Skeleton
+                            class="!w-[10.35rem] !h-[3.35rem] !rounded-full"
+                        />
+                    </template>
+                </Suspense> -->
             </div>
         </div>
         <ul