From 1284329c1639d6f6c3979ce890a39d02fc19d453 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 4 Jan 2024 14:51:00 -0300
Subject: [PATCH] fix(modals): update state variables after saving API key to
 reflect the correct values fix(pages): update state variables after fetching
 API data to reflect the correct values

---
 .../src/modals/StoreApiKeyModal/index.tsx     |  9 +++++++++
 src/frontend/src/pages/StorePage/index.tsx    | 19 ++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 5ac0dc2fa..bb16e12ff 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -22,6 +22,9 @@ export default function StoreApiKeyModal({
 
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
+  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
+  const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
 
   const handleSaveKey = () => {
     if (apiKeyValue) {
@@ -32,12 +35,18 @@ export default function StoreApiKeyModal({
           });
           storeApiKey(apiKeyValue);
           setOpen(false);
+          setHasApiKey(true);
+          setValidApiKey(true);
+          setLoadingApiKey(false);
         },
         (error) => {
           setErrorData({
             title: "There was an error saving the API Key, please try again.",
             list: [error["response"]["data"]["detail"]],
           });
+          setHasApiKey(false);
+          setValidApiKey(false);
+          setLoadingApiKey(false);
         }
       );
     }
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 69d24728c..11122f945 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -36,10 +36,14 @@ import { cn } from "../../utils/utils";
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const validApiKey = useStoreStore((state) => state.validApiKey);
-  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
   const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
 
+  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
+  const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
+  const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
+
   const { apiKey } = useContext(AuthContext);
+
   const { setErrorData } = useContext(alertContext);
   const { setTabId } = useContext(FlowsContext);
   const [loading, setLoading] = useState(true);
@@ -171,17 +175,14 @@ export default function StorePage(): JSX.Element {
   }
 
   const fetchApiData = async () => {
-    useStoreStore.setState({ loadingApiKey: true });
+    setLoadingApiKey(true);
     try {
       const res = await checkHasApiKey();
-
-      useStoreStore.setState({
-        loadingApiKey: false,
-        validApiKey: res?.is_valid ?? false,
-        hasApiKey: res?.has_api_key ?? false,
-      });
+      setHasApiKey(res?.has_api_key ?? false);
+      setValidApiKey(res?.is_valid ?? false);
+      setLoadingApiKey(false);
     } catch (e) {
-      useStoreStore.setState({ loadingApiKey: false });
+      setLoadingApiKey(false);
       console.log(e);
     }
   };