- Haut
+ {t('haku.otsikko')}
{controls}
diff --git a/src/app/components/error-boundary.tsx b/src/app/components/error-boundary.tsx
index 19a5be32..d0be7418 100644
--- a/src/app/components/error-boundary.tsx
+++ b/src/app/components/error-boundary.tsx
@@ -1,6 +1,7 @@
'use client';
import { useEffect } from 'react';
import { FetchError } from '../lib/common';
+import { useTranslations } from '../hooks/useTranslations';
export default function Error({
error,
@@ -13,19 +14,23 @@ export default function Error({
console.error(error);
});
+ const { t } = useTranslations();
+
if (error instanceof FetchError) {
return (
<>
- Palvelinpyyntö epäonnistui!
- Virhekoodi: {error.response.status}
-
+ {t('virhe.palvelin')}
+
+ {t('virhe.virhekoodi')} {error.response.status}
+
+
);
} else {
return (
<>
- Jokin meni vikaan
-
+ {t('virhe.tuntematon')}
+
);
}
diff --git a/src/app/components/table/list-table.tsx b/src/app/components/table/list-table.tsx
index 98fbcb55..f10a90d2 100644
--- a/src/app/components/table/list-table.tsx
+++ b/src/app/components/table/list-table.tsx
@@ -10,11 +10,13 @@ import {
TableRow,
styled,
} from '@mui/material';
-import { TranslatedName, getTranslation } from '@/app/lib/common';
import { Haku, getAlkamisKausi, Tila } from '@/app/lib/kouta-types';
import { colors } from '@/app/theme';
import { ExpandLess, ExpandMore, UnfoldMore } from '@mui/icons-material';
import { getSortParts } from './table-utils';
+import { TranslatedName } from '@/app/lib/localization/localization-types';
+import { useTranslations } from '@/app/hooks/useTranslations';
+import { TFunction } from 'i18next';
type Column = {
title?: string;
@@ -29,12 +31,14 @@ type KeysMatching = {
[K in keyof O]: O[K] extends T ? K : never;
}[keyof O & string];
-export const makeHakuColumn = (): Column => ({
- title: 'Nimi',
+export const makeHakuColumn = (
+ translateEntity: (entity: TranslatedName) => string,
+): Column => ({
+ title: 'yleinen.nimi',
key: 'nimi',
render: (haku) => (
- {getTranslation(haku.nimi)}
+ {translateEntity(haku.nimi)}
),
style: {
@@ -58,7 +62,7 @@ export const makeCountColumn = ({
});
export const makeTilaColumn = (): Column => ({
- title: 'Tila',
+ title: 'yleinen.tila',
key: 'tila',
render: (haku) => {haku.tila},
style: {
@@ -69,18 +73,20 @@ export const makeTilaColumn = (): Column => ({
export const makeHakutapaColumn = (
getMatchingHakutapa: (koodiUri: string) => string | undefined,
): Column => ({
- title: 'Hakutapa',
+ title: 'haku.hakutapa',
key: 'hakutapaNimi',
render: (haku) => {getMatchingHakutapa(haku.hakutapaKoodiUri)},
});
-export const makeKoulutuksenAlkamiskausiColumn = (): Column => ({
- title: 'Koulutuksen alkamiskausi',
+export const makeKoulutuksenAlkamiskausiColumn = (
+ t: TFunction,
+): Column => ({
+ title: 'haku.alkamiskausi',
key: 'alkamiskausiNimi',
render: (haku) => (
{haku.alkamisKausiKoodiUri
- ? `${haku.alkamisVuosi} ${getAlkamisKausi(haku.alkamisKausiKoodiUri)}`
+ ? `${haku.alkamisVuosi} ${t(getAlkamisKausi(haku.alkamisKausiKoodiUri))}`
: ''}
),
@@ -181,6 +187,8 @@ export const ListTable = ({
setSort,
...props
}: ListTableProps) => {
+ const { t } = useTranslations();
+
return (
@@ -191,7 +199,7 @@ export const ListTable = ({
,
>(
key: string,
direction: 'asc' | 'desc' = 'asc',
- lng: Language,
+ translateEntity: (entity: TranslatedName) => string,
) => {
const asc = direction === 'asc';
return (a: T, b: T) => {
const aKey = a[key] ?? '';
- const aProp = isTranslatedName(aKey) ? getTranslation(aKey, lng) : aKey;
+ const aProp = isTranslatedName(aKey) ? translateEntity(aKey) : aKey;
const bKey = b[key] ?? '';
- const bProp = isTranslatedName(bKey) ? getTranslation(bKey, lng) : bKey;
+ const bProp = isTranslatedName(bKey) ? translateEntity(bKey) : bKey;
return aProp > bProp ? (asc ? 1 : -1) : bProp > aProp ? (asc ? -1 : 1) : 0;
};
diff --git a/src/app/haku/[oid]/@header/page.tsx b/src/app/haku/[oid]/@header/page.tsx
index 7447d374..d974e5d3 100644
--- a/src/app/haku/[oid]/@header/page.tsx
+++ b/src/app/haku/[oid]/@header/page.tsx
@@ -1,6 +1,6 @@
'use client';
import Header from '@/app/components/header';
-import { getTranslation } from '@/app/lib/common';
+import { useTranslations } from '@/app/hooks/useTranslations';
import { getHaku } from '@/app/lib/kouta';
import { useSuspenseQuery } from '@tanstack/react-query';
@@ -10,5 +10,7 @@ export default function HeaderPage({ params }: { params: { oid: string } }) {
queryFn: () => getHaku(params.oid),
});
- return ;
+ const { translateEntity } = useTranslations();
+
+ return ;
}
diff --git a/src/app/haku/[oid]/hakukohde-list.tsx b/src/app/haku/[oid]/hakukohde-list.tsx
index 895f9389..2c54282c 100644
--- a/src/app/haku/[oid]/hakukohde-list.tsx
+++ b/src/app/haku/[oid]/hakukohde-list.tsx
@@ -1,6 +1,6 @@
'use client';
-import { getTranslation } from '@/app/lib/common';
+import { useTranslations } from '@/app/hooks/useTranslations';
import { getHakukohteet } from '@/app/lib/kouta';
import { Hakukohde } from '@/app/lib/kouta-types';
import { styled } from '@mui/material';
@@ -27,6 +27,7 @@ const StyledItem = styled('div')({
export const HakukohdeList = ({ oid }: { oid: string }) => {
const router = useRouter();
+ const { translateEntity } = useTranslations();
const selectHakukohde = (hakukohde: Hakukohde) => {
router.push(`/haku/${oid}/hakukohde/${hakukohde.oid}/perustiedot`);
@@ -42,9 +43,9 @@ export const HakukohdeList = ({ oid }: { oid: string }) => {
{hakukohteet.map((hk: Hakukohde) => (
selectHakukohde(hk)}>
- {getTranslation(hk.jarjestyspaikkaHierarkiaNimi)}
+ {translateEntity(hk.jarjestyspaikkaHierarkiaNimi)}
- {getTranslation(hk.nimi)}
+ {translateEntity(hk.nimi)}
))}
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx
index 6aca068a..7029f45e 100644
--- a/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx
+++ b/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx
@@ -1,12 +1,12 @@
'use client';
-import { getTranslation } from '@/app/lib/common';
import { styled } from '@mui/material';
import { useState } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { getHakukohde } from '@/app/lib/kouta';
import { usePathname } from 'next/navigation';
import { Link as MuiLink } from '@mui/material';
+import { useTranslations } from '@/app/hooks/useTranslations';
const StyledContainer = styled('div')({
padding: '0.5rem 1.5rem 0',
@@ -43,15 +43,15 @@ export type BasicTab = {
};
const TABS: BasicTab[] = [
- { title: 'Perustiedot', route: 'perustiedot' },
- { title: 'Hakeneet', route: 'hakeneet' },
- { title: 'Valinnan hallinta', route: 'valinnan-hallinta' },
- { title: 'Valintakoekutsut', route: 'valintakoekutsut' },
- { title: 'Pistesyöttö', route: 'pistesyotto' },
- { title: 'Harkinnanvaraiset', route: 'harkinnanvaraiset' },
- { title: 'Hakijaryhmät', route: 'hakijaryhmat' },
- { title: 'Valintalaskennan tulos', route: 'valintalaskennan-tulos' },
- { title: 'Sijoittelun tulokset', route: 'sijoittelun-tulokset' },
+ { title: 'perustiedot.otsikko', route: 'perustiedot' },
+ { title: 'hakeneet.otsikko', route: 'hakeneet' },
+ { title: 'valinnanhallinta.otsikko', route: 'valinnan-hallinta' },
+ { title: 'koekutsut.otsikko', route: 'valintakoekutsut' },
+ { title: 'pistesyotto.otsikko', route: 'pistesyotto' },
+ { title: 'harkinnanvaraiset.otsikko', route: 'harkinnanvaraiset' },
+ { title: 'hakijaryhmat.otsikko', route: 'hakijaryhmat' },
+ { title: 'valintalaskennantulos.otsikko', route: 'valintalaskennan-tulos' },
+ { title: 'sijoitteluntulokset.otsikko', route: 'sijoittelun-tulokset' },
] as const;
function getPathMatchingTab(pathName: string) {
@@ -64,6 +64,7 @@ export const HakukohdeTabs = ({ hakukohdeOid }: { hakukohdeOid: string }) => {
const [activeTab, setActiveTab] = useState(
getPathMatchingTab(pathName),
);
+ const { t, translateEntity } = useTranslations();
const { data: hakukohde } = useSuspenseQuery({
queryKey: ['getHakukohde', hakukohdeOid],
@@ -79,11 +80,11 @@ export const HakukohdeTabs = ({ hakukohdeOid }: { hakukohdeOid: string }) => {
- {getTranslation(hakukohde.jarjestyspaikkaHierarkiaNimi)}
+ {translateEntity(hakukohde.jarjestyspaikkaHierarkiaNimi)}
- {getTranslation(hakukohde.nimi)}
+ {translateEntity(hakukohde.nimi)}
@@ -99,7 +100,7 @@ export const HakukohdeTabs = ({ hakukohdeOid }: { hakukohdeOid: string }) => {
}
onClick={() => selectActiveTab(tab)}
>
- {tab.title}
+ {t(tab.title)}
))}
diff --git a/src/app/haku/[oid]/page.tsx b/src/app/haku/[oid]/page.tsx
index 7b288560..988c4d31 100644
--- a/src/app/haku/[oid]/page.tsx
+++ b/src/app/haku/[oid]/page.tsx
@@ -1,9 +1,13 @@
'use client';
+import { useTranslations } from '@/app/hooks/useTranslations';
+
export default function HakuPage() {
+ const { t } = useTranslations();
+
return (
-
Valitse hakukohde
+ {t('hakukohde.valitse')}
);
}
diff --git a/src/app/hooks/useAsiointiKieli.ts b/src/app/hooks/useAsiointiKieli.ts
index 99b2953a..2003d0e1 100644
--- a/src/app/hooks/useAsiointiKieli.ts
+++ b/src/app/hooks/useAsiointiKieli.ts
@@ -1,14 +1,17 @@
import { useQuery } from '@tanstack/react-query';
import { client } from '../lib/http-client';
import { configuration } from '../lib/configuration';
+import { Language } from '../lib/localization/localization-types';
-export const getAsiointiKieli = () => {
- return client.get(configuration.asiointiKieliUrl);
+export const getAsiointiKieli = async (): Promise => {
+ const response = await client.get(configuration.asiointiKieliUrl);
+ return response.data ?? 'fi';
};
export const useAsiointiKieli = () =>
useQuery({
queryKey: ['getAsiointiKieli'],
queryFn: getAsiointiKieli,
+
staleTime: Infinity,
});
diff --git a/src/app/hooks/useHakuSearch.tsx b/src/app/hooks/useHakuSearch.tsx
index 4aa1c227..2b9d0de4 100644
--- a/src/app/hooks/useHakuSearch.tsx
+++ b/src/app/hooks/useHakuSearch.tsx
@@ -6,7 +6,6 @@ import {
Tila,
getHakuAlkamisKaudet,
} from '../lib/kouta-types';
-import { Language, getTranslation } from '../lib/common';
import { useDebounce } from '@/app/hooks/useDebounce';
import { parseAsInteger, useQueryState } from 'nuqs';
import { useHasChanged } from '@/app/hooks/useHasChanged';
@@ -18,6 +17,7 @@ import {
DEFAULT_PAGE_SIZE,
HAKU_SEARCH_PHRASE_DEBOUNCE_DELAY,
} from '@/app/lib/constants';
+import { useTranslations } from './useTranslations';
const DEFAULT_NUQS_OPTIONS = {
history: 'push',
@@ -150,6 +150,7 @@ export const useHakuSearchParams = () => {
export const useHakuSearchResults = () => {
const alkamiskaudet = useMemo(getHakuAlkamisKaudet, []);
const { data: hakutavat } = useHakutavat();
+ const { translateEntity } = useTranslations();
const { data: haut } = useSuspenseQuery({
queryKey: ['getHaut'],
@@ -188,7 +189,7 @@ export const useHakuSearchResults = () => {
const filtered = haut.filter(
(haku: Haku) =>
tilat.includes(haku.tila) &&
- getTranslation(haku.nimi)
+ translateEntity(haku.nimi)
.toLowerCase()
.includes(searchPhrase?.toLowerCase() ?? '') &&
alkamisKausiMatchesSelected(
@@ -198,7 +199,7 @@ export const useHakuSearchResults = () => {
haku.hakutapaKoodiUri.startsWith(selectedHakutapa ?? ''),
);
return orderBy && direction
- ? filtered.sort(byProp(orderBy, direction, Language.FI))
+ ? filtered.sort(byProp(orderBy, direction, translateEntity))
: filtered;
}, [
haut,
@@ -208,6 +209,7 @@ export const useHakuSearchResults = () => {
selectedHakutapa,
alkamiskaudet,
sort,
+ translateEntity,
]);
const pageResults = useMemo(() => {
diff --git a/src/app/hooks/useTranslations.ts b/src/app/hooks/useTranslations.ts
new file mode 100644
index 00000000..66e63303
--- /dev/null
+++ b/src/app/hooks/useTranslations.ts
@@ -0,0 +1,14 @@
+import {
+ Language,
+ TranslatedName,
+} from '../lib/localization/localization-types';
+import { useTranslation } from 'react-i18next';
+import { translateName } from '../lib/localization/translation-utils';
+
+export const useTranslations = () => {
+ const { t, i18n } = useTranslation();
+ const translateEntity = (translateable: TranslatedName) => {
+ return translateName(translateable, i18n.language as Language);
+ };
+ return { t, translateEntity };
+};
diff --git a/src/app/lib/common.test.ts b/src/app/lib/common.test.ts
deleted file mode 100644
index 53751391..00000000
--- a/src/app/lib/common.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { expect, test } from 'vitest';
-import { getTranslation, Language, TranslatedName } from './common';
-
-const school: TranslatedName = { fi: 'koulu', en: 'a school', sv: 'en skola' };
-
-test('Picks translation matching user language', () => {
- expect(getTranslation(school, Language.FI)).toBe('koulu');
- expect(getTranslation(school, Language.EN)).toBe('a school');
- expect(getTranslation(school, Language.SV)).toBe('en skola');
-});
-
-test('Defaults to finnish language when picking translation', () => {
- expect(getTranslation(school)).toBe('koulu');
-});
-
-test('Uses finnish, then english, then swedish if missing translation', () => {
- expect(getTranslation({ fi: 'kirja', en: 'a book' }, Language.SV)).toBe(
- 'kirja',
- );
- expect(getTranslation({ sv: 'en bok', en: 'a book' }, Language.FI)).toBe(
- 'a book',
- );
- expect(getTranslation({ sv: 'en bok' }, Language.FI)).toBe('en bok');
-});
diff --git a/src/app/lib/common.ts b/src/app/lib/common.ts
index ba8626b5..e8d7b71f 100644
--- a/src/app/lib/common.ts
+++ b/src/app/lib/common.ts
@@ -1,32 +1,3 @@
-export type TranslatedName = {
- fi?: string;
- en?: string;
- sv?: string;
-};
-
-export enum Language {
- FI,
- EN,
- SV,
-}
-
-//TODO: match user's language
-export function getTranslation(
- translated: TranslatedName,
- userLanguage: Language = Language.FI,
-): string {
- const prop = Language[userLanguage].toLowerCase() as keyof TranslatedName;
- const translation = translated[prop];
- if (translation && translation?.trim().length > 0) {
- return translated[prop] || '';
- } else if (translated.fi && translated.fi.trim().length > 0) {
- return translated.fi;
- } else if (translated.en && translated.en.trim().length > 0) {
- return translated.en;
- }
- return translated.sv || '';
-}
-
export class FetchError extends Error {
response: Response;
constructor(response: Response, message: string = 'Fetch error') {
@@ -40,12 +11,3 @@ export class FetchError extends Error {
export function isObject(value: unknown): value is Record {
return typeof value === 'object' && value !== null;
}
-
-export function isTranslatedName(value: unknown): value is TranslatedName {
- return (
- isObject(value) &&
- (typeof value?.fi === 'string' ||
- typeof value?.sv === 'string' ||
- typeof value?.en === 'string')
- );
-}
diff --git a/src/app/lib/configuration.ts b/src/app/lib/configuration.ts
index 644d3d48..bca7b372 100644
--- a/src/app/lib/configuration.ts
+++ b/src/app/lib/configuration.ts
@@ -3,6 +3,8 @@ const DOMAIN =
export const isLocalhost = DOMAIN.includes('localhost');
+export const isDev = process.env.NODE_ENV === 'development';
+
export const isProd = process.env.NODE_ENV === 'production';
interface Configuration {
@@ -15,6 +17,7 @@ interface Configuration {
kooditUrl: string;
koutaInternalLogin: string;
asiointiKieliUrl: string;
+ lokalisaatioUrl: string;
}
export const configuration: Configuration = {
@@ -27,4 +30,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=`,
};
diff --git a/src/app/lib/koodisto.ts b/src/app/lib/koodisto.ts
index 0be59240..f8c948d2 100644
--- a/src/app/lib/koodisto.ts
+++ b/src/app/lib/koodisto.ts
@@ -1,6 +1,6 @@
import { configuration } from './configuration';
-import { TranslatedName, Language } from './common';
import { client } from './http-client';
+import { Language, TranslatedName } from './localization/localization-types';
export type Koodi = {
koodiUri: string;
@@ -14,7 +14,7 @@ async function getKoodit(koodisto: string): Promise {
): string => {
const matchingData = metadata.find(
(m: { nimi: string; kieli: string }) =>
- Language[m.kieli.toUpperCase() as keyof typeof Language] === language,
+ m.kieli.toLowerCase() === language,
);
return matchingData ? matchingData.nimi : '';
};
@@ -23,9 +23,9 @@ async function getKoodit(koodisto: string): Promise {
return response.data.map(
(k: { koodiUri: string; metadata: [{ nimi: string; kieli: string }] }) => {
const translated = {
- fi: getTranslatedNimi(Language.FI, k.metadata),
- sv: getTranslatedNimi(Language.SV, k.metadata),
- en: getTranslatedNimi(Language.EN, k.metadata),
+ fi: getTranslatedNimi('fi', k.metadata),
+ sv: getTranslatedNimi('sv', k.metadata),
+ en: getTranslatedNimi('en', k.metadata),
};
return { koodiUri: k.koodiUri, nimi: translated };
},
diff --git a/src/app/lib/kouta-types.ts b/src/app/lib/kouta-types.ts
index 7b93765e..9b627d59 100644
--- a/src/app/lib/kouta-types.ts
+++ b/src/app/lib/kouta-types.ts
@@ -1,4 +1,4 @@
-import { TranslatedName } from './common';
+import { TranslatedName } from './localization/localization-types';
const STARTING_YEAR = 2019; // check earliest kouta haku
@@ -9,9 +9,10 @@ export type HaunAlkaminen = {
value: string;
};
-//TODO: localization
export const getAlkamisKausi = (alkamisKausiKoodiUri: string) =>
- alkamisKausiKoodiUri.startsWith('kausi_s') ? 'SYKSY' : 'KEVÄT';
+ alkamisKausiKoodiUri.startsWith('kausi_s')
+ ? 'yleinen.syksy'
+ : 'yleinen.kevat';
export const getHakuAlkamisKaudet = (): HaunAlkaminen[] => {
const nowYear = new Date().getFullYear();
@@ -20,20 +21,19 @@ export const getHakuAlkamisKaudet = (): HaunAlkaminen[] => {
alkamiset.push({
alkamisVuosi: i,
alkamisKausiKoodiUri: 'kausi_s',
- alkamisKausiNimi: 'SYKSY',
+ alkamisKausiNimi: 'yleinen.syksy',
value: `${i}_syksy`,
});
alkamiset.push({
alkamisVuosi: i,
alkamisKausiKoodiUri: 'kausi_k',
- alkamisKausiNimi: 'KEVÄT',
+ alkamisKausiNimi: 'yleinen.kevat',
value: `${i}_kevat`,
});
}
return alkamiset;
};
-//TODO: check whether any values are optional
export type Haku = {
oid: string;
nimi: TranslatedName;
diff --git a/src/app/lib/kouta.ts b/src/app/lib/kouta.ts
index 63778845..56168d99 100644
--- a/src/app/lib/kouta.ts
+++ b/src/app/lib/kouta.ts
@@ -1,9 +1,9 @@
'use client';
import { configuration } from './configuration';
-import { TranslatedName } from './common';
import { Haku, Hakukohde, Tila } from './kouta-types';
import { client } from './http-client';
+import { TranslatedName } from './localization/localization-types';
export async function getHaut() {
const response = await client.get(configuration.hautUrl);
diff --git a/src/app/lib/localization/localization-types.ts b/src/app/lib/localization/localization-types.ts
new file mode 100644
index 00000000..d7e997f4
--- /dev/null
+++ b/src/app/lib/localization/localization-types.ts
@@ -0,0 +1,7 @@
+export type Language = 'fi' | 'sv' | 'en';
+
+export type TranslatedName = {
+ fi?: string;
+ en?: string;
+ sv?: string;
+};
diff --git a/src/app/lib/localization/localizations.ts b/src/app/lib/localization/localizations.ts
new file mode 100644
index 00000000..36962a05
--- /dev/null
+++ b/src/app/lib/localization/localizations.ts
@@ -0,0 +1,35 @@
+'use client';
+
+import HttpBackend from 'i18next-http-backend';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { isDev } from '../configuration';
+
+export const createLocalizationProvider = () => {
+ i18n
+ .use(HttpBackend)
+ .use(initReactI18next)
+ .init({
+ debug: isDev,
+ fallbackLng: false,
+ preload: ['fi', 'sv', 'en'],
+ lng: 'fi',
+ backend: {
+ loadPath: '{{lng}}',
+ request: (
+ options: [],
+ url: string,
+ payload: unknown,
+ callback: (a: unknown, b?: unknown) => void,
+ ) => {
+ fetch(`/valintojen-toteuttaminen/lokalisaatio?lng=${url}`)
+ .then(async (response) => {
+ const translations = await response.json();
+ callback(null, { status: 200, data: translations });
+ })
+ .catch(() => callback({ status: 404 }));
+ },
+ },
+ });
+ return i18n;
+};
diff --git a/src/app/lib/localization/translation-utils.test.ts b/src/app/lib/localization/translation-utils.test.ts
new file mode 100644
index 00000000..085e4812
--- /dev/null
+++ b/src/app/lib/localization/translation-utils.test.ts
@@ -0,0 +1,21 @@
+import { expect, test } from 'vitest';
+import { TranslatedName } from './localization-types';
+import { translateName } from './translation-utils';
+
+const school: TranslatedName = { fi: 'koulu', en: 'a school', sv: 'en skola' };
+
+test('Picks translation matching user language', () => {
+ expect(translateName(school, 'fi')).toBe('koulu');
+ expect(translateName(school, 'en')).toBe('a school');
+ expect(translateName(school, 'sv')).toBe('en skola');
+});
+
+test('Defaults to finnish language when picking translation', () => {
+ expect(translateName(school)).toBe('koulu');
+});
+
+test('Uses finnish, then english, then swedish if missing translation', () => {
+ expect(translateName({ fi: 'kirja', en: 'a book' }, 'sv')).toBe('kirja');
+ expect(translateName({ sv: 'en bok', en: 'a book' }, 'fi')).toBe('a book');
+ expect(translateName({ sv: 'en bok' }, 'fi')).toBe('en bok');
+});
diff --git a/src/app/lib/localization/translation-utils.ts b/src/app/lib/localization/translation-utils.ts
new file mode 100644
index 00000000..984e0625
--- /dev/null
+++ b/src/app/lib/localization/translation-utils.ts
@@ -0,0 +1,27 @@
+import { isObject } from '../common';
+import { Language, TranslatedName } from './localization-types';
+
+export function translateName(
+ translated: TranslatedName,
+ userLanguage: Language = 'fi',
+): string {
+ const prop = userLanguage as keyof TranslatedName;
+ const translation = translated[prop];
+ if (translation && translation?.trim().length > 0) {
+ return translated[prop] || '';
+ } else if (translated.fi && translated.fi.trim().length > 0) {
+ return translated.fi;
+ } else if (translated.en && translated.en.trim().length > 0) {
+ return translated.en;
+ }
+ return translated.sv || '';
+}
+
+export function isTranslatedName(value: unknown): value is TranslatedName {
+ return (
+ isObject(value) &&
+ (typeof value?.fi === 'string' ||
+ typeof value?.sv === 'string' ||
+ typeof value?.en === 'string')
+ );
+}
diff --git a/src/app/lokalisaatio/en.json b/src/app/lokalisaatio/en.json
new file mode 100644
index 00000000..08293f55
--- /dev/null
+++ b/src/app/lokalisaatio/en.json
@@ -0,0 +1,16 @@
+{
+ "otsikko": "Valintojen Toteuttaminen",
+ "julkaistu": "Published",
+ "arkistoitu": "Archived",
+ "yleinen": {
+ "nimi": "Name",
+ "tila": "State",
+ "valitse": "Select...",
+ "kevat": "Spring",
+ "syksy": "Autumn",
+ "julkaistu": "Published",
+ "arkistoitu": "Archived",
+ "eiosumia": "No results",
+ "persivu": "Show per page:"
+ }
+}
diff --git a/src/app/lokalisaatio/fi.json b/src/app/lokalisaatio/fi.json
new file mode 100644
index 00000000..13384833
--- /dev/null
+++ b/src/app/lokalisaatio/fi.json
@@ -0,0 +1,59 @@
+{
+ "otsikko": "Valintojen toteuttaminen",
+ "julkaistu": "Julkaistu",
+ "arkistoitu": "Arkistoitu",
+ "yleinen": {
+ "nimi": "Nimi",
+ "tila": "Tila",
+ "valitse": "Valitse...",
+ "kevat": "kevät",
+ "syksy": "syksy",
+ "eiosumia": "Ei hakutuloksia",
+ "persivu": "Näytä per sivu:"
+ },
+ "virhe": {
+ "palvelin": "Palvelinpyyntö epäonnistui!",
+ "virhekoodi": "Virhekoodi: ",
+ "uudelleenyritys": "Yritä uudelleen",
+ "tuntematon": "Jokin meni vikaan"
+ },
+ "haku": {
+ "otsikko": "Haut",
+ "hakutapa": "Hakutapa",
+ "alkamiskausi": "Koulutuksen alkamiskausi",
+ "hakukohteet": "Hakukohteet",
+ "hae": "Hae hakuja",
+ "maara": "Hakuja:"
+ },
+ "hakukohde": {
+ "valitse": "Valitse hakukohde",
+ "oid": "Hakukohde oid: "
+ },
+ "perustiedot": {
+ "otsikko": "Perustiedot"
+ },
+ "hakeneet": {
+ "otsikko": "Hakeneet"
+ },
+ "valinnanhallinta": {
+ "otsikko": "Valinnan hallinta"
+ },
+ "koekutsut": {
+ "otsikko": "Valintakoekutsut"
+ },
+ "pistesyotto": {
+ "otsikko": "Pistesyöttö"
+ },
+ "harkinnanvaraiset": {
+ "otsikko": "Harkinnanvaraiset"
+ },
+ "hakijaryhmat": {
+ "otsikko": "Hakijaryhmät"
+ },
+ "valintalaskennantulos": {
+ "otsikko": "Valintalaskennan tulos"
+ },
+ "sijoitteluntulokset": {
+ "otsikko": "Sijoittelun tulokset"
+ }
+}
diff --git a/src/app/lokalisaatio/route.ts b/src/app/lokalisaatio/route.ts
new file mode 100644
index 00000000..b948da68
--- /dev/null
+++ b/src/app/lokalisaatio/route.ts
@@ -0,0 +1,40 @@
+import { configuration, isDev, isLocalhost } from '../lib/configuration';
+import finnishTranslations from './fi.json';
+import swedishTranslations from './sv.json';
+import englishTranslations from './en.json';
+
+const REVALIDATE_TIME_SECONDS = 60 * 60 * 2;
+
+async function getTranslations(lng: string) {
+ const res = await fetch(`${configuration.lokalisaatioUrl}${lng}`, {
+ next: { revalidate: REVALIDATE_TIME_SECONDS },
+ });
+ const data = await res.json();
+ const translations: Record = {};
+ for (const translation of data) {
+ translations[translation.key] = translation.value;
+ }
+ return translations;
+}
+
+function getTranslationsFromFile(lng: string) {
+ switch (lng) {
+ case 'sv':
+ return swedishTranslations;
+ case 'en':
+ return englishTranslations;
+ default:
+ return finnishTranslations;
+ }
+}
+
+export async function GET(request: Request) {
+ const { searchParams } = new URL(request.url);
+ const lng = searchParams.get('lng') || 'fi';
+ if (isDev && isLocalhost) {
+ return Response.json(getTranslationsFromFile(lng));
+ } else {
+ const translations: Record = await getTranslations(lng);
+ return Response.json(translations);
+ }
+}
diff --git a/src/app/lokalisaatio/sv.json b/src/app/lokalisaatio/sv.json
new file mode 100644
index 00000000..65a7ba8e
--- /dev/null
+++ b/src/app/lokalisaatio/sv.json
@@ -0,0 +1,4 @@
+{
+ "otsikko": "Valintojen Toteuttaminen",
+ "julkaistu": "Publicerad"
+}
diff --git a/src/app/wrapper.tsx b/src/app/wrapper.tsx
index 375a96b1..9f9d460e 100644
--- a/src/app/wrapper.tsx
+++ b/src/app/wrapper.tsx
@@ -1,9 +1,13 @@
'use client';
+import { I18nextProvider } from 'react-i18next';
import { FullSpinner } from './components/full-spinner';
import { useAsiointiKieli } from './hooks/useAsiointiKieli';
+import { createLocalizationProvider } from './lib/localization/localizations';
+
+const LocalizationProvider = createLocalizationProvider();
export default function Wrapper({ children }: { children: React.ReactNode }) {
- const { isLoading, isError, error } = useAsiointiKieli();
+ const { isLoading, isError, error, data } = useAsiointiKieli();
switch (true) {
case isLoading:
@@ -11,6 +15,11 @@ export default function Wrapper({ children }: { children: React.ReactNode }) {
case isError:
throw error;
default:
- return children;
+ LocalizationProvider.changeLanguage(data ?? 'fi');
+ return (
+
+ {children}
+
+ );
}
}
diff --git a/tests/e2e/haut.spec.ts b/tests/e2e/haut.spec.ts
index 356daf43..f73c7408 100644
--- a/tests/e2e/haut.spec.ts
+++ b/tests/e2e/haut.spec.ts
@@ -53,7 +53,7 @@ test('Haku-page accessibility', async ({ page }) => {
const getTableRows = (loc: Page | Locator) => loc.locator('tbody tr');
test('filters haku by published state', async ({ page }) => {
- await selectTila(page, 'julkaistu');
+ await selectTila(page, 'Julkaistu');
const tableRows = getTableRows(page);
await expect(tableRows).toHaveCount(3);
const hakuInput = await page.getByRole('textbox', { name: 'Hae hakuja' });
@@ -65,13 +65,13 @@ test('filters haku by published state', async ({ page }) => {
test('Set tila filter to julkaistu by default', async ({ page }) => {
await expectUrlParamToEqual(page, 'tila', 'julkaistu');
await expect(page.getByRole('combobox', { name: 'Tila' })).toContainText(
- 'julkaistu',
+ 'Julkaistu',
);
});
test('filters haku by archived state', async ({ page }) => {
const tableRows = getTableRows(page);
- await selectTila(page, 'arkistoitu');
+ await selectTila(page, 'Arkistoitu');
await expect(tableRows).toHaveCount(3);
const hakuInput = await page.getByRole('textbox', { name: 'Hae hakuja' });
@@ -95,9 +95,9 @@ test('filters by hakutapa', async ({ page }) => {
test('filters by start period', async ({ page }) => {
const tableRows = getTableRows(page);
- await selectKausi(page, '2024 SYKSY');
+ await selectKausi(page, '2024 syksy');
await expect(tableRows).toHaveCount(1);
- await selectKausi(page, '2020 SYKSY');
+ await selectKausi(page, '2020 syksy');
await expect(tableRows).toHaveCount(0);
await expectUrlParamToEqual(page, 'alkamiskausi', '2020_syksy');
});
@@ -106,7 +106,7 @@ test('filters by hakutapa and start period', async ({ page }) => {
const tableRows = getTableRows(page);
await selectHakutapa(page, 'Jatkuva haku');
await expect(tableRows).toHaveCount(2);
- await selectKausi(page, '2023 SYKSY');
+ await selectKausi(page, '2023 syksy');
await expect(tableRows).toHaveCount(1);
});
diff --git a/tests/e2e/lokalisointi.spec.ts b/tests/e2e/lokalisointi.spec.ts
new file mode 100644
index 00000000..30c9c512
--- /dev/null
+++ b/tests/e2e/lokalisointi.spec.ts
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Localization', async () => {
+ test('translates page to finnish', async ({ page }) => {
+ await page.goto('/');
+ await expect(page).toHaveTitle(/Valintojen Toteuttaminen/);
+ await expect(page.getByRole('combobox', { name: 'Tila' })).toContainText(
+ 'Julkaistu',
+ );
+ await expect(page.getByText('Haut')).toBeVisible();
+ await expect(page.getByText('haut.otsikko')).not.toBeVisible();
+ });
+
+ test('translates page to english', async ({ page }) => {
+ await page.route(
+ '*/**/oppijanumerorekisteri-service/henkilo/current/asiointiKieli',
+ async (route) => {
+ await route.fulfill({ body: 'en', contentType: 'text' });
+ },
+ );
+ await page.goto('/');
+ await expect(page).toHaveTitle(/Valintojen Toteuttaminen/);
+ await expect(page.getByRole('combobox', { name: 'State' })).toContainText(
+ 'Published',
+ );
+ await expect(page.getByText('Haut')).not.toBeVisible();
+ await expect(page.getByText('haku.otsikko')).toBeVisible();
+ });
+
+ test('translates page to swedish', async ({ page }) => {
+ await page.route(
+ '*/**/oppijanumerorekisteri-service/henkilo/current/asiointiKieli',
+ async (route) => {
+ await route.fulfill({ body: 'sv', contentType: 'text' });
+ },
+ );
+ await page.goto('/');
+ await expect(page).toHaveTitle(/Valintojen Toteuttaminen/);
+ await expect(
+ page.getByRole('combobox', { name: 'yleinen.tila' }),
+ ).toContainText('Publicerad');
+ await expect(page.getByText('Haut')).not.toBeVisible();
+ await expect(page.getByText('haku.otsikko')).toBeVisible();
+ });
+});