Hide side bar items in accordions

src/components/Sidebar/SideBarSection.js

@@ -0,0 +1,156 @@
+// @flow
+
+import * as React from 'react';
+import {FlatList} from "react-native";
+import {Drawer, List, withTheme} from 'react-native-paper';
+import {openBrowser} from "../../utils/WebBrowser";
+
+type Props = {
+    navigation: Object,
+    startOpen: boolean,
+    isLoggedIn: boolean,
+    sectionName: string,
+    activeRoute: string,
+    listKey: string,
+    listData: Array<Object>,
+}
+
+type State = {
+    expanded: boolean
+}
+
+const LIST_ITEM_HEIGHT = 48;
+
+class SideBarSection extends React.PureComponent<Props, State> {
+
+    state = {
+        expanded: this.props.startOpen,
+    };
+
+    colors: Object;
+    shouldExpand: boolean;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    /**
+     * Searches if the current route is contained in the given list data.
+     * If this is the case and the list is collapsed, we should expand this list.
+     *
+     * @return boolean
+     */
+    shouldExpandList() {
+        for (let i = 0; i < this.props.listData.length; i++) {
+            if (this.props.listData[i].route === this.props.activeRoute) {
+                return this.state.expanded === false;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Callback when a drawer item is pressed.
+     * It will either navigate to the associated screen, or open the browser to the associated link
+     *
+     * @param item The item pressed
+     */
+    onListItemPress(item: Object) {
+        if (item.link !== undefined)
+            openBrowser(item.link, this.colors.primary);
+        else if (item.action !== undefined)
+            item.action();
+        else
+            this.props.navigation.navigate(item.route);
+    }
+
+    /**
+     * Key extractor for list items
+     *
+     * @param item The item to extract the key from
+     * @return {string} The extracted key
+     */
+    listKeyExtractor = (item: Object) => item.route;
+
+    shouldHideItem(item: Object) {
+        const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
+        const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
+        return (onlyWhenLoggedIn && !this.props.isLoggedIn || onlyWhenLoggedOut && this.props.isLoggedIn);
+    }
+
+    /**
+     * Gets the render item for the given list item
+     *
+     * @param item The item to render
+     * @return {*}
+     */
+    getRenderItem = ({item}: Object) => {
+        const onListItemPress = this.onListItemPress.bind(this, item);
+        if (this.shouldHideItem(item))
+            return null;
+        return (
+            <Drawer.Item
+                label={item.name}
+                active={this.props.activeRoute === item.route}
+                icon={item.icon}
+                onPress={onListItemPress}
+                style={{
+                    height: LIST_ITEM_HEIGHT,
+                    justifyContent: 'center',
+                }}
+            />
+        );
+    };
+
+    toggleAccordion = () => {
+        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
+            this.setState({expanded: !this.state.expanded})
+    };
+
+    shouldRenderAccordion() {
+        let itemsToRender = 0;
+        for (let i = 0; i < this.props.listData.length; i++) {
+            if (!this.shouldHideItem(this.props.listData[i]))
+                itemsToRender += 1;
+        }
+        return itemsToRender > 1;
+    }
+
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+
+    getFlatList() {
+        return (
+            // $FlowFixMe
+            <FlatList
+                data={this.props.listData}
+                extraData={this.props.isLoggedIn.toString() + this.props.activeRoute}
+                renderItem={this.getRenderItem}
+                keyExtractor={this.listKeyExtractor}
+                listKey={this.props.listKey}
+                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                getItemLayout={this.itemLayout}
+            />
+        );
+    }
+
+    render() {
+        if (this.shouldRenderAccordion()) {
+            this.shouldExpand = this.shouldExpandList();
+            if (this.shouldExpand)
+                this.toggleAccordion();
+            return (
+                <List.Accordion
+                    title={this.props.sectionName}
+                    expanded={this.state.expanded}
+                    onPress={this.toggleAccordion}
+                >
+                    {this.getFlatList()}
+                </List.Accordion>
+            );
+        } else
+            return this.getFlatList();
+    }
+}
+
+export default withTheme(SideBarSection);

src/components/Sidebar/Sidebar.js

@@ -1,15 +1,14 @@
 // @flow
 
 import * as React from 'react';
-import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
+import {Dimensions, FlatList, Image, StyleSheet, View,} from 'react-native';
 import i18n from "i18n-js";
-import {openBrowser} from "../../utils/WebBrowser";
-import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
+import {TouchableRipple} from "react-native-paper";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../Amicale/LogoutDialog";
+import SideBarSection from "./SideBarSection";
 
 const deviceWidth = Dimensions.get("window").width;
-const LIST_ITEM_HEIGHT = 48;
 
 type Props = {
     navigation: Object,
@@ -30,8 +29,6 @@ class SideBar extends React.Component<Props, State> {
 
     dataSet: Array<Object>;
 
-    colors: Object;
-
     /**
      * Generate the dataset
      *
@@ -40,16 +37,14 @@ class SideBar extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         // Dataset used to render the drawer
-        this.dataSet = [
+        const mainData = [
             {
                 name: i18n.t('screens.home'),
                 route: "Main",
                 icon: "home",
             },
-            {
-                name: i18n.t('sidenav.divider4'),
-                route: "Divider4"
-            },
+        ];
+        const amicaleData = [
             {
                 name: i18n.t('screens.login'),
                 route: "LoginScreen",
@@ -82,10 +77,8 @@ class SideBar extends React.Component<Props, State> {
                 icon: "logout",
                 onlyWhenLoggedIn: true,
             },
-            {
-                name: i18n.t('sidenav.divider2'),
-                route: "Divider2"
-            },
+        ];
+        const servicesData = [
             {
                 name: i18n.t('screens.menuSelf'),
                 route: "SelfMenuScreen",
@@ -113,10 +106,8 @@ class SideBar extends React.Component<Props, State> {
                 link: "https://ent.insa-toulouse.fr/",
                 icon: "notebook",
             },
-            {
-                name: i18n.t('sidenav.divider1'),
-                route: "Divider1"
-            },
+        ];
+        const websitesData = [
             {
                 name: "Amicale",
                 route: "AmicaleScreen",
@@ -141,10 +132,8 @@ class SideBar extends React.Component<Props, State> {
                 link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
                 icon: "school",
             },
-            {
-                name: i18n.t('sidenav.divider3'),
-                route: "Divider3"
-            },
+        ];
+        const othersData = [
             {
                 name: i18n.t('screens.settings'),
                 route: "SettingsScreen",
@@ -156,7 +145,39 @@ class SideBar extends React.Component<Props, State> {
                 icon: "information",
             },
         ];
-        this.colors = props.theme.colors;
+
+        this.dataSet = [
+            {
+                key: '1',
+                name: i18n.t('screens.home'),
+                startOpen: true, // App always starts on Main
+                data: mainData
+            },
+            {
+                key: '2',
+                name: i18n.t('sidenav.divider4'),
+                startOpen: false, // TODO set by user preferences
+                data: amicaleData
+            },
+            {
+                key: '3',
+                name: i18n.t('sidenav.divider2'),
+                startOpen: false,
+                data: servicesData
+            },
+            {
+                key: '4',
+                name: i18n.t('sidenav.divider1'),
+                startOpen: false,
+                data: websitesData
+            },
+            {
+                key: '5',
+                name: i18n.t('sidenav.divider3'),
+                startOpen: false,
+                data: othersData
+            },
+        ];
         ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
         this.props.navigation.addListener('state', this.onRouteChange);
         this.state = {
@@ -166,7 +187,7 @@ class SideBar extends React.Component<Props, State> {
         };
     }
 
-    onRouteChange = (event) => {
+    onRouteChange = (event: Object) => {
         try {
             const state = event.data.state.routes[0].state; // Get the Drawer's state if it exists
             // Get the current route name. This will only show Drawer routes.
@@ -174,7 +195,7 @@ class SideBar extends React.Component<Props, State> {
             const routeName = state.routeNames[state.index];
             if (this.state.activeRoute !== routeName)
                 this.setState({activeRoute: routeName});
-        } catch(e) {
+        } catch (e) {
             this.setState({activeRoute: 'Main'});
         }
 
@@ -184,34 +205,8 @@ class SideBar extends React.Component<Props, State> {
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
-
     onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
 
-    /**
-     * Callback when a drawer item is pressed.
-     * It will either navigate to the associated screen, or open the browser to the associated link
-     *
-     * @param item The item pressed
-     */
-    onListItemPress(item: Object) {
-        if (item.link !== undefined)
-            openBrowser(item.link, this.colors.primary);
-        else if (item.action !== undefined)
-            item.action();
-        else
-            this.props.navigation.navigate(item.route);
-    }
-
-    /**
-     * Key extractor for list items
-     *
-     * @param item The item to extract the key from
-     * @return {string} The extracted key
-     */
-    listKeyExtractor(item: Object): string {
-        return item.route;
-    }
-
     /**
      * Gets the render item for the given list item
      *
@@ -219,46 +214,22 @@ class SideBar extends React.Component<Props, State> {
      * @return {*}
      */
     getRenderItem = ({item}: Object) => {
-        const onListItemPress = this.onListItemPress.bind(this, item);
-        const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
-        const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
-        const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true;
-        if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
-            return null;
-        else if (item.icon !== undefined) {
-            return (
-                <Drawer.Item
-                    label={item.name}
-                    active={this.state.activeRoute === item.route}
-                    icon={item.icon}
-                    onPress={onListItemPress}
-                    style={{
-                        height: LIST_ITEM_HEIGHT,
-                        justifyContent: 'center',
-                    }}
-                />
-            );
-        } else {
-            return (
-                <Drawer.Item
-                    label={item.name}
-                    style={{
-                        height: LIST_ITEM_HEIGHT,
-                        justifyContent: 'center',
-                    }}
-                />
-            );
-        }
+        return <SideBarSection
+            {...this.props}
+            listKey={item.key}
+            activeRoute={this.state.activeRoute}
+            isLoggedIn={this.state.isLoggedIn}
+            sectionName={item.name}
+            startOpen={item.startOpen}
+            listData={item.data}
+        />
     };
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
-
     render() {
-        const onPress = this.onListItemPress.bind(this, {route: 'TetrisScreen'});
         return (
             <View style={{height: '100%'}}>
                 <TouchableRipple
-                    onPress={onPress}
+                    onPress={() => this.props.navigation.navigate("TetrisScreen")}
                 >
                     <Image
                         source={require("../../../assets/drawer-cover.png")}
@@ -269,10 +240,7 @@ class SideBar extends React.Component<Props, State> {
                 <FlatList
                     data={this.dataSet}
                     extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
-                    keyExtractor={this.listKeyExtractor}
                     renderItem={this.getRenderItem}
-                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    getItemLayout={this.itemLayout}
                 />
                 <LogoutDialog
                     {...this.props}
@@ -292,17 +260,6 @@ const styles = StyleSheet.create({
         marginBottom: 10,
         marginTop: 20
     },
-    text: {
-        fontWeight: Platform.OS === "ios" ? "500" : "400",
-        fontSize: 16,
-        marginLeft: 20
-    },
-    badgeText: {
-        fontSize: Platform.OS === "ios" ? 13 : 11,
-        fontWeight: "400",
-        textAlign: "center",
-        marginTop: Platform.OS === "android" ? -3 : undefined
-    }
 });
 
-export default withTheme(SideBar);
+export default SideBar;

src/screens/About/AboutDependenciesScreen.js

@@ -32,23 +32,40 @@ type Props = {
     route: Object
 }
 
+const LIST_ITEM_HEIGHT = 64;
+
 /**
  * Class defining a screen showing the list of libraries used by the app, taken from package.json
  */
 export default class AboutDependenciesScreen extends React.Component<Props> {
 
+    data: Array<Object>;
+
+    constructor() {
+        super();
+        this.data = generateListFromObject(packageJson.dependencies);
+    }
+
+    keyExtractor = (item: Object) => item.name;
+
+    renderItem = ({item}: Object) =>
+        <List.Item
+            title={item.name}
+            description={item.version.replace('^', '').replace('~', '')}
+            style={{height: LIST_ITEM_HEIGHT}}
+        />;
+
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+
     render() {
-        const data = generateListFromObject(packageJson.dependencies);
         return (
             <FlatList
-                data={data}
-                keyExtractor={(item) => item.name}
-                style={{minHeight: 300, width: '100%'}}
-                renderItem={({item}) =>
-                    <List.Item
-                        title={item.name}
-                        description={item.version.replace('^', '').replace('~', '')}
-                    />}
+                data={this.data}
+                keyExtractor={this.keyExtractor}
+                renderItem={this.renderItem}
+                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                removeClippedSubviews={true}
+                getItemLayout={this.itemLayout}
             />
         );
     }

src/screens/About/DebugScreen.js

@@ -1,10 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, View} from "react-native";
+import {FlatList, View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import CustomModal from "../../components/Custom/CustomModal";
-import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
+import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
 
 type Props = {
     navigation: Object,
@@ -12,7 +12,7 @@ type Props = {
 
 type State = {
     modalCurrentDisplayItem: Object,
-    currentPreferences: Object,
+    currentPreferences: Array<Object>,
 }
 
 /**
@@ -23,10 +23,6 @@ class DebugScreen extends React.Component<Props, State> {
 
     modalRef: Object;
     modalInputValue = '';
-    state = {
-        modalCurrentDisplayItem: {},
-        currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
-    };
 
     onModalRef: Function;
 
@@ -36,40 +32,20 @@ class DebugScreen extends React.Component<Props, State> {
         super(props);
         this.onModalRef = this.onModalRef.bind(this);
         this.colors = props.theme.colors;
+        let copy = {...AsyncStorageManager.getInstance().preferences};
+        console.log(copy);
+        let currentPreferences = [];
+        Object.values(copy).map((object) => {
+            currentPreferences.push(object);
+        });
+        this.state = {
+            modalCurrentDisplayItem: {},
+            currentPreferences: currentPreferences
+        };
     }
 
     /**
-     * Gets a clickable list item
-     *
-     * @param onPressCallback The function to call when clicking on the item
-     * @param icon The item's icon
-     * @param title The item's title
-     * @param subtitle The item's subtitle
-     * @return {*}
-     */
-    static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
-        if (icon !== undefined) {
-            return (
-                <List.Item
-                    title={title}
-                    description={subtitle}
-                    left={() => <List.Icon icon={icon}/>}
-                    onPress={onPressCallback}
-                />
-            );
-        } else {
-            return (
-                <List.Item
-                    title={title}
-                    description={subtitle}
-                    onPress={onPressCallback}
-                />
-            );
-        }
-    }
-
-    /**
-     * Show the
+     * Show the edit modal
      * @param item
      */
     showEditModal(item: Object) {
@@ -123,6 +99,17 @@ class DebugScreen extends React.Component<Props, State> {
         );
     }
 
+    findIndexOfKey(key: string) {
+        let index = -1;
+        for (let i = 0; i < this.state.currentPreferences.length; i++) {
+            if (this.state.currentPreferences[i].key === key) {
+                index = i;
+                break;
+            }
+        }
+        return index;
+    }
+
     /**
      * Saves the new value of the given preference
      *
@@ -131,11 +118,12 @@ class DebugScreen extends React.Component<Props, State> {
      */
     saveNewPrefs(key: string, value: string) {
         this.setState((prevState) => {
-            let currentPreferences = {...prevState.currentPreferences};
-            currentPreferences[key].current = value;
+            let currentPreferences = [...prevState.currentPreferences];
+            currentPreferences[this.findIndexOfKey(key)].current = value;
             return {currentPreferences};
         });
         AsyncStorageManager.getInstance().savePref(key, value);
+        this.modalRef.close();
     }
 
     /**
@@ -147,31 +135,28 @@ class DebugScreen extends React.Component<Props, State> {
         this.modalRef = ref;
     }
 
+    renderItem = ({item}: Object) => {
+        return (
+            <List.Item
+                title={item.key}
+                description={'Click to edit'}
+                onPress={() => this.showEditModal(item)}
+            />
+        );
+    };
+
     render() {
         return (
             <View>
                 <CustomModal onRef={this.onModalRef}>
                     {this.getModalContent()}
                 </CustomModal>
-                <ScrollView style={{padding: 5}}>
-                    <Card style={{margin: 5}}>
-                        <Card.Title
-                            title={'Preferences'}
-                        />
-                        <Card.Content>
-                            {Object.values(this.state.currentPreferences).map((object) =>
-                                <View>
-                                    {DebugScreen.getGeneralItem(
-                                        () => this.showEditModal(object),
-                                        undefined,
-                                        //$FlowFixMe
-                                        object.key,
-                                        'Click to edit')}
-                                </View>
-                            )}
-                        </Card.Content>
-                    </Card>
-                </ScrollView>
+                {/*$FlowFixMe*/}
+                <FlatList
+                    data={this.state.currentPreferences}
+                    extraData={this.state.currentPreferences}
+                    renderItem={this.renderItem}
+                />
             </View>
         );
     }