update order list

src/pages/order/List.tsx

@@ -1,10 +1,10 @@
 import Filters, { type FilterValues } from '@/components/Filters'
-import { type FC, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import Table from '@/components/Table'
 import { AddSquare, Edit2, Printer, Receipt21 } from 'iconsax-react'
 import { useGetOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import type { OrderListItemType } from './types/Types'
 import Button from '@/components/Button'
@@ -14,12 +14,42 @@ import CategoriesSelect from '../product/components/CategoriesSelect'
 import { getOrderStatusBadgeClass, getOrderStatusLabel } from './constants/orderStatus'
 
 const OrdersList: FC = () => {
+    const [searchParams, setSearchParams] = useSearchParams()
 
-    const [designId, setDesignId] = useState<string | undefined>()
+    const [designId, setDesignId] = useState<string | undefined>(
-    const [categoryId, setCategoryId] = useState<string | undefined>()
+        () => searchParams.get('designerId') ?? searchParams.get('designId') ?? undefined,
-    const [userId, setUserId] = useState<string | undefined>()
+    )
+    const [categoryId, setCategoryId] = useState<string | undefined>(
+        () => searchParams.get('categoryId') ?? undefined,
+    )
+    const [userId, setUserId] = useState<string | undefined>(
+        () => searchParams.get('userId') ?? undefined,
+    )
     const [filters, setFilters] = useState<FilterValues>({})
 
+    useEffect(() => {
+        const nextCategoryId = searchParams.get('categoryId') ?? undefined
+        const nextUserId = searchParams.get('userId') ?? undefined
+        const nextDesignId =
+            searchParams.get('designerId') ?? searchParams.get('designId') ?? undefined
+
+        setCategoryId(nextCategoryId)
+        setUserId(nextUserId)
+        setDesignId(nextDesignId)
+    }, [searchParams])
+
+    const updateSearchParam = (key: string, value?: string) => {
+        setSearchParams((current) => {
+            const next = new URLSearchParams(current)
+            if (value) {
+                next.set(key, value)
+            } else {
+                next.delete(key)
+            }
+            return next
+        }, { replace: true })
+    }
+
     const { data } = useGetOrders({ designId, categoryId, userId, ...filters })
 
     return (
@@ -62,18 +92,33 @@ const OrdersList: FC = () => {
                 <UserSearch
                     placeholder='جستجوی کاربر'
                     className='w-[220px]'
-                    onChange={(id) => setUserId(id || undefined)}
+                    value={userId ?? ''}
+                    onChange={(id) => {
+                        const nextUserId = id || undefined
+                        setUserId(nextUserId)
+                        updateSearchParam('userId', nextUserId)
+                    }}
                 />
                 <DesignerSearch
                     className='w-[220px]'
                     placeholder='جستجوی طراح'
-                    onChange={(id) => setDesignId(id || undefined)}
+                    value={designId ?? ''}
+                    onChange={(id) => {
+                        const nextDesignId = id || undefined
+                        setDesignId(nextDesignId)
+                        updateSearchParam('designerId', nextDesignId)
+                    }}
                 />
                 <div className='w-[220px]'>
                     <CategoriesSelect
                         isDisableShowLable
                         placeholder='جستجوی نوع'
-                        onChange={(e) => setCategoryId(e.target.value || undefined)}
+                        value={categoryId ?? ''}
+                        onChange={(e) => {
+                            const nextCategoryId = e.target.value || undefined
+                            setCategoryId(nextCategoryId)
+                            updateSearchParam('categoryId', nextCategoryId)
+                        }}
                     />
                 </div>
             </div>

src/pages/order/service/OrderService.ts

@@ -27,11 +27,20 @@ export type GetOrdersParams = {
 
 const cleanParams = (params?: GetOrdersParams) => {
   if (!params) return undefined;
-  return Object.fromEntries(
+  const { designId, ...rest } = params;
-    Object.entries(params).filter(
+  const query: Record<string, string> = {};
-      (entry) => entry[1] != null && entry[1] !== "",
+
-    ) as [string, string][],
+  for (const [key, value] of Object.entries(rest)) {
-  );
+    if (value != null && value !== "") {
+      query[key] = value;
+    }
+  }
+
+  if (designId) {
+    query.designerId = designId;
+  }
+
+  return Object.keys(query).length > 0 ? query : undefined;
 };
 
 export const getOrders = async (params?: GetOrdersParams) => {