diff --git a/src/modules/extension/Extensions.utils.ts b/src/modules/extension/Extensions.utils.ts index 32b8a2e4..98da245d 100644 --- a/src/modules/extension/Extensions.utils.ts +++ b/src/modules/extension/Extensions.utils.ts @@ -51,10 +51,7 @@ export const translateExtensionLanguage = (languageCode: string): string => ? t(extensionLanguageToTranslationKey[languageCode as ExtensionGroupState | DefaultLanguage]) : langCodeToName(languageCode); -export function getExtensionsInfo(extensions: TExtension[]): { - allLangs: string[]; - groupedExtensions: GroupedExtensionsResult; -} { +export function groupExtensionsByLanguage(extensions: TExtension[]): GroupedExtensionsResult { const allLangs: string[] = []; const sortedExtensions: GroupedExtensions = { [ExtensionGroupState.OBSOLETE]: [], @@ -96,8 +93,8 @@ export function getExtensionsInfo(extensions: TExtension[]): { groupedExtensionList.sort((a, b) => a.name.localeCompare(b.name)), ); - return { - allLangs, - groupedExtensions, - }; + return groupedExtensions; } + +export const getLanguagesFromExtensions = (extensions: TExtension[]): string[] => + [...new Set(extensions.map((extension) => extension.lang))].toSorted(langSortCmp); diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx index 7a27accf..9c35e86e 100644 --- a/src/modules/extension/screens/Extensions.tsx +++ b/src/modules/extension/screens/Extensions.tsx @@ -32,9 +32,10 @@ import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx'; import { - getExtensionsInfo, - isExtensionState, + groupExtensionsByLanguage, + getLanguagesFromExtensions, translateExtensionLanguage, + isExtensionState, } from '@/modules/extension/Extensions.utils.ts'; import { ExtensionAction, @@ -94,6 +95,8 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) { fetchExtensions(); }, [refetchExtensions]); + const allLangs = useMemo(() => getLanguagesFromExtensions(allExtensions ?? []), [allExtensions]); + const filteredExtensions = useMemo( () => (allExtensions ?? []).filter((ext) => { @@ -104,7 +107,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) { [allExtensions, showNsfw, query], ); - const { allLangs, groupedExtensions } = useMemo(() => getExtensionsInfo(filteredExtensions), [filteredExtensions]); + const groupedExtensions = useMemo(() => groupExtensionsByLanguage(filteredExtensions), [filteredExtensions]); const filteredGroupedExtensions = useMemo( () =>