Created error dialog component for error handling

This commit is contained in:
Arnaud Vergnet 2020-04-07 00:52:17 +02:00
parent 2da2b631ee
commit ed2bf89d2f
6 changed files with 60 additions and 49 deletions

View file

@ -2,7 +2,7 @@
import * as React from 'react';
import i18n from 'i18n-js';
import LoadingConfirmDialog from "../Custom/LoadingConfirmDialog";
import LoadingConfirmDialog from "../Dialog/LoadingConfirmDialog";
import ConnectionManager from "../../managers/ConnectionManager";
type Props = {

View file

@ -1,8 +1,7 @@
import * as React from 'react';
import {Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
type Props = {
navigation: Object,
visible: boolean,
onDismiss: Function,
title: string,
@ -11,10 +10,6 @@ type Props = {
class AlertDialog extends React.PureComponent<Props> {
constructor(props) {
super(props);
}
render() {
return (
<Portal>
@ -34,4 +29,4 @@ class AlertDialog extends React.PureComponent<Props> {
}
}
export default withTheme(AlertDialog);
export default AlertDialog;

View file

@ -0,0 +1,46 @@
import * as React from 'react';
import i18n from "i18n-js";
import {ERROR_TYPE} from "../../managers/ConnectionManager";
import AlertDialog from "./AlertDialog";
type Props = {
visible: boolean,
onDismiss: Function,
errorCode: number,
}
class ErrorDialog extends React.PureComponent<Props> {
title: string;
message: string;
generateMessage() {
this.title = i18n.t("loginScreen.errors.title");
switch (this.props.errorCode) {
case ERROR_TYPE.BAD_CREDENTIALS:
this.message = i18n.t("loginScreen.errors.credentials");
break;
case ERROR_TYPE.NO_CONSENT:
this.message = i18n.t("loginScreen.errors.consent");
break;
case ERROR_TYPE.CONNECTION_ERROR:
this.message = i18n.t("loginScreen.errors.connection");
break;
case ERROR_TYPE.SERVER_ERROR:
this.message = "SERVER ERROR"; // TODO translate
break;
default:
this.message = i18n.t("loginScreen.errors.unknown");
break;
}
}
render() {
this.generateMessage();
return (
<AlertDialog {...this.props} title={this.title} message={this.message}/>
);
}
}
export default ErrorDialog;

View file

@ -3,10 +3,10 @@
import * as React from 'react';
import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
import ConnectionManager from "../../managers/ConnectionManager";
import {openBrowser} from "../../utils/WebBrowser";
import i18n from 'i18n-js';
import AlertDialog from "../../components/Custom/AlertDialog";
import ErrorDialog from "../../components/Dialog/ErrorDialog";
type Props = {
navigation: Object,
@ -19,8 +19,7 @@ type State = {
isPasswordValidated: boolean,
loading: boolean,
dialogVisible: boolean,
dialogTitle: string,
dialogMessage: string,
dialogError: number,
}
const ICON_AMICALE = require('../../../assets/amicale.png');
@ -38,8 +37,7 @@ class LoginScreen extends React.Component<Props, State> {
isPasswordValidated: false,
loading: false,
dialogVisible: false,
dialogTitle: '',
dialogMessage: '',
dialogError: 0,
};
colors: Object;
@ -66,11 +64,10 @@ class LoginScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
}
showErrorDialog = (title: string, message: string) =>
showErrorDialog = (error: number) =>
this.setState({
dialogTitle: title,
dialogMessage: message,
dialogVisible: true
dialogVisible: true,
dialogError: error,
});
hideErrorDialog = () => this.setState({dialogVisible: false});
@ -132,9 +129,7 @@ class LoginScreen extends React.Component<Props, State> {
.then((data) => {
this.handleSuccess();
})
.catch((error) => {
this.handleErrors(error);
})
.catch(this.showErrorDialog)
.finally(() => {
this.setState({loading: false});
});
@ -145,29 +140,6 @@ class LoginScreen extends React.Component<Props, State> {
this.props.navigation.navigate('ProfileScreen');
}
handleErrors(error: number) {
const title = i18n.t("loginScreen.errors.title");
let message;
switch (error) {
case ERROR_TYPE.BAD_CREDENTIALS:
message = i18n.t("loginScreen.errors.credentials");
break;
case ERROR_TYPE.NO_CONSENT:
message = i18n.t("loginScreen.errors.consent");
break;
case ERROR_TYPE.CONNECTION_ERROR:
message = i18n.t("loginScreen.errors.connection");
break;
case ERROR_TYPE.SERVER_ERROR:
message = "SERVER ERROR"; // TODO translate
break;
default:
message = i18n.t("loginScreen.errors.unknown");
break;
}
this.showErrorDialog(title, message);
}
getFormInput() {
return (
<View>
@ -297,12 +269,10 @@ class LoginScreen extends React.Component<Props, State> {
{this.getSecondaryCard()}
</View>
</TouchableWithoutFeedback>
<AlertDialog
{...this.props}
<ErrorDialog
visible={this.state.dialogVisible}
title={this.state.dialogTitle}
message={this.state.dialogMessage}
onDismiss={this.hideErrorDialog}
errorCode={this.state.dialogError}
/>
</ScrollView>
</KeyboardAvoidingView>

View file

@ -16,7 +16,7 @@ import {
} from 'react-native-paper';
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
import LoadingConfirmDialog from "../../components/Custom/LoadingConfirmDialog";
import LoadingConfirmDialog from "../../components/Dialog/LoadingConfirmDialog";
import ConnectionManager from "../../managers/ConnectionManager";
const ICON_AMICALE = require('../../../assets/amicale.png');