From cbb53d244f3d33f2eb5b76c9043f83f908130ade Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 27 Dec 2020 16:37:10 -0800
Subject: [PATCH] Refactor dialog.

---
 .../src/components/form/input/index.tsx       |  2 +-
 .../components/maps-page/dialogs/Dialog.tsx   | 57 +++++++++++++++++++
 .../maps-page/dialogs/RenameDialog.tsx        | 53 +++++------------
 3 files changed, 71 insertions(+), 41 deletions(-)
 create mode 100644 packages/webapp/src/components/maps-page/dialogs/Dialog.tsx

diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx
index d99ae60a..9a2ecacc 100644
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/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>
diff --git a/packages/webapp/src/components/maps-page/dialogs/Dialog.tsx b/packages/webapp/src/components/maps-page/dialogs/Dialog.tsx
new file mode 100644
index 00000000..0e275441
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx b/packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx
index 9c3d6742..e92e0e43 100644
--- a/packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx
+++ b/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
-                open={open}
-                onClose={() => handleOnClose()} >
-                <form autoComplete="off" onSubmit={handleOnSubmit}>
-                    <DialogTitle>
-                        <FormattedMessage id="action.rename-title" defaultMessage="Rename" />
-                    </DialogTitle>
+            <Dialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+                title={{ id: 'rename.title', defaultMessage: 'Rename' }}
+                description={{ id: 'rename.description', defaultMessage: 'Rename' }}
+                submitButton={{ id: 'rename.title', defaultMessage: 'Rename Description' }}>
+                
+                <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
+                    value={model.name} onChange={handleOnChange} error={error} />
 
-                    <DialogContent>
-                        <DialogContentText>
-                            <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>
+                <Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
+                    value={model.description} onChange={handleOnChange} required={false} />
             </Dialog>
         </div>
     );