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 * as React from 'react';
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import LoadingConfirmDialog from "../Custom/LoadingConfirmDialog";
|
import LoadingConfirmDialog from "../Dialog/LoadingConfirmDialog";
|
||||||
import ConnectionManager from "../../managers/ConnectionManager";
|
import ConnectionManager from "../../managers/ConnectionManager";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import * as React from 'react';
|
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 = {
|
type Props = {
|
||||||
navigation: Object,
|
|
||||||
visible: boolean,
|
visible: boolean,
|
||||||
onDismiss: Function,
|
onDismiss: Function,
|
||||||
title: string,
|
title: string,
|
||||||
|
@ -11,10 +10,6 @@ type Props = {
|
||||||
|
|
||||||
class AlertDialog extends React.PureComponent<Props> {
|
class AlertDialog extends React.PureComponent<Props> {
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Portal>
|
<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 * as React from 'react';
|
||||||
import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
|
import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
|
||||||
import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
|
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 {openBrowser} from "../../utils/WebBrowser";
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import AlertDialog from "../../components/Custom/AlertDialog";
|
import ErrorDialog from "../../components/Dialog/ErrorDialog";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -19,8 +19,7 @@ type State = {
|
||||||
isPasswordValidated: boolean,
|
isPasswordValidated: boolean,
|
||||||
loading: boolean,
|
loading: boolean,
|
||||||
dialogVisible: boolean,
|
dialogVisible: boolean,
|
||||||
dialogTitle: string,
|
dialogError: number,
|
||||||
dialogMessage: string,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ICON_AMICALE = require('../../../assets/amicale.png');
|
const ICON_AMICALE = require('../../../assets/amicale.png');
|
||||||
|
@ -38,8 +37,7 @@ class LoginScreen extends React.Component<Props, State> {
|
||||||
isPasswordValidated: false,
|
isPasswordValidated: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
dialogTitle: '',
|
dialogError: 0,
|
||||||
dialogMessage: '',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
colors: Object;
|
colors: Object;
|
||||||
|
@ -66,11 +64,10 @@ class LoginScreen extends React.Component<Props, State> {
|
||||||
this.colors = props.theme.colors;
|
this.colors = props.theme.colors;
|
||||||
}
|
}
|
||||||
|
|
||||||
showErrorDialog = (title: string, message: string) =>
|
showErrorDialog = (error: number) =>
|
||||||
this.setState({
|
this.setState({
|
||||||
dialogTitle: title,
|
dialogVisible: true,
|
||||||
dialogMessage: message,
|
dialogError: error,
|
||||||
dialogVisible: true
|
|
||||||
});
|
});
|
||||||
|
|
||||||
hideErrorDialog = () => this.setState({dialogVisible: false});
|
hideErrorDialog = () => this.setState({dialogVisible: false});
|
||||||
|
@ -132,9 +129,7 @@ class LoginScreen extends React.Component<Props, State> {
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
this.handleSuccess();
|
this.handleSuccess();
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch(this.showErrorDialog)
|
||||||
this.handleErrors(error);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
this.setState({loading: false});
|
this.setState({loading: false});
|
||||||
});
|
});
|
||||||
|
@ -145,29 +140,6 @@ class LoginScreen extends React.Component<Props, State> {
|
||||||
this.props.navigation.navigate('ProfileScreen');
|
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() {
|
getFormInput() {
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
|
@ -297,12 +269,10 @@ class LoginScreen extends React.Component<Props, State> {
|
||||||
{this.getSecondaryCard()}
|
{this.getSecondaryCard()}
|
||||||
</View>
|
</View>
|
||||||
</TouchableWithoutFeedback>
|
</TouchableWithoutFeedback>
|
||||||
<AlertDialog
|
<ErrorDialog
|
||||||
{...this.props}
|
|
||||||
visible={this.state.dialogVisible}
|
visible={this.state.dialogVisible}
|
||||||
title={this.state.dialogTitle}
|
|
||||||
message={this.state.dialogMessage}
|
|
||||||
onDismiss={this.hideErrorDialog}
|
onDismiss={this.hideErrorDialog}
|
||||||
|
errorCode={this.state.dialogError}
|
||||||
/>
|
/>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
|
|
|
@ -16,7 +16,7 @@ import {
|
||||||
} from 'react-native-paper';
|
} from 'react-native-paper';
|
||||||
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
|
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
|
||||||
import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
|
import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
|
||||||
import LoadingConfirmDialog from "../../components/Custom/LoadingConfirmDialog";
|
import LoadingConfirmDialog from "../../components/Dialog/LoadingConfirmDialog";
|
||||||
import ConnectionManager from "../../managers/ConnectionManager";
|
import ConnectionManager from "../../managers/ConnectionManager";
|
||||||
|
|
||||||
const ICON_AMICALE = require('../../../assets/amicale.png');
|
const ICON_AMICALE = require('../../../assets/amicale.png');
|
||||||
|
|
Loading…
Reference in a new issue