Set sort menu with modalize

screens/Proximo/ProximoListScreen.js

@@ -3,15 +3,9 @@
 import * as React from 'react';
 import {FlatList, Image, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../../utils/ThemeManager";
 import {Modalize} from 'react-native-modalize';
-import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper";
+import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
-
-const sortMode = {
-    price: "0",
-    name: '1',
-};
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -22,17 +16,17 @@ function sortPriceReverse(a, b) {
 }
 
 function sortName(a, b) {
-    if (a.name < b.name)
+    if (a.name.toLowerCase() < b.name.toLowerCase())
         return -1;
-    if (a.name > b.name)
+    if (a.name.toLowerCase() > b.name.toLowerCase())
         return 1;
     return 0;
 }
 
 function sortNameReverse(a, b) {
-    if (a.name < b.name)
+    if (a.name.toLowerCase() < b.name.toLowerCase())
         return 1;
-    if (a.name > b.name)
+    if (a.name.toLowerCase() > b.name.toLowerCase())
         return -1;
     return 0;
 }
@@ -43,13 +37,9 @@ type Props = {
 }
 
 type State = {
-    currentSortMode: string,
+    currentSortMode: number,
-    isSortReversed: boolean,
+    modalCurrentDisplayItem: React.Node,
-    sortPriceIcon: React.Node,
-    sortNameIcon: React.Node,
-    modalCurrentDisplayItem: Object,
     currentlyDisplayedData: Array<Object>,
-    menuVisible: boolean,
 };
 
 /**
@@ -62,10 +52,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     shouldFocusSearchBar: boolean;
 
     onSearchStringChange: Function;
-    onSelectSortModeName: Function;
-    onSelectSortModePrice: Function;
     onSortMenuPress: Function;
-    onSortMenuDismiss: Function;
     renderItem: Function;
 
     constructor(props: any) {
@@ -75,67 +62,42 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
         this.state = {
             currentlyDisplayedData: this.originalData,
-            currentSortMode: sortMode.price,
+            currentSortMode: 1,
-            isSortReversed: false,
+            modalCurrentDisplayItem: <View/>,
-            sortPriceIcon: '',
-            sortNameIcon: '',
-            modalCurrentDisplayItem: {},
-            menuVisible: false,
         };
 
         this.onSearchStringChange = this.onSearchStringChange.bind(this);
-        this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
-        this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
-        this.onSortMenuDismiss = this.onSortMenuPress.bind(this);
         this.renderItem = this.renderItem.bind(this);
     }
 
-
-    /**
-     * Sets the sort mode based on the one selected.
-     * If the selected mode is the current one, reverse it.
-     *
-     * @param mode The string representing the mode
-     */
-    sortModeSelected(mode: string) {
-        let isReverse = this.state.isSortReversed;
-        if (mode === this.state.currentSortMode) // reverse mode
-            isReverse = !isReverse; // this.state not updating on this function cycle
-        else
-            isReverse = false;
-        this.setSortMode(mode, isReverse);
-    }
-
     /**
      * Set the current sort mode.
      *
-     * @param mode The string representing the mode
+     * @param mode The number representing the mode
-     * @param isReverse Whether to use a reverse sort
      */
-    setSortMode(mode: string, isReverse: boolean) {
+    setSortMode(mode: number) {
         this.setState({
             currentSortMode: mode,
-            isSortReversed: isReverse
         });
         let data = this.state.currentlyDisplayedData;
         switch (mode) {
-            case sortMode.price:
+            case 1:
-                if (isReverse) {
-                    data.sort(sortPriceReverse);
-                } else {
                 data.sort(sortPrice);
-                }
                 break;
-            case sortMode.name:
+            case 2:
-                if (isReverse) {
+                data.sort(sortPriceReverse);
-                    data.sort(sortNameReverse);
+                break;
-                } else {
+            case 3:
                 data.sort(sortName);
-                }
+                break;
+            case 4:
+                data.sort(sortNameReverse);
                 break;
         }
-        this.setupSortIcons(mode, isReverse);
+        if (this.modalRef.current && mode !== this.state.currentSortMode) {
+            this.modalRef.current.close();
+        }
     }
 
     /**
@@ -148,7 +110,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
             headerRight: button,
             headerTitle: title,
         });
-        this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
+        this.setSortMode(1);
     }
 
     getSearchBar() {
@@ -177,42 +139,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         return color;
     }
 
-    /**
-     * Set the sort menu icon based on the given mode.
-     *
-     * @param mode The string representing the mode
-     * @param isReverse Whether to use a reversed icon
-     */
-    setupSortIcons(mode: string, isReverse: boolean) {
-        const downSortIcon =
-            <MaterialCommunityIcons
-                name={'sort-descending'}
-                size={26}/>;
-        const upSortIcon =
-            <MaterialCommunityIcons
-                name={'sort-ascending'}
-                size={26}/>;
-        switch (mode) {
-            case sortMode.price:
-                this.setState({sortNameIcon: ''});
-                if (isReverse) {
-                    this.setState({sortPriceIcon: upSortIcon});
-                } else {
-                    this.setState({sortPriceIcon: downSortIcon});
-                }
-                break;
-            case sortMode.name:
-                this.setState({sortPriceIcon: ''});
-                if (isReverse) {
-                    this.setState({sortNameIcon: upSortIcon});
-                } else {
-                    this.setState({sortNameIcon: downSortIcon});
-                }
-                break;
-        }
-    }
-
-
     sanitizeString(str: string) {
         return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
     }
@@ -241,81 +167,112 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         })
     }
 
