Allow reload when error

components/AuthenticatedScreen.js

@@ -1,8 +1,10 @@
+// @flow
+
 import * as React from 'react';
-import {StyleSheet, View} from "react-native";
+import {View} from "react-native";
-import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper';
+import {ActivityIndicator, withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../managers/ConnectionManager";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
+import NetworkErrorComponent from "./NetworkErrorComponent";
 
 type Props = {
     navigation: Object,
@@ -41,14 +43,14 @@ class AuthenticatedScreen extends React.Component<Props, State> {
             this.fetchData();
     }
 
-    fetchData() {
+    fetchData = () => {
         if (!this.state.loading)
             this.setState({loading: true});
         this.connectionManager.isLoggedIn()
             .then(() => {
                 this.connectionManager.authenticatedRequest(this.props.link)
                     .then((data) => {
-                        this.onFinishedLoading(data);
+                        this.onFinishedLoading(data, -1);
                     })
                     .catch((error) => {
                         this.onFinishedLoading(undefined, error);
@@ -57,7 +59,7 @@ class AuthenticatedScreen extends React.Component<Props, State> {
             .catch((error) => {
                 this.onFinishedLoading(undefined, ERROR_TYPE.BAD_CREDENTIALS);
             });
-    }
+    };
 
     onFinishedLoading(data: Object, error: number) {
         this.data = data;
@@ -113,22 +115,12 @@ class AuthenticatedScreen extends React.Component<Props, State> {
         }
 
         return (
-            <View style={styles.outer}>
+            <NetworkErrorComponent
-                <View style={styles.inner}>
+                {...this.props}
-                    <View style={styles.iconContainer}>
+                icon={icon}
-                        <MaterialCommunityIcons
+                message={message}
-                            name={icon}
+                onRefresh={this.fetchData}
-                            size={150}
+            />
-                            color={this.colors.textDisabled}/>
-                    </View>
-                    <Subheading style={{
-                        ...styles.subheading,
-                        color: this.colors.textDisabled
-                    }}>
-                        {message}
-                    </Subheading>
-                </View>
-            </View>
         );
     }
 
@@ -143,22 +135,4 @@ class AuthenticatedScreen extends React.Component<Props, State> {
     }
 }
 
-const styles = StyleSheet.create({
-    outer: {
-        flex: 1,
-    },
-    inner: {
-        marginTop: 'auto',
-        marginBottom: 'auto',
-    },
-    iconContainer: {
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        marginBottom: 20
-    },
-    subheading: {
-        textAlign: 'center',
-    }
-});
-
 export default withTheme(AuthenticatedScreen);

components/LogoutDialog.js

@@ -1,3 +1,5 @@
+// @flow
+
 import * as React from 'react';
 import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
 import ConnectionManager from "../managers/ConnectionManager";

components/NetworkErrorComponent.js

@@ -0,0 +1,87 @@
+// @flow
+
+import * as React from 'react';
+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';
+
+type Props = {
+    navigation: Object,
+    message: string,
+    icon: string,
+    onRefresh: Function,
+}
+
+type State = {
+    refreshing: boolean,
+}
+
+class NetworkErrorComponent extends React.PureComponent<Props, State> {
+
+    colors: Object;
+
+    state = {
+        refreshing: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        return (
+            <View style={styles.outer}>
+                <View style={styles.inner}>
+                    <View style={styles.iconContainer}>
+                        <MaterialCommunityIcons
+                            name={this.props.icon}
+                            size={150}
+                            color={this.colors.textDisabled}/>
+                    </View>
+                    <Subheading style={{
+                        ...styles.subheading,
+                        color: this.colors.textDisabled
+                    }}>
+                        {this.props.message}
+                    </Subheading>
+                    <Button
+                        mode={'contained'}
+                        icon={'refresh'}
+                        onPress={this.props.onRefresh}
+                        style={styles.button}
+                    >
+                        {i18n.t("general.retry")}
+                    </Button>
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    outer: {
+        flex: 1,
+    },
+    inner: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    },
+    iconContainer: {
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        marginBottom: 20
+    },
+    subheading: {
+        textAlign: 'center',
+    },
+    button: {
+        marginTop: 10,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    }
+});
+
+
+export default withTheme(NetworkErrorComponent);

screens/Amicale/ProfileScreen.js

@@ -1,3 +1,5 @@
+// @flow
+
 import * as React from 'react';
 import {FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
@@ -72,7 +74,7 @@ class ProfileScreen extends React.Component<Props, State> {
         )
     }
 
-    getRenderItem({item}: Object) {
+    getRenderItem({item}: Object): any {
         switch (item.id) {
             case '0':
                 return this.getPersonalCard();

translations/en.json

@@ -254,6 +254,7 @@
   },
   "general": {
     "loading": "Loading...",
+    "retry": "Retry",
     "networkError": "Unable to contact servers. Make sure you are connected to Internet."
   },
   "date": {

translations/fr.json

@@ -255,6 +255,7 @@
   },
   "general": {
     "loading": "Chargement...",
+    "retry": "Réessayer",
     "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
   },
   "date": {