components/AlertDialog.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import {Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
-
-type Props = {
-    navigation: Object,
-    visible: boolean,
-    onDismiss: Function,
-    title: string,
-    message: string,
-}
-
-class AlertDialog extends React.PureComponent<Props> {
-
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <Portal>
-                <Dialog
-                    visible={this.props.visible}
-                    onDismiss={this.props.onDismiss}>
-                    <Dialog.Title>{this.props.title}</Dialog.Title>
-                    <Dialog.Content>
-                        <Paragraph>{this.props.message}</Paragraph>
-                    </Dialog.Content>
-                    <Dialog.Actions>
-                        <Button onPress={this.props.onDismiss}>OK</Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
-        );
-    }
-}
-
-export default withTheme(AlertDialog);

components/LogoutDialog.js

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
-import ConnectionManager from "../managers/ConnectionManager";
-import i18n from 'i18n-js';
-
-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>
-                        {this.state.loading
-                            ? i18n.t("dialog.disconnect.titleLoading")
-                            : i18n.t("dialog.disconnect.title")}
-                    </Dialog.Title>
-                    <Dialog.Content>
-                        {this.state.loading
-                            ? <ActivityIndicator
-                                animating={true}
-                                size={'large'}
-                                color={this.colors.primary}/>
-                            : <Paragraph>{i18n.t("dialog.disconnect.message")}</Paragraph>
-                        }
-                    </Dialog.Content>
-                    {this.state.loading
-                        ? null
-                        : <Dialog.Actions>
-                            <Button onPress={this.onDismiss} style={{marginRight: 10}}>{i18n.t("dialog.cancel")}</Button>
-                            <Button onPress={this.onClickAccept}>{i18n.t("dialog.yes")}</Button>
-                        </Dialog.Actions>
-                    }
-
-                </Dialog>
-            </Portal>
-        );
-    }
-}
-
-export default withTheme(LogoutDialog);

components/Sidebar.js

