diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 91c455d1c..406c66fd5 100644 --- a/src/frontend/src/App.tsx +++ b/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]); diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index 8321be91d..8eeafc28f 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/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 ( ((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 }); -}); diff --git a/src/frontend/src/types/zustand/store/index.ts b/src/frontend/src/types/zustand/store/index.ts index 0254c857d..34bf38ad1 100644 --- a/src/frontend/src/types/zustand/store/index.ts +++ b/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; };