Created error dialog component for error handling
This commit is contained in:
parent
2da2b631ee
commit
ed2bf89d2f
6 changed files with 60 additions and 49 deletions
|
@ -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 = {
|
||||
|
|
|
@ -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;
|
46
src/components/Dialog/ErrorDialog.js
Normal file
46
src/components/Dialog/ErrorDialog.js
Normal 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;
|
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue