Browse Source

Added login/logout icon on home

Arnaud Vergnet 4 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
 import {withTheme} from "react-native-paper";
6
 import {withTheme} from "react-native-paper";
7
 import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
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
         IconComponent={MaterialCommunityIcons}
10
         IconComponent={MaterialCommunityIcons}
12
         iconSize={26}
11
         iconSize={26}
13
-        color={props.theme.colors.text}
12
+        color={props.color != null ? props.color : props.theme.colors.text}
14
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
13
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
15
         {...props}
14
         {...props}
16
-    />
17
-);
15
+    />;
18
 
16
 
19
 const MaterialHeaderButtons = (props: Object) => {
17
 const MaterialHeaderButtons = (props: Object) => {
20
     return (
18
     return (

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

17
 import {StackNavigationProp} from "@react-navigation/stack";
17
 import {StackNavigationProp} from "@react-navigation/stack";
18
 import type {CustomTheme} from "../../managers/ThemeManager";
18
 import type {CustomTheme} from "../../managers/ThemeManager";
19
 import {View} from "react-native-animatable";
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
 // import DATA from "../dashboard_data.json";
23
 // import DATA from "../dashboard_data.json";
21
 
24
 
22
 
25
 
95
     theme: CustomTheme,
98
     theme: CustomTheme,
96
 }
99
 }
97
 
100
 
101
+type State = {
102
+    dialogVisible: boolean,
103
+}
104
+
98
 /**
105
 /**
99
  * Class defining the app's home screen
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
     colors: Object;
110
     colors: Object;
104
 
111
 
112
+    isLoggedIn: boolean | null;
113
+
105
     fabRef: { current: null | AnimatedFAB };
114
     fabRef: { current: null | AnimatedFAB };
106
     currentNewFeed: Array<feedItem>;
115
     currentNewFeed: Array<feedItem>;
107
 
116
 
117
+    state = {
118
+        dialogVisible: false,
119
+    }
120
+
108
     constructor(props) {
121
     constructor(props) {
109
         super(props);
122
         super(props);
110
         this.colors = props.theme.colors;
123
         this.colors = props.theme.colors;
111
         this.fabRef = React.createRef();
124
         this.fabRef = React.createRef();
112
         this.currentNewFeed = [];
125
         this.currentNewFeed = [];
126
+        this.isLoggedIn = null;
113
     }
127
     }
114
 
128
 
115
     /**
129
     /**
130
     }
144
     }
131
 
145
 
132
     onScreenFocus = () => {
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
         // handle link open when home is not focused or created
153
         // handle link open when home is not focused or created
137
         this.handleNavigationParams();
154
         this.handleNavigationParams();
138
     };
155
     };
148
     };
165
     };
149
 
166
 
150
     getHeaderButton = () => {
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
         const onPressSettings = () => this.props.navigation.navigate("settings");
177
         const onPressSettings = () => this.props.navigation.navigate("settings");
152
         const onPressAbout = () => this.props.navigation.navigate("about");
178
         const onPressAbout = () => this.props.navigation.navigate("about");
153
         return <MaterialHeaderButtons>
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
         </MaterialHeaderButtons>;
183
         </MaterialHeaderButtons>;
157
     };
184
     };
158
 
185
 
186
+    showDisconnectDialog = () => this.setState({dialogVisible: true});
187
+
188
+    hideDisconnectDialog = () => this.setState({dialogVisible: false});
189
+
159
     onProxiwashClick = () => {
190
     onProxiwashClick = () => {
160
         this.props.navigation.navigate("proxiwash");
191
         this.props.navigation.navigate("proxiwash");
161
     };
192
     };
529
                     icon="qrcode-scan"
560
                     icon="qrcode-scan"
530
                     onPress={this.openScanner}
561
                     onPress={this.openScanner}
531
                 />
562
                 />
563
+                <LogoutDialog
564
+                    {...this.props}
565
+                    visible={this.state.dialogVisible}
566
+                    onDismiss={this.hideDisconnectDialog}
567
+                />
532
             </View>
568
             </View>
533
         );
569
         );
534
     }
570
     }

Loading…
Cancel
Save