fix legacy strings loading

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 }
 }
 /**

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

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";
 

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'
 

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 <div>Can't load translations</div>
   const tokenExprs = ["general.open_surveys"]
-  const clientSideStrings = filterClientSideStrings<{}>(locale, tokenExprs, {})
-  console.log({ clientSideStrings })
-
+  const clientSideLocale = filterClientSideStrings<{}>(locale, tokenExprs, {})
   return (
-    <RSCFetch
-      fetch={async () => rscFetchSurveysMetadata({ shouldThrow: false })}
-      render={({ data: surveys }) => (
-        <Surveys surveys={surveys} />
-      )}
-    />
+    <I18nContextProvider
+      locale={clientSideLocale}
+    >
+      <RSCFetch
+        fetch={async () => rscFetchSurveysMetadata({ shouldThrow: false })}
+        render={({ data: surveys }) => (
+          <Surveys surveys={surveys} />
+        )}
+      />
+    </I18nContextProvider>
   );
 };
 

surveyform/src/components/common/Header.jsx → 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 (
     <div className="header">
       <Nav {...props} />

surveyform/src/components/common/Nav.tsx

@@ -8,7 +8,7 @@ import { EditionMetadata } from "@devographics/types";
 import { getEditionHomePath } from "~/lib/surveys/helpers/getEditionHomePath";
 import { useLocaleContext } from "~/i18n/context/LocaleContext";
 
-const Navigation = ({ edition }: { edition: EditionMetadata }) => {
+const Navigation = ({ edition }: { edition?: EditionMetadata }) => {
   const { locale } = useLocaleContext();
   return (
     <div className="nav-wrapper">

surveyform/src/i18n/context/LocaleContext.tsx

@@ -4,6 +4,9 @@ import {
   IntlContextProvider,
   StringsRegistry,
 } from "@devographics/react-i18n-legacy";
+import {
+  I18nContextProvider
+} from "@devographics/react-i18n"
 import { useRouter } from "next/navigation";
 import { useCookies } from "react-cookie";
 import { LOCALE_COOKIE_NAME } from "../cookie";
@@ -63,6 +66,8 @@ export const useSetLocale = (updateUser?: any) => {
 /**
  * Provide methods to get/set the current locale
  * + initialize an IntlProvider
+ * 
+ * @deprecated use @devographics/React-i18n
  * @param props
  * @returns
  */
@@ -90,7 +95,7 @@ export const LocaleContextProvider = (props: {
 
   const stringsRegistry = new StringsRegistry("en-US");
   // @ts-ignore
-  stringsRegistry.addStrings(localeId, localeStrings.strings);
+  stringsRegistry.addStrings(localeId, localeStrings.dict);
   return (
     // NOTE: IntlContextProvider is in charge of merging strings with a previously existing parent
     <IntlContextProvider stringsRegistry={stringsRegistry} localeId={localeId}>