refactor(web/input): use form control instead of controlled state

web/src/features/dialog/InputDialog.tsx

@@ -1,5 +1,5 @@
 import { Group, Modal, Button, Stack } from '@mantine/core';
-import React from 'react';
+import React, { FormEvent, useRef } from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useLocales } from '../../providers/LocaleProvider';
 import { fetchNui } from '../../utils/fetchNui';
@@ -9,12 +9,19 @@ import CheckboxField from './components/fields/checkbox';
 import SelectField from './components/fields/select';
 import NumberField from './components/fields/number';
 import SliderField from './components/fields/slider';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 export interface InputProps {
   heading: string;
   rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider>;
 }
 
+export type FormValues = {
+  test: {
+    value: any;
+  }[];
+};
+
 const InputDialog: React.FC = () => {
   const [fields, setFields] = React.useState<InputProps>({
     heading: '',
@@ -25,6 +32,12 @@ const InputDialog: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const { locale } = useLocales();
 
+  const form = useForm<{ test: { value: any }[] }>({});
+  const fieldForm = useFieldArray({
+    control: form.control,
+    name: 'test',
+  });
+
   const handlePasswordStates = (index: number) => {
     setPasswordStates({
       ...passwordStates,
@@ -37,6 +50,9 @@ const InputDialog: React.FC = () => {
     setFields(data);
     setInputData([]);
     setVisible(true);
+    data.rows.forEach((row, index) => {
+      fieldForm.insert(index, { value: row.type !== 'checkbox' ? row.default : row.checked } || { value: null });
+    });
   });
 
   useNuiEvent('closeInputDialog', () => {
@@ -60,6 +76,15 @@ const InputDialog: React.FC = () => {
     fetchNui('inputData', inputData);
   };
 
+  const onSubmit = form.handleSubmit(async (data) => {
+    const values: any[] = [];
+    Object.values(data.test).forEach((obj: { value: any }) => values.push(obj.value));
+    console.log(values);
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    form.reset();
+    fieldForm.remove();
+  });
+
   return (
     <>
       <Modal
@@ -78,33 +103,40 @@ const InputDialog: React.FC = () => {
         transition="fade"
         exitTransitionDuration={150}
       >
-        <Stack>
-          {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
-            <React.Fragment key={`row-${index}-${row.type}-${row.label}`}>
-              {row.type === 'input' && (
-                <InputField
-                  row={row}
-                  index={index}
-                  handleChange={handleChange}
-                  passwordStates={passwordStates}
-                  handlePasswordStates={handlePasswordStates}
-                />
-              )}
-              {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
-              {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
-              {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
-              {row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
-            </React.Fragment>
-          ))}
-          <Group position="right" spacing={10}>
-            <Button uppercase variant="default" onClick={handleClose} mr={3}>
-              {locale.ui.cancel}
-            </Button>
-            <Button uppercase variant="light" onClick={handleClose}>
-              {locale.ui.confirm}
-            </Button>
-          </Group>
-        </Stack>
+        <form onSubmit={onSubmit}>
+          <Stack>
+            {fieldForm.fields.map((item, index) => {
+              const row = fields.rows[index];
+              return (
+                <React.Fragment key={item.id}>
+                  {row.type === 'input' && (
+                    <InputField
+                      register={form.register(`test.${index}.value`)}
+                      row={row}
+                      index={index}
+                      passwordStates={passwordStates}
+                      handlePasswordStates={handlePasswordStates}
+                    />
+                  )}
+                  {row.type === 'checkbox' && (
+                    <CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} />
+                  )}
+                  {row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
+                  {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
+                  {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
+                </React.Fragment>
+              );
+            })}
+            <Group position="right" spacing={10}>
+              <Button uppercase variant="default" onClick={handleClose} mr={3}>
+                {locale.ui.cancel}
+              </Button>
+              <Button uppercase variant="light" onClick={handleClose} type="submit">
+                {locale.ui.confirm}
+              </Button>
+            </Group>
+          </Stack>
+        </form>
       </Modal>
     </>
   );