123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- // @flow
-
- import * as React from 'react';
- import {Button, Subheading, withTheme} from 'react-native-paper';
- import {StyleSheet, View} from "react-native";
- import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
- import i18n from 'i18n-js';
- import {ERROR_TYPE} from "../../utils/WebData";
- import * as Animatable from 'react-native-animatable';
-
- type Props = {
- navigation: Object,
- route: Object,
- errorCode: number,
- onRefresh: Function,
- icon: string,
- message: string,
- showRetryButton: boolean,
- }
-
- type State = {
- refreshing: boolean,
- }
-
- class ErrorView extends React.PureComponent<Props, State> {
-
- colors: Object;
-
- message: string;
- icon: string;
-
- showLoginButton: boolean;
-
- static defaultProps = {
- errorCode: 0,
- icon: '',
- message: '',
- showRetryButton: true,
- }
-
- state = {
- refreshing: false,
- };
-
- constructor(props) {
- super(props);
- this.colors = props.theme.colors;
- }
-
- generateMessage() {
- this.showLoginButton = false;
- if (this.props.errorCode !== 0) {
- switch (this.props.errorCode) {
- case ERROR_TYPE.BAD_CREDENTIALS:
- this.message = i18n.t("errors.badCredentials");
- this.icon = "account-alert-outline";
- break;
- case ERROR_TYPE.BAD_TOKEN:
- this.message = i18n.t("errors.badToken");
- this.icon = "account-alert-outline";
- this.showLoginButton = true;
- break;
- case ERROR_TYPE.NO_CONSENT:
- this.message = i18n.t("errors.noConsent");
- this.icon = "account-remove-outline";
- break;
- case ERROR_TYPE.BAD_INPUT:
- this.message = i18n.t("errors.badInput");
- this.icon = "alert-circle-outline";
- break;
- case ERROR_TYPE.FORBIDDEN:
- this.message = i18n.t("errors.forbidden");
- this.icon = "lock";
- break;
- case ERROR_TYPE.CONNECTION_ERROR:
- this.message = i18n.t("errors.connectionError");
- this.icon = "access-point-network-off";
- break;
- case ERROR_TYPE.SERVER_ERROR:
- this.message = i18n.t("errors.serverError");
- this.icon = "server-network-off";
- break;
- default:
- this.message = i18n.t("errors.unknown");
- this.icon = "alert-circle-outline";
- break;
- }
- } else {
- this.message = this.props.message;
- this.icon = this.props.icon;
- }
-
- }
-
- getRetryButton() {
- return <Button
- mode={'contained'}
- icon={'refresh'}
- onPress={this.props.onRefresh}
- style={styles.button}
- >
- {i18n.t("general.retry")}
- </Button>;
- }
-
- goToLogin = () => {
- this.props.navigation.navigate("login",
- {
- screen: 'login',
- params: {nextScreen: this.props.route.name}
- })
- };
-
- getLoginButton() {
- return <Button
- mode={'contained'}
- icon={'login'}
- onPress={this.goToLogin}
- style={styles.button}
- >
- {i18n.t("screens.login")}
- </Button>;
- }
-
- render() {
- this.generateMessage();
- return (
- <Animatable.View
- style={{
- ...styles.outer,
- backgroundColor: this.colors.background
- }}
- animation={"zoomIn"}
- duration={200}
- useNativeDriver
- >
- <View style={styles.inner}>
- <View style={styles.iconContainer}>
- <MaterialCommunityIcons
- name={this.icon}
- size={150}
- color={this.colors.textDisabled}/>
- </View>
- <Subheading style={{
- ...styles.subheading,
- color: this.colors.textDisabled
- }}>
- {this.message}
- </Subheading>
- {this.props.showRetryButton
- ? (this.showLoginButton
- ? this.getLoginButton()
- : this.getRetryButton())
- : null}
- </View>
- </Animatable.View>
- );
- }
- }
-
- const styles = StyleSheet.create({
- outer: {
- height: '99%', // using 100% crashes planex screen for some reason on android 9+
- },
- inner: {
- marginTop: 'auto',
- marginBottom: 'auto',
- },
- iconContainer: {
- marginLeft: 'auto',
- marginRight: 'auto',
- marginBottom: 20
- },
- subheading: {
- textAlign: 'center',
- paddingHorizontal: 20
- },
- button: {
- marginTop: 10,
- marginLeft: 'auto',
- marginRight: 'auto',
- }
- });
-
-
- export default withTheme(ErrorView);
|