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

frontend/src/pages/integrations/vercel/create.tsx

@@ -2,140 +2,136 @@ 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, 
-  Select, 
-  SelectItem
-} from '../../../components/v2';
+import { Button, Card, CardTitle, FormControl, Select, SelectItem } from '../../../components/v2';
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
   useGetIntegrationAuthVercelBranches
 } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
-import createIntegration from "../../api/integrations/createIntegration";
+import createIntegration from '../../api/integrations/createIntegration';
 
 const vercelEnvironments = [
-    { name: 'Development', slug: 'development' },
-    { name: 'Preview', slug: 'preview' },
-    { name: 'Production', slug: 'production' }
-]
+  { name: 'Development', slug: 'development' },
+  { name: 'Preview', slug: 'preview' },
+  { name: 'Production', slug: 'production' }
+];
 
 export default function VercelCreateIntegrationPage() {
-    const router = useRouter();
+  const router = useRouter();
 
-    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
-    const [targetAppId, setTargetAppId] = useState('');
-    const [targetEnvironment, setTargetEnvironment] = useState('');
-    const [targetBranch, setTargetBranch] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [targetAppId, setTargetAppId] = useState('');
+  const [targetEnvironment, setTargetEnvironment] = useState('');
+  const [targetBranch, setTargetBranch] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
-    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
-    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
-      integrationAuthId: integrationAuthId as string ?? ''
-    });
-    
-    const { data: branches } = useGetIntegrationAuthVercelBranches({
-      integrationAuthId: integrationAuthId as string,
-      appId: targetAppId,
-    });
-    
-    const filteredBranches = branches
-      ?.filter((branchName) => branchName !== 'main')
-      .concat('');
-      
-    useEffect(() => {
-        if (workspace) {
-            setSelectedSourceEnvironment(workspace.environments[0].slug);
-        }
-    }, [workspace]);
-    
-    useEffect(() => {
-      if (integrationAuthApps) {
-        if (integrationAuthApps.length > 0) {
-          setTargetAppId(integrationAuthApps[0].appId as string);
-          setTargetEnvironment(vercelEnvironments[0].slug);
-        } else {
-          setTargetAppId('none');
-          setTargetEnvironment(vercelEnvironments[0].slug);
-        }
-      }
-    }, [integrationAuthApps]);
-        
-    const handleButtonClick = async () => {
-        try {
-            if (!integrationAuth?._id) return;
+  const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ''
+  });
 
-            setIsLoading(true);
-            
-            const targetApp = integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId);
-            
-            if (!targetApp || !targetApp.appId) return;
-            
-            const path = (targetEnvironment === 'preview' && targetBranch !== '') ? targetBranch : null;
+  const { data: branches } = useGetIntegrationAuthVercelBranches({
+    integrationAuthId: integrationAuthId as string,
+    appId: targetAppId
+  });
 
-            await createIntegration({
-              integrationAuthId: integrationAuth?._id,
-              isActive: true,
-              app: targetApp.name,
-              appId: targetApp.appId,
-              sourceEnvironment: selectedSourceEnvironment,
-              targetEnvironment,
-              targetEnvironmentId: null,
-              targetService: null,
-              targetServiceId: null,
-              owner: null,
-              path,
-              region: null
-            }); 
-            
-            setIsLoading(false);
-            router.push(
-                `/integrations/${localStorage.getItem('projectData.id')}`
-            );
-        } catch (err) {
-            console.error(err);
-        }
+  const filteredBranches = branches?.filter((branchName) => branchName !== 'main').concat('');
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
     }
-    
-    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetAppId && targetEnvironment) ? (
-    <div className="h-full w-full flex justify-center items-center">
-      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Vercel Integration</CardTitle>
-        <FormControl
-          label="Project Environment"
-          className='mt-4'
-        >
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetAppId(integrationAuthApps[0].appId as string);
+        setTargetEnvironment(vercelEnvironments[0].slug);
+      } else {
+        setTargetAppId('none');
+        setTargetEnvironment(vercelEnvironments[0].slug);
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      const targetApp = integrationAuthApps?.find(
+        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      );
+
+      if (!targetApp || !targetApp.appId) return;
+
+      const path = targetEnvironment === 'preview' && targetBranch !== '' ? targetBranch : null;
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp.name,
+        appId: targetApp.appId,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path,
+        region: null
+      });
+
+      setIsLoading(false);
+      router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetAppId &&
+    targetEnvironment ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Vercel 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>
             ))}
           </Select>
         </FormControl>
-        <FormControl
-          label="Vercel App"
-        >
+        <FormControl label="Vercel App">
           <Select
             value={targetAppId}
             onValueChange={(val) => setTargetAppId(val)}
-            className='w-full border border-mineshaft-500'
+            className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
               integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem value={integrationAuthApp.appId as string} key={`target-app-${integrationAuthApp.appId as string}`}>
+                <SelectItem
+                  value={integrationAuthApp.appId as string}
+                  key={`target-app-${integrationAuthApp.appId as string}`}
+                >
                   {integrationAuthApp.name}
                 </SelectItem>
               ))
@@ -146,29 +142,28 @@ export default function VercelCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
-        <FormControl
-          label="Vercel App Environment"
-        >
+        <FormControl label="Vercel App Environment">
           <Select
             value={targetEnvironment}
             onValueChange={(val) => setTargetEnvironment(val)}
-            className='w-full border border-mineshaft-500'
+            className="w-full border border-mineshaft-500"
           >
             {vercelEnvironments.map((vercelEnvironment) => (
-              <SelectItem value={vercelEnvironment.slug} key={`target-environment-${vercelEnvironment.slug}`}>
+              <SelectItem
+                value={vercelEnvironment.slug}
+                key={`target-environment-${vercelEnvironment.slug}`}
+              >
                 {vercelEnvironment.name}
               </SelectItem>
             ))}
           </Select>
         </FormControl>
         {targetEnvironment === 'preview' && filteredBranches && (
-          <FormControl
-            label="Vercel Preview Branch (Optional)"
-          >
+          <FormControl label="Vercel Preview Branch (Optional)">
             <Select
               value={targetBranch}
               onValueChange={(val) => setTargetBranch(val)}
-              className='w-full border border-mineshaft-500'
+              className="w-full border border-mineshaft-500"
             >
               {filteredBranches.map((branchName) => (
                 <SelectItem value={branchName} key={`target-branch-${branchName}`}>
@@ -178,20 +173,20 @@ export default function VercelCreateIntegrationPage() {
             </Select>
           </FormControl>
         )}
-        <Button 
+        <Button
           onClick={handleButtonClick}
-          color="mineshaft" 
-          className='mt-4'
+          color="mineshaft"
+          className="mt-4"
           isLoading={isLoading}
           isDisabled={integrationAuthApps.length === 0}
         >
-            Create Integration
+          Create Integration
         </Button>
       </Card>
     </div>
-  ) : <div />
+  ) : (
+    <div />
+  );
 }
 
 VercelCreateIntegrationPage.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/vercel/oauth2/callback.tsx

@@ -2,40 +2,34 @@ 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 VercelOAuth2CallbackPage() {
-    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: 'vercel'
-                });
+  const { code, state } = queryString.parse(router.asPath.split('?')[1]);
 
-                router.push(
-                    `/integrations/vercel/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: 'vercel'
+        });
+
+        router.push(`/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`);
+      } catch (err) {
+        console.error(err);
+      }
+    })();
+  }, []);
+
+  return <div />;
 }
 
 VercelOAuth2CallbackPage.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);