Merge remote-tracking branch 'origin/dev' into dev

components/Lists/ProximoListItem.js

@@ -8,9 +8,10 @@ type Props = {
     onPress: Function,
     color: string,
     item: Object,
+    height: number,
 }
 
-class ProximoListItem extends React.PureComponent<Props> {
+class ProximoListItem extends React.Component<Props> {
 
     colors: Object;
 
@@ -19,6 +20,10 @@ class ProximoListItem extends React.PureComponent<Props> {
         this.colors = props.theme.colors;
     }
 
+    shouldComponentUpdate() {
+        return false;
+    }
+
     render() {
         return (
             <List.Item
@@ -32,6 +37,10 @@ class ProximoListItem extends React.PureComponent<Props> {
                     <Text style={{fontWeight: "bold"}}>
                         {this.props.item.price}€
                     </Text>}
+                style={{
+                    height: this.props.height,
+                    justifyContent: 'center',
+                }}
             />
         );
     }

components/Sidebar/Sidebar.js

@@ -4,13 +4,12 @@ import * as React from 'react';
 import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
 import i18n from "i18n-js";
 import {openBrowser} from "../../utils/WebBrowser";
-import SidebarDivider from "./SidebarDivider";
-import SidebarItem from "./SidebarItem";
-import {TouchableRipple, withTheme} from "react-native-paper";
+import {Drawer, TouchableRipple, withTheme} from "react-native-paper";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../Amicale/LogoutDialog";
 
 const deviceWidth = Dimensions.get("window").width;
+const LIST_ITEM_HEIGHT = 48;
 
 type Props = {
     navigation: Object,
@@ -21,16 +20,16 @@ type Props = {
 type State = {
     isLoggedIn: boolean,
     dialogVisible: boolean,
+    activeRoute: string;
 };
 
 /**
  * Component used to render the drawer menu content
  */
-class SideBar extends React.PureComponent<Props, State> {
+class SideBar extends React.Component<Props, State> {
 
     dataSet: Array<Object>;
 
-    getRenderItem: Function;
     colors: Object;
 
     /**
@@ -151,23 +150,37 @@ class SideBar extends React.PureComponent<Props, State> {
                 icon: "information",
             },
         ];
-        this.getRenderItem = this.getRenderItem.bind(this);
         this.colors = props.theme.colors;
-        ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
+        ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
+        this.props.navigation.addListener('state', this.onRouteChange);
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
+            activeRoute: 'Main',
         };
     }
 
+    onRouteChange = (event) => {
+        if (event.data.state.routes !== undefined) {
+            const route = event.data.state.routes[0]; // get the current route (ROOT)
+            if (route.state !== undefined) {
+                const state = route.state; // Get the Drawer's state if it exists
+                // Get the current route name. This will only show Drawer routes.
+                // Tab routes will be shown as 'Main'
+                const routeName = state.routeNames[state.index];
+                if (this.state.activeRoute !== routeName)
+                    this.setState({activeRoute: routeName});
+            }
+
+        }
+    };
+
     showDisconnectDialog = () => this.setState({dialogVisible: true});
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
 
-    onLoginStateChange(isLoggedIn: boolean) {
-        this.setState({isLoggedIn: isLoggedIn});
-    }
+    onLoginStateChange = (isLoggedIn: boolean) => this.setState({isLoggedIn: isLoggedIn});
 
     /**
      * Callback when a drawer item is pressed.
@@ -200,7 +213,7 @@ class SideBar extends React.PureComponent<Props, State> {
      * @param item The item to render
      * @return {*}
      */
-    getRenderItem({item}: Object) {
+    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;
@@ -209,20 +222,31 @@ class SideBar extends React.PureComponent<Props, State> {
             return null;
         else if (item.icon !== undefined) {
             return (
-                <SidebarItem
-                    title={item.name}
+                <Drawer.Item
+                    label={item.name}
+                    active={this.state.activeRoute === item.route}
                     icon={item.icon}
                     onPress={onListItemPress}
-                    shouldEmphasis={shouldEmphasis}
+                    style={{
+                        height: LIST_ITEM_HEIGHT,
+                        justifyContent: 'center',
+                    }}
                 />
             );
         } else {
             return (
-                <SidebarDivider title={item.name}/>
+                <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'});
@@ -239,9 +263,11 @@ class SideBar extends React.PureComponent<Props, State> {
                 {/*$FlowFixMe*/}
                 <FlatList
                     data={this.dataSet}
-                    extraData={this.state.isLoggedIn}
+                    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}

components/Sidebar/SidebarDivider.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import {withTheme} from 'react-native-paper';
-import {DrawerItem} from "@react-navigation/drawer";
-
-/**
- * Component used to render a drawer menu item divider
- *
- * @param props Props to pass to the component
- * @return {*}
- */
-function SidebarDivider(props) {
-    const {colors} = props.theme;
-    return (
-        <DrawerItem
-            label={props.title}
-            focused={false}
-            onPress={undefined}
-            style={{
-                marginLeft: 0,
-                marginRight: 0,
-                padding: 0,
-                borderRadius: 0,
-                backgroundColor: colors.dividerBackground
-            }}
-        />
-    );
-}
-
-export default withTheme(SidebarDivider);

components/Sidebar/SidebarItem.js

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import {withTheme} from 'react-native-paper';
-import {DrawerItem} from "@react-navigation/drawer";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
-
-/**
- * Component used to render a drawer menu item
- *
- * @param props Props to pass to the component
- * @return {*}
- */
-function SidebarItem(props) {
-    const {colors} = props.theme;
-    return (
-        <DrawerItem
-            label={props.title}
-            focused={false}
-            onPress={props.onPress}
-            icon={({color, size}) =>
-                <MaterialCommunityIcons color={props.shouldEmphasis ? colors.primary : color} size={size} name={props.icon}/>}
-            style={{
-                marginLeft: 0,
-                marginRight: 0,
-                padding: 0,
-                borderRadius: 0,
-            }}
-            labelStyle={{
-                color: colors.text,
-            }}
-        />
-    );
-}
-
-export default withTheme(SidebarItem);

screens/HomeScreen.js

@@ -37,10 +37,6 @@ type Props = {
  */
 class HomeScreen extends React.Component<Props> {
 
-    onProxiwashClick: Function;
-    onTutorInsaClick: Function;
-    onMenuClick: Function;
-    onProximoClick: Function;
     getRenderItem: Function;
     createDataset: Function;
 
@@ -50,10 +46,6 @@ class HomeScreen extends React.Component<Props> {
 
     constructor(props) {
         super(props);
-        this.onProxiwashClick = this.onProxiwashClick.bind(this);
-        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
-        this.onMenuClick = this.onMenuClick.bind(this);
-        this.onProximoClick = this.onProximoClick.bind(this);
         this.getRenderItem = this.getRenderItem.bind(this);
         this.createDataset = this.createDataset.bind(this);
         this.colors = props.theme.colors;
@@ -101,21 +93,13 @@ class HomeScreen extends React.Component<Props> {
         />;
     };
 
-    onProxiwashClick() {
-        this.props.navigation.navigate('Proxiwash');
-    }
+    onProxiwashClick = () => this.props.navigation.navigate('Proxiwash');
 
-    onTutorInsaClick() {
-        openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
-    }
+    onTutorInsaClick = () => openBrowser("https://www.etud.insa-toulouse.fr/~tutorinsa/", this.colors.primary);
 
-    onProximoClick() {
-        this.props.navigation.navigate('Proximo');
-    }
+    onProximoClick = () => this.props.navigation.navigate('Proximo');
 
-    onMenuClick() {
-        this.props.navigation.navigate('SelfMenuScreen');
-    }
+    onMenuClick = () => this.props.navigation.navigate('SelfMenuScreen');
 
     /**
      * Creates the dataset to be used in the FlatList

screens/Proximo/ProximoListScreen.js

@@ -32,6 +32,8 @@ function sortNameReverse(a, b) {
     return 0;
 }
 
+const LIST_ITEM_HEIGHT = 84;
+
 type Props = {
     navigation: Object,
     route: Object,
@@ -299,6 +301,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                     item={item}
                     onPress={onPress}
                     color={color}
+                    height={LIST_ITEM_HEIGHT}
                 />
             );
         } else
@@ -324,6 +327,8 @@ class ProximoListScreen extends React.Component<Props, State> {
         this.modalRef = ref;
     };
 
+    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+
     render() {
         return (
             <View style={{
@@ -338,6 +343,10 @@ class ProximoListScreen extends React.Component<Props, State> {
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
                     keyExtractor={this.keyExtractor}
                     renderItem={this.renderItem}
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                    removeClippedSubviews={true}
+                    getItemLayout={this.itemLayout}
+                    initialNumToRender={10}
                 />
             </View>
         );