Merge pull request #729 from Hexastack/728-optimize-usedialogs-logic

refactor(frontend): optimize useDialogs logic

frontend/src/app-components/attachment/AttachmentForm.tsx

@@ -32,7 +32,6 @@ export const AttachmentForm: FC<ComponentFormProps<AttachmentFormData>> = ({
 
   return (
     <Wrapper
-      open={!!WrapperProps?.open}
       onSubmit={() => {
         data?.onChange?.(selected);
         rest.onSuccess?.();

frontend/src/app-components/dialogs/FormDialog.tsx

@@ -32,7 +32,7 @@ export const FormDialog = ({
     );
 
   return (
-    <Dialog fullWidth {...rest}>
+    <Dialog open={!!rest?.open} fullWidth {...rest}>
       <DialogTitle onClose={onCancel}>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
       {dialogActions}

frontend/src/components/Menu/MenuForm.tsx

@@ -98,11 +98,7 @@ export const MenuForm: FC<ComponentFormProps<MenuFormData>> = ({
   }, [reset, data?.row]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentContainer flexDirection="row">

frontend/src/components/categories/CategoryForm.tsx

@@ -71,11 +71,7 @@ export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>
@@ -93,5 +89,3 @@ export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
     </Wrapper>
   );
 };
-
-CategoryForm.displayName = "CategoryForm";

frontend/src/components/content-types/ContentTypeForm.tsx

@@ -106,11 +106,7 @@ export const ContentTypeForm: FC<ComponentFormProps<IContentType>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/contents/ContentForm.tsx

@@ -203,11 +203,7 @@ export const ContentForm: FC<ComponentFormProps<ContentFormData>> = ({
   }, [content, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           {(contentType?.fields || []).map((contentField, index) => (

frontend/src/components/contents/ContentImportForm.tsx

@@ -53,7 +53,6 @@ export const ContentImportForm: FC<
 
   return (
     <Wrapper
-      open={!!WrapperProps?.open}
       onSubmit={handleImportClick}
       {...WrapperProps}
       confirmButtonProps={{

frontend/src/components/context-vars/ContextVarForm.tsx

@@ -93,11 +93,7 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/inbox/components/AttachmentViewerForm.tsx

@@ -20,7 +20,7 @@ export const AttachmentViewerForm: FC<
   ComponentFormProps<AttachmentViewerFormData>
 > = ({ data, Wrapper = Fragment, WrapperProps }) => {
   return (
-    <Wrapper open={!!WrapperProps?.open} {...WrapperProps}>
+    <Wrapper {...WrapperProps}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         width="auto"

frontend/src/components/labels/LabelForm.tsx

@@ -81,11 +81,7 @@ export const LabelForm: FC<ComponentFormProps<ILabel>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/languages/LanguageForm.tsx

@@ -82,11 +82,7 @@ export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/nlp/components/NlpEntityForm.tsx

@@ -89,11 +89,7 @@ export const NlpEntityVarForm: FC<ComponentFormProps<INlpEntity>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           {!data ? (

frontend/src/components/nlp/components/NlpSampleForm.tsx

@@ -62,13 +62,8 @@ export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
   };
 
   return (
-    <Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
+    <Wrapper onSubmit={() => {}} {...WrapperProps}>
-      <form>
+      <NlpDatasetSample sample={data || undefined} submitForm={onSubmitForm} />
-        <NlpDatasetSample
-          sample={data || undefined}
-          submitForm={onSubmitForm}
-        />
-      </form>
     </Wrapper>
   );
 };

frontend/src/components/nlp/components/NlpValueForm.tsx

@@ -91,11 +91,7 @@ export const NlpValueForm: FC<
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/roles/PermissionsBody.tsx

@@ -83,7 +83,7 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
     },
     onSuccess: () => {
       modelRefetch();
-      toast.success(t("message.item_delete_success"));
+      toast.success(t("message.success_save"));
     },
   };
   const { mutate: createPermission } = useCreate(EntityType.PERMISSION, {
@@ -117,7 +117,7 @@ export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
   }, [models]);
 
   return (
-    <Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
+    <Wrapper onSubmit={() => {}} {...WrapperProps}>
       <Typography fontWeight={700} sx={{ marginBottom: 2 }}>
         {role?.name}
       </Typography>

frontend/src/components/roles/RoleForm.tsx

@@ -70,11 +70,7 @@ export const RoleForm: FC<ComponentFormProps<IRole>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/subscribers/SubscriberForm.tsx

@@ -61,11 +61,7 @@ export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
   }, [data, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/translations/TranslationForm.tsx

@@ -82,11 +82,7 @@ export const TranslationForm: FC<ComponentFormProps<ITranslation>> = ({
   };
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentItem>
           <FormLabel>{t("label.original_text")}</FormLabel>

frontend/src/components/users/EditUserForm.tsx

@@ -74,11 +74,7 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
   }, [reset, data?.user]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/users/InviteUserForm.tsx

@@ -62,11 +62,7 @@ export const InviteUserForm: FC<ComponentFormProps<undefined>> = ({
     sendInvitation(params);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <form onSubmit={handleSubmit(onSubmitForm)}>
         <ContentContainer>
           <ContentItem>

frontend/src/components/visual-editor/BlockEditForm.tsx

@@ -109,11 +109,7 @@ export const BlockEditForm: FC<ComponentFormProps<IBlock>> = ({
   }, [block, reset]);
 
   return (
-    <Wrapper
+    <Wrapper onSubmit={handleSubmit(onSubmitForm)} {...WrapperProps}>
-      open={!!WrapperProps?.open}
-      onSubmit={handleSubmit(onSubmitForm)}
-      {...WrapperProps}
-    >
       <BlockFormProvider methods={methods} block={block || undefined}>
         <ContentContainer>
           <ContentItem display="flex" gap={5}>

frontend/src/components/visual-editor/BlockMoveForm.tsx

@@ -39,7 +39,6 @@ export const BlockMoveForm: FC<ComponentFormProps<BlockMoveFormData>> = ({
 
   return (
     <Wrapper
-      open={!!WrapperProps?.open}
       onSubmit={handleMove}
       {...WrapperProps}
       confirmButtonProps={{

frontend/src/types/common/dialogs.types.ts

@@ -151,8 +151,9 @@ export interface DialogProviderProps {
 // form dialog
 export interface FormDialogProps
   extends FormButtonsProps,
-    Omit<MuiDialogProps, "onSubmit">,
+    Omit<MuiDialogProps, "onSubmit" | "open">,
     DialogExtraOptions {
+  open?: boolean;
   title?: string;
   children?: React.ReactNode;
 }