Browse Source

Added login/logout icon on home

Arnaud Vergnet 3 years ago
parent
commit
c9b8a6e2ca
2 changed files with 45 additions and 11 deletions
  1. 3
    5
      src/components/Overrides/CustomHeaderButton.js
  2. 42
    6
      src/screens/Home/HomeScreen.js

+ 3
- 5
src/components/Overrides/CustomHeaderButton.js View File

@@ -6,15 +6,13 @@ import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
6 6
 import {withTheme} from "react-native-paper";
7 7
 import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
8 8
 
9
-const MaterialHeaderButton = (props: Object) => (
10
-    <HeaderButton
9
+const MaterialHeaderButton = (props: Object) => <HeaderButton
11 10
         IconComponent={MaterialCommunityIcons}
12 11
         iconSize={26}
13
-        color={props.theme.colors.text}
12
+        color={props.color != null ? props.color : props.theme.colors.text}
14 13
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
15 14
         {...props}
16
-    />
17
-);
15
+    />;
18 16
 
19 17
 const MaterialHeaderButtons = (props: Object) => {
20 18
     return (

+ 42
- 6
src/screens/Home/HomeScreen.js View File

@@ -17,6 +17,9 @@ import AnimatedFAB from "../../components/Animations/AnimatedFAB";
17 17
 import {StackNavigationProp} from "@react-navigation/stack";
18 18
 import type {CustomTheme} from "../../managers/ThemeManager";
19 19
 import {View} from "react-native-animatable";
20
+import {HiddenItem} from "react-navigation-header-buttons";
21
+import ConnectionManager from "../../managers/ConnectionManager";
22
+import LogoutDialog from "../../components/Amicale/LogoutDialog";
20 23
 // import DATA from "../dashboard_data.json";
21 24
 
22 25
 
@@ -95,21 +98,32 @@ type Props = {
95 98
     theme: CustomTheme,
96 99
 }
97 100
 
101
+type State = {
102
+    dialogVisible: boolean,
103
+}
104
+
98 105
 /**
99 106
  * Class defining the app's home screen
100 107
  */
101
-class HomeScreen extends React.Component<Props> {
108
+class HomeScreen extends React.Component<Props, State> {
102 109
 
103 110
     colors: Object;
104 111
 
112
+    isLoggedIn: boolean | null;
113
+
105 114
     fabRef: { current: null | AnimatedFAB };
106 115
     currentNewFeed: Array<feedItem>;
107 116
 
117
+    state = {
118
+        dialogVisible: false,
119
+    }
120
+
108 121
     constructor(props) {
109 122
         super(props);
110 123
         this.colors = props.theme.colors;
111 124
         this.fabRef = React.createRef();
112 125
         this.currentNewFeed = [];
126
+        this.isLoggedIn = null;
113 127
     }
114 128
 
115 129
     /**
@@ -130,9 +144,12 @@ class HomeScreen extends React.Component<Props> {
130 144
     }
131 145
 
132 146
     onScreenFocus = () => {
133
-        this.props.navigation.setOptions({
134
-            headerRight: this.getHeaderButton,
135
-        });
147
+        if (ConnectionManager.getInstance().isLoggedIn() !== this.isLoggedIn) {
148
+            this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
149
+            this.props.navigation.setOptions({
150
+                headerRight: this.getHeaderButton,
151
+            });
152
+        }
136 153
         // handle link open when home is not focused or created
137 154
         this.handleNavigationParams();
138 155
     };
@@ -148,14 +165,28 @@ class HomeScreen extends React.Component<Props> {
148 165
     };
149 166
 
150 167
     getHeaderButton = () => {
168
+        let onPressLog = () => this.props.navigation.navigate("login");
169
+        let logIcon = "login";
170
+        let logColor = this.props.theme.colors.primary;
171
+        if (this.isLoggedIn) {
172
+            onPressLog = () => this.showDisconnectDialog();
173
+            logIcon = "logout";
174
+            logColor = this.props.theme.colors.text;
175
+        }
176
+
151 177
         const onPressSettings = () => this.props.navigation.navigate("settings");
152 178
         const onPressAbout = () => this.props.navigation.navigate("about");
153 179
         return <MaterialHeaderButtons>
154
-            <Item title="settings" iconName={"settings"} onPress={onPressSettings}/>
155
-            <Item title="information" iconName={"information"} onPress={onPressAbout}/>
180
+            <Item title="log" iconName={logIcon} color={logColor} onPress={onPressLog}/>
181
+            <HiddenItem title={i18n.t("screens.settings")} iconName={"settings"} onPress={onPressSettings}/>
182
+            <HiddenItem title={i18n.t("screens.about")} iconName={"information"} onPress={onPressAbout}/>
156 183
         </MaterialHeaderButtons>;
157 184
     };
158 185
 
186
+    showDisconnectDialog = () => this.setState({dialogVisible: true});
187
+
188
+    hideDisconnectDialog = () => this.setState({dialogVisible: false});
189
+
159 190
     onProxiwashClick = () => {
160 191
         this.props.navigation.navigate("proxiwash");
161 192
     };
@@ -529,6 +560,11 @@ class HomeScreen extends React.Component<Props> {
529 560
                     icon="qrcode-scan"
530 561
                     onPress={this.openScanner}
531 562
                 />
563
+                <LogoutDialog
564
+                    {...this.props}
565
+                    visible={this.state.dialogVisible}
566
+                    onDismiss={this.hideDisconnectDialog}
567
+                />
532 568
             </View>
533 569
         );
534 570
     }

Loading…
Cancel
Save