Cleanup "Source.tsx"

src/modules/source/Source.types.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+    ExtensionType,
     GetSourceBrowseQuery,
     GetSourceSettingsQuery,
     SourcePreferenceChangeInput,
@@ -60,3 +61,7 @@ export type EditTextPreferenceProps = PreferenceProps &
     ExtractByKeyValue<SourcePreferences, '__typename', 'EditTextPreference'>;
 
 export type SourceIdInfo = Pick<SourceType, 'id'>;
+export type SourceLanguageInfo = Pick<SourceType, 'lang'>;
+export type SourceDisplayNameInfo = Pick<SourceType, 'displayName'>;
+export type SourceNsfwInfo = Pick<SourceType, 'isNsfw'>;
+export type SourceRepoInfo = { extension: Pick<ExtensionType, 'repo'> };

src/modules/source/screens/Sources.tsx

@@ -15,48 +15,18 @@ import { useTranslation } from 'react-i18next';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
-import { sourceDefualtLangs, langSortCmp, DefaultLanguage } from '@/modules/core/utils/Languages.ts';
+import { sourceDefualtLangs } from '@/modules/core/utils/Languages.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { SourceCard } from '@/modules/source/components/SourceCard.tsx';
 import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { SourceType } from '@/lib/graphql/generated/graphql.ts';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { Sources as SourceService } from '@/modules/source/services/Sources.ts';
 
-function sourceToLangList(sources: Pick<SourceType, 'id' | 'lang'>[]) {
-    const result = new Set<string>();
-
-    sources.forEach((source) => {
-        const lang = SourceService.isLocalSource(source) ? DefaultLanguage.OTHER : source.lang;
-
-        result.add(lang);
-    });
-
-    return [...result].sort(langSortCmp);
-}
-
-function groupByLang<Source extends Pick<SourceType, 'id' | 'name' | 'lang'>>(
-    sources: Source[],
-): Record<string, Source[]> {
-    const result: Record<string, Source[]> = {};
-
-    sources.forEach((source) => {
-        const lang = SourceService.isLocalSource(source) ? DefaultLanguage.OTHER : source.lang;
-
-        result[lang] ??= [];
-        result[lang].push(source);
-    });
-
-    Object.values(result).forEach((langSources) => langSources.sort((a, b) => a.name.localeCompare(b.name)));
-
-    return result;
-}
-
 export function Sources() {
     const { t } = useTranslation();
     const { setAction } = useNavBarContext();
@@ -71,15 +41,20 @@ export function Sources() {
         refetch,
     } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
     const sources = data?.sources.nodes;
+    const filteredSources = useMemo(
+        () => SourceService.filter(sources ?? [], { showNsfw, languages: shownLangs, keepLocalSource: true }),
+        [sources, shownLangs],
+    );
+    const sourcesByLanguageTuple = useMemo(
+        () => Object.entries(SourceService.groupByLanguage(filteredSources)),
+        [filteredSources],
+    );
 
-    const areSourcesFromDifferentRepos = useMemo(() => {
+    const sourceLanguages = useMemo(() => SourceService.getLanguages(sources ?? []), [sources]);
-        if (!sources || !!sources?.length) {
+    const areSourcesFromDifferentRepos = useMemo(
-            return false;
+        () => SourceService.areFromMultipleRepos(filteredSources),
-        }
+        [filteredSources],
-
+    );
-        const { repo } = sources[0].extension;
-        return sources.some((source) => source.extension.repo !== repo);
-    }, [sources]);
 
     const navigate = useNavigate();
 
@@ -91,18 +66,14 @@ export function Sources() {
                         <TravelExploreIcon />
                     </IconButton>
                 </CustomTooltip>
-                <LangSelect
+                <LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={sourceLanguages} />
-                    shownLangs={shownLangs}
-                    setShownLangs={setShownLangs}
-                    allLangs={sourceToLangList(sources ?? [])}
-                />
             </>,
         );
 
         return () => {
             setAction(null);
         };
-    }, [t, shownLangs, sources]);
+    }, [t, shownLangs, sourceLanguages]);
 
     if (isLoading) return <LoadingPlaceholder />;
 
