Browse Source

Implemented search into each category instead of its own screen

Yohan Simard 2 years ago
parent
commit
d614e8a1ed

+ 1
- 3
navigation/AppNavigator.js View File

@@ -5,7 +5,6 @@ import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigat
5 5
 import SettingsScreen from '../screens/SettingsScreen';
6 6
 import AboutScreen from '../screens/About/AboutScreen';
7 7
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
8
-import ProximoSearchScreen from "../screens/Proximo/ProximoSearchScreen";
9 8
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
10 9
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
11 10
 import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
@@ -27,7 +26,6 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
27 26
                 Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
28 27
                 // Drawer: MainDrawerNavigator,
29 28
                 ProximoListScreen: {screen: ProximoListScreen},
30
-                ProximoSearchScreen: {screen: ProximoSearchScreen},
31 29
                 SettingsScreen: {screen: SettingsScreen},
32 30
                 AboutScreen: {screen: AboutScreen},
33 31
                 AboutDependenciesScreen: {screen: AboutDependenciesScreen},
@@ -44,7 +42,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
44 42
                 initialRouteName: "Main",
45 43
                 mode: 'card',
46 44
                 headerMode: "none",
47
-                // transitionConfig: () => fromRight(),
45
+                transitionConfig: () => fromRight(),
48 46
             })
49 47
     );
50 48
 }

+ 38
- 6
screens/Proximo/ProximoListScreen.js View File

@@ -51,6 +51,7 @@ type State = {
51 51
     sortPriceIcon: React.Node,
52 52
     sortNameIcon: React.Node,
53 53
     modalCurrentDisplayItem: Object,
54
+    currentlyDisplayedData: Array<Object>,
54 55
 };
55 56
 
