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

frontend/src/pages/integrations/azure-key-vault/create.tsx

@@ -2,99 +2,92 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';
 
-import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
 import {
-    Button, 
-    Card, 
-    CardTitle, 
-    FormControl, 
-    Input, 
-    Select, 
-    SelectItem 
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
 } from '../../../components/v2';
 import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
-import createIntegration from "../../api/integrations/createIntegration";
+import createIntegration from '../../api/integrations/createIntegration';
 
 export default function AzureKeyVaultCreateIntegrationPage() {
-    const router = useRouter();
+  const router = useRouter();
 
-    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+  const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
 
-    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
-    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    
-    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
-    
-    const [vaultBaseUrl, setVaultBaseUrl] = useState('');
-    const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
-    
-    const [isLoading, setIsLoading] = useState(false);
-    
-    useEffect(() => {
-        if (workspace) {
-            setSelectedSourceEnvironment(workspace.environments[0].slug);
-        }
-    }, [workspace]);
-        
-    const handleButtonClick = async () => {
-        try {
-        if (vaultBaseUrl.length === 0) {
-            setVaultBaseUrlErrorText('Vault URI cannot be blank');
-            return;
-        }
-        
-        if (
-            !vaultBaseUrl.startsWith('https://') 
-            || !vaultBaseUrl.endsWith('vault.azure.net')
-        ) {
-            setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
-            return;
-        }
-        
-        if (!integrationAuth?._id) return;
-        
-        setIsLoading(true);
-        await createIntegration({
-          integrationAuthId: integrationAuth?._id,
-          isActive: true,
-          app: vaultBaseUrl,
-          appId: null,
-          sourceEnvironment: selectedSourceEnvironment,
-          targetEnvironment: null,
-          targetEnvironmentId: null,
-          targetService: null,
-          targetServiceId: null,
-          owner: null,
-          path: null,
-          region: null
-        });
-        setIsLoading(false);
-        
-        router.push(
-            `/integrations/${localStorage.getItem('projectData.id')}`
-        );
-        
-        } catch (err) {
-        console.error(err);
-        }
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+
+  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
+  const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
     }
-    
-    return (integrationAuth && workspace && selectedSourceEnvironment) ? (
-    <div className="h-full w-full flex justify-center items-center">
-      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
-        <FormControl
-          label="Project Environment"
-          className='mt-4'
-        >
+  }, [workspace]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (vaultBaseUrl.length === 0) {
+        setVaultBaseUrlErrorText('Vault URI cannot be blank');
+        return;
+      }
+
+      if (!vaultBaseUrl.startsWith('https://') || !vaultBaseUrl.endsWith('vault.azure.net')) {
+        setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
+        return;
+      }
+
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: vaultBaseUrl,
+        appId: null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null
+      });
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth && workspace && selectedSourceEnvironment ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Azure Key Vault Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className='w-full border border-mineshaft-500'
+            className="w-full border border-mineshaft-500"
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+              >
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -106,24 +99,24 @@ export default function AzureKeyVaultCreateIntegrationPage() {
           isError={vaultBaseUrlErrorText !== '' ?? false}
         >
           <Input
-            placeholder='https://example.vault.azure.net'
+            placeholder="https://example.vault.azure.net"
             value={vaultBaseUrl}
             onChange={(e) => setVaultBaseUrl(e.target.value)}
           />
         </FormControl>
-          <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
-          >
-            Create Integration
-          </Button>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Create Integration
+        </Button>
       </Card>
     </div>
-  ) : <div />
+  ) : (
+    <div />
+  );
 }
 
 AzureKeyVaultCreateIntegrationPage.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx

@@ -2,40 +2,36 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';
 
-import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import AuthorizeIntegration from '../../../api/integrations/authorizeIntegration';
 
 export default function AzureKeyVaultOAuth2CallbackPage() {
-    const router = useRouter();
+  const router = useRouter();
 
-    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
-    
-    useEffect(() => {
-        (async () => {
-            try {
-                // validate state
-                if (state !== localStorage.getItem('latestCSRFToken')) return;
-                localStorage.removeItem('latestCSRFToken');
-                
-                const integrationAuth = await AuthorizeIntegration({
-                    workspaceId: localStorage.getItem('projectData.id') as string,
-                    code: code as string,
-                    integration: 'azure-key-vault'
-                });
+  const { code, state } = queryString.parse(router.asPath.split('?')[1]);
 
-                router.push(
-                    `/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`
-                );
+  useEffect(() => {
+    (async () => {
+      try {
+        // validate state
+        if (state !== localStorage.getItem('latestCSRFToken')) return;
+        localStorage.removeItem('latestCSRFToken');
 
-            } catch (err) {
-                console.error(err);
-            }
-        })();
-    }, []);
-    
-    return <div />
+        const integrationAuth = await AuthorizeIntegration({
+          workspaceId: localStorage.getItem('projectData.id') as string,
+          code: code as string,
+          integration: 'azure-key-vault'
+        });
+
+        router.push(
+          `/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`
+        );
+      } catch (err) {
+        console.error(err);
+      }
+    })();
+  }, []);
+
+  return <div />;
 }
 
 AzureKeyVaultOAuth2CallbackPage.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);