use react-hook-form's isSubmitting state

src/features/ProfessionsPage/components/FormDialog/FormDialog.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { pick } from 'lodash';
 import { MAX_NAME_LENGTH } from './constants';
@@ -28,12 +27,15 @@ const FormDialog = ({
   onSubmit,
 }: FormDialogProps) => {
   const editMode = Boolean(profession);
-  const { register, handleSubmit, errors } = useForm<ProfessionInput>({});
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const {
+    register,
+    handleSubmit,
+    errors,
+    formState: { isSubmitting },
+  } = useForm<ProfessionInput>({});
   const classes = useStyles();
 
   const _onSubmit = async (data: ProfessionInput) => {
-    setIsSubmitting(true);
     const filtered = editMode
       ? pick(
           data,
@@ -41,7 +43,6 @@ const FormDialog = ({
         )
       : data;
     const success = await onSubmit(filtered);
-    setIsSubmitting(false);
     if (success) {
       onClose();
     }

src/features/SignInPage/SignInPage.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useSnackbar } from 'notistack';
 import { ApolloError } from '@apollo/client';
@@ -25,14 +24,17 @@ type FormData = {
 };
 
 const SignInPage = () => {
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const snackbar = useSnackbar();
   const { signIn } = useAuth();
-  const { register, errors, handleSubmit } = useForm<FormData>();
+  const {
+    register,
+    errors,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormData>();
   const classes = useStyles();
 
   const onSubmit = async (data: FormData) => {
-    setIsSubmitting(true);
     try {
       await signIn(data.email, data.password, data.staySignedIn, user => {
         if (user.role !== Role.Admin) {
@@ -50,7 +52,6 @@ const SignInPage = () => {
           : e.message,
         { variant: 'error' }
       );
-      setIsSubmitting(false);
     }
   };
 

src/features/UsersPage/components/FormDialog/FormDialog.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { pick } from 'lodash';
 import isEmail from 'validator/es/lib/isEmail';
@@ -37,12 +36,15 @@ export interface FormDialogProps extends Pick<DialogProps, 'open'> {
 
 const FormDialog = ({ open, onClose, user, onSubmit }: FormDialogProps) => {
   const editMode = Boolean(user);
-  const { register, handleSubmit, errors } = useForm<UserInput>({});
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const {
+    register,
+    handleSubmit,
+    errors,
+    formState: { isSubmitting },
+  } = useForm<UserInput>({});
   const classes = useStyles();
 
   const _onSubmit = async (data: UserInput) => {
-    setIsSubmitting(true);
     const filtered = editMode
       ? pick(
           data,
@@ -50,7 +52,6 @@ const FormDialog = ({ open, onClose, user, onSubmit }: FormDialogProps) => {
         )
       : data;
     const success = await onSubmit(filtered);
-    setIsSubmitting(false);
     if (success) {
       onClose();
     }