-    getModalContent() {
+    getModalItemContent(item: Object) {
         return (
             <View style={{
                 flex: 1,
                 padding: 20
             }}>
-                <Title>{this.state.modalCurrentDisplayItem.name}</Title>
+                <Title>{item.name}</Title>
                 <View style={{
                     flexDirection: 'row',
                     width: '100%',
                     marginTop: 10,
                 }}>
                     <Subheading style={{
-                        color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
+                        color: this.getStockColor(parseInt(item.quantity)),
                     }}>
-                        {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
+                        {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
                     </Subheading>
-                    <Subheading style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</Subheading>
+                    <Subheading style={{marginLeft: 'auto'}}>{item.price}€</Subheading>
                 </View>
 
                 <ScrollView>
                     <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
                         <Image style={{flex: 1, resizeMode: "contain"}}
-                               source={{uri: this.state.modalCurrentDisplayItem.image}}/>
+                               source={{uri: item.image}}/>
                     </View>
-                    <Text>{this.state.modalCurrentDisplayItem.description}</Text>
+                    <Text>{item.description}</Text>
                 </ScrollView>
             </View>
         );
     }
 
+    getModalSortMenu() {
+        console.log(this.state.currentSortMode);
+        return (
+            <View style={{
+                flex: 1,
+                padding: 20
+            }}>
+                <Title>Sort Order</Title>
+                <RadioButton.Group
+                    onValueChange={value => this.setSortMode(value)}
+                    value={this.state.currentSortMode}
+                >
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}>
+                        <Text>{i18n.t('proximoScreen.sortPrice')}</Text>
+                        <RadioButton value={1}/>
+                    </View>
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}>
+                        <Text>{i18n.t('proximoScreen.sortPriceReverse')}</Text>
+                        <RadioButton value={2}/>
+                    </View>
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}>
+                        <Text>{i18n.t('proximoScreen.sortName')}</Text>
+                        <RadioButton value={3}/>
+                    </View>
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}>
+                        <Text>{i18n.t('proximoScreen.sortNameReverse')}</Text>
+                        <RadioButton value={4}/>
+                    </View>
+                </RadioButton.Group>
+            </View>
+        );
+    }
+
     onListItemPress(item: Object) {
         this.setState({
-            modalCurrentDisplayItem: item
+            modalCurrentDisplayItem: this.getModalItemContent(item)
         });
         if (this.modalRef.current) {
             this.modalRef.current.open();
         }
     }
 
