product select component

.env

@@ -1,2 +1,3 @@
 VITE_TOKEN_NAME = 'negareh_t'
 VITE_REFRESH_TOKEN_NAME = 'negareh_rt'
+VITE_API_BASE_URL = 'http://192.168.99.235:4000'

src/config/axios.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { getToken } from "./func";
 
 const instance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+  baseURL: import.meta.env.VITE_API_BASE_URL || "http://localhost:3000/api",
   timeout: 10000,
 });
 
@@ -16,7 +16,7 @@ instance.interceptors.request.use(
   },
   (error) => {
     return Promise.reject(error);
-  }
+  },
 );
 
 instance.interceptors.response.use(
@@ -27,7 +27,7 @@ instance.interceptors.response.use(
       console.log("Unauthorized");
     }
     return Promise.reject(error);
-  }
+  },
 );
 
 export default instance;

src/pages/order/NewOrder.tsx

@@ -1,11 +1,5 @@
-import Button from '@/components/Button'
-import Input from '@/components/Input'
-import Select from '@/components/Select'
-import UploadBox from '@/components/UploadBox'
-import VoiceRecorder from '@/components/VoiceRecorder'
-import { COLORS } from '@/constants/colors'
-import { AddSquare } from 'iconsax-react'
 import { type FC } from 'react'
+import Order from './components/Order'
 
 const NewOrder: FC = () => {
     return (
@@ -14,58 +8,7 @@ const NewOrder: FC = () => {
                 سفارش جدید
             </h1>
 
-            <div className='bg-white rounded-3xl p-6 mt-8'>
+            <Order />
-                <div className='font-light'>اطلاعات  سفارش</div>
-
-                <div className='mt-6'>
-                    <Select
-                        items={[]}
-                        label='محصول'
-                        placeholder='انتخاب محصول'
-                    />
-                </div>
-
-                <div className='mt-6 rowTwoInput'>
-                    <Select
-                        items={[]}
-                        label='تعداد'
-                        placeholder='انتخاب'
-                    />
-
-                    <Input
-                        label='انتخاب دلخواه'
-                        placeholder='100'
-                    />
-                </div>
-
-                <div className='mt-6'>
-                    <VoiceRecorder
-                        label='پیام صوتی'
-                        onRecordingComplete={(blob) => {
-                            console.log('ضبط صدا تکمیل شد:', blob)
-                        }}
-                    />
-                </div>
-
-                <div className='mt-6'>
-                    <UploadBox
-                        label='فایل های ضبط شده'
-                    />
-                </div>
-
-                <div className='mt-6 flex justify-end'>
-                    <Button
-                        className='bg-transparent border border-primary text-primary w-fit px-6'
-                    >
-                        <div className='flex gap-1'>
-                            <AddSquare color={COLORS.primary} size={20} />
-                            <div>
-                                اضافه کردن
-                            </div>
-                        </div>
-                    </Button>
-                </div>
-            </div>
         </div>
     )
 }

src/pages/order/components/Order.tsx

@@ -0,0 +1,64 @@
+import { type FC } from 'react'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import UploadBox from '@/components/UploadBox'
+import VoiceRecorder from '@/components/VoiceRecorder'
+import { COLORS } from '@/constants/colors'
+import { AddSquare } from 'iconsax-react'
+import ProductsSelect from './ProductsSelect'
+
+const Order: FC = () => {
+    return (
+        <div className='bg-white rounded-3xl p-6 mt-8'>
+            <div className='font-light'>اطلاعات  سفارش</div>
+
+            <div className='mt-6'>
+                <ProductsSelect />
+            </div>
+
+            <div className='mt-6 rowTwoInput'>
+                <Select
+                    items={[]}
+                    label='تعداد'
+                    placeholder='انتخاب'
+                />
+
+                <Input
+                    label='انتخاب دلخواه'
+                    placeholder='100'
+                />
+            </div>
+
+            <div className='mt-6'>
+                <VoiceRecorder
+                    label='پیام صوتی'
+                    onRecordingComplete={(blob) => {
+                        console.log('ضبط صدا تکمیل شد:', blob)
+                    }}
+                />
+            </div>
+
+            <div className='mt-6'>
+                <UploadBox
+                    label='فایل های ضبط شده'
+                />
+            </div>
+
+            <div className='mt-6 flex justify-end'>
+                <Button
+                    className='bg-transparent border border-primary text-primary w-fit px-6'
+                >
+                    <div className='flex gap-1'>
+                        <AddSquare color={COLORS.primary} size={20} />
+                        <div>
+                            اضافه کردن
+                        </div>
+                    </div>
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Order

src/pages/order/components/ProductsSelect.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SelectHTMLAttributes } from 'react'
+import { useGetProducts } from '../hooks/useOrderData'
+import Select from '@/components/Select'
+
+type Props = {
+    error_text?: string,
+} & SelectHTMLAttributes<HTMLSelectElement>
+
+const ProductsSelect: FC<Props> = (props) => {
+
+    const { data } = useGetProducts()
+
+    return (
+        <Select
+            items={data?.data?.map((item) => {
+                return {
+                    label: item.title,
+                    value: item.id + ''
+                }
+            }) || []}
+            label='محصول'
+            placeholder='انتخاب محصول'
+            {...props}
+        />
+    )
+}
+
+export default ProductsSelect

src/pages/order/hooks/useOrderData.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/OrderService";
+
+export const useGetProducts = () => {
+  return useQuery({
+    queryKey: ["products"],
+    queryFn: api.getProducts,
+  });
+};

src/pages/order/service/OrderService.ts

@@ -0,0 +1,7 @@
+import axios from "@/config/axios";
+import type { ProductsResponseType } from "../type/Types";
+
+export const getProducts = async () => {
+  const { data } = await axios.get<ProductsResponseType>(`/public/products`);
+  return data;
+};

src/pages/order/type/Types.ts

@@ -0,0 +1,26 @@
+import type { BaseResponse } from "@/shared/types/Types";
+
+export type CategoryType = {
+  avatarUrl?: string;
+  createdAt: string;
+  id: number;
+  isActive: boolean;
+  order: number;
+  parent?: CategoryType;
+  title: string;
+};
+
+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 ProductsResponseType = BaseResponse<ProductType[]>;

src/shared/types/Types.ts

@@ -2,3 +2,15 @@ export type SharedStoreType = {
   openSidebar: boolean;
   setOpenSidebar: (open: boolean) => void;
 };
+
+export interface BaseResponse<T> {
+  success: boolean;
+  statusCode: number;
+  data: T;
+  meta?: {
+    limit: number;
+    page: number;
+    total: number;
+    totalPages: number;
+  };
+}