Fix form loading

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx

@@ -8,7 +8,6 @@ import GlobalError from "../../../form/global-error";
 export type DialogProps = {
     onClose: () => void;
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    open: boolean;
     children: any;
     error?: ErrorInfo;
 
@@ -21,8 +20,6 @@ const BaseDialog = (props: DialogProps) => {
     const intl = useIntl();
     const handleOnClose = props.onClose;
     const onSubmit = props.onSubmit;
-    const isOpen = props.open;
-
 
     const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
@@ -36,7 +33,7 @@ const BaseDialog = (props: DialogProps) => {
     return (
         <div>
             <StyledDialog
-                open={isOpen}
+                open={true}
                 onClose={handleOnClose}
                 maxWidth="sm"
                 fullWidth={true}>

packages/webapp/src/components/maps-page/action-dispatcher/create-dialog/index.tsx

@@ -25,7 +25,6 @@ const CreateDialog = (props: CreateProps) => {
     const client: Client = useSelector(activeInstance);
     const [model, setModel] = React.useState<CreateModel>(defaultModel);
     const [error, setError] = React.useState<ErrorInfo>();
-    const { open } = props;
     const intl = useIntl();
 
     const mutation = useMutation<number, ErrorInfo, CreateModel>((model: CreateModel) => {
@@ -62,7 +61,7 @@ const CreateDialog = (props: CreateProps) => {
 
     return (
         <div>
-            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+            <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
                 title={intl.formatMessage({ id: 'create.title', defaultMessage: 'Create a new mindmap' })}
                 description={intl.formatMessage({ id: 'create.description', defaultMessage: 'Please, fill the new map name and description.' })}
                 submitButton={intl.formatMessage({ id: 'create.button', defaultMessage: 'Create' })}>

packages/webapp/src/components/maps-page/action-dispatcher/delete-dialog/index.tsx

@@ -34,7 +34,7 @@ const DeleteDialog = (props: DialogProps) => {
   return (
     <div>
       <BaseDialog
-        open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
+        onClose={handleOnClose} onSubmit={handleOnSubmit}
         title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
         submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
         <Alert severity="warning">

packages/webapp/src/components/maps-page/action-dispatcher/duplicate-dialog/index.tsx

@@ -71,7 +71,7 @@ const DuplicateDialog = (props: DialogProps) => {
 
     return (
         <div>
-            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+            <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
                 title={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}
                 description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
                 submitButton={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}>

packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx

@@ -1,10 +1,10 @@
 import React, { ErrorInfo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useQuery } from "react-query";
 import { useSelector } from "react-redux";
 import Client, { ChangeHistory } from "../../../../client";
 import { activeInstance } from '../../../../redux/clientSlice';
-import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
+import { DialogProps } from "..";
 import BaseDialog from "../base-dialog";
 import { Link, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip } from "@material-ui/core";
 import moment from "moment";
@@ -36,7 +36,7 @@ const HistoryDialog = (props: DialogProps) => {
   return (
     <div>
       <BaseDialog
-        open={props.open} onClose={handleOnClose}
+        onClose={handleOnClose}
         title={intl.formatMessage({ id: "action.history-title", defaultMessage: "Version history" })}
         description={intl.formatMessage({ id: "action.history-description", defaultMessage: "List of changes introduced in the last 90 days." })} >
         <TableContainer component={Paper} style={{ maxHeight: '200px' }}>

packages/webapp/src/components/maps-page/action-dispatcher/index.tsx

@@ -37,17 +37,18 @@ const ActionDispatcher = (props: ActionDialogProps) => {
       window.location.href = `/c/maps/${mapId}/edit`;
       break;
     case 'print':
-      window.open(`/c/maps/${mapId}/print`,'print');
+      window.open(`/c/maps/${mapId}/print`, 'print');
       break;
   }
 
   return (
     <span>
-      <CreateDialog open={action === 'create'} onClose={handleOnClose}/>
-      <DeleteDialog open={action === 'delete'} onClose={handleOnClose} mapId={mapId} />
-      <RenameDialog open={action === 'rename'} onClose={handleOnClose} mapId={mapId} />
-      <DuplicateDialog open={action === 'duplicate'} onClose={handleOnClose} mapId={mapId} />
-      <HistoryDialog open={action === 'history'} onClose={handleOnClose} mapId={mapId} />
+
+      {action === 'create' ? <CreateDialog open={true} onClose={handleOnClose} /> : null}
+      {action === 'delete' ? <DeleteDialog open={true} onClose={handleOnClose} mapId={mapId} /> : null}
+      {action === 'rename' ? <RenameDialog open={true} onClose={handleOnClose} mapId={mapId} /> : null}
+      {action === 'duplicate' ? <DuplicateDialog open={true} onClose={handleOnClose} mapId={mapId} /> : null}
+      {action === 'history' ? <HistoryDialog open={true} onClose={handleOnClose} mapId={mapId} /> : null}
     </span >
   );
 }

packages/webapp/src/components/maps-page/action-dispatcher/rename-dialog/index.tsx

@@ -70,7 +70,7 @@ const RenameDialog = (props: DialogProps) => {
 
     return (
         <div>
-            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+            <BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
                 title={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}
                 description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
                 submitButton={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}>