feat(mobx): implement locale options

src/components/common/LocaleSelector.tsx

@@ -1,23 +1,21 @@
-import { dispatch } from "../../redux";
-import { connectState } from "../../redux/connector";
+import { useApplicationState } from "../../mobx/State";
 
 import { Language, Languages } from "../../context/Locale";
 
 import ComboBox from "../ui/ComboBox";
 
-type Props = {
-    locale: string;
-};
+/**
+ * Component providing a language selector combobox.
+ * Note: this is not an observer but this is fine as we are just using a combobox.
+ */
+export default function LocaleSelector() {
+    const locale = useApplicationState().locale;
 
-export function LocaleSelector(props: Props) {
     return (
         <ComboBox
-            value={props.locale}
+            value={locale.getLanguage()}
             onChange={(e) =>
-                dispatch({
-                    type: "SET_LOCALE",
-                    locale: e.currentTarget.value as Language,
-                })
+                locale.setLanguage(e.currentTarget.value as Language)
             }>
             {Object.keys(Languages).map((x) => {
                 const l = Languages[x as keyof typeof Languages];
@@ -30,9 +28,3 @@ export function LocaleSelector(props: Props) {
         </ComboBox>
     );
 }
-
-export default connectState(LocaleSelector, (state) => {
-    return {
-        locale: state.locale,
-    };
-});

src/context/Locale.tsx

@@ -3,11 +3,12 @@ import calendar from "dayjs/plugin/calendar";
 import format from "dayjs/plugin/localizedFormat";
 import update from "dayjs/plugin/updateLocale";
 import defaultsDeep from "lodash.defaultsdeep";
+import { observer } from "mobx-react-lite";
 
 import { IntlProvider } from "preact-i18n";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
-import { connectState } from "../redux/connector";
+import { useApplicationState } from "../mobx/State";
 
 import definition from "../../external/lang/en.json";
 
@@ -222,14 +223,69 @@ export interface Dictionary {
         | undefined;
 }
 
-function Locale({ children, locale }: Props) {
-    const [defns, setDefinition] = useState<Dictionary>(
+export default observer(({ children }: Props) => {
+    const locale = useApplicationState().locale;
+    const [definitions, setDefinition] = useState<Dictionary>(
         definition as Dictionary,
     );
 
-    // Load relevant language information, fallback to English if invalid.
-    const lang = Languages[locale] ?? Languages.en;
+    const lang = locale.getLanguage();
+    const source = Languages[lang];
 
+    const loadLanguage = useCallback(
+        (locale: string) => {
+            if (locale === "en") {
+                // If English, make sure to restore everything to defaults.
+                // Use what we already have.
+                const defn = transformLanguage(definition as Dictionary);
+                setDefinition(defn);
+                dayjs.locale("en");
+                dayjs.updateLocale("en", { calendar: defn.dayjs });
+                return;
+            }
+
+            import(`../../external/lang/${source.i18n}.json`).then(
+                async (lang_file) => {
+                    // Transform the definitions data.
+                    const defn = transformLanguage(lang_file.default);
+
+                    // Determine and load dayjs locales.
+                    const target = source.dayjs ?? source.i18n;
+                    const dayjs_locale = await import(
+                        `../../node_modules/dayjs/esm/locale/${target}.js`
+                    );
+
+                    // Load dayjs locales.
+                    dayjs.locale(target, dayjs_locale.default);
+
+                    if (defn.dayjs) {
+                        // Override dayjs calendar locales with our own.
+                        dayjs.updateLocale(target, { calendar: defn.dayjs });
+                    }
+
+                    // Apply definition to app.
+                    setDefinition(defn);
+                },
+            );
+        },
+        [source.dayjs, source.i18n],
+    );
+
+    useEffect(() => loadLanguage(lang), [lang, source, loadLanguage]);
+
+    useEffect(() => {
+        // Apply RTL language format.
+        document.body.style.direction = source.rtl ? "rtl" : "";
+    }, [source.rtl]);
+
+    return <IntlProvider definition={definitions}>{children}</IntlProvider>;
+});
+
+/**
+ * Apply defaults and process dayjs entries for a langauge.
+ * @param source Dictionary definition to transform
+ * @returns Transformed dictionary definition
+ */
 function transformLanguage(source: Dictionary) {
     // Fallback untranslated strings to English (UK)
     const obj = defaultsDeep(source, definition);
@@ -267,70 +323,8 @@ function Locale({ children, locale }: Props) {
         .filter((k) => typeof dayjs[k] === "string")
         .forEach(
             (k) =>
-                    (dayjs[k] = dayjs[k].replace(
-                        /{{time}}/g,
-                        dayjs["timeFormat"],
-                    )),
+                (dayjs[k] = dayjs[k].replace(/{{time}}/g, dayjs["timeFormat"])),
         );
 
     return obj;
 }
-
-    const loadLanguage = useCallback(
-        (locale: string) => {
-            if (locale === "en") {
-                // If English, make sure to restore everything to defaults.
-                // Use what we already have.
-                const defn = transformLanguage(definition as Dictionary);
-                setDefinition(defn);
-                dayjs.locale("en");
-                dayjs.updateLocale("en", { calendar: defn.dayjs });
-                return;
-            }
-
-            import(`../../external/lang/${lang.i18n}.json`).then(
-                async (lang_file) => {
-                    // Transform the definitions data.
-                    const defn = transformLanguage(lang_file.default);
-
-                    // Determine and load dayjs locales.
-                    const target = lang.dayjs ?? lang.i18n;
-                    const dayjs_locale = await import(
-                        `../../node_modules/dayjs/esm/locale/${target}.js`
-                    );
-
-                    // Load dayjs locales.
-                    dayjs.locale(target, dayjs_locale.default);
-
-                    if (defn.dayjs) {
-                        // Override dayjs calendar locales with our own.
-                        dayjs.updateLocale(target, { calendar: defn.dayjs });
-                    }
-
-                    // Apply definition to app.
-                    setDefinition(defn);
-                },
-            );
-        },
-        [lang.dayjs, lang.i18n],
-    );
-
-    useEffect(() => loadLanguage(locale), [locale, lang, loadLanguage]);
-
-    useEffect(() => {
-        // Apply RTL language format.
-        document.body.style.direction = lang.rtl ? "rtl" : "";
-    }, [lang.rtl]);
-
-    return <IntlProvider definition={defns}>{children}</IntlProvider>;
-}
-
-export default connectState<Omit<Props, "locale">>(
-    Locale,
-    (state) => {
-        return {
-            locale: state.locale,
-        };
-    },
-    true,
-);

src/mobx/State.ts

@@ -5,6 +5,7 @@ import { useContext } from "preact/hooks";
 
 import Auth from "./stores/Auth";
 import Draft from "./stores/Draft";
+import LocaleOptions from "./stores/LocaleOptions";
 
 interface StoreDefinition {
     id: string;
@@ -20,6 +21,7 @@ interface StoreDefinition {
 export default class State {
     auth: Auth;
     draft: Draft;
+    locale: LocaleOptions;
 
     /**
      * Construct new State.
@@ -27,6 +29,7 @@ export default class State {
     constructor() {
         this.auth = new Auth();
         this.draft = new Draft();
+        this.locale = new LocaleOptions();
 
         makeAutoObservable(this);
     }

src/mobx/stores/LocaleOptions.ts

@@ -72,13 +72,21 @@ export default class LocaleOptions implements Persistent<Data> {
 
     // eslint-disable-next-line require-jsdoc
     @action hydrate(data: Data) {
-        this.lang = data.lang;
+        this.setLanguage(data.lang);
     }
 
     /**
      * Get current language.
      */
-    @computed getLang() {
+    @computed getLanguage() {
         return this.lang;
     }
+
+    /**
+     * Set current language.
+     */
+    @action setLanguage(language: Language) {
+        if (typeof Languages[language] === "undefined") return;
+        this.lang = language;
+    }
 }

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,7 +67,15 @@ function Entry({ entry: [x, lang], locale }: { entry: Key } & Props) {
     );
 }
 
-export function Component(props: Props) {
+/**
+ * Component providing the language selection menu.
+ */
+export const Languages = observer(() => {
+    const locale = useApplicationState().locale;
+    const language = locale.getLanguage();
+
+    // Generate languages array.
+    const languages = useMemo(() => {
         const languages = Object.keys(Langs).map((x) => [
             x,
             Langs[x as keyof typeof Langs],
@@ -83,6 +97,7 @@ export function Component(props: Props) {
             const prefLangKey = languages.find(
                 (lang) => lang[0].replace(/_/g, "-") == preferredLanguage,
             );
+
             if (prefLangKey) {
                 languages.splice(
                     0,
@@ -92,17 +107,26 @@ export function Component(props: Props) {
             }
         }
 
+        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}>
             <h3>
                 <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,
-    };
 });