Fixed Store showing that API key is invalid when it is valid

src/frontend/src/App.tsx

@@ -21,6 +21,7 @@ import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useTypesStore } from "./stores/typesStore";
+import { useStoreStore } from "./stores/storeStore";
 
 export default function App() {
   const errorData = useAlertStore((state) => state.errorData);
@@ -32,7 +33,6 @@ export default function App() {
   const successData = useAlertStore((state) => state.successData);
   const successOpen = useAlertStore((state) => state.successOpen);
   const setSuccessOpen = useAlertStore((state) => state.setSuccessOpen);
-  const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
@@ -122,9 +122,11 @@ export default function App() {
 
   const { isAuthenticated } = useContext(AuthContext);
   const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+  const fetchApiData = useStoreStore((state) => state.fetchApiData);
   const getTypes = useTypesStore((state) => state.getTypes);
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
+  const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
   useEffect(() => {
     refreshStars();
@@ -136,6 +138,8 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      checkHasStore();
+      fetchApiData();
     }
   }, [isAuthenticated]);
 

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -172,16 +172,16 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
-          {hasStore && (
+          {hasStore &&  (
-            <ShadTooltip content="Share" side="top">
+            <ShadTooltip content={(!hasApiKey || !validApiKey) ? "Set a valid API key to share this component." : "Share"} side="top">
               <button
                 className={classNames(
                   "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
+                  (!hasApiKey || !validApiKey) ? " text-muted-foreground cursor-not-allowed" : ""
                 )}
                 onClick={(event) => {
                   event.preventDefault();
-                  if (hasApiKey || hasStore) setShowconfirmShare(true);
+                  if (hasApiKey && hasStore && validApiKey) setShowconfirmShare(true);
                 }}
               >
                 <IconComponent name="Share3" className="-m-1 h-6 w-6" />

src/frontend/src/pages/StorePage/index.tsx

@@ -39,8 +39,6 @@ export default function StorePage(): JSX.Element {
   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);
 
@@ -48,6 +46,9 @@ export default function StorePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
+  const currentFlowId = useFlowsManagerStore(
+    (state) => state.currentFlowId
+  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();
@@ -63,10 +64,6 @@ export default function StorePage(): JSX.Element {
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
 
-  useEffect(() => {
-    handleGetTags();
-  }, []);
-
   useEffect(() => {
     if (!loadingApiKey) {
       if (!hasApiKey) {
@@ -86,9 +83,10 @@ export default function StorePage(): JSX.Element {
         });
       }
     }
-  }, [loadingApiKey, validApiKey, hasApiKey]);
+  }, [loadingApiKey, validApiKey, hasApiKey, currentFlowId]);
 
   useEffect(() => {
+    handleGetTags();
     handleGetComponents();
   }, [
     tabActive,
@@ -119,7 +117,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
-    if (!hasApiKey || loadingApiKey) return;
+    if (loadingApiKey) return;
     setLoading(true);
     getStoreComponents({
       component_id: id,
@@ -176,23 +174,6 @@ export default function StorePage(): JSX.Element {
     setPageSize(12);
   }
 
-  const fetchApiData = async () => {
-    setLoadingApiKey(true);
-    try {
-      const res = await checkHasApiKey();
-      setHasApiKey(res?.has_api_key ?? false);
-      setValidApiKey(res?.is_valid ?? false);
-      setLoadingApiKey(false);
-    } catch (e) {
-      setLoadingApiKey(false);
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchApiData();
-  }, [apiKey]);
-
   return (
     <PageLayout
       betaIcon

src/frontend/src/stores/storeStore.tsx

@@ -1,37 +1,34 @@
 import { create } from "zustand";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { StoreStoreType } from "../types/zustand/store";
+import useAlertStore from "./alertStore";
 
 export const useStoreStore = create<StoreStoreType>((set) => ({
   hasStore: true,
   validApiKey: false,
   hasApiKey: false,
   loadingApiKey: true,
-  updateHasStore: (hasStore) => set(() => ({ hasStore: hasStore })),
+  checkHasStore: () => {
+    checkHasStore().then((res) => {
+      set({ hasStore: res?.enabled ?? false });
+    });
+  },
   updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),
   updateLoadingApiKey: (loadingApiKey) =>
     set(() => ({ loadingApiKey: loadingApiKey })),
   updateHasApiKey: (hasApiKey) => set(() => ({ hasApiKey: hasApiKey })),
+  fetchApiData: async () => {
+    set({ loadingApiKey: true });
+    try {
+      const res = await checkHasApiKey();
+      set({
+        validApiKey: res?.is_valid ?? false,
+        hasApiKey: res?.has_api_key ?? false,
+        loadingApiKey: false,
+      });
+    } catch (e) {
+      set({ loadingApiKey: false });
+      console.log(e);
+    }
+  },
 }));
-
-checkHasStore().then((res) => {
-  useStoreStore.setState({ hasStore: res?.enabled ?? false });
-});
-
-const fetchApiData = async () => {
-  useStoreStore.setState({ loadingApiKey: true });
-  try {
-    const res = await checkHasApiKey();
-
-    useStoreStore.setState({
-      loadingApiKey: false,
-      validApiKey: res?.is_valid ?? false,
-      hasApiKey: res?.has_api_key ?? false,
-    });
-  } catch (e) {
-    useStoreStore.setState({ loadingApiKey: false });
-    console.log(e);
-  }
-};
-
-fetchApiData();

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

@@ -3,8 +3,9 @@ export type StoreStoreType = {
   validApiKey: boolean;
   hasApiKey: boolean;
   loadingApiKey: boolean;
-  updateHasStore: (hasStore: boolean) => void;
+  checkHasStore: () => void;
   updateValidApiKey: (validApiKey: boolean) => void;
   updateHasApiKey: (hasApiKey: boolean) => void;
   updateLoadingApiKey: (loadingApiKey: boolean) => void;
+  fetchApiData: () => Promise<void>;
 };