update

src/config/Paths.tsx

@@ -5,6 +5,7 @@ export const Paths = {
     product: {
         list: '/product/list',
         create: '/product/create',
+        update: '/product/update/',
         category: {
             create: '/product/category/create',
             list: '/product/category/list',

src/pages/product/List.tsx

@@ -1,24 +1,33 @@
 import Button from '@/components/Button'
 import Filters from '@/components/Filters'
-import SwitchComponent from '@/components/Switch'
 import Table from '@/components/Table'
 import { AddSquare, Edit, More2 } from 'iconsax-react'
 import { type FC } from 'react'
+import { useGetProducts } from './hooks/useProductData'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 
 const ProductList: FC = () => {
+
+    const { data: products } = useGetProducts()
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>محصولات</h1>
 
-                <Button
-                    className='w-fit px-6'
+                <Link
+                    to={Paths.product.create}
                 >
-                    <div className='flex gap-1.5'>
-                        <AddSquare size={18} color='black' />
-                        <div className='text-[13px] font-light'>محصول جدید</div>
-                    </div>
-                </Button>
+                    <Button
+                        className='w-fit px-6'
+                    >
+                        <div className='flex gap-1.5'>
+                            <AddSquare size={18} color='black' />
+                            <div className='text-[13px] font-light'>محصول جدید</div>
+                        </div>
+                    </Button>
+                </Link>
             </div>
 
             <div className='mt-8'>
@@ -60,39 +69,25 @@ const ProductList: FC = () => {
                         {
                             key: 'status',
                             title: 'وضعیت',
-                            render: () => {
+                            render: (item) => {
                                 return (
-                                    <SwitchComponent
-                                        active={true}
-                                        onChange={() => { }}
-                                    />
+                                    <div>{item.isActive ? 'فعال' : 'غیر فعال'}</div>
                                 )
                             }
                         },
                         {
                             key: 'actions',
                             title: '',
-                            render: () => {
+                            render: (item) => {
                                 return (
-                                    <Edit size={20} color='#0037FF' />
+                                    <Link to={Paths.product.update + item.id}>
+                                        <Edit size={20} color='#0037FF' />
+                                    </Link>
                                 )
                             }
                         },
                     ]}
-                    data={[
-                        {
-                            id: 1,
-                            title: 'محصول 1',
-                            attribute: 'رنگ: قرمز، سایز: متوسط',
-                            status: 'فعال',
-                        },
-                        {
-                            id: 2,
-                            title: 'محصول 2',
-                            attribute: 'رنگ: آبی، سایز: بزرگ',
-                            status: 'غیرفعال',
-                        }
-                    ]}
+                    data={products?.data}
                 />
             </div>
         </div>

src/pages/product/hooks/useProductData.ts

@@ -39,7 +39,7 @@ export const useGetCategoryDetail = (id: string) => {
 export const useGetProducts = () => {
   return useQuery({
     queryKey: ["products"],
-    queryFn: api.getCategory,
+    queryFn: api.getProducts,
   });
 };
 

src/pages/product/service/ProductService.ts

@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type CategoriesResponse, type CategoryResponse, type CreateCategoryType, type CreateProductType } from "../types/Types";
+import { type CategoriesResponse, type CategoryResponse, type CreateCategoryType, type CreateProductType, type ProductResponeType } from "../types/Types";
 
 export const getCategory = async () => {
   const { data } = await axios.get<CategoriesResponse>("/admin/category");
@@ -26,6 +26,11 @@ export const getCategoryDetail = async(id:string) => {
   return data
 }
 
+export const getProducts = async () => {
+  const { data } = await axios.get<ProductResponeType>("/admin/products");
+  return data;
+};
+
 export const createProduct = async (params:CreateProductType) => {
   const { data } = await axios.post("/admin/product", params);
   return data;

src/pages/product/types/Types.ts

@@ -25,12 +25,27 @@ export type CreateCategoryType = {
 }
 
 export type CreateProductType = {
-categoryId?: number,
-title: string,
-desc: string,
-linkUrl: string,
-quantities: number[],
-isActive: boolean,
-images: string[],
-order: number
-}
+    categoryId?: number,
+    title: string,
+    desc: string,
+    linkUrl: string,
+    quantities: number[],
+    isActive: boolean,
+    images: string[],
+    order: number
+}
+
+export type ProductType = {
+    category: CategoryType,
+    createdAt: string,
+    desc: string,
+    id: number,
+    images: string[],
+    isActive: boolean,
+    linkUrl: string,
+    order: number,
+    quantities: number[],
+    title: string
+}
+
+export type ProductResponeType = BaseResponse<ProductType[]>;