-    onSelectSortModeName() {
-        this.sortModeSelected(sortMode.name);
-    }
-
-    onSelectSortModePrice() {
-        this.sortModeSelected(sortMode.price);
-    }
-
     onSortMenuPress() {
-        this.setState({menuVisible: true});
+        this.setState({
-        console.log('pressed');
+            modalCurrentDisplayItem: this.getModalSortMenu()
+        });
+        if (this.modalRef.current) {
+            this.modalRef.current.open();
         }
-
-    onSortMenuDismiss() {
-        this.setState({menuVisible: false});
     }
 
     getSortMenu() {
         return (
-            <Menu
-                visible={this.state.menuVisible}
-                onDismiss={this.onSortMenuDismiss}
-                anchor={
             <IconButton
                 icon="sort"
                 color={ThemeManager.getCurrentThemeVariables().text}
                 size={26}
                 onPress={this.onSortMenuPress}
             />
-                }
-            >
-                <Menu.Item onPress={this.onSelectSortModeName} title={i18n.t('proximoScreen.sortName')}/>
-                <Divider/>
-                <Menu.Item onPress={this.onSelectSortModePrice} title={i18n.t('proximoScreen.sortPrice')}/>
-            </Menu>
         );
     }
 
@@ -327,7 +284,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
                 descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
                 onPress={onPress}
-                left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} source={{uri: item.image}}/>}
+                left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
+                                             source={{uri: item.image}}/>}
                 right={props =>
                     <Text style={{fontWeight: "bold"}}>
                         {item.price}€
@@ -344,10 +302,14 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         console.log("rendering ProximoListScreen");
         return (
             <View>
-                <Modalize ref={this.modalRef}
+                <Modalize
+                    ref={this.modalRef}
                     adjustToContentHeight
-                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}>
+                    handlePosition={'inside'}
-                    {this.getModalContent()}
+                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}
+                    handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
+                >
+                    {this.state.modalCurrentDisplayItem}
                 </Modalize>
                 <FlatList
                     data={this.state.currentlyDisplayedData}

translations/en.json

@@ -65,7 +65,7 @@
     "startScreen": "Start Screen",
     "startScreenSub": "Select which screen to start the app on",
     "proxiwashNotifReminder": "Machine running reminder",
-    "proxiwashNotifReminderSub": "How many minutes before",
+    "proxiwashNotifReminderSub": "How many minutes before"
   },
   "homeScreen": {
     "listUpdated": "List updated!",
@@ -122,7 +122,9 @@
     "article": "Article",
     "articles": "Articles",
     "sortName": "Sort by name",
+    "sortNameReverse": "Sort by name (reverse)",
     "sortPrice": "Sort by price",
+    "sortPriceReverse": "Sort by price (reverse)",
     "listUpdated": "Article list updated!",
     "listUpdateFail": "Error while updating article list",
     "loading": "Loading...",

translations/fr.json

@@ -65,7 +65,7 @@
     "startScreen": "Écran de démarrage",
     "startScreenSub": "Choisissez l'écran utilisé au démarrage",
     "proxiwashNotifReminder": "Rappel de machine en cours",
-    "proxiwashNotifReminderSub": "Combien de minutes avant",
+    "proxiwashNotifReminderSub": "Combien de minutes avant"
   },
   "homeScreen": {
     "listUpdated": "List mise à jour!",
@@ -122,7 +122,9 @@
     "article": "Article",
     "articles": "Articles",
     "sortName": "Trier par nom",
+    "sortNameReverse": "Trier par nom (inversé)",
     "sortPrice": "Trier par prix",
+    "sortPriceReverse": "Trier par prix (inversé)",
     "listUpdated": "Liste d'articles mise à jour !",
     "listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
     "loading": "Chargement...",