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

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -10,7 +10,8 @@ import NavHeader from '@app/components/navigation/NavHeader';
 import {
   decryptAssymmetric,
   decryptSymmetric,
-  encryptSymmetric} from '@app/components/utilities/cryptography/crypto';
+  encryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
 import { Button, FormControl, Input } from '@app/components/v2';
 import { plans } from '@app/const';
 import { useSubscription, useWorkspace } from '@app/context';
@@ -31,7 +32,8 @@ import {
   useNameWorkspaceSecrets,
   useRenameWorkspace,
   useToggleAutoCapitalization,
-  useUpdateWsEnvironment} from '@app/hooks/api';
+  useUpdateWsEnvironment
+} from '@app/hooks/api';
 
 import { AutoCapitalizationSection } from './components/AutoCapitalizationSection/AutoCapitalizationSection';
 import { SecretTagsSection } from './components/SecretTagsSection';
@@ -67,7 +69,8 @@ export const ProjectSettingsPage = () => {
   const updateWsEnv = useUpdateWsEnvironment();
   const deleteWsEnv = useDeleteWsEnvironment();
 
-  const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(workspaceID);
+  const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } =
+    useGetWorkspaceIndexStatus(workspaceID);
 
   // service token
   const { data: serviceTokens, isLoading: isServiceTokenLoading } = useGetUserWsServiceTokens({
@@ -212,7 +215,12 @@ export const ProjectSettingsPage = () => {
     }
   };
 
-  const onCreateServiceToken = async ({ environment, expiresIn, name, permissions }: CreateServiceToken) => {
+  const onCreateServiceToken = async ({
+    environment,
+    expiresIn,
+    name,
+    permissions
+  }: CreateServiceToken) => {
     // type guard
     if (!latestFileKey) return '';
     try {
@@ -229,7 +237,7 @@ export const ProjectSettingsPage = () => {
         plaintext: key,
         key: randomBytes
       });
-      
+
       const res = await createServiceToken.mutateAsync({
         encryptedKey: ciphertext,
         iv,
@@ -240,10 +248,10 @@ export const ProjectSettingsPage = () => {
         workspaceId: workspaceID,
         randomBytes,
         permissions: Object.entries(permissions)
-        .filter(([, permissionsValue]) => permissionsValue)
-        .map(([permissionsKey]) => permissionsKey)
+          .filter(([, permissionsValue]) => permissionsValue)
+          .map(([permissionsKey]) => permissionsKey)
       });
-      
+
       createNotification({
         text: 'Successfully created a service token',
         type: 'success'
@@ -324,7 +332,7 @@ export const ProjectSettingsPage = () => {
       publicKey: latestFileKey.sender.publicKey,
       privateKey: localStorage.getItem('PRIVATE_KEY') as string
     });
-    
+
     const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
       const secretName = decryptSymmetric({
         ciphertext: encryptedSecret.secretKeyCiphertext,
@@ -332,30 +340,30 @@ export const ProjectSettingsPage = () => {
         tag: encryptedSecret.secretKeyTag,
         key
       });
-      
-      return ({
+
+      return {
         secretName,
         _id: encryptedSecret._id
-      });
+      };
     });
 
     await nameWorkspaceSecrets.mutateAsync({
       workspaceId: currentWorkspace._id,
       secretsToUpdate
     });
-  }
+  };
 
   return (
     <div className="dark container mx-auto flex flex-col px-8 text-mineshaft-50 dark:[color-scheme:dark]">
       {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
       <div className="relative right-5">
-        <NavHeader pageName={t('settings-project:title')} isProjectRelated />
+        <NavHeader pageName={t('settings.project.title')} isProjectRelated />
       </div>
       <div className="my-8 flex max-w-5xl flex-row items-center justify-between text-xl">
         <div className="flex flex-col items-start justify-start text-3xl">
-          <p className="mr-4 font-semibold text-gray-200">{t('settings-project:title')}</p>
+          <p className="mr-4 font-semibold text-gray-200">{t('settings.project.title')}</p>
           <p className="mr-4 text-base font-normal text-gray-400">
-            {t('settings-project:description')}
+            {t('settings.project.description')}
           </p>
         </div>
       </div>
@@ -392,13 +400,11 @@ export const ProjectSettingsPage = () => {
         onAutoCapitalizationChange={onAutoCapitalizationToggle}
       />
       {!isBlindIndexedLoading && !isBlindIndexed && (
-        <ProjectIndexSecretsSection
-          onEnableBlindIndices={onEnableBlindIndices}
-        />
+        <ProjectIndexSecretsSection onEnableBlindIndices={onEnableBlindIndices} />
       )}
       <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-white/5 px-6 pl-6 pb-4 pt-4">
-        <p className="text-xl font-bold text-red">{t('settings-project:danger-zone')}</p>
-        <p className="text-md mt-2 text-gray-400">{t('settings-project:danger-zone-note')}</p>
+        <p className="text-xl font-bold text-red">{t('settings.project.danger-zone')}</p>
+        <p className="text-md mt-2 text-gray-400">{t('settings.project.danger-zone-note')}</p>
         <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
           <FormControl
             label={
@@ -421,10 +427,10 @@ export const ProjectSettingsPage = () => {
           isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
           isLoading={isDeleting}
         >
-          {t('settings-project:delete-project')}
+          {t('settings.project.delete-project')}
         </Button>
         <p className="mt-3 ml-0.5 text-xs text-gray-500">
-          {t('settings-project:delete-project-note')}
+          {t('settings.project.delete-project-note')}
         </p>
       </div>
     </div>