QualificationsPage: split FormDialog into two components

src/features/QualificationsPage/components/FormDialog/FormDialog.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { useUpdateEffect } from 'react-use';
 import { Controller, useForm } from 'react-hook-form';
 import { omit, pick } from 'lodash';
 import useProfessionAutocomplete from './FormDialog.useProfessionAutocomplete.js';
@@ -27,20 +26,15 @@ export interface FormDialogProps extends Pick<DialogProps, 'open'> {
   onSubmit: (input: QualificationInput) => Promise<boolean> | boolean;
 }
 
-const FormDialog = ({
-  open,
-  onClose,
-  qualification,
-  onSubmit,
-}: FormDialogProps) => {
+const Form = ({ onClose, qualification, onSubmit }: FormDialogProps) => {
   const editMode = Boolean(qualification);
   const {
     register,
     handleSubmit,
     errors,
     control,
-    reset,
     setValue,
+    reset,
     formState: { isSubmitting },
   } = useForm<Input>({});
   const {
@@ -60,31 +54,27 @@ const FormDialog = ({
       professions,
     });
   }, [professions, reset]);
-  useUpdateEffect(() => {
-    if (!open && selectedProfessions.length > 0) {
-      setValue('professions', []);
-    }
-  }, [open]);
 
   const prepareDataBeforeSave = (data: Input): QualificationInput => {
     return {
       ...pick(data, ['name', 'description', 'formula', 'code']),
       associateProfession: data.professions
-        .filter(
+        ?.filter(
           profession =>
             !professions.some(
               otherProfession => otherProfession.id === profession.id
             )
         )
         .map(profession => profession.id),
-      dissociateProfession: professions
-        .filter(
+      dissociateProfession: (data.professions
+        ? professions.filter(
             profession =>
               !data.professions.some(
                 otherProfession => otherProfession.id === profession.id
               )
           )
-        .map(profession => profession.id),
+        : professions
+      ).map(profession => profession.id),
     };
   };
 
@@ -96,12 +86,6 @@ const FormDialog = ({
   };
 
   return (
-    <Dialog
-      open={open}
-      onClose={isSubmitting ? undefined : onClose}
-      fullWidth
-      maxWidth="xs"
-    >
     <form onSubmit={handleSubmit(_onSubmit)}>
       <DialogTitle>
         {editMode ? 'Edycja kwalifikacji' : 'Tworzenie kwalifikacji'}
@@ -226,6 +210,14 @@ const FormDialog = ({
         </Button>
       </DialogActions>
     </form>
+  );
+};
+
+const FormDialog = (props: FormDialogProps) => {
+  const { open, onClose } = props;
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
+      <Form {...props} />
     </Dialog>
   );
 };

src/features/QualificationsPage/components/FormDialog/FormDialog.useProfessionAutocomplete.js.ts

@@ -44,9 +44,7 @@ const useProfessionAutocomplete = ({ qualificationID, control }: Options) => {
     },
   });
   const professions = useMemo(() => data?.professions.items ?? [], [data]);
-  const autocompleteOptions:
-    | typeof selectedProfessions
-    | typeof suggestions = useMemo(() => {
+  const autocompleteOptions: typeof selectedProfessions = useMemo(() => {
     return [
       ...suggestions
         .filter(