fix(next-international): fallbackLocale type for nested objects local…

…es (#74)
QuiiBz · Jul 21, 2023 · 353a902 · 353a902
1 parent 6ea4699
commit 353a902
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git a/examples/next-app/app/[locale]/client/layout.tsx b/examples/next-app/app/[locale]/client/layout.tsx
@@ -2,10 +2,11 @@
 
 import { ReactNode } from 'react';
 import { I18nProviderClient } from '../../../locales/client';
+import en from '../../../locales/en';
 
 export default function Layout({ children, params: { locale } }: { children: ReactNode; params: { locale: string } }) {
   return (
-    <I18nProviderClient locale={locale} fallback={<p>Loading...</p>}>
+    <I18nProviderClient locale={locale} fallback={<p> Loading...</p>} fallbackLocale={en}>
       {children}
     </I18nProviderClient>
   );

diff --git a/packages/next-international/src/app/client/create-i18n-provider-client.tsx b/packages/next-international/src/app/client/create-i18n-provider-client.tsx
@@ -3,10 +3,10 @@ import type { LocaleContext } from '../../types';
 import type { BaseLocale, ImportedLocales } from 'international-types';
 import { flattenLocale } from '../../common/flatten-locale';
 
-type I18nProviderProps<Locale extends BaseLocale> = {
+type I18nProviderProps = {
   locale: string;
   fallback?: ReactElement | null;
-  fallbackLocale?: Locale;
+  fallbackLocale?: Record<string, unknown>;
   children: ReactNode;
 };
 
@@ -19,12 +19,12 @@ export function createI18nProviderClient<Locale extends BaseLocale>(
     fallback = null,
     fallbackLocale,
     children,
-  }: I18nProviderProps<Locale>) {
+  }: I18nProviderProps) {
     const [clientLocale, setClientLocale] = useState<Locale>();
 
     const loadLocale = useCallback((locale: string) => {
       locales[locale]().then(content => {
-        setClientLocale(flattenLocale(content.default));
+        setClientLocale(flattenLocale<Locale>(content.default));
       });
     }, []);
 
@@ -35,7 +35,7 @@ export function createI18nProviderClient<Locale extends BaseLocale>(
     const value = useMemo(
       () => ({
         localeContent: (clientLocale || baseLocale) as Locale,
-        fallbackLocale: fallbackLocale ? flattenLocale(fallbackLocale) : undefined,
+        fallbackLocale: fallbackLocale ? flattenLocale<Locale>(fallbackLocale) : undefined,
       }),
       [clientLocale, baseLocale, fallbackLocale],
     );

diff --git a/packages/next-international/src/app/client/index.ts b/packages/next-international/src/app/client/index.ts
@@ -22,7 +22,7 @@ export function createI18nClient<Locales extends ImportedLocales, OtherLocales e
   // @ts-expect-error deep type
   const I18nClientContext = createContext<LocaleContext<Locale> | null>(null);
 
-  const I18nProviderClient = createI18nProviderClient(I18nClientContext, locales);
+  const I18nProviderClient = createI18nProviderClient<Locale>(I18nClientContext, locales);
   const useI18n = createUsei18n(I18nClientContext);
   const useScopedI18n = createScopedUsei18n(I18nClientContext);
   const useChangeLocale = createUseChangeLocale<LocalesKeys>(localesKeys);

diff --git a/packages/next-international/src/common/flatten-locale.ts b/packages/next-international/src/common/flatten-locale.ts
@@ -1,6 +1,6 @@
 import { BaseLocale } from 'international-types';
 
-export const flattenLocale = <Locale extends BaseLocale>(locale: Locale, prefix = ''): Locale =>
+export const flattenLocale = <Locale extends BaseLocale>(locale: Record<string, unknown>, prefix = ''): Locale =>
   Object.entries(locale).reduce(
     (prev, [name, value]) => ({
       ...prev,

diff --git a/packages/next-international/src/pages/create-i18n-provider.tsx b/packages/next-international/src/pages/create-i18n-provider.tsx
@@ -8,7 +8,7 @@ import { flattenLocale } from '../common/flatten-locale';
 type I18nProviderProps<Locale extends BaseLocale> = {
   locale: Locale;
   fallback?: ReactElement | null;
-  fallbackLocale?: Locale;
+  fallbackLocale?: Record<string, unknown>;
   children: ReactNode;
 };
 
@@ -46,7 +46,7 @@ export function createI18nProvider<Locale extends BaseLocale>(
 
     const loadLocale = useCallback((locale: string) => {
       locales[locale]().then(content => {
-        setClientLocale(flattenLocale(content.default));
+        setClientLocale(flattenLocale<Locale>(content.default));
       });
     }, []);
 
@@ -68,7 +68,7 @@ export function createI18nProvider<Locale extends BaseLocale>(
     const value = useMemo(
       () => ({
         localeContent: (clientLocale || baseLocale) as Locale,
-        fallbackLocale: fallbackLocale ? flattenLocale(fallbackLocale) : undefined,
+        fallbackLocale: fallbackLocale ? flattenLocale<Locale>(fallbackLocale) : undefined,
       }),
       [clientLocale, baseLocale, fallbackLocale],
     );