Improved logout popup and fixed warnings

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<Props, State> {
+
+    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 (
+            <Portal>
+                <Dialog
+                    visible={this.props.visible}
+                    onDismiss={this.onDismiss}>
+                    <Dialog.Title>DISCONNECT</Dialog.Title>
+                    <Dialog.Content>
+                        {this.state.loading
+                            ? <ActivityIndicator
+                                animating={true}
+                                size={'large'}
+                                color={this.colors.primary}/>
+                            : <Paragraph>DISCONNECT?</Paragraph>
+                        }
+                    </Dialog.Content>
+                    {this.state.loading
+                        ? null
+                        : <Dialog.Actions>
+                            <Button onPress={this.onClickAccept}>YES</Button>
+                            <Button onPress={this.onDismiss}>NO</Button>
+                        </Dialog.Actions>
+                    }
+
+                </Dialog>
+            </Portal>
+        );
+    }
+}
+
+export default withTheme(LogoutDialog);

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<Props, State> {
             {
                 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<Props, State> {
         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<Props, State> {
                     keyExtractor={this.listKeyExtractor}
                     renderItem={this.getRenderItem}
                 />
+                <LogoutDialog
+                    {...this.props}
+                    visible={this.state.dialogVisible}
+                    onDismiss={this.hideDisconnectDialog}
+                />
             </View>
         );
     }

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<Props, State> {
 
-    state = {};
+    state = {
+        dialogVisible: false,
+    };
 
     colors: Object;
 
@@ -27,11 +31,10 @@ class ProfileScreen extends React.Component<Props, State> {
     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<Props, State> {
         });
     }
 
-    getHeaderButtons() {
-        return <HeaderButton icon={'logout'} onPress={this.onClickDisconnect}/>;
-    }
+    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 <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
     }
 
     getScreen(data: Object) {
         this.data = data;
         return (
-            <FlatList
-                renderItem={item => this.getRenderItem(item)}
-                keyExtractor={item => item.id}
-                data={this.flatListData}
-            />
+            <View>
+                <FlatList
+                    renderItem={item => this.getRenderItem(item)}
+                    keyExtractor={item => item.id}
+                    data={this.flatListData}
+                />
+                <LogoutDialog
+                    {...this.props}
+                    visible={this.state.dialogVisible}
+                    onDismiss={this.hideDisconnectDialog}
+                />
+            </View>
+
         )
     }
 
     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();
         }
     }