feat: populate edit form with existing data

src/components/billForm.tsx

@@ -1,37 +1,32 @@
-import { Button, Form, Input, Switch } from 'antd';
+import { Button, Form, Switch } from 'antd';
 import { BaseSyntheticEvent } from 'react';
-import { Control, Controller, UseFormRegister } from 'react-hook-form';
+import { Control, Controller } from 'react-hook-form';
 import { BillFormType } from '../types/bill';
+import { FormInput } from './formInput';
 import { InputSelect } from './inputSelect';
 
 type Props = {
   onFinish: (e?: BaseSyntheticEvent) => Promise<void>;
   control: Control<BillFormType>;
-  register: UseFormRegister<BillFormType>;
 };
 
-export function BillForm({ onFinish, control, register }: Props) {
+export function BillForm({ onFinish, control }: Props) {
   return (
     <Form layout="vertical" onFinish={onFinish}>
-      <Form.Item label="Customer name">
+      <FormInput control={control} name="name" label="Customer name" placeholder="Cameron Doe" />
-        <Input placeholder="Cameron Doe" {...register('name')} />
-      </Form.Item>
 
-      <Form.Item label="Customer phone number">
+      <FormInput
-        <Input placeholder="06 12 34 56 78" {...register('phoneNumber')} />
+        control={control}
-      </Form.Item>
+        name="phoneNumber"
+        label="Customer phone number"
+        placeholder="06 12 34 56 78"
+      />
 
-      <Form.Item label="Price">
+      <FormInput control={control} name="price" label="Price" placeholder="75.00" addonAfter="€" />
-        <Input placeholder="75.00" addonAfter="€" {...register('price')} />
-      </Form.Item>
 
-      <Form.Item label="Start">
+      <FormInput control={control} name="start" label="Start" type="date" />
-        <Input type="date" {...register('start')} />
-      </Form.Item>
 
-      <Form.Item label="End">
+      <FormInput control={control} name="end" label="End" type="date" />
-        <Input type="date" {...register('end')} />
-      </Form.Item>
 
       <InputSelect
         control={control}
@@ -41,9 +36,13 @@ export function BillForm({ onFinish, control, register }: Props) {
         options={['T2 Corail', 'T3 Azur']}
       />
 
-      <Form.Item label="Customers number">
+      <FormInput
-        <Input type="number" {...register('customers')} placeholder="1" />
+        control={control}
-      </Form.Item>
+        name="customers"
+        label="Customers number"
+        placeholder="1"
+        type="number"
+      />
 
       <InputSelect
         control={control}

src/components/formInput.tsx

@@ -0,0 +1,32 @@
+import { Form, Input } from 'antd';
+import { Controller } from 'react-hook-form';
+
+type FormInputProps = {
+  control: any;
+  name: string;
+  label: string;
+  placeholder?: string;
+  addonAfter?: string;
+  type?: string;
+};
+
+export function FormInput({
+  control,
+  name,
+  label,
+  placeholder,
+  addonAfter,
+  type = 'text'
+}: FormInputProps) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Form.Item label={label}>
+          <Input placeholder={placeholder} {...field} addonAfter={addonAfter} type={type} />
+        </Form.Item>
+      )}
+    />
+  );
+}

src/pages/bill/index.tsx

@@ -5,8 +5,7 @@ import { useHistory, useParams } from 'react-router-dom';
 import { createBill, fetchOneBill, sendBillAsPDF } from '../../api';
 import { BillForm } from '../../components/billForm';
 import { withLayout } from '../../layouts/main';
-import { Bill } from '../../types/bill';
+import { Bill, BillFormType } from '../../types/bill';
-import NotFoundPage from '../notFound';
 import { BillSent } from './billSent';
 
 export type QueryParams = { id: string };
@@ -15,24 +14,7 @@ const BillPage = () => {
   // Hooks
   const { id } = useParams<QueryParams>();
   const history = useHistory();
-
+  const { handleSubmit, control, reset } = useForm<BillFormType>();
-  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);
@@ -41,18 +23,16 @@ const BillPage = () => {
 
   // Effects
   useEffect(() => {
-    const loadBIllById = async (id: string) => {
+    (async (id: string) => {
       const billID = parseInt(id);
       const { data: loadedBill, error } = await fetchOneBill(billID);
-      if (!loadedBill || error) {
+      if (loadedBill && error) {
-        return <NotFoundPage />;
+        setBill(() => loadedBill);
+        const { id, ...values } = loadedBill;
+        reset(values);
       }
-      setBill(() => loadedBill);
+    })(id);
-      return;
+  }, [id, reset]);
-    };
-
-    loadBIllById(id);
-  }, [id]);
 
   // Logic
   const handleSendPDF = (id: number) => {
@@ -66,15 +46,15 @@ const BillPage = () => {
   });
 
   const content = edit ? (
-    <BillForm onFinish={onSubmit} control={control} register={register} />
+    <BillForm onFinish={onSubmit} control={control} />
   ) : sent ? (
     <BillSent />
   ) : (
     <Col>
-      <Typography.Text>{bill?.name}</Typography.Text>
+      <Typography.Text>{bill.name}</Typography.Text>
-      <Typography.Text>{bill?.price} €</Typography.Text>
+      <Typography.Text>{bill.price} €</Typography.Text>
       <Typography.Text>
-        from {bill?.start} to {bill?.end}
+        from {bill.start} to {bill.end}
       </Typography.Text>
     </Col>
   );

src/pages/home.tsx

@@ -7,7 +7,7 @@ import { BillFormType } from '../types/bill';
 
 const HomePage = () => {
   // Hooks
-  const { register, handleSubmit, control } = useForm<BillFormType>();
+  const { handleSubmit, control } = useForm<BillFormType>();
   const history = useHistory();
 
   // Logic
@@ -20,7 +20,7 @@ const HomePage = () => {
     <>
       <h1>Create a new bill</h1>
 
-      <BillForm onFinish={onSubmit} control={control} register={register} />
+      <BillForm onFinish={onSubmit} control={control} />
     </>
   );
 };