feat: fix i18next

nevo-david · nevo-david · commit 8fe70bbf2884 · 2025-06-01T18:15:40.000+07:00
diff --git a/apps/frontend/src/app/(app)/layout.tsx b/apps/frontend/src/app/(app)/layout.tsx
@@ -28,11 +28,12 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
     ? PlausibleProvider
     : Fragment;
   return (
-    <HtmlComponent className={interClass}>
+    <html className={interClass}>
       <head>
         <link rel="icon" href="/favicon.ico" sizes="any" />
       </head>
       <body className={clsx(chakra.className, 'dark text-primary !bg-primary')}>
+        <HtmlComponent />
         <VariableContextComponent
           storageProvider={
             process.env.STORAGE_PROVIDER! as 'local' | 'cloudflare'
@@ -72,6 +73,6 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           </Plausible>
         </VariableContextComponent>
       </body>
-    </HtmlComponent>
+    </html>
   );
 }
diff --git a/apps/frontend/src/components/layout/html.component.tsx b/apps/frontend/src/components/layout/html.component.tsx
@@ -2,15 +2,11 @@
 import { FC, ReactNode, useEffect, useState } from 'react';
 import { useTranslationSettings } from '@gitroom/react/translation/get.transation.service.client';
 
-export const HtmlComponent: FC<{ className: string; children: ReactNode }> = (
-  props
-) => {
-  const { className } = props;
+export const HtmlComponent: FC = () => {
   const settings = useTranslationSettings();
   const [dir, setDir] = useState(settings.dir());
 
   useEffect(() => {
-    setDir(settings.dir());
     settings.on('languageChanged', (lng) => {
       setDir(settings.dir());
     });
@@ -23,5 +19,5 @@ export const HtmlComponent: FC<{ className: string; children: ReactNode }> = (
     }
   }, [dir]);
 
-  return <html className={className}>{props.children}</html>;
+  return null;
 };
diff --git a/apps/frontend/src/middleware.ts b/apps/frontend/src/middleware.ts
@@ -18,14 +18,19 @@ export async function middleware(request: NextRequest) {
     request.cookies.get('auth') ||
     request.headers.get('auth') ||
     nextUrl.searchParams.get('loggedAuth');
-  const lng =
-    (request.cookies.has(cookieName)
-      ? acceptLanguage.get(request.cookies.get(cookieName).value)
-      : acceptLanguage.get(request.headers.get('Accept-Language'))) ||
-    fallbackLng;
+  const lng = request.cookies.has(cookieName)
+    ? acceptLanguage.get(request.cookies.get(cookieName).value)
+    : acceptLanguage.get(
+        request.headers.get('Accept-Language') ||
+          request.headers.get('accept-language')
+      );
 
   const headers = new Headers(request.headers);
-  headers.set(headerName, lng);
+
+  if (lng) {
+    headers.set(headerName, lng);
+  }
+
   if (
     nextUrl.pathname.startsWith('/uploads/') ||
     nextUrl.pathname.startsWith('/p/') ||
diff --git a/libraries/react-shared-libraries/src/translation/get.transation.service.client.ts b/libraries/react-shared-libraries/src/translation/get.transation.service.client.ts
@@ -13,10 +13,6 @@ import { useVariables } from '@gitroom/react/helpers/variable.context';
 
 export function useT(ns?: string, options?: UseTranslationOptions<any>) {
   const { language } = useVariables();
-  const [lng] = useCookie(cookieName, language || fallbackLng);
-  if (typeof lng !== 'string') {
-    throw new Error('useT is only available inside /app/[lng]');
-  }
   const { t } = useTranslation(ns, options);
   return t;
 }
@@ -26,16 +22,5 @@ export function useTranslationSettings() {
   const [lng] = useCookie(cookieName, language || fallbackLng);
   const [savedI18next, setSavedI18next] = useState(i18next);
 
-  if (typeof lng !== 'string') {
-    throw new Error('useT is only available inside /app/[lng]');
-  }
-  useEffect(() => {
-    if (lng !== i18next.resolvedLanguage) {
-      i18next.changeLanguage(lng).then(() => {
-        setSavedI18next(i18next);
-      });
-    }
-  }, [lng]);
-
   return savedI18next;
 }
diff --git a/libraries/react-shared-libraries/src/translation/i18next.ts b/libraries/react-shared-libraries/src/translation/i18next.ts
@@ -22,8 +22,9 @@ i18next
     fallbackNS: defaultNS,
     defaultNS,
     detection: {
-      order: ['path', 'htmlTag', 'cookie', 'navigator'],
+      order: ['cookie', 'header'],
     },
     preload: runsOnServerSide ? languages : [],
   });
+
 export default i18next;
