Browse Source

Improve planex group search performance

Arnaud Vergnet 2 years ago
parent
commit
e08fdc7c37

+ 5
- 15
src/components/Lists/PlanexGroups/GroupListAccordion.tsx View File

@@ -20,7 +20,6 @@
20 20
 import * as React from 'react';
21 21
 import { List, withTheme } from 'react-native-paper';
22 22
 import { FlatList, StyleSheet, View } from 'react-native';
23
-import { stringMatchQuery } from '../../../utils/Search';
24 23
 import GroupListItem from './GroupListItem';
25 24
 import AnimatedAccordion from '../../Animations/AnimatedAccordion';
26 25
 import type {
@@ -40,6 +39,9 @@ type PropsType = {
40 39
 
41 40
 const LIST_ITEM_HEIGHT = 64;
42 41
 const REPLACE_REGEX = /_/g;
42
+// The minimum number of characters to type before expanding the accordion
43
+// This prevents expanding too many items at once
44
+const MIN_SEARCH_SIZE_EXPAND = 2;
43 45
 
44 46
 const styles = StyleSheet.create({
45 47
   container: {
@@ -76,18 +78,6 @@ class GroupListAccordion extends React.Component<PropsType> {
76 78
     );
77 79
   };
78 80
 
79
-  getData(): Array<PlanexGroupType> {
80
-    const { props } = this;
81
-    const originalData = props.item.content;
82
-    const displayData: Array<PlanexGroupType> = [];
83
-    originalData.forEach((data: PlanexGroupType) => {
84
-      if (stringMatchQuery(data.name, props.currentSearchString)) {
85
-        displayData.push(data);
86
-      }
87
-    });
88
-    return displayData;
89
-  }
90
-
91 81
   itemLayout = (
92 82
     _data: Array<PlanexGroupType> | null | undefined,
93 83
     index: number
@@ -129,13 +119,13 @@ class GroupListAccordion extends React.Component<PropsType> {
129 119
           }
130 120
           unmountWhenCollapsed={!isFavorite} // Only render list if expanded for increased performance
131 121
           opened={
132
-            props.currentSearchString.length > 0 ||
122
+            props.currentSearchString.length >= MIN_SEARCH_SIZE_EXPAND ||
133 123
             (isFavorite && !isEmptyFavorite)
134 124
           }
135 125
           enabled={!isEmptyFavorite}
136 126
         >
137 127
           <FlatList
138
-            data={this.getData()}
128
+            data={props.item.content}
139 129
             extraData={props.currentSearchString + props.favorites.length}
140 130
             renderItem={this.getRenderItem}
141 131
             keyExtractor={this.keyExtractor}

+ 27
- 35
src/screens/Planex/GroupSelectionScreen.tsx View File

@@ -93,23 +93,15 @@ function GroupSelectionScreen() {
93 93
    * @param item The article to render
94 94
    * @return {*}
95 95
    */
96
-  const getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => {
97
-    if (
98
-      shouldDisplayAccordion(item) ||
99
-      (item.id === 0 && item.content.length === 0)
100
-    ) {
101
-      return (
102
-        <GroupListAccordion
103
-          item={item}
104
-          favorites={[...favoriteGroups]}
105
-          onGroupPress={onListItemPress}
106
-          onFavoritePress={onListFavoritePress}
107
-          currentSearchString={currentSearchString}
108
-        />
109
-      );
110
-    }
111
-    return null;
112
-  };
96
+  const getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => (
97
+    <GroupListAccordion
98
+      item={item}
99
+      favorites={[...favoriteGroups]}
100
+      onGroupPress={onListItemPress}
101
+      onFavoritePress={onListFavoritePress}
102
+      currentSearchString={currentSearchString}
103
+    />
104
+  );
113 105
 
114 106
   /**
115 107
    * Creates the dataset to be used in the FlatList
@@ -185,23 +177,6 @@ function GroupSelectionScreen() {
185 177
   };
186 178
 
187 179
   /**
188
-   * Checks whether to display the given group category, depending on user search query
189
-   *
190
-   * @param item The group category
191
-   * @returns {boolean}
192
-   */
193
-  const shouldDisplayAccordion = (item: PlanexGroupCategoryType): boolean => {
194
-    let shouldDisplay = false;
195
-    for (let i = 0; i < item.content.length; i += 1) {
196
-      if (stringMatchQuery(item.content[i].name, currentSearchString)) {
197
-        shouldDisplay = true;
198
-        break;
199
-      }
200
-    }
201
-    return shouldDisplay;
202
-  };
203
-
204
-  /**
205 180
    * Generates the dataset to be used in the FlatList.
206 181
    * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
207 182
    *
@@ -212,13 +187,30 @@ function GroupSelectionScreen() {
212 187
     fetchedData: PlanexGroupsType | undefined
213 188
   ): Array<PlanexGroupCategoryType> => {
214 189
     const data: Array<PlanexGroupCategoryType> = [];
190
+
215 191
     if (fetchedData) {
192
+      // Convert the object into an array
216 193
       Object.values(fetchedData).forEach(
217 194
         (category: PlanexGroupCategoryType) => {
218
-          data.push(category);
195
+          const content: Array<PlanexGroupType> = [];
196
+          // Filter groups matching the search query
197
+          category.content.forEach((g: PlanexGroupType) => {
198
+            if (stringMatchQuery(g.name, currentSearchString)) {
199
+              content.push(g);
200
+            }
201
+          });
202
+          // Only add categories with groups matching the query
203
+          if (content.length > 0) {
204
+            data.push({
205
+              id: category.id,
206
+              name: category.name,
207
+              content: content,
208
+            });
209
+          }
219 210
         }
220 211
       );
221 212
       data.sort(sortName);
213
+      // Add the favorites at the top
222 214
       data.unshift({
223 215
         name: i18n.t('screens.planex.favorites.title'),
224 216
         id: 0,

Loading…
Cancel
Save