diff --git a/frontend/composables/partials/use-actions-factory.ts b/frontend/composables/partials/use-actions-factory.ts index a38dda937..4e655915c 100644 --- a/frontend/composables/partials/use-actions-factory.ts +++ b/frontend/composables/partials/use-actions-factory.ts @@ -1,10 +1,10 @@ -import { useAsyncKey } from "../use-utils"; +import type { AsyncData, NuxtError } from "#app"; import type { BoundT } from "./types"; import type { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients"; import type { QueryValue } from "~/lib/api/base/route"; interface ReadOnlyStoreActions { - getAll(page?: number, perPage?: number, params?: any): Ref; + getAll(page?: number, perPage?: number, params?: any): AsyncData | null>; refresh(page?: number, perPage?: number, params?: any): Promise; } @@ -21,6 +21,7 @@ interface StoreActions extends ReadOnlyStoreActions { * a lot of refreshing hooks to be called on operations */ export function useReadOnlyActions( + storeKey: string, api: BaseCRUDAPIReadOnly, allRef: Ref | null, loading: Ref, @@ -29,7 +30,7 @@ export function useReadOnlyActions( params.orderBy ??= "name"; params.orderDirection ??= "asc"; - const allItems = useAsyncData(useAsyncKey(), async () => { + const allItems = useAsyncData(storeKey, async () => { loading.value = true; try { const { data } = await api.getAll(page, perPage, params); @@ -80,6 +81,7 @@ export function useReadOnlyActions( * a lot of refreshing hooks to be called on operations */ export function useStoreActions( + storeKey: string, api: BaseCRUDAPI, allRef: Ref | null, loading: Ref, @@ -88,7 +90,7 @@ export function useStoreActions( params.orderBy ??= "name"; params.orderDirection ??= "asc"; - const allItems = useAsyncData(useAsyncKey(), async () => { + const allItems = useAsyncData(storeKey, async () => { loading.value = true; try { const { data } = await api.getAll(page, perPage, params); diff --git a/frontend/composables/partials/use-store-factory.ts b/frontend/composables/partials/use-store-factory.ts index 6a23e916f..1e62d396e 100644 --- a/frontend/composables/partials/use-store-factory.ts +++ b/frontend/composables/partials/use-store-factory.ts @@ -13,12 +13,13 @@ export const useData = function (defaultObject: T) { }; export const useReadOnlyStore = function ( + storeKey: string, store: Ref, loading: Ref, api: BaseCRUDAPIReadOnly, params = {} as Record, ) { - const storeActions = useReadOnlyActions(api, store, loading); + const storeActions = useReadOnlyActions(`${storeKey}-store-readonly`, api, store, loading); const actions = { ...storeActions, async refresh() { @@ -29,21 +30,22 @@ export const useReadOnlyStore = function ( }, }; + // initial hydration if (!loading.value && !store.value.length) { - const result = actions.getAll(1, -1, params); - store.value = result.value || []; + actions.refresh(); } return { store, actions }; }; export const useStore = function ( + storeKey: string, store: Ref, loading: Ref, api: BaseCRUDAPI, params = {} as Record, ) { - const storeActions = useStoreActions(api, store, loading); + const storeActions = useStoreActions(`${storeKey}-store`, api, store, loading); const actions = { ...storeActions, async refresh() { @@ -54,9 +56,9 @@ export const useStore = function ( }, }; + // initial hydration if (!loading.value && !store.value.length) { - const result = actions.getAll(1, -1, params); - store.value = result.value || []; + actions.refresh(); } return { store, actions }; diff --git a/frontend/composables/store/use-category-store.ts b/frontend/composables/store/use-category-store.ts index 4e73fdfdc..bfa074d30 100644 --- a/frontend/composables/store/use-category-store.ts +++ b/frontend/composables/store/use-category-store.ts @@ -17,10 +17,10 @@ export const useCategoryData = function () { export const useCategoryStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.categories); + return useStore("category", store, loading, api.categories); }; export const usePublicCategoryStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(store, publicLoading, api.categories); + return useReadOnlyStore("category", store, publicLoading, api.categories); }; diff --git a/frontend/composables/store/use-cookbook-store.ts b/frontend/composables/store/use-cookbook-store.ts index 755bf9da1..f299a8436 100644 --- a/frontend/composables/store/use-cookbook-store.ts +++ b/frontend/composables/store/use-cookbook-store.ts @@ -9,7 +9,7 @@ const publicLoading = ref(false); export const useCookbookStore = function (i18n?: Composer) { const api = useUserApi(i18n); - const store = useStore(cookbooks, loading, api.cookbooks); + const store = useStore("cookbook", cookbooks, loading, api.cookbooks); const updateAll = async function (updateData: UpdateCookBook[]) { loading.value = true; @@ -25,5 +25,5 @@ export const useCookbookStore = function (i18n?: Composer) { export const usePublicCookbookStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(cookbooks, publicLoading, api.cookbooks); + return useReadOnlyStore("cookbook", cookbooks, publicLoading, api.cookbooks); }; diff --git a/frontend/composables/store/use-food-store.ts b/frontend/composables/store/use-food-store.ts index 1cb5c24a6..3d2ae23f0 100644 --- a/frontend/composables/store/use-food-store.ts +++ b/frontend/composables/store/use-food-store.ts @@ -18,10 +18,10 @@ export const useFoodData = function () { export const useFoodStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.foods); + return useStore("food", store, loading, api.foods); }; export const usePublicFoodStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(store, publicLoading, api.foods); + return useReadOnlyStore("food", store, publicLoading, api.foods); }; diff --git a/frontend/composables/store/use-household-store.ts b/frontend/composables/store/use-household-store.ts index 3a702cab0..a472b43ae 100644 --- a/frontend/composables/store/use-household-store.ts +++ b/frontend/composables/store/use-household-store.ts @@ -9,10 +9,10 @@ const publicLoading = ref(false); export const useHouseholdStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useReadOnlyStore(store, loading, api.households); + return useReadOnlyStore("household", store, loading, api.households); }; export const usePublicHouseholdStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(store, publicLoading, api.households); + return useReadOnlyStore("household-public", store, publicLoading, api.households); }; diff --git a/frontend/composables/store/use-label-store.ts b/frontend/composables/store/use-label-store.ts index 5345c7865..53d4843d4 100644 --- a/frontend/composables/store/use-label-store.ts +++ b/frontend/composables/store/use-label-store.ts @@ -17,5 +17,5 @@ export const useLabelData = function () { export const useLabelStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.multiPurposeLabels); + return useStore("label", store, loading, api.multiPurposeLabels); }; diff --git a/frontend/composables/store/use-tag-store.ts b/frontend/composables/store/use-tag-store.ts index ef5777c34..0faa7e8d4 100644 --- a/frontend/composables/store/use-tag-store.ts +++ b/frontend/composables/store/use-tag-store.ts @@ -17,10 +17,10 @@ export const useTagData = function () { export const useTagStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.tags); + return useStore("tag", store, loading, api.tags); }; export const usePublicTagStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(store, publicLoading, api.tags); + return useReadOnlyStore("tag", store, publicLoading, api.tags); }; diff --git a/frontend/composables/store/use-tool-store.ts b/frontend/composables/store/use-tool-store.ts index 092ff449a..059a99228 100644 --- a/frontend/composables/store/use-tool-store.ts +++ b/frontend/composables/store/use-tool-store.ts @@ -23,10 +23,10 @@ export const useToolData = function () { export const useToolStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.tools); + return useStore("tool", store, loading, api.tools); }; export const usePublicToolStore = function (groupSlug: string, i18n?: Composer) { const api = usePublicExploreApi(groupSlug, i18n).explore; - return useReadOnlyStore(store, publicLoading, api.tools); + return useReadOnlyStore("tool", store, publicLoading, api.tools); }; diff --git a/frontend/composables/store/use-unit-store.ts b/frontend/composables/store/use-unit-store.ts index d9fea16d2..5c5dfffad 100644 --- a/frontend/composables/store/use-unit-store.ts +++ b/frontend/composables/store/use-unit-store.ts @@ -18,5 +18,5 @@ export const useUnitData = function () { export const useUnitStore = function (i18n?: Composer) { const api = useUserApi(i18n); - return useStore(store, loading, api.units); + return useStore("unit", store, loading, api.units); }; diff --git a/frontend/composables/store/use-user-store.ts b/frontend/composables/store/use-user-store.ts index 44dbc5603..03d2a9697 100644 --- a/frontend/composables/store/use-user-store.ts +++ b/frontend/composables/store/use-user-store.ts @@ -16,5 +16,5 @@ export const useUserStore = function (i18n?: Composer) { const requests = useRequests(i18n); const api = new GroupUserAPIReadOnly(requests); - return useReadOnlyStore(store, loading, api, { orderBy: "full_name" }); + return useReadOnlyStore("user", store, loading, api, { orderBy: "full_name" }); }; diff --git a/frontend/composables/use-group-recipe-actions.ts b/frontend/composables/use-group-recipe-actions.ts index 429e61771..7d75bdb51 100644 --- a/frontend/composables/use-group-recipe-actions.ts +++ b/frontend/composables/use-group-recipe-actions.ts @@ -78,7 +78,7 @@ export const useGroupRecipeActions = function ( }; const actions = { - ...useStoreActions(api.groupRecipeActions, groupRecipeActions, loading), + ...useStoreActions("group-recipe-actions", api.groupRecipeActions, groupRecipeActions, loading), flushStore() { groupRecipeActions.value = []; }, diff --git a/frontend/composables/use-utils.ts b/frontend/composables/use-utils.ts index fafda6bba..8f5f845cf 100644 --- a/frontend/composables/use-utils.ts +++ b/frontend/composables/use-utils.ts @@ -8,7 +8,7 @@ export const useToggleDarkMode = () => { }; export const useAsyncKey = function () { - return String(Date.now()); + return `${Date.now()}-${Math.random().toString(36).slice(2)}`; }; export const titleCase = function (str: string) {