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

2026-08-17 23:16:03 +01:00 · 2023-01-03 18:55:02 +01:00
parent 440a7564a3
commit d0811be0ce
9 changed files with 121 additions and 76 deletions
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/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>
    </>
  );
--- a/web/src/features/dialog/components/fields/checkbox.tsx
+++ b/web/src/features/dialog/components/fields/checkbox.tsx
@@ -1,25 +1,17 @@
 import { Checkbox } from '@mantine/core';
 import { useEffect } from 'react';
 import { ICheckbox } from '../../../../interfaces/dialog';
+import { UseFormRegisterReturn } from 'react-hook-form';

 interface Props {
  row: ICheckbox;
  index: number;
-  handleChange: (value: boolean, index: number) => void;
+  register: UseFormRegisterReturn;
 }

 const CheckboxField: React.FC<Props> = (props) => {
-  useEffect(() => {
-    if (props.row.checked) props.handleChange(props.row.checked, props.index);
-  }, []);
-
  return (
-    <Checkbox
-      sx={{ display: 'flex' }}
-      label={props.row.label}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
-      defaultChecked={props.row.checked}
-    />
+    <Checkbox {...props.register} sx={{ display: 'flex' }} label={props.row.label} defaultChecked={props.row.checked} />
  );
 };

--- a/web/src/features/dialog/components/fields/input.tsx
+++ b/web/src/features/dialog/components/fields/input.tsx
@@ -1,28 +1,26 @@
 import { TextInput } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { IInput } from '../../../../interfaces/dialog';
+import { UseFormRegisterReturn } from 'react-hook-form';

 interface Props {
+  register: UseFormRegisterReturn;
  row: IInput;
  index: number;
-  handleChange: (value: string, index: number) => void;
  passwordStates: boolean[];
  handlePasswordStates: (index: number) => void;
 }

 const InputField: React.FC<Props> = (props) => {
-  useEffect(() => {
-    if (props.row.default) props.handleChange(props.row.default, props.index);
-  }, []);
-
  return (
    <TextInput
+      {...props.register}
+      defaultValue={props.row.default}
      label={props.row.label}
      description={props.row.description}
      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
      placeholder={props.row.placeholder}
-      defaultValue={props.row.default}
      disabled={props.row.disabled}
      type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
      rightSection={
--- a/web/src/features/dialog/components/fields/number.tsx
+++ b/web/src/features/dialog/components/fields/number.tsx
@@ -2,27 +2,35 @@ import { NumberInput } from '@mantine/core';
 import { useEffect } from 'react';
 import { INumber } from '../../../../interfaces/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Control, useController, UseFormRegisterReturn } from 'react-hook-form';
+import { FormValues } from '../../InputDialog';

 interface Props {
  row: INumber;
  index: number;
-  handleChange: (value: number, index: number) => void;
+  control: Control<FormValues>;
 }

 const NumberField: React.FC<Props> = (props) => {
-  useEffect(() => {
-    if (props.row.default) props.handleChange(props.row.default, props.index);
-  }, []);
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    defaultValue: props.row.default,
+  });

  return (
    <NumberInput
+      value={controller.field.value}
+      name={controller.field.name}
+      ref={controller.field.ref}
+      onBlur={controller.field.onBlur}
+      onChange={controller.field.onChange}
      label={props.row.label}
      description={props.row.description}
      defaultValue={props.row.default}
      min={props.row.min}
      max={props.row.max}
      disabled={props.row.disabled}
-      onChange={(value) => props.handleChange(value as number, props.index)}
      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
    />
  );
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -1,31 +1,31 @@
 import { Select } from '@mantine/core';
-import { useEffect } from 'react';
 import { ISelect } from '../../../../interfaces/dialog';
+import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
+import { FormValues } from '../../InputDialog';

 interface Props {
  row: ISelect;
  index: number;
-  handleChange: (value: string, index: number) => void;
+  control: Control<FormValues>;
 }

 // TODO: set label to value of value when there is no label provided
 const SelectField: React.FC<Props> = (props) => {
-  useEffect(() => {
-    if (props.row.default) {
-      props.row.options?.map((option) => {
-        if (props.row.default === option.value) {
-          props.handleChange(option.value, props.index);
-        }
-      });
-    }
-  }, []);
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    defaultValue: props.row.default,
+  });

  return (
    <Select
-      onChange={(value) => props.handleChange(value as string, props.index)}
-      defaultValue={props.row.default || ''}
-      disabled={props.row.disabled}
      data={props.row.options}
+      value={controller.field.value}
+      name={controller.field.name}
+      ref={controller.field.ref}
+      onBlur={controller.field.onBlur}
+      onChange={controller.field.onChange}
+      disabled={props.row.disabled}
      label={props.row.label}
      description={props.row.description}
    />
--- a/web/src/features/dialog/components/fields/slider.tsx
+++ b/web/src/features/dialog/components/fields/slider.tsx
@@ -1,27 +1,32 @@
 import { Box, Slider, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { ISlider } from '../../../../interfaces/dialog';
+import { Control, FieldValues, useController, UseFormRegisterReturn, UseFormSetValue } from 'react-hook-form';
+import { FormValues } from '../../InputDialog';

 interface Props {
  row: ISlider;
  index: number;
-  handleChange: (value: number, index: number) => void;
+  control: Control<FormValues>;
 }

 const SliderField: React.FC<Props> = (props) => {
-  useEffect(() => {
-    if (props.row.default || props.row.min) props.handleChange(props.row.default || props.row.min!, props.index);
-  }, []);
-
-  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    defaultValue: props.row.default || props.row.min || 0,
+  });

  return (
    <Box>
      <Text sx={{ fontSize: 14, fontWeight: 500 }}>{props.row.label}</Text>
      <Slider
        mb={10}
-        onChangeEnd={(val: number) => props.handleChange(val, props.index)}
-        onChange={(val: number) => setSliderValue(val)}
+        value={controller.field.value}
+        name={controller.field.name}
+        ref={controller.field.ref}
+        onBlur={controller.field.onBlur}
+        onChange={controller.field.onChange}
        defaultValue={props.row.default || props.row.min || 0}
        min={props.row.min}
        max={props.row.max}
--- a/web/src/features/notifications/NotificationWrapper.tsx
+++ b/web/src/features/notifications/NotificationWrapper.tsx
@@ -153,9 +153,7 @@ const Notifications: React.FC = () => {
                    : exitAnimationRight
                } 0.4s ease-in forwards`,
          }}
-          style={{
-            ...data.style,
-          }}
+          style={data.style}
          className={`${classes.container}`}
        >
          <Group noWrap spacing={12}>