fetch billooup pairs

config.ts

@@ -3,14 +3,15 @@ import { Config, Mode } from './src/types';
 export default {
   defaultLocale: 'eng',
   htmlUrl: 'https://beta.apertium.org/',
-  apyURL: 'https://beta.apertium.org/apy',
+  //apyURL: 'https://beta.apertium.org/apy',
+  apyURL: 'http://localhost:2737',
 
-  defaultMode: Mode.Translation,
-  enabledModes: new Set([Mode.Translation, Mode.Analysis, Mode.Generation, Mode.Sandbox]),
+  defaultMode: Mode.Dictionary,
+  enabledModes: new Set([Mode.Translation, Mode.Dictionary]),
   translationChaining: true,
 
-  subtitle: 'Beta',
-  subtitleColor: 'rgb(220, 41, 38)',
+  subtitle: 'Urum',
+  subtitleColor: 'rgb(38, 214, 220)',
 
   stringReplacements: {
     '{{maintainer}}': "<a href='https://wiki.apertium.org/wiki/Apertium' target='_blank' rel='noopener'>Apertium</a>",

src/components/Dictionary.tsx

@@ -1,27 +1,23 @@
 import * as React from 'react';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
+import { CancelTokenSource } from 'axios';
 
-import { DirectPairs, isPair, SrcLangs, TgtLangs } from './translator';
+import { isPair, Pairs } from './translator';
 import LanguageSelector from './translator/LanguageSelector';
-import { toAlpha3Code, parentLang } from '../util/languages';
+import { toAlpha3Code } from '../util/languages';
 import useLocalStorage from '../util/useLocalStorage';
 import { getUrlParam } from '../util/url';
 import { APyContext } from '../context';
 import Word from './dictionary/Word';
-
 import { useLocalization } from '../util/localization';
 
 const recentLangsCount = 3;
 
-const defaultSrcLang = (pairs: typeof DirectPairs): string => {
-  for (const code of window.navigator.languages) {
-    const iso = toAlpha3Code(code.replace('-', '_'));
-    const parent = parentLang(iso);
-    if (pairs[iso]) return iso;
-    if (pairs[parent]) return parent;
-  }
-  return Object.keys(pairs)[0];
+const defaultSrcLang = (pairs: Pairs): string => {
+  const keys = Object.keys(pairs);
+  return keys.length ? keys[0] : '';
 };
 
 type WithSrcLangsProps = {
@@ -38,37 +34,35 @@
   urlSrcLang,
   children,
 }: {
-  pairs: typeof DirectPairs;
+  pairs: Pairs;
   urlSrcLang: string | null;
   children: (props: WithSrcLangsProps) => React.ReactElement;
 }) => {
-  const [srcLang, realSetSrc] = useLocalStorage<string>('srcLang', () => defaultSrcLang(pairs), {
-    overrideValue: urlSrcLang,
-    validateValue: (l) => l in pairs && pairs[l].size > 0,
-  });
+  const opts: any = { validateValue: (l: string) => l in pairs };
+  if (urlSrcLang) opts.overrideValue = urlSrcLang;
 
-  const [recentSrcLangs, setRecentSrcLangs] = useLocalStorage<string[]>(
-    'recentSrcLangs',
-    () => [srcLang, ...SrcLangs].slice(0, recentLangsCount),
-    {
-      validateValue: (ls) => new Set(ls).size === recentLangsCount && ls.every((l) => l in pairs),
-    },
-  );
+  const [srcLang, rawSetSrcLang] = useLocalStorage<string>('dictSrcLang', () => defaultSrcLang(pairs), opts);
+
+  const [recentSrcLangs, rawSetRecentSrcLangs] = useLocalStorage<string[]>('dictRecentSrcLangs', () => [srcLang], {
+    validateValue: (ls: string[]) => Array.isArray(ls) && ls.every((l) => l in pairs),
+  });
 
   const setSrcLang = React.useCallback(
     (lang: string) => {
-      realSetSrc(lang);
-      if (!recentSrcLangs.includes(lang)) {
-        setRecentSrcLangs([lang, ...recentSrcLangs].slice(0, recentLangsCount));
-      }
+      rawSetSrcLang(lang);
+      rawSetRecentSrcLangs((prev) => {
+        const combined = [lang, ...prev];
+        const unique = Array.from(new Set(combined));
+        return unique.slice(0, recentLangsCount);
+      });
     },
-    [realSetSrc, recentSrcLangs, setRecentSrcLangs],
+    [rawSetSrcLang, rawSetRecentSrcLangs],
   );
 
-  const [detectedLang, realSetDetected] = React.useState<string | null>(null);
+  const [detectedLang, setDetected] = React.useState<string | null>(null);
   const setDetectedLang = React.useCallback(
     (lang: string | null) => {
-      realSetDetected(lang);
+      setDetected(lang);
       if (lang) setSrcLang(lang);
     },
     [setSrcLang],
@@ -78,7 +72,7 @@
     srcLang,
     setSrcLang,
     recentSrcLangs,
-    setRecentSrcLangs,
+    setRecentSrcLangs: rawSetRecentSrcLangs,
     detectedLang,
     setDetectedLang,
   });
@@ -96,98 +90,145 @@
   urlTgtLang,
   children,
 }: {
-  pairs: typeof DirectPairs;
+  pairs: Pairs;
   srcLang: string;
   urlTgtLang: string | null;
   children: (props: WithTgtLangsProps) => React.ReactElement;
 }) => {
-  const [tgtLang, realSetTgt] = useLocalStorage<string>('tgtLang', () => Array.from(pairs[srcLang].values())[0], {
-    overrideValue: urlTgtLang,
-    validateValue: (l) => isPair(pairs, srcLang, l),
-  });
+  const opts: any = { validateValue: (l: string) => isPair(pairs, srcLang, l) };
+  if (urlTgtLang) opts.overrideValue = urlTgtLang;
 
-  const [recentTgtLangs, setRecentTgtLangs] = useLocalStorage<string[]>(
-    'recentTgtLangs',
-    () => [tgtLang, ...pairs[srcLang].values(), ...TgtLangs].slice(0, recentLangsCount),
-    {
-      validateValue: (ls) => new Set(ls).size === recentLangsCount && ls.some((l) => isPair(pairs, srcLang, l)),
+  const [tgtLang, rawSetTgtLang] = useLocalStorage<string>(
+    'dictTgtLang',
+    () => {
+      const set = pairs[srcLang];
+      return set ? Array.from(set)[0] : '';
     },
+    opts,
   );
 
+  const [recentTgtLangs, rawSetRecentTgtLangs] = useLocalStorage<string[]>('dictRecentTgtLangs', () => [tgtLang], {
+    validateValue: (ls: string[]) => Array.isArray(ls) && ls.every((l) => isPair(pairs, srcLang, l)),
+  });
+
   const setTgtLang = React.useCallback(
     (lang: string) => {
-      realSetTgt(lang);
-      if (!recentTgtLangs.includes(lang)) {
-        setRecentTgtLangs([lang, ...recentTgtLangs].slice(0, recentLangsCount));
-      }
+      rawSetTgtLang(lang);
+      rawSetRecentTgtLangs((prev) => {
+        const combined = [lang, ...prev];
+        const unique = Array.from(new Set(combined));
+        return unique.slice(0, recentLangsCount);
+      });
     },
-    [recentTgtLangs, setRecentTgtLangs],
+    [rawSetTgtLang, rawSetRecentTgtLangs],
   );
 
   React.useEffect(() => {
     if (!isPair(pairs, srcLang, tgtLang)) {
       const fallback = recentTgtLangs.find((l) => isPair(pairs, srcLang, l));
-      setTgtLang(fallback || Array.from(pairs[srcLang].values())[0]);
+      const newTgt = fallback || (pairs[srcLang] ? Array.from(pairs[srcLang])[0] : '');
+      if (newTgt && newTgt !== tgtLang) {
+        setTgtLang(newTgt);
+      }
     }
-  }, [srcLang, tgtLang]);
+  }, [pairs, srcLang, tgtLang, recentTgtLangs, setTgtLang]);
 
   return children({ tgtLang, setTgtLang, recentTgtLangs });
 };
 
