Browse Source

Removed drawer related files and renamed navigator for more coherence

Arnaud Vergnet 3 years ago
parent
commit
38a5761f23

+ 3
- 3
App.js View File

@@ -9,7 +9,7 @@ import {AppLoading} from 'expo';
9 9
 import type {CustomTheme} from "./src/managers/ThemeManager";
10 10
 import ThemeManager from './src/managers/ThemeManager';
11 11
 import {NavigationContainer} from '@react-navigation/native';
12
-import DrawerNavigator from './src/navigation/DrawerNavigator';
12
+import MainNavigator from './src/navigation/MainNavigator';
13 13
 import {initExpoToken} from "./src/utils/Notifications";
14 14
 import {Provider as PaperProvider} from 'react-native-paper';
15 15
 import AprilFoolsManager from "./src/managers/AprilFoolsManager";
@@ -156,7 +156,7 @@ export default class App extends React.Component<Props, State> {
156 156
      */
157 157
     onLoadFinished() {
158 158
         // Only show intro if this is the first time starting the app
159
-        this.createDrawerNavigator = () => <DrawerNavigator
159
+        this.createDrawerNavigator = () => <MainNavigator
160 160
             defaultHomeRoute={this.defaultHomeRoute}
161 161
             defaultHomeData={this.defaultHomeData}
162 162
         />;
@@ -191,7 +191,7 @@ export default class App extends React.Component<Props, State> {
191 191
             return (
192 192
                 <PaperProvider theme={this.state.currentTheme}>
193 193
                     <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
194
-                        <DrawerNavigator
194
+                        <MainNavigator
195 195
                             defaultHomeRoute={this.defaultHomeRoute}
196 196
                             defaultHomeData={this.defaultHomeData}
197 197
                         />

BIN
assets/drawer-cover.png View File


+ 0
- 148
src/components/Sidebar/SideBarSection.js View File

@@ -1,148 +0,0 @@
1
-// @flow
2
-
3
-import * as React from 'react';
4
-import {FlatList} from "react-native";
5
-import {Drawer, withTheme} from 'react-native-paper';
6
-import {Linking} from "expo";
7
-import AnimatedAccordion from "../Animations/AnimatedAccordion";
8
-import {StackActions} from '@react-navigation/native';
9
-
10
-type Props = {
11
-    navigation: Object,
12
-    startOpen: boolean,
13
-    isLoggedIn: boolean,
14
-    sectionName: string,
15
-    activeRoute: string,
16
-    listKey: string,
17
-    listData: Array<Object>,
18
-}
19
-
20
-const LIST_ITEM_HEIGHT = 48;
21
-
22
-class SideBarSection extends React.PureComponent<Props> {
23
-
24
-    colors: Object;
25
-    accordionRef: {current: null | AnimatedAccordion};
26
-
27
-    constructor(props) {
28
-        super(props);
29
-        this.colors = props.theme.colors;
30
-        this.accordionRef = React.createRef();
31
-    }
32
-
33
-    /**
34
-     * Searches if the current route is contained in the given list data.
35
-     * If this is the case and the list is collapsed, we should expand this list.
36
-     *
37
-     * @return boolean
38
-     */
39
-    shouldExpandList() {
40
-        for (let i = 0; i < this.props.listData.length; i++) {
41
-            if (this.props.listData[i].route === this.props.activeRoute) {
42
-                return true;
43
-            }
44
-        }
45
-        return false;
46
-    }
47
-
48
-    /**
49
-     * Callback when a drawer item is pressed.
50
-     * It will either navigate to the associated screen, or open the browser to the associated link
51
-     *
52
-     * @param item The item pressed
53
-     */
54
-    onListItemPress(item: Object) {
55
-        if (item.link !== undefined)
56
-            Linking.openURL(item.link);
57
-        else if (item.action !== undefined)
58
-            item.action();
59
-        else if (this.props.activeRoute === "main")
60
-            this.props.navigation.navigate(item.route);
61
-        else {
62
-            this.props.navigation.dispatch(
63
-                StackActions.replace(item.route)
64
-            );
65
-            this.props.navigation.closeDrawer();
66
-        }
67
-    }
68
-
69
-    /**
70
-     * Key extractor for list items
71
-     *
72
-     * @param item The item to extract the key from
73
-     * @return {string} The extracted key
74
-     */
75
-    listKeyExtractor = (item: Object) => item.route;
76
-
77
-    shouldHideItem(item: Object) {
78
-        const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
79
-        const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
80
-        return (onlyWhenLoggedIn && !this.props.isLoggedIn || onlyWhenLoggedOut && this.props.isLoggedIn);
81
-    }
82
-
83
-    /**
84
-     * Gets the render item for the given list item
85
-     *
86
-     * @param item The item to render
87
-     * @return {*}
88
-     */
89
-    getRenderItem = ({item}: Object) => {
90
-        const onListItemPress = this.onListItemPress.bind(this, item);
91
-        if (this.shouldHideItem(item))
92
-            return null;
93
-        return (
94
-            <Drawer.Item
95
-                label={item.name}
96
-                active={this.props.activeRoute === item.route}
97
-                icon={item.icon}
98
-                onPress={onListItemPress}
99
-                style={{
100
-                    height: LIST_ITEM_HEIGHT,
101
-                    justifyContent: 'center',
102
-                }}
103
-            />
104
-        );
105
-    };
106
-
107
-    shouldRenderAccordion() {
108
-        let itemsToRender = 0;
109
-        for (let i = 0; i < this.props.listData.length; i++) {
110
-            if (!this.shouldHideItem(this.props.listData[i]))
111
-                itemsToRender += 1;
112
-        }
113
-        return itemsToRender > 1;
114
-    }
115
-
116
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
117
-
118
-    getFlatList() {
119
-        return (
120
-            // $FlowFixMe
121
-            <FlatList
122
-                data={this.props.listData}
123
-                extraData={this.props.isLoggedIn.toString() + this.props.activeRoute}
124
-                renderItem={this.getRenderItem}
125
-                keyExtractor={this.listKeyExtractor}
126
-                listKey={this.props.listKey}
127
-                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
128
-                getItemLayout={this.itemLayout}
129
-            />
130
-        );
131
-    }
132
-
133
-    render() {
134
-        if (this.shouldRenderAccordion()) {
135
-            return (
136
-                <AnimatedAccordion
137
-                    title={this.props.sectionName}
138
-                    keepOpen={this.shouldExpandList()}
139
-                >
140
-                    {this.getFlatList()}
141
-                </AnimatedAccordion>
142
-            );
143
-        } else
144
-            return this.getFlatList();
145
-    }
146
-}
147
-
148
-export default withTheme(SideBarSection);

+ 0
- 267
src/components/Sidebar/Sidebar.js View File

@@ -1,267 +0,0 @@
1
-// @flow
2
-
3
-import * as React from 'react';
4
-import {Dimensions, FlatList, Image, StyleSheet, View,} from 'react-native';
5
-import i18n from "i18n-js";
6
-import {TouchableRipple} from "react-native-paper";
7
-import ConnectionManager from "../../managers/ConnectionManager";
8
-import LogoutDialog from "../Amicale/LogoutDialog";
9
-import SideBarSection from "./SideBarSection";
10
-import {DrawerNavigationProp} from "@react-navigation/drawer";
11
-
12
-const deviceWidth = Dimensions.get("window").width;
13
-
14
-type Props = {
15
-    navigation: DrawerNavigationProp,
16
-    state: {[key: string] : any},
17
-    theme?: Object,
18
-};
19
-
20
-type State = {
21
-    isLoggedIn: boolean,
22
-    dialogVisible: boolean,
23
-};
24
-
25
-/**
26
- * Component used to render the drawer menu content
27
- */
28
-class SideBar extends React.Component<Props, State> {
29
-
30
-    dataSet: Array<Object>;
31
-    activeRoute: string;
32
-    /**
33
-     * Generate the dataset
34
-     *
35
-     * @param props
36
-     */
37
-    constructor(props: Props) {
38
-        super(props);
39
-        this.activeRoute = 'main';
40
-        // Dataset used to render the drawer
41
-        const mainData = [
42
-            {
43
-                name: i18n.t('screens.home'),
44
-                route: "main",
45
-                icon: "home",
46
-            },
47
-        ];
48
-        const amicaleData = [
49
-            {
50
-                name: i18n.t('screens.login'),
51
-                route: "login",
52
-                icon: "login",
53
-                onlyWhenLoggedOut: true,
54
-                shouldEmphasis: true,
55
-            },
56
-            {
57
-                name: i18n.t('screens.amicaleAbout'),
58
-                route: "amicale-contact",
59
-                icon: "information",
60
-            },
61
-            {
62
-                name: i18n.t('screens.profile'),
63
-                route: "profile",
64
-                icon: "account",
65
-                onlyWhenLoggedIn: true,
66
-            },
67
-            {
68
-                name: i18n.t('clubs.clubList'),
69
-                route: "club-list",
70
-                icon: "account-group",
71
-                onlyWhenLoggedIn: true,
72
-            },
73
-            {
74
-                name: i18n.t('screens.vote'),
75
-                route: "vote",
76
-                icon: "vote",
77
-                onlyWhenLoggedIn: true,
78
-            },
79
-            {
80
-                name: i18n.t('screens.logout'),
81
-                route: 'disconnect',
82
-                action: this.showDisconnectDialog,
83
-                icon: "logout",
84
-                onlyWhenLoggedIn: true,
85
-            },
86
-        ];
87
-        const servicesData = [
88
-            {
89
-                name: i18n.t('screens.menuSelf'),
90
-                route: "self-menu",
91
-                icon: "silverware-fork-knife",
92
-            },
93
-            {
94
-                name: i18n.t('screens.availableRooms'),
95
-                route: "available-rooms",
96
-                icon: "calendar-check",
97
-            },
98
-            {
99
-                name: i18n.t('screens.bib'),
100
-                route: "bib",
101
-                icon: "book",
102
-            },
103
-            {
104
-                name: i18n.t('screens.bluemind'),
105
-                route: "bluemind",
106
-                link: "https://etud-mel.insa-toulouse.fr/webmail/",
107
-                icon: "email",
108
-            },
109
-            {
110
-                name: i18n.t('screens.ent'),
111
-                route: "ent",
112
-                link: "https://ent.insa-toulouse.fr/",
113
-                icon: "notebook",
114
-            },
115
-        ];
116
-        const websitesData = [
117
-            {
118
-                name: "Amicale",
119
-                route: "amicale-website",
120
-                icon: "alpha-a-box",
121
-            },
122
-            {
123
-                name: "Élus Étudiants",
124
-                route: "elus-etudiants",
125
-                icon: "alpha-e-box",
126
-            },
127
-            {
128
-                name: "Wiketud",
129
-                route: "wiketud",
130
-                icon: "wikipedia",
131
-            },
132
-            {
133
-                name: "Tutor'INSA",
134
-                route: "tutorinsa",
135
-                icon: "school",
136
-            },
137
-        ];
138
-        const othersData = [
139
-            {
140
-                name: i18n.t('screens.settings'),
141
-                route: "settings",
142
-                icon: "settings",
143
-            },
144
-            {
145
-                name: i18n.t('screens.about'),
146
-                route: "about",
147
-                icon: "information",
148
-            },
149
-        ];
150
-
151
-        this.dataSet = [
152
-            {
153
-                key: '1',
154
-                name: i18n.t('screens.home'),
155
-                startOpen: true, // App always starts on Main
156
-                data: mainData
157
-            },
158
-            {
159
-                key: '2',
160
-                name: i18n.t('sidenav.divider4'),
161
-                startOpen: false, // TODO set by user preferences
162
-                data: amicaleData
163
-            },
164
-            {
165
-                key: '3',
166
-                name: i18n.t('sidenav.divider2'),
167
-                startOpen: false,
168
-                data: servicesData
169
-            },
170
-            {
171
-                key: '4',
172
-                name: i18n.t('sidenav.divider1'),
173
-                startOpen: false,
174
-                data: websitesData
175
-            },
176
-            {
177
-                key: '5',
178
-                name: i18n.t('sidenav.divider3'),
179
-                startOpen: false,
180
-                data: othersData
181
-            },
182
-        ];
183
-        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
184
-        this.state = {
185
-            isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
186
-            dialogVisible: false,
187
-        };
188
-    }
189
-
190
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
191
-        const nextNavigationState = nextProps.state.routes[0].state;
192
-        const nextRoute = nextNavigationState.routes[nextNavigationState.index].name;
193
-
194
-        let currentRoute = "main";
195
-        const currentNavigationState = this.props.state.routes[0].state;
196
-        if (currentNavigationState != null) {
197
-            currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
198
-        }
199
-
200
-
201
-        this.activeRoute = nextRoute;
202
-        return (nextState !== this.state)
203
-            || (nextRoute !== currentRoute);
204
-    }
205
-
206
-    showDisconnectDialog = () => this.setState({dialogVisible: true});
207
-
208
-    hideDisconnectDialog = () => this.setState({dialogVisible: false});
209
-
210
-    onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
211
-
212
-    /**
213
-     * Gets the render item for the given list item
214
-     *
215
-     * @param item The item to render
216
-     * @return {*}
217
-     */
218
-    getRenderItem = ({item}: Object) => {
219
-        return <SideBarSection
220
-            {...this.props}
221
-            listKey={item.key}
222
-            activeRoute={this.activeRoute}
223
-            isLoggedIn={this.state.isLoggedIn}
224
-            sectionName={item.name}
225
-            startOpen={item.startOpen}
226
-            listData={item.data}
227
-        />
228
-    };
229
-
230
-    render() {
231
-        return (
232
-            <View style={{height: '100%'}}>
233
-                <TouchableRipple
234
-                    onPress={() => this.props.navigation.navigate("tetris")}
235
-                >
236
-                    <Image
237
-                        source={require("../../../assets/drawer-cover.png")}
238
-                        style={styles.drawerCover}
239
-                    />
240
-                </TouchableRipple>
241
-                {/*$FlowFixMe*/}
242
-                <FlatList
243
-                    data={this.dataSet}
244
-                    extraData={this.state.isLoggedIn.toString() + this.activeRoute}
245
-                    renderItem={this.getRenderItem}
246
-                />
247
-                <LogoutDialog
248
-                    {...this.props}
249
-                    visible={this.state.dialogVisible}
250
-                    onDismiss={this.hideDisconnectDialog}
251
-                />
252
-            </View>
253
-        );
254
-    }
255
-}
256
-
257
-const styles = StyleSheet.create({
258
-    drawerCover: {
259
-        height: deviceWidth / 3,
260
-        width: 2 * deviceWidth / 3,
261
-        position: "relative",
262
-        marginBottom: 10,
263
-        marginTop: 20
264
-    },
265
-});
266
-
267
-export default SideBar;

src/navigation/DrawerNavigator.js → src/navigation/MainNavigator.js View File

@@ -7,7 +7,7 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
7 7
 import DebugScreen from '../screens/About/DebugScreen';
8 8
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
9 9
 import i18n from "i18n-js";
10
-import TabNavigator from "./MainTabNavigator";
10
+import TabNavigator from "./TabNavigator";
11 11
 import TetrisScreen from "../screens/Tetris/TetrisScreen";
12 12
 
13 13
 const defaultScreenOptions = {
@@ -76,7 +76,7 @@ type Props = {
76 76
     defaultHomeData: { [key: string]: any }
77 77
 }
78 78
 
79
-export default class DrawerNavigator extends React.Component<Props> {
79
+export default class MainNavigator extends React.Component<Props> {
80 80
 
81 81
     createTabNavigator: () => React.Node;
82 82
 

src/navigation/MainTabNavigator.js → src/navigation/TabNavigator.js View File


Loading…
Cancel
Save