From ce2b31e3f9901e705a3efb0bbf5fa1fbee9339e5 Mon Sep 17 00:00:00 2001
From: KarimAldeen <MhmadKarimAldeen@gmail.com>
Date: Wed, 27 Mar 2024 10:44:47 +0300
Subject: [PATCH] #23

---
 src/Hooks/WithDrawer.tsx             |  2 +-
 src/Layout/Dashboard/SelectField.tsx | 52 ++++++++++++++++++++++++++++
 src/Layout/app/Header.tsx            |  2 +-
 src/Layout/app/WithDrawer.tsx        |  5 ++-
 src/Pages/Products/ProductsPage.tsx  | 17 +++++++--
 src/Styles/Layout/Layout.scss        | 29 ++++++++++++++--
 src/api/helper/ueGetPagination.tsx   | 50 ++++++++++++++------------
 src/api/helper/useGetWithFillter.ts  | 22 ++++++++++++
 src/api/product.ts                   |  2 +-
 9 files changed, 147 insertions(+), 34 deletions(-)
 create mode 100644 src/Layout/Dashboard/SelectField.tsx
 create mode 100644 src/api/helper/useGetWithFillter.ts

diff --git a/src/Hooks/WithDrawer.tsx b/src/Hooks/WithDrawer.tsx
index 0d81ba9..4373fe1 100644
--- a/src/Hooks/WithDrawer.tsx
+++ b/src/Hooks/WithDrawer.tsx
@@ -19,7 +19,7 @@ const WithDrawer: React.FC<WithDrawerProps> = ({ children,title ="Basic Drawer",
   return (
     <>
       <Drawer
-        title={title}
+        // title={title}
         placement={placement}
         closable={false}
         onClose={() => setOpen(false)}
diff --git a/src/Layout/Dashboard/SelectField.tsx b/src/Layout/Dashboard/SelectField.tsx
new file mode 100644
index 0000000..65df8cb
--- /dev/null
+++ b/src/Layout/Dashboard/SelectField.tsx
@@ -0,0 +1,52 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectField = ({ selectBy, submiteBy, lebel, option }: any) => {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    setSearchQuery(searchParams.get('search') || '');
+  }, []);
+
+  const handleSearchChange = (value: any) => {
+    if (value || value !== "") {
+      navigate(`${location.pathname}?${selectBy}=${value}`, { replace: true });
+    } else {
+      const params = new URLSearchParams(location.search);
+      params.delete(selectBy ?? "search");
+      navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }
+  };
+
+  const handleSelectChange = (value: any) => {
+    if (value) {
+        console.log(`${location.pathname}?${submiteBy}=${value}`);
+        
+      navigate(`${location.pathname}?${submiteBy}=${value}`, { replace: true });
+    } 
+}
+
+  return (
+    <div className='SelectField'>
+      <Select
+        placeholder={t(`${lebel}`)}
+        options={option}
+        size="large"
+        className={`w-100`}
+        allowClear
+        onChange={handleSelectChange}
+        showSearch
+        optionFilterProp="label"
+        onSearch={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default React.memo(SelectField);
diff --git a/src/Layout/app/Header.tsx b/src/Layout/app/Header.tsx
index fa20079..89afcba 100644
--- a/src/Layout/app/Header.tsx
+++ b/src/Layout/app/Header.tsx
@@ -38,7 +38,7 @@ const Header = () => {
     <div className='Header'>
       <div className='Header_Left'> 
           <WithDrawer
-    title="Cart Item"
+    // title="Cart Item"
       button={ 
           <div className="Cart_Icon">
           <GiHamburgerMenu  />
diff --git a/src/Layout/app/WithDrawer.tsx b/src/Layout/app/WithDrawer.tsx
index 0a0f9a2..2c788a1 100644
--- a/src/Layout/app/WithDrawer.tsx
+++ b/src/Layout/app/WithDrawer.tsx
@@ -5,11 +5,10 @@ import {  Drawer, Space } from 'antd';
 interface WithDrawerProps {
   button: React.ReactNode;
   children: ReactNode;
-  title:string;
   className?:string
 }
 
-const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,title ="Basic Drawer",className }) => {
+const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,className }) => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
 
@@ -24,7 +23,7 @@ const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,title ="Basic
         })}
       </Space>
       <Drawer
-        title={title}
+        // title={title}
         placement={What_the_language === "ar" ?  "right"  : "left"}
         closable={false}
         onClose={() => setOpen(false)}
diff --git a/src/Pages/Products/ProductsPage.tsx b/src/Pages/Products/ProductsPage.tsx
index a8a4380..3c5a4e6 100644
--- a/src/Pages/Products/ProductsPage.tsx
+++ b/src/Pages/Products/ProductsPage.tsx
@@ -8,6 +8,8 @@ import { useGetProduct } from '../../api/product'
 import { useNavigate } from 'react-router-dom'
 import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
 import SearchField from '../../Layout/Dashboard/SearchField'
