From 27ffaa425c8a3c3996291c60728e2151f6bb5c08 Mon Sep 17 00:00:00 2001
From: David <info@thedaviddelta.com>
Date: Wed, 10 Mar 2021 21:31:50 +0100
Subject: [PATCH] Language switch implemented

---
 pages/[[...slug]].tsx | 11 ++++++----
 utils/language.ts     | 47 +++++++++++++++++++++++++++++++++++++++++++
 utils/languages.json  | 13 ++++++------
 utils/reducer.ts      | 33 ++++++++++++++++++++++--------
 utils/translate.ts    | 10 +++------
 5 files changed, 89 insertions(+), 25 deletions(-)
 create mode 100644 utils/language.ts

diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
index 1f18253..653e20d 100644
--- a/pages/[[...slug]].tsx
+++ b/pages/[[...slug]].tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import Error from "next/error";
 import { googleScrape, extractSlug } from "../utils/translate";
 import Languages from "../components/Languages";
-import { languages, exceptions } from "../utils/languages.json";
+import { retrieveFiltered } from "../utils/language";
 import langReducer, { Actions, initialState } from "../utils/reducer";
 
 const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation, error, initial }) => {
@@ -43,12 +43,15 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
 
     useEffect(updateTranslation, [source, target]);
 
-    const langs = Object.entries(languages);
-    const sourceLangs = langs.filter(([code]) => !exceptions.source.includes(code));
-    const targetLangs = langs.filter(([code]) => !exceptions.target.includes(code));
+    const { sourceLangs, targetLangs } = retrieveFiltered(source, target);
 
     return (
         <div>
+            <div>
+                <button onClick={() => dispatch({ type: Actions.SWITCH_LANGS })} disabled={source === "auto"}>
+                    Switch languages
+                </button>
+            </div>
             <div>
                 <label htmlFor="source">
                     Source:
diff --git a/utils/language.ts b/utils/language.ts
new file mode 100644
index 0000000..8780c1b
--- /dev/null
+++ b/utils/language.ts
@@ -0,0 +1,47 @@
+import { languages, exceptions, mappings } from "./languages.json";
+
+const checkTypes = {
+    exception: exceptions,
+    mapping: mappings
+}
+
+type CheckType = keyof typeof checkTypes;
+
+export const langTypes = [
+    "source",
+    "target"
+] as const;
+
+type LangType = typeof langTypes[number];
+
+const isKeyOf = <T extends object>(obj: T) => (key: keyof any): key is keyof T => key in obj;
+
+export function replaceBoth(
+    checkType: CheckType,
+    langs: {
+        [key in LangType]: string
+    }
+): {
+    [key in LangType]: string
+} {
+    const [source, target] = langTypes.map(langType => {
+        const object = checkTypes[checkType][langType];
+        const langCode = langs[langType];
+        return isKeyOf(object)(langCode) ? object[langCode] : langCode;
+    });
+    return { source, target };
+}
+
+export function retrieveFiltered(source: string, target: string) {
+    const current = {
+        source: target,
+        target: source
+    };
+    const [sourceLangs, targetLangs] = langTypes.map(type => (
+        Object.entries(languages).filter(([code]) => (
+            !Object.keys(exceptions[type]).includes(code)
+            && current[type] !== code
+        ))
+    ));
+    return { sourceLangs, targetLangs };
+}
diff --git a/utils/languages.json b/utils/languages.json
index 68c2975..4bd6ec0 100644
--- a/utils/languages.json
+++ b/utils/languages.json
@@ -112,14 +112,15 @@
     "zu": "Zulu"
   },
   "exceptions": {
-    "source": [
-      "zh_HANT"
-    ],
-    "target": [
-      "auto"
-    ]
+    "source": {
+      "zh_HANT": "zh"
+    },
+    "target": {
+      "auto": "en"
+    }
   },
   "mappings": {
+    "source": {},
     "target": {
       "zh": "zh-CN",
       "zh_HANT": "zh-TW"
diff --git a/utils/reducer.ts b/utils/reducer.ts
index 27ea0ee..5d75a7b 100644
--- a/utils/reducer.ts
+++ b/utils/reducer.ts
@@ -1,7 +1,4 @@
-export enum Actions {
-    "SET_FIELD",
-    "SET_ALL"
-}
+import { replaceBoth } from "./language";
 
 export const initialState = {
     source: "auto",
@@ -9,6 +6,14 @@ export const initialState = {
     query: ""
 }
 
+type State = typeof initialState;
+
+export enum Actions {
+    SET_FIELD,
+    SET_ALL,
+    SWITCH_LANGS
+}
+
 type Action = {
     type: Actions.SET_FIELD,
     payload: {
@@ -18,19 +23,31 @@ type Action = {
 } | {
     type: Actions.SET_ALL,
     payload: {
-        state: {
-            [key: string]: string
-        }
+        state: State
     }
+} | {
+    type: Actions.SWITCH_LANGS
 }
 
-export default function reducer(state: typeof initialState, action: Action) {
+export default function reducer(state: State, action: Action) {
     switch (action.type) {
         case Actions.SET_FIELD:
             const { key, value } = action.payload;
             return { ...state, [key]: value };
         case Actions.SET_ALL:
             return { ...state, ...action.payload.state };
+        case Actions.SWITCH_LANGS:
+            const { source, target } = replaceBoth("exception", {
+                source: state.target,
+                target: state.source
+            });
+            return {
+                ...state,
+                source: source !== target
+                    ? source
+                    : initialState.source,
+                target
+            };
         default:
             return state;
     }
diff --git a/utils/translate.ts b/utils/translate.ts
index c270f12..a1516df 100644
--- a/utils/translate.ts
+++ b/utils/translate.ts
@@ -1,7 +1,5 @@
 import cheerio from "cheerio";
-import { mappings } from "./languages.json";
-
-const isKeyOf = <T extends object>(obj: T) => (key: keyof any): key is keyof T => key in obj;
+import { replaceBoth } from "./language";
 
 export async function googleScrape(
     source: string,
@@ -11,10 +9,8 @@ export async function googleScrape(
     translation?: string,
     error?: number
 }> {
-    const newTarget = isKeyOf(mappings.target)(target)
-        ? mappings.target[target]
-        : target;
-    const res = await fetch(`https://translate.google.com/m?sl=${source}&tl=${newTarget}&q=${encodeURI(query)}`);
+    const parsed = replaceBoth("mapping", { source, target });
+    const res = await fetch(`https://translate.google.com/m?sl=${parsed.source}&tl=${parsed.target}&q=${encodeURI(query)}`);
 
     if (!res.ok)
         return {