@@ -1,14 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
+import {Alert, 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;
 
@@ -21,7 +20,6 @@ type Props = {
 type State = {
     active: string,
     isLoggedIn: boolean,
-    dialogVisible: boolean,
 };
 
 /**
@@ -49,7 +47,7 @@ class SideBar extends React.PureComponent<Props, State> {
                 icon: "home",
             },
             {
-                name: i18n.t('sidenav.divider4'),
+                name: "AMICALE",
                 route: "Divider4"
             },
             {
@@ -67,7 +65,7 @@ class SideBar extends React.PureComponent<Props, State> {
             {
                 name: i18n.t('screens.logout'),
                 route: 'disconnect',
-                action: this.showDisconnectDialog,
+                action: () => this.onClickDisconnect(),
                 icon: "logout",
                 onlyWhenLoggedIn: true,
             },
@@ -151,15 +149,31 @@ class SideBar extends React.PureComponent<Props, State> {
         this.state = {
             active: 'Home',
             isLoggedIn: false,
-            dialogVisible: false,
         };
-        ConnectionManager.getInstance().isLoggedIn().then(data => undefined).catch(error => undefined);
+        ConnectionManager.getInstance().isLoggedIn()
     }
 
-    showDisconnectDialog = () => this.setState({ dialogVisible: true });
+    onClickDisconnect() {
-
+        Alert.alert(
-    hideDisconnectDialog = () => this.setState({ dialogVisible: false });
+            'DISCONNECT',
-
+            'DISCONNECT?',
+            [
+                {
+                    text: 'YES', onPress: () => {
+                        ConnectionManager.getInstance().disconnect()
+                            .then(() => {
+                                this.props.navigation.reset({
+                                    index: 0,
+                                    routes: [{name: 'Main'}],
+                                });
+                            });
+                    }
+                },
+                {text: 'NO', undefined},
+            ],
+            {cancelable: false},
+        );
+    }
 
     onLoginStateChange(isLoggedIn: boolean) {
         this.setState({isLoggedIn: isLoggedIn});
@@ -236,11 +250,6 @@ 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/LoginScreen.js

@@ -1,12 +1,19 @@
 // @flow
 
 import * as React from 'react';
-import {Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {
+    Alert,
+    Keyboard,
+    KeyboardAvoidingView,
+    ScrollView,
+    StyleSheet,
+    TouchableWithoutFeedback,
+    View
+} from "react-native";
 import {Avatar, Button, Card, HelperText, Text, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
 import {openBrowser} from "../../utils/WebBrowser";
 import i18n from 'i18n-js';
-import AlertDialog from "../../components/AlertDialog";
 
 type Props = {
     navigation: Object,
@@ -18,9 +25,6 @@ type State = {
     isEmailValidated: boolean,
     isPasswordValidated: boolean,
     loading: boolean,
-    dialogVisible: boolean,
-    dialogTitle: string,
-    dialogMessage: string,
 }
 
 const ICON_AMICALE = require('../../assets/amicale.png');
@@ -37,9 +41,6 @@ class LoginScreen extends React.Component<Props, State> {
         isEmailValidated: false,
         isPasswordValidated: false,
         loading: false,
-        dialogVisible: false,
-        dialogTitle: '',
-        dialogMessage: '',
     };
 
     colors: Object;
@@ -66,15 +67,6 @@ class LoginScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
-    showErrorDialog = (title: string, message: string) =>
-        this.setState({
-            dialogTitle: title,
-            dialogMessage: message,
-            dialogVisible: true
-        });
-
-    hideErrorDialog = () => this.setState({ dialogVisible: false });
-
     onResetPasswordClick() {
         openBrowser(RESET_PASSWORD_LINK, this.colors.primary);
     }
@@ -104,7 +96,7 @@ class LoginScreen extends React.Component<Props, State> {
     }
 
     shouldEnableLogin() {
-        return this.isEmailValid() && this.isPasswordValid() && !this.state.loading;
+        return this.isEmailValid() && this.isPasswordValid();
     }
 
     onInputChange(isEmail: boolean, value: string) {
@@ -165,7 +157,7 @@ class LoginScreen extends React.Component<Props, State> {
                 message = i18n.t("loginScreen.errors.unknown");
                 break;
         }
-        this.showErrorDialog(title, message);
+        Alert.alert(title, message);
     }
 
     getFormInput() {
@@ -287,13 +279,6 @@ class LoginScreen extends React.Component<Props, State> {
                             {this.getSecondaryCard()}
                         </View>
                     </TouchableWithoutFeedback>
-                    <AlertDialog
-                        {...this.props}
-                        visible={this.state.dialogVisible}
-                        title={this.state.dialogTitle}
-                        message={this.state.dialogMessage}
-                        onDismiss={this.hideErrorDialog}
-                    />
                 </ScrollView>
             </KeyboardAvoidingView>
         );

screens/Amicale/ProfileScreen.js

@@ -1,26 +1,22 @@
 import * as React from 'react';
-import {FlatList, StyleSheet, View} from "react-native";
+import {FlatList, StyleSheet} 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;
 
@@ -31,10 +27,11 @@ 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: 0},
-            {id: '1'},
+            {id: 1},
-            {id: '2'},
+            {id: 2},
         ]
     }
 
@@ -45,40 +42,38 @@ class ProfileScreen extends React.Component<Props, State> {
         });
     }
 
-    showDisconnectDialog = () => this.setState({ dialogVisible: true });
-
-    hideDisconnectDialog = () => this.setState({ dialogVisible: false });
-
     getHeaderButtons() {
-        return <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
+        return <HeaderButton icon={'logout'} onPress={this.onClickDisconnect}/>;
+    }
+
+    onClickDisconnect() {
+        ConnectionManager.getInstance().disconnect()
+            .then(() => {
+                this.props.navigation.reset({
+                    index: 0,
+                    routes: [{name: 'Main'}],
+                });
+            });
     }
 
     getScreen(data: Object) {
         this.data = data;
         return (
-            <View>
+            <FlatList
-                <FlatList
+                renderItem={item => this.getRenderItem(item)}
-                    renderItem={item => this.getRenderItem(item)}
+                keyExtractor={item => item.id}
-                    keyExtractor={item => item.id}
+                data={this.flatListData}
-                    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();
         }
     }
@@ -101,10 +96,22 @@ class ProfileScreen extends React.Component<Props, State> {
                     <Divider/>
                     <List.Section>
                         <List.Subheader>{i18n.t("profileScreen.personalInformation")}</List.Subheader>
-                        {this.getPersonalListItem(this.data.birthday, "cake-variant")}
+                        <List.Item
-                        {this.getPersonalListItem(this.data.phone, "phone")}
+                            title={this.getFieldValue(this.data.birthday)}
-                        {this.getPersonalListItem(this.data.email, "email")}
+                            left={props => <List.Icon {...props} icon="cake-variant"/>}
-                        {this.getPersonalListItem(this.data.branch, "school")}
+                        />
+                        <List.Item
+                            title={this.getFieldValue(this.data.phone)}
+                            left={props => <List.Icon {...props} icon="phone"/>}
+                        />
+                        <List.Item
+                            title={this.getFieldValue(this.data.email)}
+                            left={props => <List.Icon {...props} icon="email"/>}
+                        />
+                        <List.Item
+                            title={this.getFieldValue(this.data.branch)}
+                            left={props => <List.Icon {...props} icon="school"/>}
+                        />
                     </List.Section>
                     <Divider/>
                     <Card.Actions>
@@ -196,36 +203,12 @@ class ProfileScreen extends React.Component<Props, State> {
         );
     }
 
-    isFieldAvailable(field: ?string) {
-        return field !== null;
-    }
-
     getFieldValue(field: ?string) {
-        return this.isFieldAvailable(field)
+        return field !== null
             ? field
             : i18n.t("profileScreen.noData");
     }
 
-    getFieldColor(field: ?string) {
-        return this.isFieldAvailable(field)
-            ? this.colors.text
-            : this.colors.textDisabled;
-    }
-
-    getPersonalListItem(field: ?string, icon: string) {
-        return (
-            <List.Item
-                title={this.getFieldValue(field)}
-                left={props => <List.Icon
-                    {...props}
-                    icon={icon}
-                    color={this.getFieldColor(field)}
-                />}
-                titleStyle={{color: this.getFieldColor(field)}}
-            />
-        );
-    }
-
     render() {
         return (
             <AuthenticatedScreen

translations/en.json

@@ -20,8 +20,7 @@
   "sidenav": {
     "divider1": "Student websites",
     "divider2": "Services",
-    "divider3": "Personalisation",
+    "divider3": "Personalisation"
-    "divider4": "Amicale"
   },
   "intro": {
     "slide1": {
@@ -242,16 +241,6 @@
       "unknown": "Unknown error, please contact support."
     }
   },
-  "dialog": {
-    "ok": "OK",
-    "yes": "Yes",
-    "cancel": "Cancel",
-    "disconnect": {
-      "title": "Disconnect",
-      "titleLoading": "Disconnecting...",
-      "message": "Are you sure you want to disconnect from your Amicale account?"
-    }
-  },
   "general": {
     "loading": "Loading...",
     "networkError": "Unable to contact servers. Make sure you are connected to Internet."

translations/fr.json

@@ -20,8 +20,7 @@
   "sidenav": {
     "divider1": "Sites étudiants",
     "divider2": "Services",
-    "divider3": "Personnalisation",
+    "divider3": "Personnalisation"
-    "divider4": "Amicale"
   },
   "intro": {
     "slide1": {
@@ -243,16 +242,6 @@
       "unknown": "Erreur inconnue, merci de contacter le support."
     }
   },
-  "dialog": {
-    "ok": "OK",
-    "yes": "Oui",
-    "cancel": "Annuler",
-    "disconnect": {
-      "title": "Déconnexion",
-      "titleLoading": "Déconnexion...",
-      "message": "Voulez vous vraiment vous déconnecter de votre compte Amicale ??"
-    }
-  },
   "general": {
     "loading": "Chargement...",
     "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."