Add support for error handling.

This commit is contained in:
Paulo Gustavo Veiga 2020-12-20 18:33:17 -08:00
parent d0ad7f4286
commit fed51ad5a9
4 changed files with 54 additions and 24 deletions

View File

@ -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",

View File

@ -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).
then(e => {
// Close the dialog ...
props.service.renameMap(mapId, model).
then(() => {
props.onClose(true);
}).catch(e => {
setNameErrorMsg("Error ....")
}).catch((errorInfo: ErrorInfo) => {
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">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
<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>

View File

@ -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) {
return Promise.resolve();
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
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 {

View File

@ -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"