Initial version of localization

package.json

@@ -28,10 +28,13 @@
     "@tanstack/react-query": "^5.29.2",
     "@tanstack/react-query-devtools": "^5.29.2",
     "cookie": "^0.6.0",
+    "i18next": "^23.11.4",
+    "i18next-http-backend": "^2.5.1",
     "next": "^14.2.2",
     "nuqs": "^1.17.2",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-i18next": "^14.1.1"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.9.0",

src/app/haku/[oid]/page.tsx

@@ -1,9 +1,14 @@
 'use client';
 
+import { useTranslation } from 'react-i18next';
+
 export default function HakuPage() {
+  const { t } = useTranslation();
+
   return (
     <div style={{ alignSelf: 'center', width: '70%', padding: '1rem 2rem' }}>
       <h2>Valitse hakukohde</h2>
+      <p>{t('title')}</p>
     </div>
   );
 }

src/app/lib/configuration.ts

@@ -15,6 +15,7 @@ interface Configuration {
   kooditUrl: string;
   koutaInternalLogin: string;
   asiointiKieliUrl: string;
+  lokalisaatioUrl: string;
 }
 
 export const configuration: Configuration = {
@@ -27,4 +28,5 @@ export const configuration: Configuration = {
   kooditUrl: `${DOMAIN}/koodisto-service/rest/codeelement/codes/`,
   koutaInternalLogin: `${DOMAIN}/kouta-internal/auth/login`,
   asiointiKieliUrl: `${DOMAIN}/oppijanumerorekisteri-service/henkilo/current/asiointiKieli`,
+  lokalisaatioUrl: `${DOMAIN}/lokalisointi/cxf/rest/v1/localisation?category=valintojen-toteuttaminen&locale=`,
 };

src/app/lib/localization.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import { configuration } from './configuration';
+import { client } from './http-client';
+import { Language } from './common';
+
+export const getTranslations = async (lng: Language) => {
+  const translations = {};
+  const { data } = await client.get(`${configuration.lokalisaatioUrl}${lng}`);
+
+  console.log(data);
+
+  for (const translation of data) {
+    translations[translation.key] = translation.value;
+  }
+
+  console.log(translations);
+  console.log('TRANSLATIONS ' + lng.toString());
+
+  return translations;
+};

src/app/lib/translations.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import HttpBackend from 'i18next-http-backend';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { getTranslations } from './localization';
+
+export const createLocalization = () => {
+  i18n
+    .use(HttpBackend)
+    .use(initReactI18next)
+    .init({
+      debug: true,
+      fallbackLng: 'fi',
+      preload: ['fi', 'sv', 'en'],
+      lng: 'fi',
+      backend: {
+        loadPath: '{{lng}}',
+        request: (options, url, payload, callback) => {
+          getTranslations(url)
+            .then((data) => {
+              callback(null, { status: 200, data });
+            })
+            .catch(() => callback({ status: 404 }));
+        },
+      },
+    });
+  return i18n;
+};

src/app/wrapper.tsx

@@ -1,16 +1,21 @@
 'use client';
+import { I18nextProvider } from 'react-i18next';
 import { FullSpinner } from './components/full-spinner';
-import { useAsiointiKieli } from './hooks/useAsiointiKieli';
+import { useAsiointiKieli } from './lib/hooks/useAsiointiKieli';
+import { createLocalization } from './lib/translations';
+
+const localization = createLocalization();
 
 export default function Wrapper({ children }: { children: React.ReactNode }) {
-  const { isLoading, isError, error } = useAsiointiKieli();
+  const { isLoading, isError, error, data } = useAsiointiKieli();
 
   switch (true) {
     case isLoading:
       return <FullSpinner />;
     case isError:
       throw error;
     default:
-      return children;
+      localization.changeLanguage(data?.data ?? 'fi');
+      return <I18nextProvider i18n={localization}>{children}</I18nextProvider>;
   }
 }