feat(addNewVariableButton.tsx): implement form logic to handle saving new global variables

feat(globalVariables.ts): add functions to add and remove global variables in the store
feat(globalVariables/index.ts): add types for the new functions in the global variables store

src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx

@@ -1,13 +1,19 @@
+import { useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
 import { Textarea } from "../../../components/ui/textarea";
+import { registerGlobalVariable } from "../../../controllers/API";
 import BaseModal from "../../../modals/baseModal";
 
 //TODO IMPLEMENT FORM LOGIC
 
 export default function AddNewVariableButton(): JSX.Element {
-  function handleSaveVariable() {}
+  const [key, setKey] = useState("");
+  const [value, setValue] = useState("");
+  function handleSaveVariable() {
+    registerGlobalVariable(key, value).then((_) => {});
+  }
   return (
     <BaseModal size="small">
       <BaseModal.Header
@@ -22,11 +28,23 @@ export default function AddNewVariableButton(): JSX.Element {
         <div className="flex h-full w-full flex-col justify-around align-middle">
           <div className="h-1/2">
             <Label>Variable name </Label>
-            <Input placeholder="example name"></Input>
+            <Input
+              value={key}
+              onChange={(e) => {
+                setKey(e.target.value);
+              }}
+              placeholder="example name"
+            ></Input>
           </div>
           <div className="h-1/2">
             <Label>Variable Value </Label>
-            <Textarea className="h-4/6 w-full resize-none custom-scroll" />
+            <Textarea
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              className="h-4/6 w-full resize-none custom-scroll"
+            />
           </div>
         </div>
       </BaseModal.Content>

src/frontend/src/stores/globalVariables.ts

@@ -11,5 +11,20 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
+    addGlobalVariable: (key, value) => {
+      const newVariables = { ...get().globalVariables, [key]: value };
+      set({
+        globalVariables: newVariables,
+        globalVariablesEntries: Object.keys(newVariables),
+      });
+    },
+    removeGlobalVariable: (key) => {
+      const newVariables = { ...get().globalVariables };
+      delete newVariables[key];
+      set({
+        globalVariables: newVariables,
+        globalVariablesEntries: Object.keys(newVariables),
+      });
+    },
   })
 );

src/frontend/src/types/zustand/globalVariables/index.ts

@@ -2,4 +2,6 @@ export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
   globalVariables: { [key: string]: string };
   setGlobalVariables: (variables: { [key: string]: string }) => void;
+  addGlobalVariable: (key: string, value: string) => void;
+  removeGlobalVariable: (key: string) => void;
 };