@@ -122,50 +93,26 @@ export function Sources() {
 
     return (
         <>
-            {Object.entries(groupByLang(sources ?? []))
+            {sourcesByLanguageTuple.map(([languages, sourcesOfLanguage]) => (
-                .sort((a, b) => langSortCmp(a[0], b[0]))
+                <Fragment key={languages}>
-                .map(
+                    <Typography
-                    ([lang, list]) =>
+                        key={languages}
-                        (lang === DefaultLanguage.OTHER || shownLangs.includes(lang)) && (
+                        variant="h5"
-                            <Fragment key={lang}>
+                        component="h2"
-                                <Typography
+                        sx={{
-                                    key={lang}
+                            paddingLeft: 3,
-                                    variant="h5"
+                            paddingTop: 1,
-                                    component="h2"
+                            paddingBottom: 2,
-                                    sx={{
+                            fontWeight: 'bold',
-                                        paddingLeft: 3,
+                        }}
-                                        paddingTop: 1,
+                    >
-                                        paddingBottom: 2,
+                        {translateExtensionLanguage(languages)}
-                                        fontWeight: 'bold',
+                    </Typography>
-                                    }}
+                    {sourcesOfLanguage.map((source) => (
-                                >
+                        <SourceCard key={source.id} source={source} showSourceRepo={areSourcesFromDifferentRepos} />
-                                    {translateExtensionLanguage(lang)}
+                    ))}
-                                </Typography>
+                </Fragment>
-                                {list
+            ))}
-                                    .filter((source) => {
-                                        const isLangOther = lang === DefaultLanguage.OTHER;
-                                        if (isLangOther) {
-                                            const isLocalSource = SourceService.isLocalSource(source);
-                                            const isLangShown = shownLangs.includes(lang);
-
-                                            const isLangOtherSourceShown = isLangShown || isLocalSource;
-                                            if (!isLangOtherSourceShown) {
-                                                return false;
-                                            }
-                                        }
-
-                                        return showNsfw || !source.isNsfw;
-                                    })
-                                    .map((source) => (
-                                        <SourceCard
-                                            key={source.id}
-                                            source={source}
-                                            showSourceRepo={areSourcesFromDifferentRepos}
-                                        />
-                                    ))}
-                            </Fragment>
-                        ),
-                )}
         </>
     );
 }

src/modules/source/services/Sources.ts

@@ -6,7 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SourceIdInfo } from '@/modules/source/Source.types.ts';
+import {
+    SourceDisplayNameInfo,
+    SourceIdInfo,
+    SourceLanguageInfo,
+    SourceNsfwInfo,
+    SourceRepoInfo,
+} from '@/modules/source/Source.types.ts';
+import { langSortCmp } from '@/modules/core/utils/Languages.ts';
 
 export class Sources {
     static readonly LOCAL_SOURCE_ID = '0';
@@ -14,4 +21,47 @@ export class Sources {
     static isLocalSource(source: SourceIdInfo): boolean {
         return source.id === Sources.LOCAL_SOURCE_ID;
     }
+
+    static getLanguages(sources: SourceLanguageInfo[]): string[] {
+        return [...new Set(sources.map((source) => source.lang))].toSorted(langSortCmp);
+    }
+
+    static groupByLanguage<Source extends SourceLanguageInfo & SourceDisplayNameInfo>(
+        sources: Source[],
+    ): Record<string, Source[]> {
+        const sourcesByLanguage = Object.groupBy(sources, (source) => source.lang);
+        const sourcesBySortedLanguage = Object.entries(sourcesByLanguage).toSorted(([a], [b]) => langSortCmp(a, b));
+        const sortedSourcesBySortedLanguage = sourcesBySortedLanguage.map(([language, sourcesOfLanguage]) => [
+            language,
+            (sourcesOfLanguage ?? []).toSorted((a, b) => a.displayName.localeCompare(b.displayName)),
+        ]);
+
+        return Object.fromEntries(sortedSourcesBySortedLanguage);
+    }
+
+    static filter<Source extends SourceIdInfo & SourceLanguageInfo & SourceNsfwInfo>(
+        sources: Source[],
+        {
+            showNsfw,
+            languages,
+            keepLocalSource,
+        }: { showNsfw?: boolean; languages?: string[]; keepLocalSource?: boolean } = {},
+    ): Source[] {
+        return sources
+            .filter((source) => showNsfw || !source.isNsfw || (keepLocalSource && Sources.isLocalSource(source)))
+            .filter(
+                (source) =>
+                    !languages || languages.includes(source.lang) || (keepLocalSource && Sources.isLocalSource(source)),
+            );
+    }
+
+    static areFromMultipleRepos<Source extends SourceIdInfo & SourceRepoInfo>(sources: Source[]): boolean {
+        const repo = sources.find((source) => !!source.extension.repo)?.extension.repo;
+
+        if (!repo || !sources.length) {
+            return false;
+        }
+
+        return sources.some((source) => source.extension.repo !== repo && !Sources.isLocalSource(source));
+    }
 }