Allow reload when error

This commit is contained in:
Arnaud Vergnet 2020-04-02 09:52:43 +02:00
parent 4ce6865b6a
commit 4bc6ae07b5
6 changed files with 108 additions and 41 deletions

View file

@ -1,8 +1,10 @@
// @flow
import * as React from 'react'; 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 ConnectionManager, {ERROR_TYPE} from "../managers/ConnectionManager";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import NetworkErrorComponent from "./NetworkErrorComponent";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -41,14 +43,14 @@ class AuthenticatedScreen extends React.Component<Props, State> {
this.fetchData(); this.fetchData();
} }
fetchData() { fetchData = () => {
if (!this.state.loading) if (!this.state.loading)
this.setState({loading: true}); this.setState({loading: true});
this.connectionManager.isLoggedIn() this.connectionManager.isLoggedIn()
.then(() => { .then(() => {
this.connectionManager.authenticatedRequest(this.props.link) this.connectionManager.authenticatedRequest(this.props.link)
.then((data) => { .then((data) => {
this.onFinishedLoading(data); this.onFinishedLoading(data, -1);
}) })
.catch((error) => { .catch((error) => {
this.onFinishedLoading(undefined, error); this.onFinishedLoading(undefined, error);
@ -57,7 +59,7 @@ class AuthenticatedScreen extends React.Component<Props, State> {
.catch((error) => { .catch((error) => {
this.onFinishedLoading(undefined, ERROR_TYPE.BAD_CREDENTIALS); this.onFinishedLoading(undefined, ERROR_TYPE.BAD_CREDENTIALS);
}); });
} };
onFinishedLoading(data: Object, error: number) { onFinishedLoading(data: Object, error: number) {
this.data = data; this.data = data;
@ -113,22 +115,12 @@ class AuthenticatedScreen extends React.Component<Props, State> {
} }
return ( 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); export default withTheme(AuthenticatedScreen);

View file

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

View file

@ -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);

View file

@ -1,3 +1,5 @@
// @flow
import * as React from 'react'; import * as React from 'react';
import {FlatList, StyleSheet, View} from "react-native"; import {FlatList, StyleSheet, View} from "react-native";
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper'; 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) { switch (item.id) {
case '0': case '0':
return this.getPersonalCard(); return this.getPersonalCard();

View file

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

View file

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