diff --git a/src/screens/Extensions.tsx b/src/screens/Extensions.tsx index 0622008838..1377416735 100644 --- a/src/screens/Extensions.tsx +++ b/src/screens/Extensions.tsx @@ -35,10 +35,11 @@ import ExtensionCard from '@/components/ExtensionCard'; const LANGUAGE = 0; const EXTENSIONS = 1; -const allLangs: string[] = []; - -function getExtensionsInfo(extensions: IExtension[]): GroupedExtensionsResult { - allLangs.length = 0; // empty the array +function getExtensionsInfo(extensions: IExtension[]): { + allLangs: string[]; + groupedExtensions: GroupedExtensionsResult; +} { + const allLangs: string[] = []; const sortedExtensions: GroupedExtensions = { [ExtensionState.OBSOLETE]: [], [ExtensionState.INSTALLED]: [], @@ -82,7 +83,10 @@ function getExtensionsInfo(extensions: IExtension[]): GroupedExtensionsResult { const langExt: GroupedExtensionsResult = allLangs.map((lang) => [lang, sortedExtensions[lang]]); - return (result as GroupedExtensionsResult).concat(langExt); + return { + allLangs, + groupedExtensions: (result as GroupedExtensionsResult).concat(langExt), + }; } export default function MangaExtensions() { @@ -96,19 +100,6 @@ export default function MangaExtensions() { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const [query] = useQueryParam('query', StringParam); - useEffect(() => { - setTitle(t('extension.title')); - setAction( - <> - - inputRef.current?.click()} size="large"> - - - - , - ); - }, [t, shownLangs]); - const { data: allExtensions, mutate, isLoading } = requestManager.useGetExtensionList(); const filteredExtensions = useMemo( @@ -121,15 +112,17 @@ export default function MangaExtensions() { [allExtensions, showNsfw, query], ); - const groupedExtensions = useMemo( + const { allLangs, groupedExtensions } = useMemo(() => getExtensionsInfo(filteredExtensions), [filteredExtensions]); + + const filteredGroupedExtensions = useMemo( () => - getExtensionsInfo(filteredExtensions) + groupedExtensions .filter((group) => group[EXTENSIONS].length > 0) .filter((group) => isExtensionStateOrLanguage(group[LANGUAGE]) || shownLangs.includes(group[LANGUAGE])), - [shownLangs, filteredExtensions], + [shownLangs, groupedExtensions], ); - const flatRenderItems: (IExtension | string)[] = groupedExtensions.flat(2); + const flatRenderItems: (IExtension | string)[] = filteredGroupedExtensions.flat(2); const [toasts, makeToast] = makeToaster(useState([])); @@ -152,6 +145,19 @@ export default function MangaExtensions() { } }; + useEffect(() => { + setTitle(t('extension.title')); + setAction( + <> + + inputRef.current?.click()} size="large"> + + + + , + ); + }, [t, shownLangs]); + useEffect(() => { const dropHandler = async (e: Event) => { e.preventDefault();