From 3405ea9caf8cac3d020cc85a3663d3be3aa938c1 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 25 Feb 2025 23:16:21 +0100
Subject: [PATCH] Make translations work on web & native

---
 front/app/_middleware.ts                      |  2 +-
 front/src/providers/index.tsx                 |  2 +-
 front/src/providers/translations.native.tsx   | 25 ++++++++++++++++++
 front/src/providers/translations.tsx          | 26 +++----------------
 .../src/providers/translations.web.client.tsx |  3 ++-
 front/src/providers/translations.web.tsx      |  5 ----
 6 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 front/src/providers/translations.native.tsx
 delete mode 100644 front/src/providers/translations.web.tsx

diff --git a/front/app/_middleware.ts b/front/app/_middleware.ts
index 206a0032..409c1db9 100644
--- a/front/app/_middleware.ts
+++ b/front/app/_middleware.ts
@@ -1,5 +1,5 @@
 import { createMiddleware, setServerData } from "one";
-import { supportedLanguages } from "~/providers/translations.web.ssr";
+import { supportedLanguages } from "~/providers/translations.compile";
 
 export default createMiddleware(({ request, next }) => {
 	const systemLanguage = request.headers
diff --git a/front/src/providers/index.tsx b/front/src/providers/index.tsx
index 8844466d..1aacb1ba 100644
--- a/front/src/providers/index.tsx
+++ b/front/src/providers/index.tsx
@@ -7,7 +7,7 @@ import { createQueryClient } from "~/query";
 import { AccountProvider } from "./account-provider";
 import { ErrorConsumer } from "./error-consumer";
 import { ErrorProvider } from "./error-provider";
-import { TranslationsProvider } from "./translations";
+import { TranslationsProvider } from "./translations.native";
 
 const QueryProvider = ({ children }: { children: ReactNode }) => {
 	const [queryClient] = useState(() => createQueryClient());
diff --git a/front/src/providers/translations.native.tsx b/front/src/providers/translations.native.tsx
new file mode 100644
index 00000000..bc3e56c1
--- /dev/null
+++ b/front/src/providers/translations.native.tsx
@@ -0,0 +1,25 @@
+import i18next from "i18next";
+import { type ReactNode, useMemo } from "react";
+import { I18nextProvider } from "react-i18next";
+import { resources, supportedLanguages } from "./translations.compile";
+import { setServerData } from "one";
+
+export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
+	const val = useMemo(() => {
+		const i18n = i18next.createInstance();
+		i18n.init({
+			interpolation: {
+				escapeValue: false,
+			},
+			returnEmptyString: false,
+			fallbackLng: "en",
+			load: "currentOnly",
+			supportedLngs: supportedLanguages,
+			resources: resources,
+		});
+		// store data for the browser
+		setServerData("translations", i18n.services.resourceStore.data);
+		return i18n;
+	}, []);
+	return <I18nextProvider i18n={val}>{children}</I18nextProvider>;
+};
diff --git a/front/src/providers/translations.tsx b/front/src/providers/translations.tsx
index 99ae3f3b..783a1ae0 100644
--- a/front/src/providers/translations.tsx
+++ b/front/src/providers/translations.tsx
@@ -1,22 +1,4 @@
-import i18next from "i18next";
-import { type ReactNode, useMemo } from "react";
-import { I18nextProvider } from "react-i18next";
-import { resources, supportedLanguages } from "./translations.compile";
-
-export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
-	const val = useMemo(() => {
-		const i18n = i18next.createInstance();
-		i18n.init({
-			interpolation: {
-				escapeValue: false,
-			},
-			returnEmptyString: false,
-			fallbackLng: "en",
-			load: "currentOnly",
-			supportedLngs: supportedLanguages,
-			resources: resources,
-		});
-		return i18n;
-	}, []);
-	return <I18nextProvider i18n={val}>{children}</I18nextProvider>;
-};
+// use native version during ssr
+export default typeof window === "undefined"
+	? await import("./translations.native")
+	: await import("./translations.web.client");
diff --git a/front/src/providers/translations.web.client.tsx b/front/src/providers/translations.web.client.tsx
index 175430e1..97c27774 100644
--- a/front/src/providers/translations.web.client.tsx
+++ b/front/src/providers/translations.web.client.tsx
@@ -3,6 +3,7 @@ import HttpApi, { type HttpBackendOptions } from "i18next-http-backend";
 import { getServerData } from "one";
 import { type ReactNode, useMemo } from "react";
 import { I18nextProvider } from "react-i18next";
+import { supportedLanguages } from "./translations.compile";
 
 export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
 	const val = useMemo(() => {
@@ -15,7 +16,7 @@ export const TranslationsProvider = ({ children }: { children: ReactNode }) => {
 			returnEmptyString: false,
 			fallbackLng: "en",
 			load: "currentOnly",
-			supportedLngs: getServerData("supportedLngs"),
+			supportedLngs: supportedLanguages,
 			// we don't need to cache resources since we always get a fresh one from ssr
 			backend: {
 				loadPath: "/translations/{{lng}}.json",
diff --git a/front/src/providers/translations.web.tsx b/front/src/providers/translations.web.tsx
deleted file mode 100644
index ea1ce48f..00000000
--- a/front/src/providers/translations.web.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-// use native version during ssr
-export const { TranslationsProvider } =
-	typeof window === "undefined"
-		? await import("./translations")
-		: await import("./translations.web.client");