feat(mobx): implement locale options

src/pages/settings/panes/Languages.tsx

@@ -1,6 +1,13 @@
+import { observer } from "mobx-react-lite";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
+import { useMemo } from "preact/hooks";
 
+import PaintCounter from "../../../lib/PaintCounter";
+
+import { useApplicationState } from "../../../mobx/State";
+import LocaleOptions from "../../../mobx/stores/LocaleOptions";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 
@@ -17,26 +24,25 @@ import enchantingTableWEBP from "../assets/enchanting_table.webp";
 import tamilFlagPNG from "../assets/tamil_nadu_flag.png";
 import tokiponaSVG from "../assets/toki_pona.svg";
 
-type Props = {
-    locale: Language;
-};
+type Key = [Language, LanguageEntry];
 
-type Key = [string, LanguageEntry];
+interface Props {
+    entry: Key;
+    selected: boolean;
+    onSelect: () => void;
+}
 
-function Entry({ entry: [x, lang], locale }: { entry: Key } & Props) {
+/**
+ * Component providing individual language entries.
+ * @param param0 Entry data
+ */
+function Entry({ entry: [x, lang], selected, onSelect }: Props) {
     return (
         <Checkbox
             key={x}
             className={styles.entry}
-            checked={locale === x}
-            onChange={(v) => {
-                if (v) {
-                    dispatch({
-                        type: "SET_LOCALE",
-                        locale: x as Language,
-                    });
-                }
-            }}>
+            checked={selected}
+            onChange={onSelect}>
             <div className={styles.flag}>
                 {lang.i18n === "ta" ? (
                     <img
@@ -61,36 +67,58 @@ function Entry({ entry: [x, lang], locale }: { entry: Key } & Props) {
     );
 }
 
-export function Component(props: Props) {
-    const languages = Object.keys(Langs).map((x) => [
-        x,
-        Langs[x as keyof typeof Langs],
-    ]) as Key[];
+/**
+ * Component providing the language selection menu.
+ */
+export const Languages = observer(() => {
+    const locale = useApplicationState().locale;
+    const language = locale.getLanguage();
 
-    // Get the user's system language. Check for exact
-    // matches first, otherwise check for partial matches
-    const preferredLanguage =
-        navigator.languages.filter((lang) =>
-            languages.find((l) => l[0].replace(/_/g, "-") == lang),
-        )?.[0] ||
-        navigator.languages
-            ?.map((x) => x.split("-")[0])
-            ?.filter((lang) => languages.find((l) => l[0] == lang))?.[0]
-            ?.split("-")[0];
+    // Generate languages array.
+    const languages = useMemo(() => {
+        const languages = Object.keys(Langs).map((x) => [
+            x,
+            Langs[x as keyof typeof Langs],
+        ]) as Key[];
 
-    if (preferredLanguage) {
-        // This moves the user's system language to the top of the language list
-        const prefLangKey = languages.find(
-            (lang) => lang[0].replace(/_/g, "-") == preferredLanguage,
-        );
-        if (prefLangKey) {
-            languages.splice(
-                0,
-                0,
-                languages.splice(languages.indexOf(prefLangKey), 1)[0],
+        // Get the user's system language. Check for exact
+        // matches first, otherwise check for partial matches
+        const preferredLanguage =
+            navigator.languages.filter((lang) =>
+                languages.find((l) => l[0].replace(/_/g, "-") == lang),
+            )?.[0] ||
+            navigator.languages
+                ?.map((x) => x.split("-")[0])
+                ?.filter((lang) => languages.find((l) => l[0] == lang))?.[0]
+                ?.split("-")[0];
+
+        if (preferredLanguage) {
+            // This moves the user's system language to the top of the language list
+            const prefLangKey = languages.find(
+                (lang) => lang[0].replace(/_/g, "-") == preferredLanguage,
             );
+
+            if (prefLangKey) {
+                languages.splice(
+                    0,
+                    0,
+                    languages.splice(languages.indexOf(prefLangKey), 1)[0],
+                );
+            }
         }
-    }
+
+        return languages;
+    }, []);
+
+    // Creates entries with given key.
+    const EntryFactory = ([x, lang]: Key) => (
+        <Entry
+            key={x}
+            entry={[x, lang]}
+            selected={language === x}
+            onSelect={() => locale.setLanguage(x)}
+        />
+    );
 
     return (
         <div className={styles.languages}>
@@ -98,11 +126,7 @@ export function Component(props: Props) {
                 <Text id="app.settings.pages.language.select" />
             </h3>
             <div className={styles.list}>
-                {languages
-                    .filter(([, lang]) => !lang.cat)
-                    .map(([x, lang]) => (
-                        <Entry key={x} entry={[x, lang]} {...props} />
-                    ))}
+                {languages.filter(([, lang]) => !lang.cat).map(EntryFactory)}
             </div>
             <h3>
                 <Text id="app.settings.pages.language.const" />
@@ -110,9 +134,7 @@ export function Component(props: Props) {
             <div className={styles.list}>
                 {languages
                     .filter(([, lang]) => lang.cat === "const")
-                    .map(([x, lang]) => (
-                        <Entry key={x} entry={[x, lang]} {...props} />
-                    ))}
+                    .map(EntryFactory)}
             </div>
             <h3>
                 <Text id="app.settings.pages.language.other" />
@@ -120,9 +142,7 @@ export function Component(props: Props) {
             <div className={styles.list}>
                 {languages
                     .filter(([, lang]) => lang.cat === "alt")
-                    .map(([x, lang]) => (
-                        <Entry key={x} entry={[x, lang]} {...props} />
-                    ))}
+                    .map(EntryFactory)}
             </div>
             <Tip>
                 <span>
@@ -137,10 +157,4 @@ export function Component(props: Props) {
             </Tip>
         </div>
     );
-}
-
-export const Languages = connectState(Component, (state) => {
-    return {
-        locale: state.locale,
-    };
 });