Skip to content

Commit

Permalink
fix: Only call store APIs once (#3306)
Browse files Browse the repository at this point in the history 
* move loading value to inside async function

* share loading state and use it for throttling
  • Loading branch information
@michael-genson
michael-genson authored Mar 12, 2024
1 parent 0a34473 commit 42523bb
Show file tree
Hide file tree
Showing 7 changed files with 32 additions and 22 deletions.
4 changes: 2 additions & 2 deletions frontend/composables/partials/use-actions-factory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export function usePublicStoreActions<T extends BoundT>(
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;
Expand All @@ -49,7 +50,6 @@ export function usePublicStoreActions<T extends BoundT>(
}
}, useAsyncKey());

loading.value = false;
return allItems;
}

Expand Down Expand Up @@ -88,6 +88,7 @@ export function useStoreActions<T extends BoundT>(
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;
Expand All @@ -100,7 +101,6 @@ export function useStoreActions<T extends BoundT>(
}
}, useAsyncKey());

loading.value = false;
return allItems;
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/composables/store/use-category-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
import { RecipeCategory } from "~/lib/api/types/admin";

const categoryStore: Ref<RecipeCategory[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);

export function useCategoryData() {
const data = reactive({
Expand All @@ -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<RecipeCategory>(api.categories, categoryStore, loading),
Expand All @@ -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();
}

Expand All @@ -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<RecipeCategory>(api.categories, categoryStore, loading),
Expand All @@ -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();
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/composables/store/use-food-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
import { IngredientFood } from "~/lib/api/types/recipe";

let foodStore: Ref<IngredientFood[] | null> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);

/**
* useFoodData returns a template reactive object
Expand Down Expand Up @@ -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),
Expand All @@ -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();
}

Expand All @@ -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),
Expand All @@ -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();
}

Expand Down
5 changes: 3 additions & 2 deletions frontend/composables/store/use-label-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
import { useUserApi } from "~/composables/api";

let labelStore: Ref<MultiPurposeLabelOut[] | null> = ref([]);
const storeLoading = ref(false);

export function useLabelData() {
const data = reactive({
Expand All @@ -28,7 +29,7 @@ export function useLabelData() {

export function useLabelStore() {
const api = useUserApi();
const loading = ref(false);
const loading = storeLoading;

const actions = {
...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
Expand All @@ -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();
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/composables/store/use-tag-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
import { RecipeTag } from "~/lib/api/types/admin";

const items: Ref<RecipeTag[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);

export function useTagData() {
const data = reactive({
Expand All @@ -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<RecipeTag>(api.tags, items, loading),
Expand All @@ -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();
}

Expand All @@ -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<RecipeTag>(api.tags, items, loading),
Expand All @@ -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();
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/composables/store/use-tool-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useUserApi } from "~/composables/api";
import { RecipeTool } from "~/lib/api/types/recipe";

const toolStore: Ref<RecipeTool[]> = ref([]);
const publicStoreLoading = ref(false);
const storeLoading = ref(false);

export function useToolData() {
const data = reactive({
Expand All @@ -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<RecipeTool>(api.tools, toolStore, loading),
Expand All @@ -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();
}

Expand All @@ -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<RecipeTool>(api.tools, toolStore, loading),
Expand All @@ -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();
}

Expand Down
5 changes: 3 additions & 2 deletions frontend/composables/store/use-unit-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useUserApi } from "~/composables/api";
import { IngredientUnit } from "~/lib/api/types/recipe";

let unitStore: Ref<IngredientUnit[] | null> = ref([]);
const storeLoading = ref(false);

/**
* useUnitData returns a template reactive object
Expand Down Expand Up @@ -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<IngredientUnit>(api.units, unitStore, loading),
Expand All @@ -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();
}

Expand Down

0 comments on commit 42523bb

Please sign in to comment.