From 4e70e1d3b1297ca50c550382a62a93c44ceaa4a4 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Mon, 3 Jun 2024 17:25:06 +0200 Subject: [PATCH] fix legacy strings loading --- shared/i18n/server/fetch-locales.ts | 5 ++++- shared/i18n/typings.ts | 5 ++++- shared/react-i18n/TranslationMode.tsx | 1 + shared/react-i18n/i18nContext.tsx | 1 + .../src/app/[lang]/(mainLayout)/page.tsx | 21 +++++++++++-------- .../common/{Header.jsx => Header.tsx} | 3 ++- surveyform/src/components/common/Nav.tsx | 2 +- surveyform/src/i18n/context/LocaleContext.tsx | 7 ++++++- 8 files changed, 31 insertions(+), 14 deletions(-) rename surveyform/src/components/common/{Header.jsx => Header.tsx} (58%) diff --git a/shared/i18n/server/fetch-locales.ts b/shared/i18n/server/fetch-locales.ts index 14ed74a66..027718092 100644 --- a/shared/i18n/server/fetch-locales.ts +++ b/shared/i18n/server/fetch-locales.ts @@ -136,7 +136,10 @@ export async function getLocaleDict({ localeId, contexts }: { // TODO: assess if it's the right decisio dict[item.key] = item //tHtml || t }) - const localeParsed: LocaleParsed = { ...localeDef, dict } + const localeParsed: LocaleParsed = { + ...localeDef, + strings, dict + } return { locale: localeParsed } } /** diff --git a/shared/i18n/typings.ts b/shared/i18n/typings.ts index 4fb839305..360bd84e2 100644 --- a/shared/i18n/typings.ts +++ b/shared/i18n/typings.ts @@ -10,7 +10,10 @@ export interface Translation { */ export interface Locale { id: string - // TODO: remove this to clarify LocaleDefinition, LocaleStrings, LocaleParsed as dict + /** + * @deprecated Prefer using "LocaleParsed" dict object + * This is the structure returned by the API but it shouldn't be used after parsing + */ strings?: Translation[] /** * TODO: this value was not present in the type def here but is expected by Popover diff --git a/shared/react-i18n/TranslationMode.tsx b/shared/react-i18n/TranslationMode.tsx index 33da8cc90..260536387 100644 --- a/shared/react-i18n/TranslationMode.tsx +++ b/shared/react-i18n/TranslationMode.tsx @@ -14,6 +14,7 @@ // TODO: create Portal might be usable to avoid having many React roots? // but need to play around with declaratively rendering each portal in a loop // import { createPortal } from "react-dom" +"use client" import { createRoot } from "react-dom/client" import { DATA_TOKEN_ATTR, TOKEN_DATASET } from "@devographics/i18n"; diff --git a/shared/react-i18n/i18nContext.tsx b/shared/react-i18n/i18nContext.tsx index 0b86ca6c8..680854bc4 100644 --- a/shared/react-i18n/i18nContext.tsx +++ b/shared/react-i18n/i18nContext.tsx @@ -1,3 +1,4 @@ +"use client" import React, { createContext, useContext, useMemo } from 'react' import { makeTranslatorFunc, type Locale, type StringTranslator } from '@devographics/i18n' diff --git a/surveyform/src/app/[lang]/(mainLayout)/page.tsx b/surveyform/src/app/[lang]/(mainLayout)/page.tsx index f74204afb..f0d7641d1 100644 --- a/surveyform/src/app/[lang]/(mainLayout)/page.tsx +++ b/surveyform/src/app/[lang]/(mainLayout)/page.tsx @@ -9,6 +9,7 @@ import { DEFAULT_REVALIDATE_S } from "~/app/revalidation"; import { setLocaleIdServerContext } from "~/i18n/rsc-context"; import { NextPageParams } from "~/app/typings"; import { filterClientSideStrings } from "@devographics/i18n/server"; +import { I18nContextProvider } from "@devographics/react-i18n"; // revalidating is important so we get fresh values from the cache every now and then without having to redeploy export const revalidate = DEFAULT_REVALIDATE_S; @@ -23,16 +24,18 @@ const IndexPage = async ({ params }: NextPageParams<{ lang: string }>) => { const { locale, localeId, error } = await rscLocaleFromParams(params) if (error) return
Can't load translations
const tokenExprs = ["general.open_surveys"] - const clientSideStrings = filterClientSideStrings<{}>(locale, tokenExprs, {}) - console.log({ clientSideStrings }) - + const clientSideLocale = filterClientSideStrings<{}>(locale, tokenExprs, {}) return ( - rscFetchSurveysMetadata({ shouldThrow: false })} - render={({ data: surveys }) => ( - - )} - /> + + rscFetchSurveysMetadata({ shouldThrow: false })} + render={({ data: surveys }) => ( + + )} + /> + ); }; diff --git a/surveyform/src/components/common/Header.jsx b/surveyform/src/components/common/Header.tsx similarity index 58% rename from surveyform/src/components/common/Header.jsx rename to surveyform/src/components/common/Header.tsx index 95ae2862f..53a1ae864 100644 --- a/surveyform/src/components/common/Header.jsx +++ b/surveyform/src/components/common/Header.tsx @@ -1,7 +1,8 @@ import React from "react"; import Nav from "./Nav"; +import { EditionMetadata } from "@devographics/types"; -const Header = (props) => { +const Header = (props: { edition?: EditionMetadata }) => { return (