refactor: use react hook form for link create modal (#1545)

* refactor: use react hook form for link create modal * refactor: apply PR requested changes
graasp · Oct 25, 2024 · 760b77a · 760b77a
1 parent d3bd11b
commit 760b77a
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 197 deletions.
diff --git a/src/components/item/form/link/LinkDescriptionField.tsx b/src/components/item/form/link/LinkDescriptionField.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
 
 import { IconButton, TextField } from '@mui/material';
 
@@ -8,36 +8,33 @@ import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
 type LinkDescriptionFieldProps = {
-  value: string | null | undefined;
-  onChange: (newValue: string) => void;
   onRestore: () => void;
   onClear: () => void;
-  showRestore: boolean;
+  showRestoreButton?: boolean;
+  form: UseFormRegisterReturn;
+  showClearButton?: boolean;
 };
 const LinkDescriptionField = ({
-  value,
-  onChange,
+  form,
   onRestore,
   onClear,
-  showRestore,
+  showRestoreButton,
+  showClearButton,
 }: LinkDescriptionFieldProps): JSX.Element => {
   const { t } = useBuilderTranslation();
   return (
     <TextField
       label={t(BUILDER.DESCRIPTION_LABEL)}
       variant="standard"
       InputLabelProps={{ shrink: true }}
-      value={value}
-      onChange={({
-        target: { value: newValue },
-      }: ChangeEvent<HTMLInputElement>) => onChange(newValue)}
+      {...form}
       InputProps={{
         endAdornment: (
           <>
             <IconButton
               onClick={onRestore}
               sx={{
-                visibility: showRestore ? 'visible' : 'hidden',
+                visibility: showRestoreButton ? 'visible' : 'hidden',
               }}
             >
               <Undo2Icon size="20" />
@@ -46,7 +43,7 @@ const LinkDescriptionField = ({
             <IconButton
               onClick={onClear}
               sx={{
-                visibility: value ? 'visible' : 'hidden',
+                visibility: showClearButton ? 'visible' : 'hidden',
               }}
             >
               <XIcon size="20" />