diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContent.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContent.tsx index 40d90b56e046..5b47634bff29 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContent.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContent.tsx @@ -100,6 +100,24 @@ const AppsPageContent = (): ReactElement => { } }, [context, marketplaceApps, installedApps, privateApps]); + const findSort = () => { + const possibleSort = sortFilterStructure.items.find(({ checked }) => checked); + + return possibleSort ? possibleSort.id : 'mru'; + }; + + const findPurchaseType = () => { + const possiblePurchaseType = freePaidFilterStructure.items.find(({ checked }) => checked); + + return possiblePurchaseType ? possiblePurchaseType.id : 'all'; + }; + + const findStatus = () => { + const possibleStatus = statusFilterStructure.items.find(({ checked }) => checked); + + return possibleStatus ? possibleStatus.id : 'all'; + }; + const [categories, selectedCategories, categoryTagList, onSelected] = useCategories(); const appsResult = useFilteredApps({ appsData: getAppsData(), @@ -107,9 +125,9 @@ const AppsPageContent = (): ReactElement => { current, itemsPerPage, categories: useMemo(() => selectedCategories.map(({ label }) => label), [selectedCategories]), - purchaseType: useMemo(() => freePaidFilterStructure.items.find(({ checked }) => checked)?.id, [freePaidFilterStructure]), - sortingMethod: useMemo(() => sortFilterStructure.items.find(({ checked }) => checked)?.id, [sortFilterStructure]), - status: useMemo(() => statusFilterStructure.items.find(({ checked }) => checked)?.id, [statusFilterStructure]), + purchaseType: useMemo(findPurchaseType, [freePaidFilterStructure]), + sortingMethod: useMemo(findSort, [sortFilterStructure]), + status: useMemo(findStatus, [statusFilterStructure]), context, }); diff --git a/apps/meteor/client/views/marketplace/hooks/useFilteredApps.ts b/apps/meteor/client/views/marketplace/hooks/useFilteredApps.ts index 19664cd4b693..1027aae75a8a 100644 --- a/apps/meteor/client/views/marketplace/hooks/useFilteredApps.ts +++ b/apps/meteor/client/views/marketplace/hooks/useFilteredApps.ts @@ -33,11 +33,11 @@ export const useFilteredApps = ({ text: string; current: number; itemsPerPage: number; - categories?: string[]; - purchaseType?: string; + categories: string[]; + purchaseType: string; isEnterpriseOnly?: boolean; - sortingMethod?: string; - status?: string; + sortingMethod: string; + status: string; context?: string; }): AsyncState< { items: App[] } & { shouldShowSearchText: boolean } & PaginatedResult & { allApps: App[] } & { totalAppsLength: number } @@ -48,72 +48,58 @@ export const useFilteredApps = ({ } const { apps } = appsData.value; - - let filtered: App[] = apps; - let shouldShowSearchText = true; - - const sortingMethods: Record App[]> = { - urf: () => - filtered.sort( - (firstApp, secondApp) => (secondApp?.appRequestStats?.totalUnseen || 0) - (firstApp?.appRequestStats?.totalUnseen || 0), - ), - url: () => - filtered.sort( - (firstApp, secondApp) => (firstApp?.appRequestStats?.totalUnseen || 0) - (secondApp?.appRequestStats?.totalUnseen || 0), - ), - az: () => filtered.sort((firstApp, secondApp) => sortAppsByAlphabeticalOrInverseOrder(firstApp.name, secondApp.name)), - za: () => filtered.sort((firstApp, secondApp) => sortAppsByAlphabeticalOrInverseOrder(secondApp.name, firstApp.name)), - mru: () => - filtered.sort((firstApp, secondApp) => sortAppsByClosestOrFarthestModificationDate(firstApp.modifiedAt, secondApp.modifiedAt)), - lru: () => - filtered.sort((firstApp, secondApp) => sortAppsByClosestOrFarthestModificationDate(secondApp.modifiedAt, firstApp.modifiedAt)), + const fallback = (apps: App[]) => apps; + + const sortingMethods: Record App[]> = { + urf: (apps: App[]) => + apps.sort((firstApp, secondApp) => (secondApp?.appRequestStats?.totalUnseen || 0) - (firstApp?.appRequestStats?.totalUnseen || 0)), + url: (apps: App[]) => + apps.sort((firstApp, secondApp) => (firstApp?.appRequestStats?.totalUnseen || 0) - (secondApp?.appRequestStats?.totalUnseen || 0)), + az: (apps: App[]) => apps.sort((firstApp, secondApp) => sortAppsByAlphabeticalOrInverseOrder(firstApp.name, secondApp.name)), + za: (apps: App[]) => apps.sort((firstApp, secondApp) => sortAppsByAlphabeticalOrInverseOrder(secondApp.name, firstApp.name)), + mru: (apps: App[]) => + apps.sort((firstApp, secondApp) => sortAppsByClosestOrFarthestModificationDate(firstApp.modifiedAt, secondApp.modifiedAt)), + lru: (apps: App[]) => + apps.sort((firstApp, secondApp) => sortAppsByClosestOrFarthestModificationDate(secondApp.modifiedAt, firstApp.modifiedAt)), }; - if (context && context === 'enterprise') { - filtered = apps.filter(({ categories }) => categories.includes('Enterprise')); - } - - if (sortingMethod) { - filtered = sortingMethods[sortingMethod](); - } - - const filterByPurchaseType: Record App[]> = { - paid: () => filtered.filter(filterAppsByPaid), - enterprise: () => filtered.filter(filterAppsByEnterprise), - free: () => filtered.filter(filterAppsByFree), + const filterByPurchaseType: Record App[]> = { + all: fallback, + paid: (apps: App[]) => apps.filter(filterAppsByPaid), + enterprise: (apps: App[]) => apps.filter(filterAppsByEnterprise), + free: (apps: App[]) => apps.filter(filterAppsByFree), }; - if (purchaseType && purchaseType !== 'all') { - filtered = filterByPurchaseType[purchaseType](); - - if (!filtered.length) shouldShowSearchText = false; - } - - if (status && status !== 'all') { - filtered = status === 'enabled' ? filtered.filter(filterAppsByEnabled) : filtered.filter(filterAppsByDisabled); - - if (!filtered.length) shouldShowSearchText = false; - } - - if (Boolean(categories.length) && Boolean(text)) { - filtered = filtered.filter((app) => filterAppsByCategories(app, categories)).filter(({ name }) => filterAppsByText(name, text)); - shouldShowSearchText = true; - } - - if (Boolean(categories.length) && !text) { - filtered = filtered.filter((app) => filterAppsByCategories(app, categories)); - shouldShowSearchText = false; - } - - if (!categories.length && Boolean(text)) { - filtered = filtered.filter(({ name }) => filterAppsByText(name, text)); - shouldShowSearchText = true; - } + const filterByStatus: Record App[]> = { + all: fallback, + enabled: (apps: App[]) => apps.filter(filterAppsByEnabled), + disabled: (apps: App[]) => apps.filter(filterAppsByDisabled), + }; - if (context && context === 'requested') { - filtered = apps.filter(({ appRequestStats, installed }) => Boolean(appRequestStats) && !installed); - } + const filterByContext: Record App[]> = { + explore: fallback, + installed: fallback, + private: fallback, + enterprise: (apps: App[]) => apps.filter(({ categories }) => categories.includes('Enterprise')), + requested: (apps: App[]) => apps.filter(({ appRequestStats, installed }) => Boolean(appRequestStats) && !installed), + }; + type appsFilterFunction = (apps: App[]) => App[]; + const pipeAppsFilter = + (...functions: appsFilterFunction[]) => + (initialValue: App[]) => + functions.reduce((currentAppsList, currentFilterFunction) => currentFilterFunction(currentAppsList), initialValue); + + const filtered = pipeAppsFilter( + context ? filterByContext[context] : fallback, + filterByPurchaseType[purchaseType], + filterByStatus[status], + categories.length ? (apps: App[]) => apps.filter((app) => filterAppsByCategories(app, categories)) : fallback, + text ? (apps: App[]) => apps.filter(({ name }) => filterAppsByText(name, text)) : fallback, + sortingMethods[sortingMethod], + )(apps); + + const shouldShowSearchText = !!text; const total = filtered.length; const offset = current > total ? 0 : current; const end = current + itemsPerPage;