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": { "dependencies": {
"@material-ui/core": "^4.11.2", "@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@types/react-google-recaptcha": "^2.1.0", "@types/react-google-recaptcha": "^2.1.0",
"axios": "^0.21.0", "axios": "^0.21.0",
"react": "^17.0.1", "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 DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
import { FormattedMessage, useIntl } from 'react-intl'; 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 { FormControl, TextField } from '@material-ui/core';
import { Alert, AlertTitle } from '@material-ui/lab';
type DialogProps = { type DialogProps = {
open: boolean, open: boolean,
@ -35,14 +36,17 @@ function DeleteConfirmDialog(props: DialogProps) {
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle> <DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText>
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." /> <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> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => handleOnClose('accept')} color="primary"> <Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
<FormattedMessage id="action.delete-button" defaultMessage="Delete" /> <FormattedMessage id="action.delete-button" defaultMessage="Delete" />
</Button> </Button>
<Button onClick={() => handleOnClose(undefined)} color="secondary" autoFocus> <Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" /> <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button> </Button>
</DialogActions> </DialogActions>
@ -52,9 +56,11 @@ function DeleteConfirmDialog(props: DialogProps) {
} }
function RenameDialog(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 intl = useIntl();
const [nameErrorMsg, setNameErrorMsg] = React.useState<string|undefined>(undefined);
useEffect(() => { useEffect(() => {
props.service.loadMapInfo(props.mapId) props.service.loadMapInfo(props.mapId)
@ -64,6 +70,10 @@ function RenameDialog(props: DialogProps) {
}, []); }, []);
const handleOnClose = (): void => { const handleOnClose = (): void => {
// Clean Up ...
setModel(defaultModel);
setErroInfo(undefined);
props.onClose(false); props.onClose(false);
}; };
@ -73,12 +83,11 @@ function RenameDialog(props: DialogProps) {
// Fire rest call ... // Fire rest call ...
const mapId = props.mapId; const mapId = props.mapId;
props.service.remameMap(mapId, model). props.service.renameMap(mapId, model).
then(e => { then(() => {
// Close the dialog ...
props.onClose(true); props.onClose(true);
}).catch(e => { }).catch((errorInfo: ErrorInfo) => {
setNameErrorMsg("Error ....") setErroInfo(errorInfo)
}); });
}; };
@ -103,24 +112,27 @@ function RenameDialog(props: DialogProps) {
<DialogContent> <DialogContent>
<DialogContentText> <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> </DialogContentText>
{Boolean(errorInfo?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(errorInfo?.msg)}>{errorInfo?.msg}</Alert> : null}
<FormControl margin="normal" required fullWidth> <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>
<FormControl margin="normal" required fullWidth> <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> </FormControl>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button color="primary" fullWidth type="submit"> <Button color="primary" variant="outlined" type="submit">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" /> <FormattedMessage id="action.rename-button" defaultMessage="Rename"/>
</Button> </Button>
<Button color="secondary" autoFocus fullWidth onClick={handleOnClose}> <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" /> <FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button> </Button>
</DialogActions> </DialogActions>

View File

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

View File

@ -1764,6 +1764,17 @@
dependencies: dependencies:
"@babel/runtime" "^7.4.4" "@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": "@material-ui/styles@^4.11.2":
version "4.11.2" version "4.11.2"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"