src/components/Sidebar/SideBarSection.js

@@ -1,156 +0,0 @@
-// @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,14 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {Dimensions, FlatList, Image, StyleSheet, View,} from 'react-native';
+import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
 import i18n from "i18n-js";
-import {TouchableRipple} from "react-native-paper";
+import {openBrowser} from "../../utils/WebBrowser";
+import {Drawer, TouchableRipple, withTheme} 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,
@@ -29,6 +30,8 @@ class SideBar extends React.Component<Props, State> {
 
     dataSet: Array<Object>;
 
+    colors: Object;
+
     /**
      * Generate the dataset
      *
@@ -37,14 +40,16 @@ class SideBar extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         // Dataset used to render the drawer
-        const mainData = [
+        this.dataSet = [
             {
                 name: i18n.t('screens.home'),
                 route: "Main",
                 icon: "home",
             },
-        ];
+            {
-        const amicaleData = [
+                name: i18n.t('sidenav.divider4'),
+                route: "Divider4"
+            },
             {
                 name: i18n.t('screens.login'),
                 route: "LoginScreen",
@@ -77,8 +82,10 @@ class SideBar extends React.Component<Props, State> {
                 icon: "logout",
                 onlyWhenLoggedIn: true,
             },
-        ];
+            {
-        const servicesData = [
+                name: i18n.t('sidenav.divider2'),
+                route: "Divider2"
+            },
             {
                 name: i18n.t('screens.menuSelf'),
                 route: "SelfMenuScreen",
@@ -106,8 +113,10 @@ class SideBar extends React.Component<Props, State> {
                 link: "https://ent.insa-toulouse.fr/",
                 icon: "notebook",
             },
-        ];
+            {
-        const websitesData = [
+                name: i18n.t('sidenav.divider1'),
+                route: "Divider1"
+            },
             {
                 name: "Amicale",
                 route: "AmicaleScreen",
@@ -132,8 +141,10 @@ class SideBar extends React.Component<Props, State> {
                 link: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
                 icon: "school",
             },
-        ];
+            {
-        const othersData = [
+                name: i18n.t('sidenav.divider3'),
+                route: "Divider3"
+            },
             {
                 name: i18n.t('screens.settings'),
                 route: "SettingsScreen",
@@ -145,39 +156,7 @@ 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 = {
@@ -187,7 +166,7 @@ class SideBar extends React.Component<Props, State> {
         };
     }
 
-    onRouteChange = (event: Object) => {
+    onRouteChange = (event) => {
         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.
@@ -195,7 +174,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'});
         }
 
@@ -205,8 +184,34 @@ 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
      *
@@ -214,22 +219,46 @@ class SideBar extends React.Component<Props, State> {
      * @return {*}
      */
     getRenderItem = ({item}: Object) => {
-        return <SideBarSection
+        const onListItemPress = this.onListItemPress.bind(this, item);
-            {...this.props}
+        const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
-            listKey={item.key}
+        const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
-            activeRoute={this.state.activeRoute}
+        const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true;
-            isLoggedIn={this.state.isLoggedIn}
+        if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
-            sectionName={item.name}
+            return null;
-            startOpen={item.startOpen}
+        else if (item.icon !== undefined) {
-            listData={item.data}
+            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',
+                    }}
+                />
+            );
+        }
     };
 
+    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={() => this.props.navigation.navigate("TetrisScreen")}
+                    onPress={onPress}
                 >
                     <Image
                         source={require("../../../assets/drawer-cover.png")}
@@ -240,7 +269,10 @@ 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}
@@ -260,6 +292,17 @@ 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 SideBar;
+export default withTheme(SideBar);

src/screens/About/AboutDependenciesScreen.js

@@ -32,40 +32,23 @@ 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>;
+    render() {
-
+        const data = generateListFromObject(packageJson.dependencies);
-    constructor() {
+        return (
-        super();
+            <FlatList
-        this.data = generateListFromObject(packageJson.dependencies);
+                data={data}
-    }
+                keyExtractor={(item) => item.name}
-
+                style={{minHeight: 300, width: '100%'}}
-    keyExtractor = (item: Object) => item.name;
+                renderItem={({item}) =>
-
-    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() {
-        return (
-            <FlatList
-                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 {FlatList, View} from "react-native";
+import {ScrollView, View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import CustomModal from "../../components/Custom/CustomModal";
-import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
+import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
 
 type Props = {
     navigation: Object,
@@ -12,7 +12,7 @@ type Props = {
 
 type State = {
     modalCurrentDisplayItem: Object,
-    currentPreferences: Array<Object>,
+    currentPreferences: Object,
 }
 
 /**
@@ -23,6 +23,10 @@ class DebugScreen extends React.Component<Props, State> {
 
     modalRef: Object;
     modalInputValue = '';
+    state = {
+        modalCurrentDisplayItem: {},
+        currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
+    };
 
     onModalRef: Function;
 
@@ -32,20 +36,40 @@ 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
-        };
     }
 
     /**
-     * Show the edit modal
+     * 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
      * @param item
      */
     showEditModal(item: Object) {
@@ -99,17 +123,6 @@ 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
      *
@@ -118,12 +131,11 @@ class DebugScreen extends React.Component<Props, State> {
      */
     saveNewPrefs(key: string, value: string) {
         this.setState((prevState) => {
-            let currentPreferences = [...prevState.currentPreferences];
+            let currentPreferences = {...prevState.currentPreferences};
-            currentPreferences[this.findIndexOfKey(key)].current = value;
+            currentPreferences[key].current = value;
             return {currentPreferences};
         });
         AsyncStorageManager.getInstance().savePref(key, value);
-        this.modalRef.close();
     }
 
     /**
@@ -135,28 +147,31 @@ 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>
-                {/*$FlowFixMe*/}
+                <ScrollView style={{padding: 5}}>
-                <FlatList
+                    <Card style={{margin: 5}}>
-                    data={this.state.currentPreferences}
+                        <Card.Title
-                    extraData={this.state.currentPreferences}
+                            title={'Preferences'}
-                    renderItem={this.renderItem}
                         />
+                        <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>
             </View>
         );
     }