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

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} />
   );
 };
 

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={

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 />}
     />
   );

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}
     />

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}