refactor(ui): changed frontend to normal i18n without SSR

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -5,9 +5,9 @@ import crypto from 'crypto';
 
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useTranslation } from 'next-i18next';
 import { faBookOpen, faMobile, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -54,9 +54,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { createNotification } = useNotificationContext();
 
   // eslint-disable-next-line prefer-const
-  let { workspaces, currentWorkspace } = useWorkspace();
+  const { workspaces, currentWorkspace } = useWorkspace();
   const { currentOrg } = useOrganization();
-  workspaces = workspaces.filter((ws) => ws.organization === currentOrg?._id);
   const { user } = useUser();
 
   const createWs = useCreateWorkspace();
@@ -257,15 +256,17 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       position="popper"
                       dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50"
                     >
-                      {workspaces.map(({ _id, name }) => (
-                        <SelectItem
-                          key={`ws-layout-list-${_id}`}
-                          value={_id}
-                          className={`${currentWorkspace?._id === _id && 'bg-mineshaft-600'}`}
-                        >
-                          {name}
-                        </SelectItem>
-                      ))}
+                      {workspaces
+                        .filter((ws) => ws.organization === currentOrg?._id)
+                        .map(({ _id, name }) => (
+                          <SelectItem
+                            key={`ws-layout-list-${_id}`}
+                            value={_id}
+                            className={`${currentWorkspace?._id === _id && 'bg-mineshaft-600'}`}
+                          >
+                            {name}
+                          </SelectItem>
+                        ))}
                       {/* <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" /> */}
                       <div className="w-full">
                         <Button
@@ -302,7 +303,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           isSelected={router.asPath.includes(`/dashboard/${currentWorkspace?._id}`)}
                           icon="system-outline-90-lock-closed"
                         >
-                          {t('nav:menu.secrets')}
+                          {t('nav.menu.secrets')}
                         </MenuItem>
                       </a>
                     </Link>
@@ -312,7 +313,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           isSelected={router.asPath === `/users/${currentWorkspace?._id}`}
                           icon="system-outline-96-groups"
                         >
-                          {t('nav:menu.members')}
+                          {t('nav.menu.members')}
                         </MenuItem>
                       </a>
                     </Link>
@@ -322,7 +323,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
                           icon="system-outline-82-extension"
                         >
-                          {t('nav:menu.integrations')}
+                          {t('nav.menu.integrations')}
                         </MenuItem>
                       </a>
                     </Link>
@@ -343,7 +344,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           }
                           icon="system-outline-109-slider-toggle-settings"
                         >
-                          {t('nav:menu.project-settings')}
+                          {t('nav.menu.project-settings')}
                         </MenuItem>
                       </a>
                     </Link>
@@ -471,7 +472,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
       <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t('common:no-mobile')} `}
+          {` ${t('common.no-mobile')} `}
         </p>
       </div>
     </>

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable react/jsx-key */
 import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { TFunction, useTranslation } from 'next-i18next';
 import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -17,6 +17,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
+import {TFunction} from 'i18next';
 
 import guidGenerator from '@app/components/utilities/randomId';
 import { useOrganization, useUser } from '@app/context';
@@ -25,22 +26,22 @@ import { useLogoutUser } from '@app/hooks/api';
 const supportOptions = (t: TFunction) => [
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faSlack} />,
-    t('nav:support.slack'),
+    t('nav.support.slack'),
     'https://infisical.com/slack'
   ],
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faBook} />,
-    t('nav:support.docs'),
+    t('nav.support.docs'),
     'https://infisical.com/docs/documentation/getting-started/introduction'
   ],
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faGithub} />,
-    t('nav:support.issue'),
+    t('nav.support.issue'),
     'https://github.com/Infisical/infisical-cli/issues'
   ],
   [
     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faEnvelope} />,
-    t('nav:support.email'),
+    t('nav.support.email'),
     'mailto:[email protected]'
   ]
 ];
@@ -170,7 +171,7 @@ export const Navbar = () => {
             <Menu.Items className="absolute right-0 z-[125] mt-0.5 w-68 origin-top-right divide-y divide-mineshaft-700 drop-shadow-2xl rounded-md border border-mineshaft-700 bg-mineshaft-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
               <div className="px-1 py-1">
                 <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                  {t('nav:user.signed-in-as')}
+                  {t('nav.user.signed-in-as')}
                 </div>
                 <div
                   onKeyDown={() => null}
@@ -199,7 +200,7 @@ export const Navbar = () => {
               </div>
               <div className="px-2 pt-2">
                 <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                  {t('nav:user.current-organization')}
+                  {t('nav.user.current-organization')}
                 </div>
                 <div
                   onKeyDown={() => null}
@@ -232,7 +233,7 @@ export const Navbar = () => {
                     className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/5 hover:text-gray-200"
                   >
                     <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faCoins} />
-                    <div className="text-sm">{t('nav:user.usage-billing')}</div>
+                    <div className="text-sm">{t('nav.user.usage-billing')}</div>
                   </div>
                 </button>
                 <button
@@ -250,14 +251,14 @@ export const Navbar = () => {
                     <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
                       <FontAwesomeIcon icon={faPlus} className="ml-1" />
                     </span>
-                    <div className="ml-1 text-sm">{t('nav:user.invite')}</div>
+                    <div className="ml-1 text-sm">{t('nav.user.invite')}</div>
                   </div>
                 </button>
               </div>
               {orgs && orgs?.length > 1 && (
                 <div className="px-1 pt-1">
                   <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                    {t('nav:user.other-organizations')}
+                    {t('nav.user.other-organizations')}
                   </div>
                   <div className="mt-3 mb-2 flex flex-col items-start px-1">
                     {orgs
@@ -300,7 +301,7 @@ export const Navbar = () => {
                           className="ml-1.5 mr-3 text-lg"
                           icon={faRightFromBracket}
                         />
-                        {t('common:logout')}
+                        {t('common.logout')}
                       </div>
                     </button>
                   )}