Refactor addNewVariableButtonComponent and API registerGlobalVariable

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
+import { registerGlobalVariable } from "../../controllers/API";
+import BaseModal from "../../modals/baseModal";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
-import { registerGlobalVariable } from "../../controllers/API";
-import BaseModal from "../../modals/baseModal";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
@@ -25,8 +25,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       value,
     };
     if (provider) data = { ...data, provider };
-    registerGlobalVariable(data).then((_) => {
+    registerGlobalVariable(data).then((res) => {
-      addGlobalVariable(key, value, provider);
+      const { name, id, provider } = res.data;
+      addGlobalVariable(name, id, provider);
       setKey("");
       setValue("");
       setProvider("");

src/frontend/src/controllers/API/index.ts

@@ -880,7 +880,7 @@ export async function registerGlobalVariable({
   name: string;
   value: string;
   provider?: string;
-}) {
+}): Promise<AxiosResponse<{ name: string; id: string; provider: string }>> {
   return await api.post(`${BASE_URL_API}credentials/`, {
     name,
     value,