From ad80fd3bdeeff2ac09881ee28d3e630140c1c2b1 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Thu, 23 May 2024 14:19:33 +0200
Subject: [PATCH] Persit selected language

---
 front/apps/mobile/app/_layout.tsx          |  2 +-
 front/apps/web/src/i18n.tsx                |  7 ++++++-
 front/packages/models/src/theme.ts         | 15 ++++++++++++---
 front/packages/ui/src/settings/general.tsx | 15 +++++++++++----
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx
index e2064be9..9e14becb 100644
--- a/front/apps/mobile/app/_layout.tsx
+++ b/front/apps/mobile/app/_layout.tsx
@@ -74,7 +74,7 @@ i18next.use(initReactI18next).init({
 	},
 	returnEmptyString: false,
 	fallbackLng: "en",
-	lng: getLocales()[0].languageCode ?? "en",
+	lng: storage.getString("language") ?? getLocales()[0].languageCode ?? "en",
 	resources,
 });
 
diff --git a/front/apps/web/src/i18n.tsx b/front/apps/web/src/i18n.tsx
index f061c911..a0ff74cb 100644
--- a/front/apps/web/src/i18n.tsx
+++ b/front/apps/web/src/i18n.tsx
@@ -23,6 +23,7 @@ import type { AppContext, AppInitialProps, AppProps } from "next/app";
 import { type ComponentType, useState } from "react";
 import { I18nextProvider } from "react-i18next";
 import resources from "../../../translations";
+import { readCookie } from "@kyoo/models/src/account-internal";
 
 export const withTranslations = (
 	AppToTranslate: ComponentType<AppProps> & {
@@ -57,7 +58,11 @@ export const withTranslations = (
 	};
 	AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
 		const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx);
-		const lng = ctx.router.locale || ctx.router.defaultLocale || "en";
+		const lng =
+			readCookie(ctx.ctx.req?.headers.cookie, "language") ||
+			ctx.router.locale ||
+			ctx.router.defaultLocale ||
+			"en";
 		await i18n.init({
 			...commonOptions,
 			lng,
diff --git a/front/packages/models/src/theme.ts b/front/packages/models/src/theme.ts
index 36ccb119..773389ec 100644
--- a/front/packages/models/src/theme.ts
+++ b/front/packages/models/src/theme.ts
@@ -29,7 +29,16 @@ export const useUserTheme = (ssrTheme?: "light" | "dark" | "auto") => {
 	return value as "light" | "dark" | "auto";
 };
 
-export const setUserTheme = (theme: "light" | "dark" | "auto") => {
-	storage.set("theme", theme);
-	if (Platform.OS === "web") setCookie("theme", theme);
+export const storeData = (key: string, value: string | number | boolean) => {
+	storage.set(key, value);
+	if (Platform.OS === "web") setCookie(key, value);
+};
+
+export const deleteData = (key: string) => {
+	storage.delete(key);
+	if (Platform.OS === "web") setCookie(key, undefined);
+};
+
+export const setUserTheme = (theme: "light" | "dark" | "auto") => {
+	storeData("theme", theme);
 };
diff --git a/front/packages/ui/src/settings/general.tsx b/front/packages/ui/src/settings/general.tsx
index 47192293..39bcb4a7 100644
--- a/front/packages/ui/src/settings/general.tsx
+++ b/front/packages/ui/src/settings/general.tsx
@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { setUserTheme, useUserTheme } from "@kyoo/models";
+import { setUserTheme, storeData, useUserTheme } from "@kyoo/models";
 import { Link, Select } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { Preference, SettingsContainer } from "./base";
@@ -35,6 +35,15 @@ export const GeneralSettings = () => {
 	const theme = useUserTheme("auto");
 	const getLanguageName = useLanguageName();
 
+	const changeLanguage = (lang: string) => {
+		if (lang === "system") {
+			i18n.changeLanguage(i18n.options.lng as string);
+			return
+		}
+		storeData("language", lang);
+		i18n.changeLanguage(lang);
+	};
+
 	return (
 		<SettingsContainer title={t("settings.general.label")}>
 			<Preference
@@ -58,9 +67,7 @@ export const GeneralSettings = () => {
 				<Select
 					label={t("settings.general.language.label")}
 					value={i18n.resolvedLanguage!}
-					onValueChange={(value) =>
-						i18n.changeLanguage(value !== "system" ? value : (i18n.options.lng as string))
-					}
+					onValueChange={(value) => changeLanguage(value)}
 					values={["system", ...Object.keys(i18n.options.resources!)]}
 					getLabel={(key) =>
 						key === "system" ? t("settings.general.language.system") : getLanguageName(key) ?? key