-const Dictionary = (): React.ReactElement => {
+const Dictionary: React.FC = () => {
   const { t } = useLocalization();
-  const pairs = DirectPairs;
   const apyFetch = React.useContext(APyContext);
 
-  const urlParamPair = getUrlParam(window.location.search, 'dir');
-  let urlSrcLang: string | null = null,
-    urlTgtLang: string | null = null;
-  if (urlParamPair) {
-    const [s, t] = urlParamPair.split('-', 2).map(toAlpha3Code);
+  const [pairs, setPairs] = React.useState<Pairs>({});
+  const [loadingPairs, setLoadingPairs] = React.useState(true);
+  const fetchRef = React.useRef<CancelTokenSource | null>(null);
+
+  React.useEffect(() => {
+    fetchRef.current?.cancel();
+    const [ref, request] = apyFetch('list', { q: 'billookup' });
+    fetchRef.current = ref;
+    setLoadingPairs(true);
+
+    request
+      .then((resp) => {
+        const arr: Array<{ sourceLanguage: string; targetLanguage: string }> = resp.data.responseData || [];
+        const dict: Pairs = {};
+        arr.forEach(({ sourceLanguage: s, targetLanguage: t }) => {
+          if (!dict[s]) dict[s] = new Set<string>();
+          dict[s].add(t);
+        });
+        setPairs(dict);
+      })
+      .catch((err) => {
+        console.error('Error loading dictionary language pairs:', err);
+      })
+      .finally(() => {
+        setLoadingPairs(false);
+        fetchRef.current = null;
+      });
+
+    return () => {
+      fetchRef.current?.cancel();
+    };
+  }, [apyFetch]);
+
+  if (loadingPairs) {
+    return (
+      <div className="text-center my-4">
+        <Spinner animation="border" role="status" />
+      </div>
+    );
+  }
+
+  const urlParam = getUrlParam(window.location.search, 'dir');
+  let urlSrc: string | null = null;
+  let urlTgt: string | null = null;
+  if (urlParam) {
+    const [s, t] = urlParam.split('-', 2).map(toAlpha3Code);
     if (s && t && isPair(pairs, s, t)) {
-      urlSrcLang = s;
-      urlTgtLang = t;
+      urlSrc = s;
+      urlTgt = t;
     }
   }
 
-  const [searchWord, setSearchWord] = React.useState('');
-  const [loading, setLoading] = React.useState(false);
-  const searchRef = React.useRef<CancelTokenSource | null>(null);
-  const [results, setResults] = React.useState<{ head: string; defs: string[] }[]>([]);
-
   return (
-    <WithSrcLang pairs={pairs} urlSrcLang={urlSrcLang}>
+    <WithSrcLang pairs={pairs} urlSrcLang={urlSrc}>
       {({ srcLang, setSrcLang, recentSrcLangs, setRecentSrcLangs, detectedLang, setDetectedLang }) => (
-        <WithTgtLang pairs={pairs} srcLang={srcLang} urlTgtLang={urlTgtLang}>
+        <WithTgtLang pairs={pairs} srcLang={srcLang} urlTgtLang={urlTgt}>
           {({ tgtLang, setTgtLang, recentTgtLangs }) => {
+            const [searchWord, setSearchWord] = React.useState('');
+            const [loading, setLoading] = React.useState(false);
+            const searchRef = React.useRef<CancelTokenSource | null>(null);
+            const [results, setResults] = React.useState<{ head: string; defs: string[] }[]>([]);
+
             const handleSearch = React.useCallback(() => {
               if (!searchWord.trim()) return;
-
               searchRef.current?.cancel();
-              const [ref, request] = apyFetch('bilsearch', {
+              const [ref, req] = apyFetch('billookup', {
                 q: `${searchWord}<*>`,
                 langpair: `${srcLang}|${tgtLang}`,
               });
               searchRef.current = ref;
               setLoading(true);
               setResults([]);
 
-              void (async () => {
-                try {
-                  const resp = await request;
-                  const sr = resp.data?.responseData?.searchResults || [];
-                  const entries = sr.flatMap((obj: Record<string, string[]>) =>
-                    Object.entries(obj).map(([head, defs]) => ({ head, defs })),
+              req
+                .then((resp) => {
+                  const sr = resp.data.responseData?.lookupResults || [];
+                  const entries = sr.flatMap((o: Record<string, string[]>) =>
+                    Object.entries(o).map(([head, defs]) => ({ head, defs })),
                   );
                   setResults(entries);
-                } catch (err) {
-                  // cancellation or other errors
-                } finally {
+                })
+                .catch(() => {
+                  // ignore
+                })
+                .finally(() => {
                   setLoading(false);
                   searchRef.current = null;
-                }
-              })();
-            }, [searchWord, srcLang, tgtLang, apyFetch]);
+                });
+            }, [apyFetch, searchWord, srcLang, tgtLang]);
 
             return (
               <Form