pass i18n in explicitely so we can defer to onMounted

This commit is contained in:
Michael Genson 2025-06-30 19:52:33 +00:00
commit 9523b1fec6
4 changed files with 40 additions and 15 deletions

View file

@ -138,14 +138,32 @@ export default defineNuxtComponent({
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const cookbookPreferences = useCookbookPreferences();
const { store: cookbooks, actions: cookbooksActions } = isOwnGroup.value ? useCookbookStore() : usePublicCookbookStore(groupSlug.value || "");
onMounted(() => {
if (!cookbooks.value.length) {
cookbooksActions.refresh();
}
});
const { store: households } = isOwnGroup.value ? useHouseholdStore() : usePublicHouseholdStore(groupSlug.value || "");
function useStoreWithRefresh<T>(getStore: () => { store: Ref<T[]>; actions: { refresh: () => void } }) {
const { store, actions } = getStore();
if (!store.value.length) {
actions.refresh();
}
return store.value;
}
const cookbooks = computed(() => {
if (isOwnGroup.value) {
return useStoreWithRefresh(() => useCookbookStore());
} else if (groupSlug.value) {
return useStoreWithRefresh(() => usePublicCookbookStore(groupSlug.value, i18n));
}
return [];
})
const households = computed(() => {
if (isOwnGroup.value) {
return useStoreWithRefresh(() => useHouseholdStore());
} else if (groupSlug.value) {
return useStoreWithRefresh(() => usePublicHouseholdStore(groupSlug.value, i18n));
}
return [];
});
const householdsById = computed(() => {
return households.value.reduce((acc, household) => {

View file

@ -1,4 +1,5 @@
import type { AxiosInstance, AxiosResponse, AxiosRequestConfig } from "axios";
import type { Composer } from "vue-i18n";
import type { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
import { PublicExploreApi } from "~/lib/api/client-public";
@ -52,8 +53,12 @@ function getRequests(axiosInstance: AxiosInstance): ApiRequestInstance {
};
}
export const useRequests = function (): ApiRequestInstance {
const i18n = useI18n();
export const useRequests = function (i18n?: Composer): ApiRequestInstance {
if (!i18n) {
// Note: this only works in setup()
i18n = useI18n();
}
const { $axios } = useNuxtApp();
$axios.defaults.headers.common["Accept-Language"] = i18n.locale.value;
@ -76,7 +81,7 @@ export const usePublicApi = function (): PublicApi {
return new PublicApi(requests);
};
export const usePublicExploreApi = function (groupSlug: string): PublicExploreApi {
const requests = useRequests();
export const usePublicExploreApi = function (groupSlug: string, i18n?: Composer): PublicExploreApi {
const requests = useRequests(i18n);
return new PublicExploreApi(requests, groupSlug);
};

View file

@ -1,6 +1,7 @@
import { useReadOnlyStore, useStore } from "../partials/use-store-factory";
import type { RecipeCookBook } from "~/lib/api/types/cookbook";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
import type { Composer } from "vue-i18n";
const store: Ref<RecipeCookBook[]> = ref([]);
const loading = ref(false);
@ -11,7 +12,7 @@ export const useCookbookStore = function () {
return useStore<RecipeCookBook>(store, loading, api.cookbooks);
};
export const usePublicCookbookStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
export const usePublicCookbookStore = function (groupSlug: string, i18n?: Composer) {
const api = usePublicExploreApi(groupSlug, i18n).explore;
return useReadOnlyStore<RecipeCookBook>(store, publicLoading, api.cookbooks);
};

View file

@ -1,6 +1,7 @@
import { useReadOnlyStore } from "../partials/use-store-factory";
import type { HouseholdSummary } from "~/lib/api/types/household";
import { usePublicExploreApi, useUserApi } from "~/composables/api";
import type { Composer } from "vue-i18n";
const store: Ref<HouseholdSummary[]> = ref([]);
const loading = ref(false);
@ -11,7 +12,7 @@ export const useHouseholdStore = function () {
return useReadOnlyStore<HouseholdSummary>(store, loading, api.households);
};
export const usePublicHouseholdStore = function (groupSlug: string) {
const api = usePublicExploreApi(groupSlug).explore;
export const usePublicHouseholdStore = function (groupSlug: string, i18n?: Composer) {
const api = usePublicExploreApi(groupSlug, i18n).explore;
return useReadOnlyStore<HouseholdSummary>(store, publicLoading, api.households);
};