Merge branch 'dev' into zustand/io/migration

src/frontend/src/App.tsx

@@ -20,6 +20,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 removeFromTempNotificationList = useAlertStore(
@@ -28,7 +29,6 @@ export default function App() {
   const tempNotificationList = useAlertStore(
     (state) => state.tempNotificationList
   );
-  const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
@@ -38,9 +38,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();
@@ -52,6 +54,8 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      checkHasStore();
+      fetchApiData();
     }
   }, [isAuthenticated]);
 

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,19 +1,34 @@
 import { create } from "zustand";
-import { checkHasStore } from "../controllers/API";
+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 });
-});

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>;
 };