Refactored API Key state to update components when updating API key

src/frontend/src/contexts/storeContext.tsx

@@ -1,6 +1,7 @@
-import { createContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { storeContextType } from "../types/contexts/store";
+import { AuthContext } from "./authContext";
 
 //store context to share user components and update them
 const initialValue = {
@@ -21,6 +22,7 @@ export function StoreProvider({ children }) {
   const [hasApiKey, setHasApiKey] = useState(true);
   const [validApiKey, setValidApiKey] = useState(false);
   const [storeChecked, setStoreChecked] = useState(false);
+  const { apiKey } = useContext(AuthContext);
 
   useEffect(() => {
     const fetchStoreData = async () => {
@@ -37,11 +39,9 @@ export function StoreProvider({ children }) {
     fetchStoreData();
   }, []);
 
-  useEffect(() => {
+  const fetchApiData = async () => {
     setLoadingApiKey(true);
-    const fetchStoreData = async () => {
     try {
-        if (storeChecked) return;
       const res = await checkHasApiKey();
       console.log(res);
       setHasApiKey(res?.has_api_key ?? false);
@@ -52,8 +52,9 @@ export function StoreProvider({ children }) {
     }
   };
 
-    fetchStoreData();
+  useEffect(() => {
-  }, [storeChecked, validApiKey]);
+    fetchApiData();
+  }, [storeChecked, validApiKey, apiKey]);
 
   return (
     <StoreContext.Provider