Merge pull request #1704 from jhaals/bump-form

Bump react-form
jhaals · May 26, 2023 · 478cf83 · 478cf83
2 parents 319cc9d + 2e0feef
commit 478cf83
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 58 deletions.
diff --git a/website/package.json b/website/package.json
@@ -18,7 +18,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.43.9",
     "react-i18next": "^12.2.2",
     "react-router-dom": "^6.11.2",
     "react-scripts": "^5.0.1",

diff --git a/website/src/createSecret/CreateSecret.tsx b/website/src/createSecret/CreateSecret.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useForm, UseFormMethods } from 'react-hook-form';
+import { useForm, Controller, Control } from 'react-hook-form';
 import randomString, {
   encryptMessage,
   isErrorWithMessage,
@@ -25,8 +25,7 @@ const CreateSecret = () => {
   const { t } = useTranslation();
   const {
     control,
-    register,
-    errors,
+    formState: { errors },
     handleSubmit,
     watch,
     setError,
@@ -35,6 +34,7 @@ const CreateSecret = () => {
     defaultValues: {
       generateDecryptionKey: true,
       secret: '',
+      onetime: true,
     },
   });
   const [loading, setLoading] = useState(false);
@@ -93,7 +93,6 @@ const CreateSecret = () => {
       />
     );
   }
-
   return (
     <>
       <Error
@@ -105,27 +104,32 @@ const CreateSecret = () => {
       </Typography>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Grid container justifyContent="center" paddingTop={1}>
-          <TextField
-            inputRef={register({ required: true })}
-            multiline={true}
+          <Controller
             name="secret"
-            margin="dense"
-            fullWidth
-            label={t('create.inputSecretLabel')}
-            rows="4"
-            autoFocus={true}
-            onKeyDown={onKeyDown}
-            placeholder={t<string>('create.inputSecretPlaceholder')}
-            inputProps={{ spellCheck: 'false', 'data-gramm': 'false' }}
+            control={control}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                multiline={true}
+                margin="dense"
+                fullWidth
+                label={t('create.inputSecretLabel')}
+                rows="4"
+                autoFocus={true}
+                onKeyDown={onKeyDown}
+                placeholder={t<string>('create.inputSecretPlaceholder')}
+                inputProps={{ spellCheck: 'false', 'data-gramm': 'false' }}
+              />
+            )}
           />
           <Grid container justifyContent="center" marginTop={2}>
             <Expiration control={control} />
           </Grid>
           <Grid container alignItems="center" direction="column">
-            <OneTime register={register} />
-            <SpecifyPasswordToggle register={register} />
+            <OneTime control={control} />
+            <SpecifyPasswordToggle control={control} />
             {!generateDecryptionKey && (
-              <SpecifyPasswordInput register={register} />
+              <SpecifyPasswordInput control={control} />
             )}
           </Grid>
           <Grid container justifyContent="center">
@@ -149,18 +153,24 @@ const CreateSecret = () => {
   );
 };
 
