ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move filtering to "groupExtensionsByLanguage"

Browse Source
This commit is contained in:
schroda
2025-04-21 01:48:25 +02:00
parent 87a496cec0
commit d01837d5cd
2 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/modules/extension/Extensions.utils.ts
View File

@@ -17,6 +17,7 @@ import {
} from '@/modules/extension/Extensions.types.ts';
import { DefaultLanguage, langCodeToName, langSortCmp } from '@/modules/core/utils/Languages.ts';
import { extensionLanguageToTranslationKey } from '@/modules/extension/Extensions.constants.ts';
import { enhancedCleanup } from '@/util/Strings.ts';
export const getInstalledState = (
isInstalled: boolean,
@@ -81,11 +82,24 @@ export function groupExtensionsByLanguage(extensions: TExtension[]): GroupedExte
return langSortCmp(a, b);
});
return extensionsBySortedLanguage.map(([language, extensionsOfLanguage]) => [
const groupedExtensionsSortedByLanguage = extensionsBySortedLanguage.map(([language, extensionsOfLanguage]) => [
language,
(extensionsOfLanguage ?? []).toSorted((a, b) => langSortCmp(a.lang, b.lang)),
]);
]) satisfies GroupedExtensionsResult;
return groupedExtensionsSortedByLanguage.filter(([, extensionsOfLanguage]) => !!extensionsOfLanguage.length);
}
export const getLanguagesFromExtensions = (extensions: TExtension[]): string[] =>
[...new Set(extensions.map((extension) => extension.lang))].toSorted(langSortCmp);
export const filterExtensions = (
extensions: TExtension[],
selectedLanguages: string[],
showNsfw: boolean,
query: string | null | undefined,
): TExtension[] =>
extensions
.filter((extension) => selectedLanguages.includes(extension.lang))
.filter((extension) => showNsfw || !extension.isNsfw)
.filter((extension) => !query || enhancedCleanup(extension.name).includes(enhancedCleanup(query)));

31
src/modules/extension/screens/Extensions.tsx
View File

@@ -35,7 +35,7 @@ import {
groupExtensionsByLanguage,
getLanguagesFromExtensions,
translateExtensionLanguage,
isExtensionState,
filterExtensions,
} from '@/modules/extension/Extensions.utils.ts';
import {
ExtensionAction,
@@ -98,37 +98,24 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const allLangs = useMemo(() => getLanguagesFromExtensions(allExtensions ?? []), [allExtensions]);
const filteredExtensions = useMemo(
() =>
(allExtensions ?? []).filter((ext) => {
const nsfwFilter = showNsfw || !ext.isNsfw;
if (!query) return nsfwFilter;
return nsfwFilter && ext.name.toLowerCase().includes(query.toLowerCase());
}),
[allExtensions, showNsfw, query],
() => filterExtensions(allExtensions ?? [], shownLangs, showNsfw, query),
[allExtensions, shownLangs, shownLangs, query],
);
const groupedExtensions = useMemo(() => groupExtensionsByLanguage(filteredExtensions), [filteredExtensions]);
const filteredGroupedExtensions = useMemo(
() =>
groupedExtensions
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => isExtensionState(group[LANGUAGE]) || shownLangs.includes(group[LANGUAGE])),
[shownLangs, groupedExtensions],
);
const groupCounts = useMemo(
() => filteredGroupedExtensions.map((extensionGroup) => extensionGroup[EXTENSIONS].length),
[filteredGroupedExtensions],
() => groupedExtensions.map((extensionGroup) => extensionGroup[EXTENSIONS].length),
[groupedExtensions],
);
const visibleExtensions = useMemo(
() => filteredGroupedExtensions.map(([, extensions]) => extensions).flat(1),
[filteredGroupedExtensions],
() => groupedExtensions.map(([, extensions]) => extensions).flat(1),
[groupedExtensions],
);
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
groupCounts,
useCallback((index) => filteredGroupedExtensions[index][LANGUAGE], [filteredGroupedExtensions]),
useCallback((index) => groupedExtensions[index][LANGUAGE], [groupedExtensions]),
useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
);
@@ -262,7 +249,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
overscan={window.innerHeight * 0.5}
groupCounts={groupCounts}
groupContent={(index) => {
const [groupName, groupExtensions] = filteredGroupedExtensions[index];
const [groupName, groupExtensions] = groupedExtensions[index];
const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
return (