+import SelectField from '../../Layout/Dashboard/SelectField'
+import { useGetCategories } from '../../api/Categories'
 
 function ProductsPage() {
 
@@ -15,16 +17,27 @@ function ProductsPage() {
     const {data  ,status } = useGetProduct()
     const navigate = useNavigate()
     const totalRows = data?.meta?.total;
-  
+    const { data:Categories } = useGetCategories()
+    const language = localStorage.getItem("language") ?? "en"
+
+  const SelectData = Categories?.categories?.map((item:any)=>(
+    {
+      label : item?.name[language],
+      value : item?.id
+    }
+  ))
   
 
   return (
     <DashBody status={status as QueryStatusEnum} >
     <DashHeader showAddButton={false} title={'products'}>
-      <div className='RightSide d-flex gap-2 align-center '>
+      <div className='RightSide  d-flex gap-2 align-center  '>
+
+     <SelectField selectBy="category" submiteBy="category_id" lebel="category" option={SelectData} />
      <SearchField searchBy="name"/>
 
      <AddButton  onClick={()=>navigate('/products/add')}></AddButton>
+
      </div>
     </DashHeader>
       
diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss
index af986a6..07db672 100644
--- a/src/Styles/Layout/Layout.scss
+++ b/src/Styles/Layout/Layout.scss
@@ -76,8 +76,9 @@ background: var(--bg);
     border: var(--primary);
 }
 .Page_Header{
-    display: flex; align-items: center ; justify-content: space-between;
+    display: flex;  justify-content: space-between;
     margin-bottom: 20px;
+    // align-items: center ;
 
     h1{
         font-size: 30px;
@@ -501,8 +502,8 @@ padding: 10px 40px;
 
    
    
-   @media screen and (max-width: 500px) {
-   .SearchField{
+   @media screen and (max-width: 600px) {
+   .SearchField,.SelectField{
     display: none;
    }
 }
@@ -559,4 +560,26 @@ padding: 10px 40px;
         width: 100%;
         
     }
+}
+
+
+// .withfillter{
+//     display: flex;
+//     flex-direction: column;
+//     align-items: flex-end;
+//     gap: 10px;
+//     >div{
+//         display: flex;
+//         gap: 30px;
+//     }
+// }
+.SelectField{
+    width: 200px;
+}
+.ant-drawer .ant-drawer-body{
+    padding: 0;
+}
+.RightSide{
+    flex-wrap: wrap;
+    justify-content: flex-end;
 }
\ No newline at end of file
diff --git a/src/api/helper/ueGetPagination.tsx b/src/api/helper/ueGetPagination.tsx
index d50a3c8..48ab321 100644
--- a/src/api/helper/ueGetPagination.tsx
+++ b/src/api/helper/ueGetPagination.tsx
@@ -3,34 +3,38 @@ import useAxios from './useAxios';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAuthState from '../../lib/state mangment/AuthState';
 
-export default function useGetQueryPagination(KEY: string | string[], Api: string, params: any = {}, options: any = {}) {
+export default function useGetQueryPagination(KEY: string | string[], Api: string, params: any = {}, options: any = {}, dontSearchBy?: string) {
   const axios = useAxios();
   const location = useLocation();
-  const pagination = location?.search || '';
-// console.log(params);
-const {logout} = useAuthState()
-const navigate = useNavigate()
+  let pagination = location?.search || '';
+  
 
+  const { logout } = useAuthState();
+  const navigate = useNavigate();
+
+  if (dontSearchBy && pagination.includes(dontSearchBy)) {
+    const searchParams = new URLSearchParams(pagination);
+    searchParams.delete(dontSearchBy);
+    pagination = searchParams.toString();
+  }
+  if (pagination && !pagination.startsWith('?')) {
+    pagination = '?' + pagination;
+  }
+  
   return useQuery(
     [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => {
-    const response = await axios.get(Api + pagination , {params});
-    return response.data; 
-  },
-  {
-    onError: (error:any) => {
-      if(error?.response?.status === 401 || error?.response?.status === 403){
-          logout()
-          navigate("/auth")
-
-      }
-      
+      const response = await axios.get(Api + pagination, { params });
+      return response.data;
     },
-    refetchOnWindowFocus: false,
-    
-    ...options
-
-  }
+    {
+      onError: (error: any) => {
+        if (error?.response?.status === 401 || error?.response?.status === 403) {
+          logout();
+          navigate("/auth");
+        }
+      },
+      refetchOnWindowFocus: false,
+      ...options
+    }
   );
 }
-
-// export const useGetDynamic = (Api: string) => useGetQueryPagination(Api);
diff --git a/src/api/helper/useGetWithFillter.ts b/src/api/helper/useGetWithFillter.ts
new file mode 100644
index 0000000..448e548
--- /dev/null
+++ b/src/api/helper/useGetWithFillter.ts
@@ -0,0 +1,22 @@
+import { useQuery } from 'react-query';
+import useAxios from './useAxios';
+
+export default function useGetQueryPagination(KEY: string | string[], Api: string, options: any = {}) {
+  const axios = useAxios();
+  const pagination = options;
+  
+  return useQuery(
+    [ KEY], async () => {
+    const response = await axios.get(Api + pagination );
+    return response.data; 
+  },
+  {
+    onError: (error:any) => {
+
+    },
+
+
+  }
+  );
+}
+
diff --git a/src/api/product.ts b/src/api/product.ts
index 9c6f4cd..a5f409a 100644
--- a/src/api/product.ts
+++ b/src/api/product.ts
@@ -22,7 +22,7 @@ const KEY = "Product"
 // const ONEKEY = "Product"
 
 
-export const useGetProduct = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params);
+export const useGetProduct = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params,{},"category");
 export const useGetOneProduct = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,params);
 
 export const useAddProduct = () => useAddMutation(KEY, API.ADD);