diff --git a/components/LogoutDialog.js b/components/LogoutDialog.js new file mode 100644 index 0000000..ea7227d --- /dev/null +++ b/components/LogoutDialog.js @@ -0,0 +1,76 @@ +import * as React from 'react'; +import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper'; +import ConnectionManager from "../managers/ConnectionManager"; + +type Props = { + navigation: Object, + visible: boolean, + onDismiss: Function, +} + +type State = { + loading: boolean, +} + +class LogoutDialog extends React.PureComponent { + + colors: Object; + + state = { + loading: false, + }; + + constructor(props) { + super(props); + this.colors = props.theme.colors; + } + + onClickAccept = () => { + this.setState({loading: true}); + ConnectionManager.getInstance().disconnect() + .then(() => { + this.props.onDismiss(); + this.setState({loading: false}); + this.props.navigation.reset({ + index: 0, + routes: [{name: 'Main'}], + }); + }); + }; + + onDismiss = () => { + if (!this.state.loading) + this.props.onDismiss(); + }; + + render() { + return ( + + + DISCONNECT + + {this.state.loading + ? + : DISCONNECT? + } + + {this.state.loading + ? null + : + + + + } + + + + ); + } +} + +export default withTheme(LogoutDialog); diff --git a/components/Sidebar.js b/components/Sidebar.js index bc62dfe..98990dd 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -1,13 +1,14 @@ // @flow import * as React from 'react'; -import {Alert, Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native'; +import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native'; import i18n from "i18n-js"; import {openBrowser} from "../utils/WebBrowser"; import SidebarDivider from "./SidebarDivider"; import SidebarItem from "./SidebarItem"; import {TouchableRipple, withTheme} from "react-native-paper"; import ConnectionManager from "../managers/ConnectionManager"; +import LogoutDialog from "./LogoutDialog"; const deviceWidth = Dimensions.get("window").width; @@ -20,6 +21,7 @@ type Props = { type State = { active: string, isLoggedIn: boolean, + dialogVisible: boolean, }; /** @@ -65,7 +67,7 @@ class SideBar extends React.PureComponent { { name: i18n.t('screens.logout'), route: 'disconnect', - action: () => this.onClickDisconnect(), + action: this.showDisconnectDialog, icon: "logout", onlyWhenLoggedIn: true, }, @@ -149,31 +151,15 @@ class SideBar extends React.PureComponent { this.state = { active: 'Home', isLoggedIn: false, + dialogVisible: false, }; - ConnectionManager.getInstance().isLoggedIn() + ConnectionManager.getInstance().isLoggedIn().then(data => undefined).catch(error => undefined); } - onClickDisconnect() { - Alert.alert( - 'DISCONNECT', - 'DISCONNECT?', - [ - { - text: 'YES', onPress: () => { - ConnectionManager.getInstance().disconnect() - .then(() => { - this.props.navigation.reset({ - index: 0, - routes: [{name: 'Main'}], - }); - }); - } - }, - {text: 'NO', undefined}, - ], - {cancelable: false}, - ); - } + showDisconnectDialog = () => this.setState({ dialogVisible: true }); + + hideDisconnectDialog = () => this.setState({ dialogVisible: false }); + onLoginStateChange(isLoggedIn: boolean) { this.setState({isLoggedIn: isLoggedIn}); @@ -250,6 +236,11 @@ class SideBar extends React.PureComponent { keyExtractor={this.listKeyExtractor} renderItem={this.getRenderItem} /> + ); } diff --git a/screens/Amicale/ProfileScreen.js b/screens/Amicale/ProfileScreen.js index 9f364c1..3defbb8 100644 --- a/screens/Amicale/ProfileScreen.js +++ b/screens/Amicale/ProfileScreen.js @@ -1,22 +1,26 @@ import * as React from 'react'; -import {FlatList, StyleSheet} from "react-native"; +import {FlatList, StyleSheet, View} from "react-native"; import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper'; import AuthenticatedScreen from "../../components/AuthenticatedScreen"; import {openBrowser} from "../../utils/WebBrowser"; -import ConnectionManager from "../../managers/ConnectionManager"; import HeaderButton from "../../components/HeaderButton"; import i18n from 'i18n-js'; +import LogoutDialog from "../../components/LogoutDialog"; type Props = { navigation: Object, theme: Object, } -type State = {} +type State = { + dialogVisible: boolean, +} class ProfileScreen extends React.Component { - state = {}; + state = { + dialogVisible: false, + }; colors: Object; @@ -27,11 +31,10 @@ class ProfileScreen extends React.Component { constructor(props) { super(props); this.colors = props.theme.colors; - this.onClickDisconnect = this.onClickDisconnect.bind(this); this.flatListData = [ - {id: 0}, - {id: 1}, - {id: 2}, + {id: '0'}, + {id: '1'}, + {id: '2'}, ] } @@ -42,38 +45,40 @@ class ProfileScreen extends React.Component { }); } - getHeaderButtons() { - return ; - } + showDisconnectDialog = () => this.setState({ dialogVisible: true }); - onClickDisconnect() { - ConnectionManager.getInstance().disconnect() - .then(() => { - this.props.navigation.reset({ - index: 0, - routes: [{name: 'Main'}], - }); - }); + hideDisconnectDialog = () => this.setState({ dialogVisible: false }); + + getHeaderButtons() { + return ; } getScreen(data: Object) { this.data = data; return ( - this.getRenderItem(item)} - keyExtractor={item => item.id} - data={this.flatListData} - /> + + this.getRenderItem(item)} + keyExtractor={item => item.id} + data={this.flatListData} + /> + + + ) } getRenderItem({item}: Object) { switch (item.id) { - case 0: + case '0': return this.getPersonalCard(); - case 1: + case '1': return this.getClubCard(); - case 2: + case '2': return this.getMembershipCar(); } }