From c70bafe27320d2a6302e6a48b798fc1b8769d565 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Tue, 7 Apr 2020 14:17:53 +0200
Subject: [PATCH] Improved error handling

---
 src/components/Amicale/AuthenticatedScreen.js | 30 ++---------
 ...{NetworkErrorComponent.js => ErrorView.js} | 53 ++++++++++++++++---
 src/components/Dialog/ErrorDialog.js          | 21 +++++---
 src/components/Lists/WebSectionList.js        |  8 +--
 src/components/Screens/WebViewScreen.js       | 49 +++++------------
 translations/en.json                          | 19 ++++---
 translations/fr.json                          | 21 ++++----
 7 files changed, 104 insertions(+), 97 deletions(-)
 rename src/components/Custom/{NetworkErrorComponent.js => ErrorView.js} (51%)

diff --git a/src/components/Amicale/AuthenticatedScreen.js b/src/components/Amicale/AuthenticatedScreen.js
index 8d70a35..4d5ae69 100644
--- a/src/components/Amicale/AuthenticatedScreen.js
+++ b/src/components/Amicale/AuthenticatedScreen.js
@@ -3,8 +3,7 @@
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
-import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
-import i18n from 'i18n-js';
+import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 
 type Props = {
@@ -98,32 +97,9 @@ class AuthenticatedScreen extends React.Component<Props, State> {
     }
 
     getErrorRender() {
-        let message;
-        let icon;
-        switch (this.errorCode) {
-            case ERROR_TYPE.BAD_CREDENTIALS:
-                message = i18n.t("loginScreen.errors.credentials");
-                icon = "account-alert-outline";
-                break;
-            case ERROR_TYPE.BAD_TOKEN:
-                message = "BAD TOKEN"; // TODO translate
-                icon = "access-point-network-off";
-                break;
-            case ERROR_TYPE.CONNECTION_ERROR:
-                message = i18n.t("loginScreen.errors.connection");
-                icon = "access-point-network-off";
-                break;
-            default:
-                message = i18n.t("loginScreen.errors.unknown");
-                icon = "alert-circle-outline";
-                break;
-        }
-
         return (
-            <NetworkErrorComponent
-                {...this.props}
-                icon={icon}
-                message={message}
+            <ErrorView
+                errorCode={this.errorCode}
                 onRefresh={this.fetchData}
             />
         );
diff --git a/src/components/Custom/NetworkErrorComponent.js b/src/components/Custom/ErrorView.js
similarity index 51%
rename from src/components/Custom/NetworkErrorComponent.js
rename to src/components/Custom/ErrorView.js
index ba54d9d..273dfed 100644
--- a/src/components/Custom/NetworkErrorComponent.js
+++ b/src/components/Custom/ErrorView.js
@@ -5,10 +5,10 @@ import {Button, Subheading, withTheme} from 'react-native-paper';
 import {StyleSheet, View} from "react-native";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import i18n from 'i18n-js';
+import {ERROR_TYPE} from "../../managers/ConnectionManager";
 
 type Props = {
-    message: string,
-    icon: string,
+    errorCode: number,
     onRefresh: Function,
 }
 
@@ -16,10 +16,13 @@ type State = {
     refreshing: boolean,
 }
 
-class NetworkErrorComponent extends React.PureComponent<Props, State> {
+class ErrorView extends React.PureComponent<Props, State> {
 
     colors: Object;
 
+    message: string;
+    icon: string;
+
     state = {
         refreshing: false,
     };
@@ -29,7 +32,45 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
         this.colors = props.theme.colors;
     }
 
+    generateMessage() {
+        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";
+                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;
+        }
+    }
+
     render() {
+        this.generateMessage();
         return (
             <View style={{
                 ...styles.outer,
@@ -38,7 +79,7 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
                 <View style={styles.inner}>
                     <View style={styles.iconContainer}>
                         <MaterialCommunityIcons
-                            name={this.props.icon}
+                            name={this.icon}
                             size={150}
                             color={this.colors.textDisabled}/>
                     </View>
@@ -46,7 +87,7 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
                         ...styles.subheading,
                         color: this.colors.textDisabled
                     }}>
-                        {this.props.message}
+                        {this.message}
                     </Subheading>
                     <Button
                         mode={'contained'}
@@ -86,4 +127,4 @@ const styles = StyleSheet.create({
 });
 
 
-export default withTheme(NetworkErrorComponent);
+export default withTheme(ErrorView);
diff --git a/src/components/Dialog/ErrorDialog.js b/src/components/Dialog/ErrorDialog.js
index 6f10ba8..b9b2cd9 100644
--- a/src/components/Dialog/ErrorDialog.js
+++ b/src/components/Dialog/ErrorDialog.js
@@ -15,22 +15,31 @@ class ErrorDialog extends React.PureComponent<Props> {
     message: string;
 
     generateMessage() {
-        this.title = i18n.t("loginScreen.errors.title");
+        this.title = i18n.t("errors.title");
         switch (this.props.errorCode) {
             case ERROR_TYPE.BAD_CREDENTIALS:
-                this.message = i18n.t("loginScreen.errors.credentials");
+                this.message = i18n.t("errors.badCredentials");
+                break;
+            case ERROR_TYPE.BAD_TOKEN:
+                this.message = i18n.t("errors.badToken");
                 break;
             case ERROR_TYPE.NO_CONSENT:
-                this.message = i18n.t("loginScreen.errors.consent");
+                this.message = i18n.t("errors.noConsent");
+                break;
+            case ERROR_TYPE.BAD_INPUT:
+                this.message = i18n.t("errors.badInput");
+                break;
+            case ERROR_TYPE.FORBIDDEN:
+                this.message = i18n.t("errors.forbidden");
                 break;
             case ERROR_TYPE.CONNECTION_ERROR:
-                this.message = i18n.t("loginScreen.errors.connection");
+                this.message = i18n.t("errors.connectionError");
                 break;
             case ERROR_TYPE.SERVER_ERROR:
-                this.message = "SERVER ERROR"; // TODO translate
+                this.message = i18n.t("errors.serverError");
                 break;
             default:
-                this.message = i18n.t("loginScreen.errors.unknown");
+                this.message = i18n.t("errors.unknown");
                 break;
         }
     }
diff --git a/src/components/Lists/WebSectionList.js b/src/components/Lists/WebSectionList.js
index 84afe32..2a61379 100644
--- a/src/components/Lists/WebSectionList.js
+++ b/src/components/Lists/WebSectionList.js
@@ -5,8 +5,9 @@ import {readData} from "../../utils/WebData";
 import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
 import {RefreshControl, SectionList, View} from "react-native";
-import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
+import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
+import {ERROR_TYPE} from "../../managers/ConnectionManager";
 
 type Props = {
     navigation: Object,
@@ -192,9 +193,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                     style={{minHeight: '100%'}}
                     ListEmptyComponent={this.state.refreshing
                         ? <BasicLoadingScreen/>
-                        : <NetworkErrorComponent
-                            message={i18n.t('general.networkError')}
-                            icon={"access-point-network-off"}
+                        : <ErrorView
+                            errorCode={ERROR_TYPE.CONNECTION_ERROR}
                             onRefresh={this.onRefresh}/>
                     }
                     getItemLayout={this.props.itemHeight !== undefined ? this.itemLayout : undefined}
diff --git a/src/components/Screens/WebViewScreen.js b/src/components/Screens/WebViewScreen.js
index 66fb8a0..6b440f5 100644
--- a/src/components/Screens/WebViewScreen.js
+++ b/src/components/Screens/WebViewScreen.js
@@ -2,11 +2,10 @@
 
 import * as React from 'react';
 import WebView from "react-native-webview";
-import {withTheme} from 'react-native-paper';
 import HeaderButton from "../Custom/HeaderButton";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
-import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
-import i18n from "i18n-js";
+import ErrorView from "../Custom/ErrorView";
+import {ERROR_TYPE} from "../../managers/ConnectionManager";
 
 type Props = {
     navigation: Object,
@@ -32,20 +31,12 @@ class WebViewScreen extends React.PureComponent<Props> {
         hasSideMenu: true,
         hasFooter: true,
     };
+
     webviewRef: Object;
 
-    onRefreshClicked: Function;
-    onWebviewRef: Function;
-    getRenderLoading: Function;
-
-    colors: Object;
-
-    constructor(props) {
-        super(props);
-        this.onRefreshClicked = this.onRefreshClicked.bind(this);
-        this.onWebviewRef = this.onWebviewRef.bind(this);
-        this.getRenderLoading = this.getRenderLoading.bind(this);
-        this.colors = props.theme.colors;
+    constructor() {
+        super();
+        this.webviewRef = React.createRef();
     }
 
     /**
@@ -70,33 +61,19 @@ class WebViewScreen extends React.PureComponent<Props> {
     /**
      * Callback to use when refresh button is clicked. Reloads the webview.
      */
-    onRefreshClicked() {
-        if (this.webviewRef !== null)
-            this.webviewRef.reload();
-    }
-
-    /**
-     * Callback used when receiving the webview ref. Stores the ref for later use
-     *
-     * @param ref
-     */
-    onWebviewRef(ref: Object) {
-        this.webviewRef = ref
-    }
+    onRefreshClicked = () => this.webviewRef.current.reload();
 
     /**
      * Gets the loading indicator
      *
      * @return {*}
      */
-    getRenderLoading() {
-        return <BasicLoadingScreen/>;
-    }
+    getRenderLoading = () => <BasicLoadingScreen/>;
 
     render() {
         return (
             <WebView
-                ref={this.onWebviewRef}
+                ref={this.webviewRef}
                 source={{uri: this.props.data[0]['url']}}
                 style={{
                     width: '100%',
@@ -106,15 +83,13 @@ class WebViewScreen extends React.PureComponent<Props> {
                 injectedJavaScript={this.props.data[0]['customJS']}
                 javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
-                renderError={() => <NetworkErrorComponent
-                    {...this.props}
+                renderError={() => <ErrorView
+                    errorCode={ERROR_TYPE.CONNECTION_ERROR}
                     onRefresh={this.onRefreshClicked}
-                    message={i18n.t("loginScreen.errors.connection")}
-                    icon={'access-point-network-off'}
                 />}
             />
         );
     }
 }
 
-export default withTheme(WebViewScreen);
+export default WebViewScreen;
diff --git a/translations/en.json b/translations/en.json
index d8d5eb9..944f4d9 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -237,14 +237,17 @@
     "whyAccountParagraph": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!",
     "whyAccountParagraph2": "Logging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!",
     "noAccount": "No Account? Go to the Amicale's building during open hours to create one.",
-    "errors": {
-      "title": "Error!",
-      "connection": "Network error. Please check your internet connection.",
-      "credentials": "Email or password invalid.",
-      "saveToken": "Failed to save connection information, please contact support.",
-      "consent": "You did not give your consent for data processing to the Amicale.",
-      "unknown": "Unknown error, please contact support."
-    }
+  },
+  "errors": {
+    "title": "Error!",
+    "badCredentials": "Email or password invalid.",
+    "badToken": "Session expired, please login again.",
+    "noConsent": "You did not give your consent for data processing to the Amicale.",
+    "badInput": "Invalid input. Please try again.",
+    "forbidden": "You do not have access to this data.",
+    "connectionError": "Network error. Please check your internet connection.",
+    "serverError": "Server error. Please contact support.",
+    "unknown": "Unknown error. Please contact support."
   },
   "clubs": {
     "clubList": "Club list",
diff --git a/translations/fr.json b/translations/fr.json
index 6ab28a4..76ac6c1 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -236,15 +236,18 @@
     "whyAccountSub": "Ce que vous pouvez faire avec un compte",
     "whyAccountParagraph": "Un compte Amicale vous donne la possibilité de participer à diverses activités sur le campus. Vous pouvez rejoindre des clubs ou même créer le votre !",
     "whyAccountParagraph2": "Vous connecter à votre compte Amicale sur l'appli vous permettra de voir tous les clubs en activité, de voter pour les prochaines élections, et plus à venir !",
-    "noAccount": "Pas de compte ? Passez à l'Amicale pendant une perm pour en créer un.",
-    "errors": {
-      "title": "Erreur !",
-      "connection": "Erreur de réseau. Merci de vérifier votre connexion Internet.",
-      "credentials": "Email ou mot de passe invalide.",
-      "saveToken": "Erreur de sauvegarde des informations de connexion, merci de contacter le support.",
-      "consent": "Vous n'avez pas donné votre consentement pour l'utilisation de vos données personnelles.",
-      "unknown": "Erreur inconnue, merci de contacter le support."
-    }
+    "noAccount": "Pas de compte ? Passez à l'Amicale pendant une perm pour en créer un."
+  },
+  "errors": {
+    "title": "Erreur !",
+    "badCredentials": "Email ou mot de passe invalide.",
+    "badToken": "Session expirée, merci de vous reconnecter.",
+    "noConsent": "Vous n'avez pas donné votre consentement pour l'utilisation de vos données personnelles.",
+    "badInput": "Entrée invalide. Merci de réessayer.",
+    "forbidden": "Vous n'avez pas accès à cette information.",
+    "connectionError": "Erreur de réseau. Merci de vérifier votre connexion Internet.",
+    "serverError": "Erreur de serveur. Merci de contacter le support.",
+    "unknown": "Erreur inconnue. Merci de contacter le support."
   },
   "clubs": {
     "clubList": "Liste des clubs",