Add support for error handling.

packages/webapp/package.json

@@ -47,6 +47,7 @@
     "dependencies": {
         "@material-ui/core": "^4.11.2",
         "@material-ui/icons": "^4.11.2",
+        "@material-ui/lab": "^4.0.0-alpha.57",
         "@types/react-google-recaptcha": "^2.1.0",
         "axios": "^0.21.0",
         "react": "^17.0.1",

packages/webapp/src/components/maps-page/ActionDialog.tsx

@@ -6,8 +6,9 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { BasicMapInfo, Service } from '../../services/Service';
+import { BasicMapInfo, ErrorInfo, Service } from '../../services/Service';
 import { FormControl, TextField } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
 
 type DialogProps = {
   open: boolean,
@@ -35,14 +36,17 @@ function DeleteConfirmDialog(props: DialogProps) {
         <DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
         <DialogContent>
           <DialogContentText>
+            <Alert severity="warning">
+              <AlertTitle>Map to be deleted</AlertTitle>
               <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
+            </Alert>
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => handleOnClose('accept')} color="primary">
+          <Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
             <FormattedMessage id="action.delete-button" defaultMessage="Delete" />
           </Button>
-          <Button onClick={() => handleOnClose(undefined)} color="secondary" autoFocus>
+          <Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
             <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
           </Button>
         </DialogActions>
@@ -52,9 +56,11 @@ function DeleteConfirmDialog(props: DialogProps) {
 }
 
 function RenameDialog(props: DialogProps) {
-  const [model, setModel] = React.useState<BasicMapInfo>({ name: '', description: '' });
+  const defaultModel: BasicMapInfo = { name: '', description: '' };
+  const [model, setModel] = React.useState<BasicMapInfo>(defaultModel);
+  const [errorInfo, setErroInfo] = React.useState<ErrorInfo>();
+
   const intl = useIntl();
-  const [nameErrorMsg, setNameErrorMsg] = React.useState<string|undefined>(undefined);
 
   useEffect(() => {
     props.service.loadMapInfo(props.mapId)
@@ -64,6 +70,10 @@ function RenameDialog(props: DialogProps) {
   }, []);
 
   const handleOnClose = (): void => {
+    // Clean Up ...
+    setModel(defaultModel);
+    setErroInfo(undefined);
+
     props.onClose(false);
   };
 
@@ -73,12 +83,11 @@ function RenameDialog(props: DialogProps) {
 
     // Fire rest call ...
     const mapId = props.mapId;
-    props.service.remameMap(mapId, model).
+    props.service.renameMap(mapId, model).
-      then(e => {
+      then(() => {
-        // Close the dialog ...
         props.onClose(true);
-      }).catch(e => {
+      }).catch((errorInfo: ErrorInfo) => {
-        setNameErrorMsg("Error ....")  
+        setErroInfo(errorInfo)
       });
   };
 
@@ -103,24 +112,27 @@ function RenameDialog(props: DialogProps) {
 
           <DialogContent>
             <DialogContentText>
-              <FormattedMessage id="action.rename-description" defaultMessage="Rename Desc" />
+              <FormattedMessage id="action.rename-description" defaultMessage="Please, update the name and description for your mindmap." />
             </DialogContentText>
 
+            {Boolean(errorInfo?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(errorInfo?.msg)}>{errorInfo?.msg}</Alert> : null}
             <FormControl margin="normal" required fullWidth>
-              <TextField name="name" label={intl.formatMessage({ id: "action.name-lable", defaultMessage: "Name" })} value={model.name} variant="filled" onChange={handleOnChange} required={true} error={Boolean(nameErrorMsg)} helperText={nameErrorMsg} />
+              <TextField name="name" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
+                value={model.name} onChange={handleOnChange}  
+                error={Boolean(errorInfo?.fields?.get('name'))} helperText={errorInfo?.fields?.get('name')} 
+                variant="filled" required={true}/>
             </FormControl>
             <FormControl margin="normal" required fullWidth>
-              <TextField name="description" label={intl.formatMessage({ id: "action.description-lable", defaultMessage: "Description" })} value={model.description} onChange={handleOnChange} variant="filled" />
+              <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" fullWidth type="submit">
+            <Button color="primary" variant="outlined" type="submit">
               <FormattedMessage id="action.rename-button" defaultMessage="Rename"/>
             </Button>
 
-            <Button color="secondary" autoFocus fullWidth onClick={handleOnClose}>
+            <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
               <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
             </Button>
           </DialogActions>

packages/webapp/src/services/Service.ts

@@ -29,7 +29,7 @@ export type FieldError = {
 
 export type ErrorInfo = {
     msg?: string;
-    fields?: FieldError[];
+    fields?: Map<String, String>;
 }
 
 interface Service {
@@ -38,7 +38,7 @@ interface Service {
     fetchAllMaps(): Promise<MapInfo[]>;
 
     deleteMap(id: number): Promise<void>;
-    remameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
+    renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
     loadMapInfo(id: number): Promise<BasicMapInfo>;
 }
 
@@ -51,11 +51,17 @@ class RestService implements Service {
     }
 
     loadMapInfo(id: number): Promise<BasicMapInfo> {
-        return Promise.resolve({ name: 'My Map', description: 'My Descition' });
+        return Promise.resolve({ name: 'My Map', description: 'My Description' });
     }
 
-    async remameMap(id: number, basicInfo: BasicMapInfo) {
+    renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
-        return Promise.resolve();
+        const fieldErrors: Map<string, string> = new Map<string, string>();
+        fieldErrors.set('name', 'name already exists ')
+
+        return Promise.reject({
+            msg: 'Map already exists ...' + basicInfo.name,
+            fields: fieldErrors
+        });
     }
 
     async deleteMap(id: number): Promise<void> {
@@ -95,7 +101,6 @@ class RestService implements Service {
             createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,),
             createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67),
             createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67)
-
         ];
 
         return Promise.resolve(maps);
@@ -148,6 +153,7 @@ class RestService implements Service {
                         if (data.fieldErrors) {
                             // @Todo: Fix this ...
                             result = { msg: data.fieldErrors };
+                            result.fields = new Map<string, string>();
                         }
 
                     } else {

yarn.lock

@@ -1764,6 +1764,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.57":
+  version "4.0.0-alpha.57"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
+  integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"