From a670a7cb0b557928a307c937ab0107a88e254d30 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 4 Sep 2024 13:48:09 -0300 Subject: [PATCH] fix: getall is being called unnecessarily every time the user accesses the My Collection page (#3681) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ (use-get-folders.ts): Update useGetFoldersQuery to check if types are empty before calling getTypes to avoid unnecessary API calls ♻️ (typesStore.ts): Remove unnecessary useAlertStore setState call to improve code readability and maintainability * feat: Update getTypes function to always force refresh The `getTypes` function in `typesStore.ts` has been updated to always force a refresh of the types data. This change ensures that the latest data is fetched from the API, avoiding unnecessary API calls. * Changed types check in other pages --------- Co-authored-by: Lucas Oliveira --- .../src/controllers/API/queries/folders/use-get-folders.ts | 4 ++-- src/frontend/src/pages/FlowPage/index.tsx | 3 ++- src/frontend/src/pages/Playground/index.tsx | 3 ++- src/frontend/src/pages/ViewPage/index.tsx | 3 ++- src/frontend/src/stores/typesStore.ts | 3 +-- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts index 1f63badbf..f2d7f2115 100644 --- a/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts +++ b/src/frontend/src/controllers/API/queries/folders/use-get-folders.ts @@ -37,10 +37,10 @@ export const useGetFoldersQuery: useQueryFunctionType< const myCollectionId = data?.find((f) => f.name === DEFAULT_FOLDER)?.id; setMyCollectionId(myCollectionId); - const { getTypes } = useTypesStore.getState(); + const { getTypes, types } = useTypesStore.getState(); await refreshFlows(undefined); - await getTypes(); + if (!types || Object.keys(types).length === 0) await getTypes(); return foldersWithoutStarterProjects; }; diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index f3cb66acc..6485692f0 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -35,6 +35,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element { const { mutateAsync: refreshFlows } = useGetRefreshFlows(); const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading); const getTypes = useTypesStore((state) => state.getTypes); + const types = useTypesStore((state) => state.types); const updatedAt = currentSavedFlow?.updated_at; @@ -74,7 +75,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element { } else if (!flows) { setIsLoading(true); await refreshFlows(undefined); - await getTypes(); + if (!types || Object.keys(types).length === 0) await getTypes(); setIsLoading(false); } }; diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx index a7fbc7225..18082f873 100644 --- a/src/frontend/src/pages/Playground/index.tsx +++ b/src/frontend/src/pages/Playground/index.tsx @@ -29,6 +29,7 @@ export default function PlaygroundPage() { const { mutateAsync: refreshFlows } = useGetRefreshFlows(); const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading); const getTypes = useTypesStore((state) => state.getTypes); + const types = useTypesStore((state) => state.types); // Set flow tab id useEffect(() => { @@ -49,7 +50,7 @@ export default function PlaygroundPage() { } else if (!flows) { setIsLoading(true); await refreshFlows(undefined); - await getTypes(); + if (!types || Object.keys(types).length === 0) await getTypes(); setIsLoading(false); } }; diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx index ae33879a1..66d6ba16f 100644 --- a/src/frontend/src/pages/ViewPage/index.tsx +++ b/src/frontend/src/pages/ViewPage/index.tsx @@ -17,6 +17,7 @@ export default function ViewPage() { const { mutateAsync: refreshFlows } = useGetRefreshFlows(); const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading); const getTypes = useTypesStore((state) => state.getTypes); + const types = useTypesStore((state) => state.types); // Set flow tab id useEffect(() => { @@ -33,7 +34,7 @@ export default function ViewPage() { } else if (!flows) { setIsLoading(true); await refreshFlows(undefined); - await getTypes(); + if (!types || Object.keys(types).length === 0) await getTypes(); setIsLoading(false); } }; diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts index 30558012b..3fc9a4873 100644 --- a/src/frontend/src/stores/typesStore.ts +++ b/src/frontend/src/stores/typesStore.ts @@ -21,13 +21,12 @@ export const useTypesStore = create((set, get) => ({ types: {}, templates: {}, data: {}, - getTypes: (force_refresh: boolean = false) => { + getTypes: (force_refresh: boolean = true) => { return new Promise(async (resolve, reject) => { const setLoading = useFlowsManagerStore.getState().setIsLoading; getAll(force_refresh) .then((response) => { const data = response?.data; - useAlertStore.setState({ loading: false }); set((old) => ({ types: typesGenerator(data), data: { ...old.data, ...data },