refactor : move edit form

src/api/index.ts

@@ -19,10 +19,26 @@ type Response<T> = {
   error?: any;
 };
 
+const billFrom = (bill: any): Bill =>
+  ({
+    id: bill.id,
+    customers: bill.customers_qty,
+    end: bill.end_date,
+    name: bill.name,
+    paymentMethod: bill.payment_method,
+    paymentStatus: bill.payment_status,
+    phoneNumber: bill.phone_number,
+    platform: bill.platform,
+    price: bill.price,
+    room: bill.room,
+    start: bill.start_date,
+    taxes: bill.with_tax
+  } as Bill);
+
 export const fetchOneBill = async (id: number): Promise<Response<Bill>> => {
   try {
     const { data } = await client.get<Bill>(`/${id}`);
-    return { data };
+    return { data: billFrom(data) };
   } catch (error) {
     console.error(error);
     return { error };

src/pages/bill/index.tsx

@@ -1,12 +1,13 @@
 import { Button, Col, Divider, message, PageHeader, Space, Typography } from 'antd';
 import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useHistory, useParams } from 'react-router-dom';
-import { fetchOneBill, sendBillAsPDF } from '../../api';
+import { createBill, fetchOneBill, sendBillAsPDF } from '../../api';
+import { BillForm } from '../../components/billForm';
 import { withLayout } from '../../layouts/main';
 import { Bill } from '../../types/bill';
 import NotFoundPage from '../notFound';
 import { BillSent } from './billSent';
-import { EditBillForm } from './editBillForm';
 
 export type QueryParams = { id: string };
 
@@ -15,6 +16,24 @@ const BillPage = () => {
   const { id } = useParams<QueryParams>();
   const history = useHistory();
 
+  const defaultValues = {
+    customers: 0,
+    start: '',
+    end: '',
+    name: '',
+    paymentMethod: 0,
+    paymentStatus: 0,
+    phoneNumber: '',
+    platform: 0,
+    price: 0,
+    room: 0,
+    taxes: false
+  };
+
+  const { register, handleSubmit, control, reset } = useForm<BillFormType>({
+    defaultValues
+  });
+
   // Local State
   const [sent, setSent] = useState(false);
   const [edit, setEdit] = useState(false);
@@ -42,8 +61,12 @@ const BillPage = () => {
     setSent(() => true);
   };
 
+  const onSubmit = handleSubmit(async (data) => {
+    await createBill(data);
+  });
+
   const content = edit ? (
-    <EditBillForm bill={bill} />
+    <BillForm onFinish={onSubmit} control={control} register={register} />
   ) : sent ? (
     <BillSent />
   ) : (
@@ -78,6 +101,7 @@ const BillPage = () => {
             setSent(() => false);
             setEdit(() => true);
           }}
+          disabled={edit}
         >
           Edit
         </Button>