Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Only call store APIs once #3306

Merged
merged 2 commits into from
Mar 12, 2024
+32 −22
Merged

fix: Only call store APIs once #3306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1e5b0a
move loading value to inside async function
michael-genson Mar 12, 2024
2696c0b
share loading state and use it for throttling
michael-genson Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/composables/partials/use-actions-factory.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading