From 4397f888904a5de4dc6b9a14f2a462d48251de3f Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 19 Oct 2023 00:24:06 -0300
Subject: [PATCH] fix(StoreApiKeyModal/index.tsx): add error handling when
 saving API key and display success/error messages

feat(StoreApiKeyModal/index.tsx): add functionality to save API key using addApiKeyStore function
---
 .../src/modals/StoreApiKeyModal/index.tsx     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index fc98a011f..beb887095 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CONTROL_NEW_API_KEY } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
+import { addApiKeyStore } from "../../controllers/API";
 import {
   ApiKeyInputType,
   StoreApiKeyType,
@@ -20,7 +21,7 @@ export default function StoreApiKeyModal({
   const [apiKeyValue, setApiKeyValue] = useState("");
   const [inputState, setInputState] =
     useState<ApiKeyInputType>(CONTROL_NEW_API_KEY);
-  const { setSuccessData } = useContext(alertContext);
+  const { setSuccessData, setErrorData } = useContext(alertContext);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   function handleInput({
@@ -41,6 +42,24 @@ export default function StoreApiKeyModal({
     setApiKeyValue("");
   }
 
+  const handleSaveKey = () => {
+    if (inputState && inputState["apikey"]) {
+      addApiKeyStore(inputState["apikey"]).then(
+        () => {
+          setSuccessData({
+            title: "Success! Your API Key has been saved.",
+          });
+        },
+        (error) => {
+          setErrorData({
+            title: "There was an error saving the API Key, please try again.",
+            list: [error["response"]["data"]["detail"]],
+          });
+        }
+      );
+    }
+  };
+
   return (
     <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
@@ -93,7 +112,14 @@ export default function StoreApiKeyModal({
             </Button>
 
             <Form.Submit asChild>
-              <Button className="mt-8">Save</Button>
+              <Button
+                className="mt-8"
+                onClick={() => {
+                  handleSaveKey();
+                }}
+              >
+                Save
+              </Button>
             </Form.Submit>
           </div>
         </Form.Root>