section sources by lang

webUI/react/src/screens/Sources.tsx

@@ -3,16 +3,53 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
+import ExtensionLangSelect from '../components/ExtensionLangSelect';
 import SourceCard from '../components/SourceCard';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
+import { defualtLangs, langCodeToName, langSortCmp } from '../util/language';
+import useLocalStorage from '../util/useLocalStorage';
+
+function sourceToLangList(sources: ISource[]) {
+    const result: string[] = [];
+
+    sources.forEach((source) => {
+        if (result.indexOf(source.lang) === -1 && langCodeToName(source.lang) !== 'Error') { result.push(source.lang); }
+    });
+
+    result.sort(langSortCmp);
+    return result;
+}
+
+function groupByLang(sources: ISource[]) {
+    const result = {} as any;
+    sources.forEach((source) => {
+        if (result[source.lang] === undefined) { result[source.lang] = [] as ISource[]; }
+        result[source.lang].push(source);
+    });
+
+    return result;
+}
 
 export default function Sources() {
-    const { setTitle } = useContext(NavbarContext);
-    setTitle('Sources');
+    const { setTitle, setAction } = useContext(NavbarContext);
+
+    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', defualtLangs());
+
     const [sources, setSources] = useState<ISource[]>([]);
     const [fetched, setFetched] = useState<boolean>(false);
 
+    useEffect(() => {
+        setTitle('Sources');
+        setAction(
+            <ExtensionLangSelect
+                shownLangs={shownLangs}
+                setShownLangs={setShownLangs}
+                allLangs={sourceToLangList(sources)}
+            />,
+        );
+    }, [shownLangs, sources]);
+
     useEffect(() => {
         client.get('/api/v1/source/list')
             .then((response) => response.data)
@@ -23,5 +60,22 @@ export default function Sources() {
         if (fetched) return (<h3>No sources found. Install Some Extensions first.</h3>);
         return (<h3>loading...</h3>);
     }
-    return <>{sources.map((it) => <SourceCard source={it} />)}</>;
+    return (
+        <>
+            {/* eslint-disable-next-line max-len */}
+            {Object.entries(groupByLang(sources)).sort((a, b) => langSortCmp(a[0], b[0])).map(([lang, list]) => (
+                shownLangs.indexOf(lang) !== -1 && (
+                    <React.Fragment key={lang}>
+                        <h1 key={lang} style={{ marginLeft: 25 }}>{langCodeToName(lang)}</h1>
+                        {(list as ISource[]).map((source) => (
+                            <SourceCard
+                                key={source.id}
+                                source={source}
+                            />
+                        ))}
+                    </React.Fragment>
+                )
+            ))}
+        </>
+    );
 }