fix: improve type safety and error handling in variable addition

keyshade-xyz · Dec 21, 2024 · 25733f2 · 25733f2
1 parent 606fc20
commit 25733f2
Showing 1 changed file with 50 additions and 28 deletions.
diff --git a/apps/platform/src/app/(main)/project/[project]/layout.tsx b/apps/platform/src/app/(main)/project/[project]/layout.tsx
@@ -1,4 +1,5 @@
 'use client'
+import type { MouseEvent } from 'react'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 import { AddSVG } from '@public/svg/shared'
@@ -52,17 +53,23 @@ function DetailedProjectPage({
     environmentName: '',
     environmentValue: ''
   })
-  const [availableEnvironments, setAvailableEnvironments] = useState<Environment[]>([])
+  const [availableEnvironments, setAvailableEnvironments] = useState<
+    Environment[]
+  >([])
 
   const searchParams = useSearchParams()
   const tab = searchParams.get('tab') ?? 'rollup-details'
 
-  const addVariable = async (e: any) => {
+  const addVariable = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
 
+    if (!currentProject) {
+      throw new Error("Current project doesn't exist")
+    }
+
     const request: CreateVariableRequest = {
       name: newVariableData.variableName,
-      projectSlug: currentProject?.slug as string,
+      projectSlug: currentProject.slug,
       entries: newVariableData.environmentValue
         ? [
             {
@@ -74,12 +81,13 @@ function DetailedProjectPage({
       note: newVariableData.note
     }
 
-    const { success, error, data } = await ControllerInstance.getInstance().variableController.createVariable(
+    const { error } =
+      await ControllerInstance.getInstance().variableController.createVariable(
         request,
         {}
       )
-    
-    if(error){
+
+    if (error) {
       // eslint-disable-next-line no-console -- we need to log the error
       console.error(error)
     }
@@ -96,7 +104,6 @@ function DetailedProjectPage({
         )
 
       if (success && data) {
-        //@ts-ignore
         setCurrentProject(data)
       } else {
         // eslint-disable-next-line no-console -- we need to log the error
@@ -109,8 +116,17 @@ function DetailedProjectPage({
 
   useEffect(() => {
     const getAllEnvironments = async () => {
-      const { success, error, data }: ClientResponse<GetAllEnvironmentsOfProjectResponse> = await ControllerInstance.getInstance().environmentController.getAllEnvironmentsOfProject(
-          { projectSlug: currentProject!.slug },
+      if (!currentProject) {
+        throw new Error("Current project doesn't exist")
+      }
+
+      const {
+        success,
+        error,
+        data
+      }: ClientResponse<GetAllEnvironmentsOfProjectResponse> =
+        await ControllerInstance.getInstance().environmentController.getAllEnvironmentsOfProject(
+          { projectSlug: currentProject.slug },
           {}
         )
 
@@ -182,9 +198,12 @@ function DetailedProjectPage({
           </Dialog>
         )}
         {tab === 'variable' && (
-          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <Dialog onOpenChange={setIsOpen} open={isOpen}>
             <DialogTrigger asChild>
-              <Button variant="outline" className='bg-[#26282C] hover:bg-[#161819] hover:text-white/55'> 
+              <Button
+                className="bg-[#26282C] hover:bg-[#161819] hover:text-white/55"
+                variant="outline"
+              >
                 <AddSVG /> Add Variable
               </Button>
             </DialogTrigger>
@@ -206,57 +225,60 @@ function DetailedProjectPage({
                 <form className="space-y-4">
                   <div className="flex h-[2.75rem] w-[28.625rem] items-center justify-center gap-6">
                     <label
-                      htmlFor="variable-name"
                       className="h-[1.25rem] w-[7.125rem] text-base font-semibold"
+                      htmlFor="variable-name"
                     >
                       Variable Name
                     </label>
                     <Input
+                      className="h-[2.75rem] w-[20rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
                       id="variable-name"
-                      placeholder="Enter the key of the variable"
-                      value={newVariableData.variableName}
                       onChange={(e) =>
                         setNewVariableData({
                           ...newVariableData,
                           variableName: e.target.value
                         })
                       }
-                      className="h-[2.75rem] w-[20rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
+                      placeholder="Enter the key of the variable"
+                      value={newVariableData.variableName}
                     />
                   </div>
 
                   <div className="flex h-[2.75rem] w-[28.625rem] items-center justify-center gap-6">
                     <label
-                      htmlFor="variable-name"
                       className="h-[1.25rem] w-[7.125rem] text-base font-semibold"
+                      htmlFor="variable-name"
                     >
                       Extra Note
                     </label>
                     <Input
+                      className="h-[2.75rem] w-[20rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
                       id="variable-name"
-                      placeholder="Enter the note of the secret"
-                      value={newVariableData.note}
                       onChange={(e) =>
                         setNewVariableData({
                           ...newVariableData,
                           note: e.target.value
                         })
                       }
-                      className="h-[2.75rem] w-[20rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
+                      placeholder="Enter the note of the secret"
+                      value={newVariableData.note}
                     />
                   </div>
 
                   <div className="grid h-[4.5rem] w-[28.125rem] grid-cols-2 gap-4">
                     <div className="h-[4.5rem] w-[13.5rem] space-y-2">
-                      <label className="h-[1.25rem] w-[9.75rem] text-base font-semibold">
+                      <label
+                        className="h-[1.25rem] w-[9.75rem] text-base font-semibold"
+                        htmlFor="envName"
+                      >
                         Environment Name
                       </label>
                       <Select
                         defaultValue="development"
-                        onValueChange={(value) =>
+                        onValueChange={(val) =>
                           setNewVariableData({
                             ...newVariableData,
-                            environmentName: value
+                            environmentName: val
                           })
                         }
                       >
@@ -275,31 +297,31 @@ function DetailedProjectPage({
 
                     <div className="h-[4.5rem] w-[13.375rem] space-y-2">
                       <label
-                        htmlFor="env-value"
                         className="h-[1.25rem] w-[9.75rem] text-base font-semibold"
+                        htmlFor="env-value"
                       >
                         Environment Value
                       </label>
                       <Input
+                        className="h-[2.75rem] w-[13.5rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
                         id="env-value"
-                        placeholder="Environment Value"
-                        value={newVariableData.environmentValue}
                         onChange={(e) =>
                           setNewVariableData({
                             ...newVariableData,
                             environmentValue: e.target.value
                           })
                         }
-                        className="h-[2.75rem] w-[13.5rem] border-0 bg-[#2a2a2a] text-gray-300 placeholder:text-gray-500"
+                        placeholder="Environment Value"
+                        value={newVariableData.environmentValue}
                       />
                     </div>
                   </div>
 
                   <div className="flex justify-end pt-4">
                     <Button
-                      type="submit"
                       className="h-[2.625rem] w-[6.25rem] rounded-lg bg-white text-xs font-semibold text-black hover:bg-gray-200"
-                      onClick={addVariable}
+                      onClick={() => addVariable}
+                      type="submit"
                     >
                       Add Variable
                     </Button>