create catalog

src/pages/home/Home.tsx

@@ -4,10 +4,31 @@ import { useState, type FC } from 'react'
 import PdfIcon from '@/assets/images/PDF.svg'
 import Button from '@/components/Button'
 import Input from '@/components/Input'
+import { toast } from '@/components/Toast'
+import { useCreateCatalog } from './hooks/useHomeData'
 
 const Home: FC = () => {
 
-    const [active, setActive] = useState<string>('')
+    const [active, setActive] = useState<string>('a4')
+    const [name, setName] = useState<string>('')
+    const { mutate: createCatalog, isPending } = useCreateCatalog()
+
+    const handleSubmit = () => {
+        if (!name) {
+            toast('نام کاتالوگ را وارد کنید', 'error')
+        } else {
+            createCatalog({ name: name, size: active, content: '' }, {
+                onSuccess: () => {
+                    toast('کاتالوگ با موفقیت ساخته شد', 'success')
+                },
+                onError: (err) => {
+                    console.log(err);
+
+                    toast('خطا در ساخت کاتالوگ', 'error')
+                }
+            })
+        }
+    }
 
     return (
         <div className='mt-4 w-full'>
@@ -69,11 +90,13 @@ const Home: FC = () => {
                     <div className='mt-5'>
                         <Input
                             label='نام کاتالوگ'
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
                         />
                     </div>
 
                     <div className='flex justify-center'>
-                        <Button className='mt-8 rounded-xl'>
+                        <Button disabled={isPending} onClick={handleSubmit} className='mt-8 rounded-xl'>
                             <div className='flex gap-2 items-center'>
                                 ادامه
                                 <ArrowLeft size={16} color='white' />

src/pages/home/hooks/useHomeData.ts

@@ -1,7 +1,7 @@
 import * as api from "../service/HomeService";
 import { useMutation } from "@tanstack/react-query";
 
-export const useHomeData = () => {
+export const useCreateCatalog = () => {
   return useMutation({
     mutationFn: api.createCatalog,
   });

src/pages/home/service/HomeService.ts

@@ -2,6 +2,6 @@ import axios from "@/config/axios";
 import type { CreateCatalogParamsType } from "../types/Types";
 
 export const createCatalog = async (params: CreateCatalogParamsType) => {
-  const { data } = await axios.post("/catalogs", params);
+  const { data } = await axios.post("/catalogue", params);
   return data;
 };

src/pages/home/types/Types.ts

@@ -1,4 +1,5 @@
 export type CreateCatalogParamsType = {
   name: string;
   size: string;
+  content?: string;
 };