56 57
 /**
@@ -59,19 +60,21 @@ type State = {
59 60
 export default class ProximoListScreen extends React.Component<Props, State> {
60 61
 
61 62
     modalRef: { current: null | Modalize };
63
+    originalData: Array<Object>;
62 64
 
63 65
     constructor(props: any) {
64 66
         super(props);
65 67
         this.modalRef = React.createRef();
68
+        this.originalData = this.props.navigation.getParam('data', []);
66 69
     }
67 70
 
68 71
     state = {
69
-        navData: this.props.navigation.getParam('data', []).sort(sortPrice),
72
+        currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice),
70 73
         currentSortMode: sortMode.price,
71 74
         isSortReversed: false,
72 75
         sortPriceIcon: '',
73 76
         sortNameIcon: '',
74
-        modalCurrentDisplayItem: {}
77
+        modalCurrentDisplayItem: {},
75 78
     };
76 79
 
77 80
     _menu: Menu;
@@ -111,7 +114,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
111 114
             currentSortMode: mode,
112 115
             isSortReversed: isReverse
113 116
         });
114
-        let data = this.state.navData;
117
+        let data = this.state.currentlyDisplayedData;
115 118
         switch (mode) {
116 119
             case sortMode.price:
117 120
                 if (isReverse) {
@@ -192,6 +195,35 @@ export default class ProximoListScreen extends React.Component<Props, State> {
192 195
         }
193 196
     }
194 197
 
198
+
199
+    sanitizeString(str: string) {
200
+        return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
201
+    }
202
+
203
+    /**
204
+     * Returns only the articles whose name contains str. Case and accents insensitive.
205
+     * @param str
206
+     * @returns {[]}
207
+     */
208
+    filterData(str: string) {
209
+        let filteredData = [];
210
+        const testStr = this.sanitizeString(str);
211
+        const articles = this.originalData;
212
+        for (const article of articles) {
213
+            const name = this.sanitizeString(article.name);
214
+            if (name.includes(testStr)) {
215
+                filteredData.push(article)
216
+            }
217
+        }
218
+        return filteredData;
219
+    }
220
+
221
+    search(str: string) {
222
+        this.setState({
223
+            currentlyDisplayedData: this.filterData(str)
224
+        })
225
+    }
226
+
195 227
     getModalContent() {
196 228
         return (
197 229
             <View style={{
@@ -277,13 +309,13 @@ export default class ProximoListScreen extends React.Component<Props, State> {
277 309
                     hasBackButton={true}
278 310
                     navigation={nav}
279 311
                     hasSearchField={true}
280
-                    searchCallback={(text) => console.log(text)}
312
+                    searchCallback={(text) => this.search(text)}
281 313
                     rightButton={this.getSortMenu()}/>
282 314
 
283 315
                 <Content>
284 316
                     <FlatList
285
-                        data={this.state.navData}
286
-                        extraData={this.state.navData}
317
+                        data={this.state.currentlyDisplayedData}
318
+                        extraData={this.state.currentlyDisplayedData}
287 319
                         keyExtractor={(item) => item.name + item.code}
288 320
                         style={{minHeight: 300, width: '100%'}}
289 321
                         renderItem={({item}) =>

+ 10
- 21
screens/Proximo/ProximoMainScreen.js View File

@@ -102,25 +102,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
102 102
 
103 103
     getRightButton() {
104 104
         return (
105
-            <View
106
-                style={{
107
-                    flexDirection: 'row'
108
-                }}>
109
-                <Touchable
110
-                    style={{padding: 6}}
111
-                    onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
112
-                    <CustomMaterialIcon
113
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
114
-                        icon="magnify"/>
115
-                </Touchable>
116
-                <Touchable
117
-                    style={{padding: 6}}
118
-                    onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
119
-                    <CustomMaterialIcon
120
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
121
-                        icon="information"/>
122
-                </Touchable>
123
-            </View>
105
+            <Touchable
106
+                style={{padding: 6}}
107
+                onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
108
+                <CustomMaterialIcon
109
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
110
+                    icon="information"/>
111
+            </Touchable>
124 112
         );
125 113
     }
126 114
 
@@ -138,15 +126,16 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
138 126
                         <CustomMaterialIcon
139 127
                             icon={item.type.icon}
140 128
                             fontSize={30}
129
+                            color={ThemeManager.getCurrentThemeVariables().brandPrimary}
141 130
                         />
142 131
                     </Left>
143 132
                     <Body>
144 133
                         <Text>
145 134
                             {item.type.name}
146 135
                         </Text>
147
-                        <Badge><Text>
136
+                        <Text note>
148 137
                             {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
149
-                        </Text></Badge>
138
+                        </Text>
150 139
                     </Body>
151 140
                     <Right>
152 141
                         <CustomMaterialIcon icon="chevron-right"/>

+ 0
- 115
screens/Proximo/ProximoSearchScreen.js View File

@@ -1,115 +0,0 @@
1
-// @flow
2
-
3
-import * as React from 'react';
4
-import {Body, Container, Content, Left, ListItem, Right, Text, Thumbnail,} from 'native-base';
5
-import {FlatList} from "react-native";
6
-import i18n from "i18n-js";
7
-import ThemeManager from "../../utils/ThemeManager";
8
-import CustomHeader from "../../components/CustomHeader";
9
-
10
-type Props = {
11
-    navigation: Object,
12
-};
13
-
14
-type State = {
15
-    filteredData: Array<Object>,
16
-};
17
-
18
-/**
19
- * Class defining proximo's article list of a certain category.
20
- */
21
-export default class ProximoSearchScreen extends React.Component<Props, State> {
22
-
23
-    state = {
24
-        filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles,
25
-    };
26
-
27
-    /**
28
-     * get color depending on quantity available
29
-     *
30
-     * @param availableStock
31
-     * @return
32
-     */
33
-    getStockColor(availableStock: number) {
34
-        let color: string;
35
-        if (availableStock > 3)
36
-            color = ThemeManager.getCurrentThemeVariables().brandSuccess;
37
-        else if (availableStock > 0)
38
-            color = ThemeManager.getCurrentThemeVariables().brandWarning;
39
-        else
40
-            color = ThemeManager.getCurrentThemeVariables().brandDanger;
41
-        return color;
42
-    }
43
-
44
-
45
-    showItemDetails(item: Object) {
46
-        //TODO: implement onClick function (copy-paste from ProximoListScreen)
47
-    }
48
-
49
-    /**
50
-     * Returns only the articles whose name contains str. Case and accents insensitive.
51
-     * @param str
52
-     * @returns {[]}
53
-     */
54
-    filterData(str: string) {
55
-        let filteredData = [];
56
-        const testStr: String = str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
57
-        const articles: Object = this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles;
58
-        for (const article: Object of articles) {
59
-            const name: String = String(article.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
60
-            if (name.includes(testStr)) {
61
-                filteredData.push(article)
62
-            }
63
-        }
64
-        return filteredData;
65
-    }
66
-
67
-    search(str: string) {
68
-        this.setState({
69
-            filteredData: this.filterData(str)
70
-        })
71
-    }
72
-
73
-    render() {
74
-        return (
75
-            <Container>
76
-                <CustomHeader
77
-                    hasBackButton={true}
78
-                    navigation={this.props.navigation}
79
-                    hasSearchField={true}
80
-                    searchCallback={(text) => this.search(text)}/>
81
-                <Content>
82
-                    <FlatList
83
-                        data={this.state.filteredData}
84
-                        keyExtractor={(item) => item.name + item.code}
85
-                        style={{minHeight: 300, width: '100%'}}
86
-                        renderItem={({item}) =>
87
-                            <ListItem
88
-                                thumbnail
89
-                                onPress={() => {this.showItemDetails(item);}} >
90
-                                <Left>
91
-                                    <Thumbnail square source={{uri: item.image}}/>
92
-                                </Left>
93
-                                <Body>
94
-                                    <Text style={{marginLeft: 20}}>
95
-                                        {item.name}
96
-                                    </Text>
97
-                                    <Text note style={{
98
-                                        marginLeft: 20,
99
-                                        color: this.getStockColor(parseInt(item.quantity))
100
-                                    }}>
101
-                                        {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
102
-                                    </Text>
103
-                                </Body>
104
-                                <Right>
105
-                                    <Text style={{fontWeight: "bold"}}>
106
-                                        {item.price}€
107
-                                    </Text>
108
-                                </Right>
109
-                            </ListItem>}
110
-                    />
111
-                </Content>
112
-            </Container>
113
-        );
114
-    }
115
-}

Loading…
Cancel
Save