From ca9a886ef3fee95592130ee3beb42415bb180f24 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 31 Dec 2022 19:36:51 +0100
Subject: [PATCH] added yup localisation

---
 src/App.tsx         |  2 ++
 src/I18nHandler.tsx | 27 +++++++++++++++++++++++++++
 src/init-i18n.ts    |  4 ----
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/I18nHandler.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0af51e1..ddae05d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ import SettingsRoute from "~/routes/SettingsRoute"
 import SignupRoute from "~/routes/SignupRoute"
 import VerifyEmailRoute from "~/routes/VerifyEmailRoute"
 
+import I18nHandler from "./I18nHandler"
 import "./init-i18n"
 
 const router = createBrowserRouter([
@@ -111,6 +112,7 @@ export default function App(): ReactElement {
 					<SnackbarProvider>
 						<CssBaseline />
 						<RouterProvider router={router} />
+						<I18nHandler />
 					</SnackbarProvider>
 				</ThemeProvider>
 			</QueryClientProvider>
diff --git a/src/I18nHandler.tsx b/src/I18nHandler.tsx
new file mode 100644
index 0000000..47058d2
--- /dev/null
+++ b/src/I18nHandler.tsx
@@ -0,0 +1,27 @@
+import * as yup from "yup"
+import {useTranslation} from "react-i18next"
+import {useEffect} from "react"
+import {de} from "yup-locales"
+import en from "yup/es/locale"
+
+const YUP_LOCALE_LANGUAGE_MAP: Record<string, unknown> = {
+	"en-US": en,
+	"de-DE": de,
+}
+
+export default function I18nHandler(): null {
+	const {i18n} = useTranslation()
+
+	useEffect(() => {
+		i18n.on("languageChanged", newLanguage => {
+			// Update yup locale
+			const yupLocale = YUP_LOCALE_LANGUAGE_MAP[newLanguage]
+
+			if (yupLocale) {
+				yup.setLocale(yupLocale)
+			}
+		})
+	}, [i18n])
+
+	return null
+}
diff --git a/src/init-i18n.ts b/src/init-i18n.ts
index b32ea17..f2275df 100644
--- a/src/init-i18n.ts
+++ b/src/init-i18n.ts
@@ -1,6 +1,4 @@
 import {initReactI18next} from "react-i18next"
-import {de} from "yup-locales"
-import {setLocale} from "yup"
 // @ts-ignore
 // eslint-disable-next-line ordered-imports/ordered-imports
 import Cache from "i18next-localstorage-cache"
@@ -25,5 +23,3 @@ i18n.use(HttpApi)
 			escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
 		},
 	})
-
-setLocale(de)