From 4406efaf416aacf497a762614c6a9fa0c8c4bbd0 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 31 Mar 2020 18:40:06 +0200 Subject: [PATCH] Improved authenticated screens states --- components/AuthenticatedScreen.js | 74 +++++++++++++++++++++++++++---- components/Sidebar.js | 37 ++++++++++------ managers/ConnectionManager.js | 23 ++++++++-- screens/Amicale/ProfileScreen.js | 5 ++- 4 files changed, 111 insertions(+), 28 deletions(-) diff --git a/components/AuthenticatedScreen.js b/components/AuthenticatedScreen.js index 9bdfcf3..276f0e2 100644 --- a/components/AuthenticatedScreen.js +++ b/components/AuthenticatedScreen.js @@ -1,6 +1,6 @@ import * as React from 'react'; import {View} from "react-native"; -import {Text} from 'react-native-paper'; +import {ActivityIndicator, Text, withTheme} from 'react-native-paper'; import ConnectionManager from "../managers/ConnectionManager"; type Props = { @@ -14,39 +14,97 @@ type State = { loading: boolean, } -export default class AuthenticatedScreen extends React.Component { +class AuthenticatedScreen extends React.Component { state = { loading: true, }; + currentUserToken: string; connectionManager: ConnectionManager; + data: Object; + colors: Object; constructor(props) { super(props); + this.colors = props.theme.colors; this.connectionManager = ConnectionManager.getInstance(); + this.props.navigation.addListener('focus', this.onScreenFocus.bind(this)); + + this.fetchData(); + } + + onScreenFocus() { + if (this.currentUserToken !== this.connectionManager.getToken()) + this.fetchData(); + } + + fetchData() { + if (!this.state.loading) + this.setState({loading: true}); this.connectionManager.isLoggedIn() .then(() => { - this.setState({loading: false}); this.connectionManager.authenticatedRequest(this.props.link) .then((data) => { - console.log(data); + this.onFinishedLoading(data); }) .catch((error) => { - console.log(error); + this.onFinishedLoading(undefined); }); }) .catch(() => { - this.props.navigation.navigate('LoginScreen'); + this.onFinishedLoading(undefined); }); } + onFinishedLoading(data: Object) { + this.data = data; + this.currentUserToken = data !== undefined + ? this.connectionManager.getToken() + : ''; + this.setState({loading: false}); + } + + /** + * Gets the loading indicator + * + * @return {*} + */ + getRenderLoading() { + return ( + + + + ); + } + + getErrorRender() { + return ERROR; + } + render() { return ( this.state.loading - ? LOADING - : this.props.renderFunction() + ? this.getRenderLoading() + : (this.data !== undefined + ? this.props.renderFunction(this.data) + : this.getErrorRender()) ); } } + +export default withTheme(AuthenticatedScreen); diff --git a/components/Sidebar.js b/components/Sidebar.js index 012ab48..32ba78d 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -29,11 +29,6 @@ class SideBar extends React.PureComponent { dataSet: Array; - state = { - active: 'Home', - isLoggedIn: false, - }; - getRenderItem: Function; colors: Object; @@ -61,18 +56,19 @@ class SideBar extends React.PureComponent { icon: "login", onlyWhenLoggedOut: true, }, - { - name: 'DISCONNECT', - action: () => this.onClickDisconnect(), - icon: "logout", - onlyWhenLoggedIn: true, - }, { name: 'PROFILE', route: "ProfileScreen", icon: "circle", onlyWhenLoggedIn: true, }, + { + name: 'DISCONNECT', + route: 'disconnect', + action: () => this.onClickDisconnect(), + icon: "logout", + onlyWhenLoggedIn: true, + }, { name: i18n.t('sidenav.divider2'), route: "Divider2" @@ -150,15 +146,29 @@ class SideBar extends React.PureComponent { this.getRenderItem = this.getRenderItem.bind(this); this.colors = props.theme.colors; ConnectionManager.getInstance().setLoginCallback((value) => this.onLoginStateChange(value)); + this.state = { + active: 'Home', + isLoggedIn: false, + }; + ConnectionManager.getInstance().isLoggedIn() } onClickDisconnect() { - console.log('coucou'); Alert.alert( 'DISCONNECT', 'DISCONNECT?', [ - {text: 'YES', onPress: () => ConnectionManager.getInstance().disconnect()}, + { + text: 'YES', onPress: () => { + ConnectionManager.getInstance().disconnect() + .then(() => { + this.props.navigation.reset({ + index: 0, + routes: [{name: 'Main'}], + }); + }); + } + }, {text: 'NO', undefined}, ], {cancelable: false}, @@ -176,7 +186,6 @@ class SideBar extends React.PureComponent { * @param item The item pressed */ onListItemPress(item: Object) { - console.log(item.action); if (item.link !== undefined) openBrowser(item.link, this.colors.primary); else if (item.action !== undefined) diff --git a/managers/ConnectionManager.js b/managers/ConnectionManager.js index d3bf35c..91f8395 100644 --- a/managers/ConnectionManager.js +++ b/managers/ConnectionManager.js @@ -29,6 +29,10 @@ export default class ConnectionManager { ConnectionManager.instance; } + getToken() { + return this.#token; + } + onLoginStateChange(newState: boolean) { this.loginCallback(newState); } @@ -44,8 +48,11 @@ export default class ConnectionManager { else { SecureStore.getItemAsync('token') .then((token) => { - this.onLoginStateChange(true); - resolve(token); + if (token !== null) { + this.onLoginStateChange(true); + resolve(token); + } else + reject(false); }) .catch(error => { reject(false); @@ -82,8 +89,16 @@ export default class ConnectionManager { } async disconnect() { - SecureStore.deleteItemAsync('token'); // TODO use promise - this.onLoginStateChange(false); + return new Promise((resolve, reject) => { + SecureStore.deleteItemAsync('token') + .then(() => { + this.onLoginStateChange(false); + resolve(true); + }) + .catch((error) => { + reject(false); + }); + }); } async connect(email: string, password: string) { diff --git a/screens/Amicale/ProfileScreen.js b/screens/Amicale/ProfileScreen.js index 0fde168..7c77f09 100644 --- a/screens/Amicale/ProfileScreen.js +++ b/screens/Amicale/ProfileScreen.js @@ -24,9 +24,10 @@ class ProfileScreen extends React.Component { } getScreen(data: Object) { + return ( - PAGE + {data.first_name} {Math.random()} ) } @@ -36,7 +37,7 @@ class ProfileScreen extends React.Component { this.getScreen()} + renderFunction={(data) => this.getScreen(data)} /> ); }