feat: fix direction

Author: nevo-david

apps/frontend/src/components/layout/html.component.tsx

@@ -1,16 +1,18 @@
 'use client';
 import { FC, ReactNode, useEffect, useState } from 'react';
-import i18next from '@gitroom/react/translation/i18next';
+import { useTranslationSettings } from '@gitroom/react/translation/get.transation.service.client';
 
 export const HtmlComponent: FC<{ className: string; children: ReactNode }> = (
   props
 ) => {
   const { className } = props;
-  const [dir, setDir] = useState(i18next.dir());
+  const settings = useTranslationSettings();
+  const [dir, setDir] = useState(settings.dir());
 
   useEffect(() => {
-    i18next.on('languageChanged', (lng) => {
-      setDir(i18next.dir());
+    setDir(settings.dir());
+    settings.on('languageChanged', (lng) => {
+      setDir(settings.dir());
     });
   }, []);
 

apps/frontend/src/middleware.ts

@@ -24,7 +24,6 @@ export async function middleware(request: NextRequest) {
       : acceptLanguage.get(request.headers.get('Accept-Language'))) ||
     fallbackLng;
 
-  console.log(request.cookies.has(cookieName));
   const headers = new Headers(request.headers);
   headers.set(headerName, lng);
   if (

libraries/react-shared-libraries/src/translation/get.transation.service.client.ts

@@ -10,25 +10,32 @@ import {
   fallbackLng,
 } from '@gitroom/react/translation/i18n.config';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
-const runsOnServerSide = typeof window === 'undefined';
+
 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 [activeLng, setActiveLng] = useState(i18next.resolvedLanguage);
   const { t } = useTranslation(ns, options);
+  return t;
+}
+
+export function useTranslationSettings() {
+  const { language } = useVariables();
+  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 (activeLng === i18next.resolvedLanguage) return;
-    setActiveLng(i18next.resolvedLanguage);
-  }, [activeLng]);
-  useEffect(() => {
-    if (!lng || i18next.resolvedLanguage === lng) return;
-    i18next.changeLanguage(lng);
+    if (lng !== i18next.resolvedLanguage) {
+      i18next.changeLanguage(lng).then(() => {
+        setSavedI18next(i18next);
+      });
+    }
   }, [lng]);
-  if (runsOnServerSide && i18next.resolvedLanguage !== lng) {
-    i18next.changeLanguage(lng);
-  }
-  return t;
+
+  return savedI18next;
 }

libraries/react-shared-libraries/src/translation/i18next.ts

@@ -10,7 +10,6 @@ i18next
   .use(LanguageDetector)
   .use(
     resourcesToBackend((language: any, namespace: any) => {
-      console.log(namespace, language);
       return import(`./locales/${language}/${namespace}.json`);
     })
   )