From 9523b1fec62f60f308b956d20a99ba8cf3655c25 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 30 Jun 2025 19:52:33 +0000
Subject: [PATCH] pass i18n in explicitely so we can defer to onMounted

---
 frontend/components/Layout/DefaultLayout.vue  | 32 +++++++++++++++----
 frontend/composables/api/api-client.ts        | 13 +++++---
 .../composables/store/use-cookbook-store.ts   |  5 +--
 .../composables/store/use-household-store.ts  |  5 +--
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/frontend/components/Layout/DefaultLayout.vue b/frontend/components/Layout/DefaultLayout.vue
index 12f0b0475..17ad3507b 100644
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -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) => {
diff --git a/frontend/composables/api/api-client.ts b/frontend/composables/api/api-client.ts
index 012d6c0f5..a121ed4ee 100644
--- a/frontend/composables/api/api-client.ts
+++ b/frontend/composables/api/api-client.ts
@@ -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);
 };
diff --git a/frontend/composables/store/use-cookbook-store.ts b/frontend/composables/store/use-cookbook-store.ts
index 34e7522a3..e48bb9600 100644
--- a/frontend/composables/store/use-cookbook-store.ts
+++ b/frontend/composables/store/use-cookbook-store.ts
@@ -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);
 };
diff --git a/frontend/composables/store/use-household-store.ts b/frontend/composables/store/use-household-store.ts
index 0622be677..45503f2d2 100644
--- a/frontend/composables/store/use-household-store.ts
+++ b/frontend/composables/store/use-household-store.ts
@@ -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);
 };