fix: i18n for register page

next-i18next.config.js

@@ -5,6 +5,7 @@ module.exports = {
     fallbackLng: 'en',
     defaultLocale: 'en',
     locales: ['en', 'de', 'cs', 'es', 'fr', 'it', 'pt-BR'],
+    localeDetection: false,
   },
   localePath: path.resolve('./public/static/locales'),
   reloadOnPrerender: false,

pages/all.tsx

@@ -5,6 +5,7 @@ import GetLeaderboardMeta from './../src/utils/getMetaTags/GetLeaderboardMeta';
 import { TENANT_ID } from '../src/utils/constants/environment';
 import { ErrorHandlingContext } from '../src/features/common/Layout/ErrorHandlingContext';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   initialized: Boolean;
@@ -13,6 +14,14 @@ interface Props {
 export default function Home({ initialized }: Props) {
   const [leaderboard, setLeaderboard] = React.useState(null);
   const { handleError } = React.useContext(ErrorHandlingContext);
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
 
   React.useEffect(() => {
     async function loadLeaderboard() {

pages/complete-signup.tsx

@@ -3,8 +3,18 @@ import CompleteSignup from '../src/features/user/CompleteSignup';
 import tenantConfig from '../tenant.config';
 import Head from 'next/head';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 
 export default function UserProfile() {
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
+
   const config = tenantConfig();
   return (
     <>

pages/home.tsx

@@ -8,6 +8,7 @@ import GetHomeMeta from '../src/utils/getMetaTags/GetHomeMeta';
 import { getRequest } from '../src/utils/apiRequests/api';
 import { ErrorHandlingContext } from '../src/features/common/Layout/ErrorHandlingContext';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 
 interface Props {
   initialized: Boolean;
@@ -16,11 +17,19 @@ interface Props {
 export default function Home(initialized: Props) {
   const router = useRouter();
   const config = tenantConfig();
+  const { i18n } = useTranslation();
 
   const [leaderboard, setLeaderboard] = React.useState(null);
   const [tenantScore, setTenantScore] = React.useState(null);
   const { handleError } = React.useContext(ErrorHandlingContext);
 
+  React.useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
+
   React.useEffect(() => {
     async function loadTenantScore() {
       const newTenantScore = await getRequest(

pages/index.tsx

@@ -79,13 +79,7 @@ export default function Donate({
     setProject(null);
     setZoomLevel(1);
   }, []);
-  console.log(
-    internalLanguage,
-    i18n.language,
-    internalCurrencyCode,
-    currencyCode,
-    internalCurrencyCode
-  );
+
   // Load all projects
   React.useEffect(() => {
     async function loadProjects() {
@@ -94,7 +88,6 @@ export default function Donate({
         currencyCode !== internalCurrencyCode ||
         internalLanguage !== i18n.language
       ) {
-        console.log('lol');
         const currency = getStoredCurrency();
         setInternalCurrencyCode(currency);
         setCurrencyCode(currency);

pages/login.tsx

@@ -3,18 +3,27 @@ import UserProfileLoader from '../src/features/common/ContentLoaders/UserProfile
 import { useRouter } from 'next/router';
 import { UserPropsContext } from '../src/features/common/Layout/UserPropsContext';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 
 interface Props {}
 
 function Login({}: Props): ReactElement {
   const router = useRouter();
+  const { i18n } = useTranslation();
 
   // if the user is authenticated check if we have slug, and if we do, send user to slug
   // else send user to login flow
 
   const { user, contextLoaded, loginWithRedirect } =
     React.useContext(UserPropsContext);
 
+  React.useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
+
   React.useEffect(() => {
     async function loadFunction() {
       // redirect

pages/open-app.tsx

@@ -1,9 +1,10 @@
 import Footer from '../src/features/common/Layout/Footer';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useTranslation } from 'next-i18next';
+import { useEffect } from 'react';
 
 export default function OpenApp() {
-  const { t, ready } = useTranslation(['common']);
+  const { t, ready, i18n } = useTranslation(['common']);
 
   const styles = {
     width: '100vw',
@@ -14,6 +15,12 @@ export default function OpenApp() {
     flexDirection: 'column',
     color: 'var(--primary-font-color)',
   };
+  useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
 
   return ready ? (
     <>

pages/profile/register-trees.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import UserLayout from '../../src/features/common/Layout/UserLayout/UserLayout';
 import Head from 'next/head';
@@ -8,7 +8,15 @@ import { useTranslation } from 'next-i18next';
 interface Props {}
 
 export default function Register({}: Props): ReactElement {
-  const { t } = useTranslation('me');
+  const { t, i18n } = useTranslation('me');
+
+  useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
+
   const RegisterTrees = dynamic(
     () => import('../../src/features/user/RegisterTrees/RegisterTrees')
   );
@@ -22,7 +30,7 @@ export default function Register({}: Props): ReactElement {
   );
 }
 
-export async function getStaticProps({ locale }) {
+export async function getStaticProps({ locale }: any) {
   return {
     props: {
       ...(await serverSideTranslations(

pages/verify-email.tsx

@@ -3,10 +3,21 @@ import Footer from '../src/features/common/Layout/Footer';
 import LandingSection from '../src/features/common/Layout/LandingSection';
 import VerifyEmailComponent from './../src/features/common/VerifyEmail/VerifyEmail';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useEffect } from 'react';
+import { useTranslation } from 'next-i18next';
 
 interface Props {}
 
 function VerifyEmail({}: Props): ReactElement {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    if (localStorage.getItem('i18nextLng') !== null && i18n) {
+      const languageFromLocalStorage: any = localStorage.getItem('i18nextLng');
+      i18n.changeLanguage(languageFromLocalStorage);
+    }
+  }, [i18n]);
+
   return (
     <div>
       <LandingSection>