Refactor dialog.

packages/webapp/src/components/form/input/index.tsx

@@ -23,7 +23,7 @@ const Input = (props: InputProps) => {
     const value = props.value;
     const onChange = props.onChange ? props.onChange : () => { };
     const fieldError = error?.fields?.get(name);
-    const required = props.required ? props.required : true;
+    const required = props.required != undefined ? props.required : true;
 
     return (
         <FormControl margin="normal" required={required} fullWidth>

packages/webapp/src/components/maps-page/dialogs/Dialog.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Button, Dialog as DialogUI, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
+import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
+import GlobalError from "../../form/global-error";
+import { ErrorInfo } from "../../../services/Service";
+
+export type DialogProps = {
+    onClose: () => void;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    open: boolean;
+    children: any;
+    error?: ErrorInfo;
+    
+    title: MessageDescriptor;
+    description:MessageDescriptor;
+    submitButton: MessageDescriptor; 
+}
+
+const Dialog = (props: DialogProps) => {
+    const intl = useIntl();
+    const handleOnClose = props.onClose;
+    const isOpen = props.open;
+    const handleOnSubmit = props.onSubmit;
+
+    return (
+        <div>
+            <DialogUI
+                open={isOpen}
+                onClose={handleOnClose} >
+                <form autoComplete="off" onSubmit={handleOnSubmit}>
+                    <DialogTitle>
+                        {intl.formatMessage(props.title)}
+                    </DialogTitle>
+
+                    <DialogContent>
+                        <DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>
+                        <GlobalError error={props.error} />
+                        
+                        {props.children}
+                    </DialogContent>
+
+                    <DialogActions>
+                        <Button color="primary" variant="outlined" type="submit">
+                            <FormattedMessage id="action.rename-button" defaultMessage="Rename" />
+                        </Button>
+
+                        <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
+                            <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
+                        </Button>
+                    </DialogActions>
+                </form>
+            </DialogUI>
+        </div>
+    );
+}
+
+export default Dialog;

packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx

@@ -1,12 +1,12 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, TextField } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
 import React, { useEffect } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
 import { BasicMapInfo, ErrorInfo, Service } from "../../../services/Service";
 import { activeInstance } from '../../../reducers/serviceSlice';
 import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
+import Dialog from "./Dialog";
+import Input from "../../form/input";
 
 export type RenameModel = {
     id: number;
@@ -39,9 +39,9 @@ const RenameDialog = (props: DialogProps) => {
     );
 
     const handleOnClose = (): void => {
+        props.onClose();
         setModel(defaultModel);
         setError(undefined);
-        props.onClose();
     };
 
     const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
@@ -69,43 +69,16 @@ const RenameDialog = (props: DialogProps) => {
 
     return (
         <div>
-            <Dialog
+            <Dialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                open={open}
+                title={{ id: 'rename.title', defaultMessage: 'Rename' }}
-                onClose={() => handleOnClose()} >
+                description={{ id: 'rename.description', defaultMessage: 'Rename' }}
-                <form autoComplete="off" onSubmit={handleOnSubmit}>
+                submitButton={{ id: 'rename.title', defaultMessage: 'Rename Description' }}>
-                    <DialogTitle>
+                
-                        <FormattedMessage id="action.rename-title" defaultMessage="Rename" />
+                <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
-                    </DialogTitle>
+                    value={model.name} onChange={handleOnChange} error={error} />
 
-                    <DialogContent>
+                <Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
-                        <DialogContentText>
+                    value={model.description} onChange={handleOnChange} required={false} />
-                            <FormattedMessage id="action.rename-description" defaultMessage="Please, update the name and description for your mindmap." />
-                        </DialogContentText>
-
-                        {Boolean(error?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(error?.msg)}>{error?.msg}</Alert> : null}
-                      
-                        <FormControl margin="normal" required fullWidth>
-                            <TextField name="name" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
-                                value={model.name} onChange={handleOnChange}
-                                error={Boolean(error?.fields?.get('name'))} helperText={error?.fields?.get('name')}
-                                variant="filled" required={true} />
-                        </FormControl>
-                        <FormControl margin="normal" required fullWidth>
-                            <TextField name="description" label={intl.formatMessage({ id: "action.rename-description-placeholder", defaultMessage: "Description" })} 
-                            value={model.description} onChange={handleOnChange} variant="filled" />
-                        </FormControl>
-                    </DialogContent>
-
-                    <DialogActions>
-                        <Button color="primary" variant="outlined" type="submit">
-                            <FormattedMessage id="action.rename-button" defaultMessage="Rename" />
-                        </Button>
-
-                        <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
-                            <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
-                        </Button>
-                    </DialogActions>
-                </form>
             </Dialog>
         </div>
     );