From 42523bbfc9b17d1c7a9399cf85d3e58593930253 Mon Sep 17 00:00:00 2001 From: Michael Genson <71845777+michael-genson@users.noreply.github.com> Date: Tue, 12 Mar 2024 17:36:30 -0500 Subject: [PATCH] fix: Only call store APIs once (#3306) * move loading value to inside async function * share loading state and use it for throttling --- frontend/composables/partials/use-actions-factory.ts | 4 ++-- frontend/composables/store/use-category-store.ts | 10 ++++++---- frontend/composables/store/use-food-store.ts | 10 ++++++---- frontend/composables/store/use-label-store.ts | 5 +++-- frontend/composables/store/use-tag-store.ts | 10 ++++++---- frontend/composables/store/use-tool-store.ts | 10 ++++++---- frontend/composables/store/use-unit-store.ts | 5 +++-- 7 files changed, 32 insertions(+), 22 deletions(-) diff --git a/frontend/composables/partials/use-actions-factory.ts b/frontend/composables/partials/use-actions-factory.ts index be9dd21a216..a930c478a98 100644 --- a/frontend/composables/partials/use-actions-factory.ts +++ b/frontend/composables/partials/use-actions-factory.ts @@ -37,6 +37,7 @@ export function usePublicStoreActions( loading.value = true; const allItems = useAsync(async () => { const { data } = await api.getAll(page, perPage, params); + loading.value = false; if (data && allRef) { allRef.value = data.items; @@ -49,7 +50,6 @@ export function usePublicStoreActions( } }, useAsyncKey()); - loading.value = false; return allItems; } @@ -88,6 +88,7 @@ export function useStoreActions( loading.value = true; const allItems = useAsync(async () => { const { data } = await api.getAll(page, perPage, params); + loading.value = false; if (data && allRef) { allRef.value = data.items; @@ -100,7 +101,6 @@ export function useStoreActions( } }, useAsyncKey()); - loading.value = false; return allItems; } diff --git a/frontend/composables/store/use-category-store.ts b/frontend/composables/store/use-category-store.ts index bc458407194..211ff635ab3 100644 --- a/frontend/composables/store/use-category-store.ts +++ b/frontend/composables/store/use-category-store.ts @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api"; import { RecipeCategory } from "~/lib/api/types/admin"; const categoryStore: Ref = ref([]); +const publicStoreLoading = ref(false); +const storeLoading = ref(false); export function useCategoryData() { const data = reactive({ @@ -27,7 +29,7 @@ export function useCategoryData() { export function usePublicCategoryStore(groupSlug: string) { const api = usePublicExploreApi(groupSlug).explore; - const loading = ref(false); + const loading = publicStoreLoading; const actions = { ...usePublicStoreActions(api.categories, categoryStore, loading), @@ -36,7 +38,7 @@ export function usePublicCategoryStore(groupSlug: string) { }, }; - if (!categoryStore.value || categoryStore.value?.length === 0) { + if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) { actions.getAll(); } @@ -50,7 +52,7 @@ export function usePublicCategoryStore(groupSlug: string) { export function useCategoryStore() { // passing the group slug switches to using the public API const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.categories, categoryStore, loading), @@ -59,7 +61,7 @@ export function useCategoryStore() { }, }; - if (!categoryStore.value || categoryStore.value?.length === 0) { + if (!loading.value && (!categoryStore.value || categoryStore.value?.length === 0)) { actions.getAll(); } diff --git a/frontend/composables/store/use-food-store.ts b/frontend/composables/store/use-food-store.ts index 37038e7259d..bf7b1a47698 100644 --- a/frontend/composables/store/use-food-store.ts +++ b/frontend/composables/store/use-food-store.ts @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api"; import { IngredientFood } from "~/lib/api/types/recipe"; let foodStore: Ref = ref([]); +const publicStoreLoading = ref(false); +const storeLoading = ref(false); /** * useFoodData returns a template reactive object @@ -34,7 +36,7 @@ export const useFoodData = function () { export const usePublicFoodStore = function (groupSlug: string) { const api = usePublicExploreApi(groupSlug).explore; - const loading = ref(false); + const loading = publicStoreLoading; const actions = { ...usePublicStoreActions(api.foods, foodStore, loading), @@ -43,7 +45,7 @@ export const usePublicFoodStore = function (groupSlug: string) { }, }; - if (!foodStore.value || foodStore.value.length === 0) { + if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) { foodStore = actions.getAll(); } @@ -52,7 +54,7 @@ export const usePublicFoodStore = function (groupSlug: string) { export const useFoodStore = function () { const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.foods, foodStore, loading), @@ -61,7 +63,7 @@ export const useFoodStore = function () { }, }; - if (!foodStore.value || foodStore.value.length === 0) { + if (!loading.value && (!foodStore.value || foodStore.value.length === 0)) { foodStore = actions.getAll(); } diff --git a/frontend/composables/store/use-label-store.ts b/frontend/composables/store/use-label-store.ts index 77da62f07f9..72654d3b63a 100644 --- a/frontend/composables/store/use-label-store.ts +++ b/frontend/composables/store/use-label-store.ts @@ -4,6 +4,7 @@ import { MultiPurposeLabelOut } from "~/lib/api/types/labels"; import { useUserApi } from "~/composables/api"; let labelStore: Ref = ref([]); +const storeLoading = ref(false); export function useLabelData() { const data = reactive({ @@ -28,7 +29,7 @@ export function useLabelData() { export function useLabelStore() { const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.multiPurposeLabels, labelStore, loading), @@ -37,7 +38,7 @@ export function useLabelStore() { }, }; - if (!labelStore.value || labelStore.value?.length === 0) { + if (!loading.value && (!labelStore.value || labelStore.value?.length === 0)) { labelStore = actions.getAll(); } diff --git a/frontend/composables/store/use-tag-store.ts b/frontend/composables/store/use-tag-store.ts index 12ba51d19b0..70bcd449e84 100644 --- a/frontend/composables/store/use-tag-store.ts +++ b/frontend/composables/store/use-tag-store.ts @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api"; import { RecipeTag } from "~/lib/api/types/admin"; const items: Ref = ref([]); +const publicStoreLoading = ref(false); +const storeLoading = ref(false); export function useTagData() { const data = reactive({ @@ -27,7 +29,7 @@ export function useTagData() { export function usePublicTagStore(groupSlug: string) { const api = usePublicExploreApi(groupSlug).explore; - const loading = ref(false); + const loading = publicStoreLoading; const actions = { ...usePublicStoreActions(api.tags, items, loading), @@ -36,7 +38,7 @@ export function usePublicTagStore(groupSlug: string) { }, }; - if (!items.value || items.value?.length === 0) { + if (!loading.value && (!items.value || items.value?.length === 0)) { actions.getAll(); } @@ -49,7 +51,7 @@ export function usePublicTagStore(groupSlug: string) { export function useTagStore() { const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.tags, items, loading), @@ -58,7 +60,7 @@ export function useTagStore() { }, }; - if (!items.value || items.value?.length === 0) { + if (!loading.value && (!items.value || items.value?.length === 0)) { actions.getAll(); } diff --git a/frontend/composables/store/use-tool-store.ts b/frontend/composables/store/use-tool-store.ts index b2428f7142d..7b14381e5bb 100644 --- a/frontend/composables/store/use-tool-store.ts +++ b/frontend/composables/store/use-tool-store.ts @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api"; import { RecipeTool } from "~/lib/api/types/recipe"; const toolStore: Ref = ref([]); +const publicStoreLoading = ref(false); +const storeLoading = ref(false); export function useToolData() { const data = reactive({ @@ -29,7 +31,7 @@ export function useToolData() { export function usePublicToolStore(groupSlug: string) { const api = usePublicExploreApi(groupSlug).explore; - const loading = ref(false); + const loading = publicStoreLoading; const actions = { ...usePublicStoreActions(api.tools, toolStore, loading), @@ -38,7 +40,7 @@ export function usePublicToolStore(groupSlug: string) { }, }; - if (!toolStore.value || toolStore.value?.length === 0) { + if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) { actions.getAll(); } @@ -51,7 +53,7 @@ export function usePublicToolStore(groupSlug: string) { export function useToolStore() { const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.tools, toolStore, loading), @@ -60,7 +62,7 @@ export function useToolStore() { }, }; - if (!toolStore.value || toolStore.value?.length === 0) { + if (!loading.value && (!toolStore.value || toolStore.value?.length === 0)) { actions.getAll(); } diff --git a/frontend/composables/store/use-unit-store.ts b/frontend/composables/store/use-unit-store.ts index bf4c3cf3216..527a2ea7707 100644 --- a/frontend/composables/store/use-unit-store.ts +++ b/frontend/composables/store/use-unit-store.ts @@ -4,6 +4,7 @@ import { useUserApi } from "~/composables/api"; import { IngredientUnit } from "~/lib/api/types/recipe"; let unitStore: Ref = ref([]); +const storeLoading = ref(false); /** * useUnitData returns a template reactive object @@ -35,7 +36,7 @@ export const useUnitData = function () { export const useUnitStore = function () { const api = useUserApi(); - const loading = ref(false); + const loading = storeLoading; const actions = { ...useStoreActions(api.units, unitStore, loading), @@ -44,7 +45,7 @@ export const useUnitStore = function () { }, }; - if (!unitStore.value || unitStore.value.length === 0) { + if (!loading.value && (!unitStore.value || unitStore.value.length === 0)) { unitStore = actions.getAll(); }