From 62cd8b57d193a49c1607c983940dc4039ada30f5 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 27 Feb 2023 11:31:46 +0000
Subject: [PATCH] feat: language picker

---
 packages/app/src/IntlProvider.tsx             | 14 +++++++---
 .../app/src/Pages/settings/Preferences.tsx    | 28 +++++++++++++++++++
 packages/app/src/State/Login.ts               |  5 ++++
 packages/app/src/lang.json                    |  3 ++
 packages/app/src/translations/en.json         |  1 +
 5 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/IntlProvider.tsx b/packages/app/src/IntlProvider.tsx
index 4053cba6..6c9ad1c7 100644
--- a/packages/app/src/IntlProvider.tsx
+++ b/packages/app/src/IntlProvider.tsx
@@ -1,5 +1,9 @@
 import { type ReactNode } from "react";
+import { useSelector } from "react-redux";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
+
+import { RootState } from "State/Store";
+
 import enMessages from "translations/en.json";
 import esMessages from "translations/es.json";
 import zhMessages from "translations/zh.json";
@@ -37,10 +41,8 @@ const getMessages = (locale: string) => {
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
-  const getLocale = () => {
-    return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
-  };
-  const locale = getLocale();
+  const lang = useSelector((s: RootState) => s.login.preferences.language);
+  const locale = lang ?? getLocale();
 
   return (
     <ReactIntlProvider locale={locale} messages={getMessages(locale)}>
@@ -48,3 +50,7 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => {
     </ReactIntlProvider>
   );
 };
+
+export const getLocale = () => {
+  return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
+};
diff --git a/packages/app/src/Pages/settings/Preferences.tsx b/packages/app/src/Pages/settings/Preferences.tsx
index 90c05371..753daf5d 100644
--- a/packages/app/src/Pages/settings/Preferences.tsx
+++ b/packages/app/src/Pages/settings/Preferences.tsx
@@ -21,6 +21,34 @@ const PreferencesPage = () => {
         <FormattedMessage {...messages.Preferences} />
       </h3>
 
+      <div className="card flex">
+        <div className="flex f-col f-grow">
+          <div>
+            <FormattedMessage defaultMessage="Language" />
+          </div>
+        </div>
+        <div>
+          <select
+            value={perf.language}
+            onChange={e =>
+              dispatch(
+                setPreferences({
+                  ...perf,
+                  language: e.target.value,
+                } as UserPreferences)
+              )
+            }
+            style={{ textTransform: "capitalize" }}>
+            {["en", "ja", "es", "hu", "zh", "fr", "ar"].sort().map(a => (
+              <option value={a}>
+                {new Intl.DisplayNames([a], {
+                  type: "language",
+                }).of(a)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
       <div className="card flex">
         <div className="flex f-col f-grow">
           <div>
diff --git a/packages/app/src/State/Login.ts b/packages/app/src/State/Login.ts
index 1458760d..342114c8 100644
--- a/packages/app/src/State/Login.ts
+++ b/packages/app/src/State/Login.ts
@@ -21,6 +21,11 @@ export interface NotificationRequest {
 }
 
 export interface UserPreferences {
+  /**
+   * User selected language
+   */
+  language?: "en" | "ja" | "es" | "hu" | "zh" | "fr" | "ar";
+
   /**
    * Enable reactions / reposts / zaps
    */
diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json
index bbb757f2..6e2e9a02 100644
--- a/packages/app/src/lang.json
+++ b/packages/app/src/lang.json
@@ -786,6 +786,9 @@
   "xmcVZ0": {
     "defaultMessage": "Search"
   },
+  "y1Z3or": {
+    "defaultMessage": "Language"
+  },
   "yCmnnm": {
     "defaultMessage": "Read global from",
     "description": "Label for reading global feed from specific relays"
diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json
index 6cd47eba..e6740e09 100644
--- a/packages/app/src/translations/en.json
+++ b/packages/app/src/translations/en.json
@@ -256,6 +256,7 @@
   "xKflGN": "{username}''s Follows on Nostr",
   "xbVgIm": "Automatically load media",
   "xmcVZ0": "Search",
+  "y1Z3or": "Language",
   "yCmnnm": "Read global from",
   "zFegDD": "Contact",
   "zINlao": "Owner",