diff --git a/src/components/Lists/PlanexGroups/GroupListAccordion.tsx b/src/components/Lists/PlanexGroups/GroupListAccordion.tsx index f6137ab..c746604 100644 --- a/src/components/Lists/PlanexGroups/GroupListAccordion.tsx +++ b/src/components/Lists/PlanexGroups/GroupListAccordion.tsx @@ -20,7 +20,6 @@ import * as React from 'react'; import { List, withTheme } from 'react-native-paper'; import { FlatList, StyleSheet, View } from 'react-native'; -import { stringMatchQuery } from '../../../utils/Search'; import GroupListItem from './GroupListItem'; import AnimatedAccordion from '../../Animations/AnimatedAccordion'; import type { @@ -40,6 +39,9 @@ type PropsType = { const LIST_ITEM_HEIGHT = 64; const REPLACE_REGEX = /_/g; +// The minimum number of characters to type before expanding the accordion +// This prevents expanding too many items at once +const MIN_SEARCH_SIZE_EXPAND = 2; const styles = StyleSheet.create({ container: { @@ -76,18 +78,6 @@ class GroupListAccordion extends React.Component { ); }; - getData(): Array { - const { props } = this; - const originalData = props.item.content; - const displayData: Array = []; - originalData.forEach((data: PlanexGroupType) => { - if (stringMatchQuery(data.name, props.currentSearchString)) { - displayData.push(data); - } - }); - return displayData; - } - itemLayout = ( _data: Array | null | undefined, index: number @@ -129,13 +119,13 @@ class GroupListAccordion extends React.Component { } unmountWhenCollapsed={!isFavorite} // Only render list if expanded for increased performance opened={ - props.currentSearchString.length > 0 || + props.currentSearchString.length >= MIN_SEARCH_SIZE_EXPAND || (isFavorite && !isEmptyFavorite) } enabled={!isEmptyFavorite} > { - if ( - shouldDisplayAccordion(item) || - (item.id === 0 && item.content.length === 0) - ) { - return ( - - ); - } - return null; - }; + const getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => ( + + ); /** * Creates the dataset to be used in the FlatList @@ -184,23 +176,6 @@ function GroupSelectionScreen() { } }; - /** - * Checks whether to display the given group category, depending on user search query - * - * @param item The group category - * @returns {boolean} - */ - const shouldDisplayAccordion = (item: PlanexGroupCategoryType): boolean => { - let shouldDisplay = false; - for (let i = 0; i < item.content.length; i += 1) { - if (stringMatchQuery(item.content[i].name, currentSearchString)) { - shouldDisplay = true; - break; - } - } - return shouldDisplay; - }; - /** * Generates the dataset to be used in the FlatList. * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top. @@ -212,13 +187,30 @@ function GroupSelectionScreen() { fetchedData: PlanexGroupsType | undefined ): Array => { const data: Array = []; + if (fetchedData) { + // Convert the object into an array Object.values(fetchedData).forEach( (category: PlanexGroupCategoryType) => { - data.push(category); + const content: Array = []; + // Filter groups matching the search query + category.content.forEach((g: PlanexGroupType) => { + if (stringMatchQuery(g.name, currentSearchString)) { + content.push(g); + } + }); + // Only add categories with groups matching the query + if (content.length > 0) { + data.push({ + id: category.id, + name: category.name, + content: content, + }); + } } ); data.sort(sortName); + // Add the favorites at the top data.unshift({ name: i18n.t('screens.planex.favorites.title'), id: 0,