-export const OneTime = (props: { register: UseFormMethods['register'] }) => {
+export const OneTime = (props: { control: Control<any> }) => {
   const { t } = useTranslation();
+
   return (
     <Grid item justifyContent="center">
       <FormControlLabel
         control={
-          <Checkbox
-            id="enable-onetime"
+          <Controller
             name="onetime"
-            inputRef={props.register()}
-            defaultChecked={true}
-            color="primary"
+            control={props.control}
+            render={({ field }) => (
+              <Checkbox
+                {...field}
+                id="enable-onetime"
+                defaultChecked={true}
+                color="primary"
+              />
+            )}
           />
         }
         label={t('create.inputOneTimeLabel') as string}
@@ -169,43 +179,45 @@ export const OneTime = (props: { register: UseFormMethods['register'] }) => {
   );
 };
 
-export const SpecifyPasswordInput = (props: {
-  register: UseFormMethods['register'];
-}) => {
+export const SpecifyPasswordInput = (props: { control: Control<any> }) => {
   const { t } = useTranslation();
   return (
     <Grid item justifyContent="center">
       <InputLabel>{t('create.inputPasswordLabel')}</InputLabel>
-      <TextField
-        fullWidth
-        type="text"
-        id="password"
-        inputRef={props.register()}
+      <Controller
         name="password"
-        variant="outlined"
-        inputProps={{
-          autoComplete: 'off',
-          spellCheck: 'false',
-          'data-gramm': 'false',
-        }}
+        control={props.control}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            fullWidth
+            type="text"
+            id="password"
+            variant="outlined"
+            inputProps={{
+              autoComplete: 'off',
+              spellCheck: 'false',
+              'data-gramm': 'false',
+            }}
+          />
+        )}
       />
     </Grid>
   );
 };
 
-export const SpecifyPasswordToggle = (props: {
-  register: UseFormMethods['register'];
-}) => {
+export const SpecifyPasswordToggle = (props: { control: Control<any> }) => {
   const { t } = useTranslation();
   return (
     <FormGroup>
       <FormControlLabel
         control={
-          <Checkbox
+          <Controller
             name="generateDecryptionKey"
-            inputRef={props.register()}
-            defaultChecked={true}
-            color="primary"
+            control={props.control}
+            render={({ field }) => (
+              <Checkbox {...field} defaultChecked={true} color="primary" />
+            )}
           />
         }
         label={t('create.inputGenerateLabel') as string}

diff --git a/website/src/createSecret/Upload.tsx b/website/src/createSecret/Upload.tsx
@@ -26,7 +26,7 @@ const Upload = () => {
     uuid: '',
   });
 
-  const { control, register, handleSubmit, watch } = useForm({
+  const { control, handleSubmit, watch } = useForm({
     defaultValues: {
       generateDecryptionKey: true,
       secret: '',
@@ -127,11 +127,11 @@ const Upload = () => {
           <Expiration control={control} />
         </Grid>
         <Grid container alignItems="center" direction="column">
-          <OneTime register={register} />
-          <SpecifyPasswordToggle register={register} />
+          <OneTime control={control} />
+          <SpecifyPasswordToggle control={control} />
           <Grid container justifyContent="center">
             {!generateDecryptionKey && (
-              <SpecifyPasswordInput register={register} />
+              <SpecifyPasswordInput control={control} />
             )}
           </Grid>
         </Grid>

diff --git a/website/src/shared/Expiration.tsx b/website/src/shared/Expiration.tsx
@@ -1,4 +1,4 @@
-import { Controller, UseFormMethods } from 'react-hook-form';
+import { Control, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import {
   FormControl,
@@ -8,7 +8,7 @@ import {
   RadioGroup,
 } from '@mui/material';
 
-export const Expiration = (props: { control: UseFormMethods['control'] }) => {
+export const Expiration = (props: { control: Control<any> }) => {
   const { t } = useTranslation();
   return (
     <FormControl component="fieldset" margin="dense">
@@ -18,8 +18,9 @@ export const Expiration = (props: { control: UseFormMethods['control'] }) => {
         control={props.control}
         defaultValue="3600"
         name="expiration"
-        as={
+        render={({ field }) => (
           <RadioGroup
+            {...field}
             row
             sx={{
               root: {
@@ -48,7 +49,7 @@ export const Expiration = (props: { control: UseFormMethods['control'] }) => {
               label={t('expiration.optionOneWeekLabel') as string}
             />
           </RadioGroup>
-        }
+        )}
       />
     </FormControl>
   );

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -9497,10 +9497,10 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-hook-form@^6.15.8:
-  version "6.15.8"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
-  integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
+react-hook-form@^7.43.9:
+  version "7.43.9"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
+  integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
 
 react-i18next@^12.2.2:
   version "12.2.2"