feat: Public Recipe Browser (#2525)

* fixed incorrect var ref

* added public recipe pagination route

* refactored frontend public/explore API

* fixed broken public cards

* hid context menu from cards when public

* fixed public app header

* fixed random recipe

* added public food, category, tag, and tool routes

* not sure why I thought that would work

* added public organizer/foods stores

* disabled clicking on tags/categories

* added public link to profile page

* linting

* force a 404 if the group slug is missing or invalid

* oops

* refactored to fit sidebar into explore

* fixed invalid logic for app header

* removed most sidebar options from public

* added backend routes for public cookbooks

* added explore cookbook pages/apis

* codegen

* added backend tests

* lint

* fixes v-for keys

* I do not understand but sure why not

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/composables/store/use-category-store.ts

@@ -1,5 +1,6 @@
 import { reactive, ref, Ref } from "@nuxtjs/composition-api";
-import { useStoreActions } from "../partials/use-actions-factory";
+import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
+import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
 import { RecipeCategory } from "~/lib/api/types/admin";
 
@@ -24,7 +25,30 @@ export function useCategoryData() {
   };
 }
 
+export function usePublicCategoryStore(groupSlug: string) {
+  const api = usePublicExploreApi(groupSlug).explore;
+  const loading = ref(false);
+
+  const actions = {
+    ...usePublicStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
+    flushStore() {
+      categoryStore.value = [];
+    },
+  };
+
+  if (!categoryStore.value || categoryStore.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items: categoryStore,
+    actions,
+    loading,
+  };
+}
+
 export function useCategoryStore() {
+  // passing the group slug switches to using the public API
   const api = useUserApi();
   const loading = ref(false);
 

frontend/composables/store/use-food-store.ts

@@ -1,5 +1,6 @@
 import { ref, reactive, Ref } from "@nuxtjs/composition-api";
-import { useStoreActions } from "../partials/use-actions-factory";
+import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
+import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
 import { IngredientFood } from "~/lib/api/types/recipe";
 
@@ -31,6 +32,24 @@ export const useFoodData = function () {
   };
 };
 
+export const usePublicFoodStore = function (groupSlug: string) {
+  const api = usePublicExploreApi(groupSlug).explore;
+  const loading = ref(false);
+
+  const actions = {
+    ...usePublicStoreActions(api.foods, foodStore, loading),
+    flushStore() {
+      foodStore = null;
+    },
+  };
+
+  if (!foodStore) {
+    foodStore = actions.getAll();
+  }
+
+  return { foods: foodStore, actions };
+};
+
 export const useFoodStore = function () {
   const api = useUserApi();
   const loading = ref(false);

frontend/composables/store/use-tag-store.ts

@@ -1,5 +1,6 @@
 import { reactive, ref, Ref } from "@nuxtjs/composition-api";
-import { useStoreActions } from "../partials/use-actions-factory";
+import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
+import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
 import { RecipeTag } from "~/lib/api/types/admin";
 
@@ -24,6 +25,28 @@ export function useTagData() {
   };
 }
 
+export function usePublicTagStore(groupSlug: string) {
+  const api = usePublicExploreApi(groupSlug).explore;
+  const loading = ref(false);
+
+  const actions = {
+    ...usePublicStoreActions<RecipeTag>(api.tags, items, loading),
+    flushStore() {
+      items.value = [];
+    },
+  };
+
+  if (!items.value || items.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items,
+    actions,
+    loading,
+  };
+}
+
 export function useTagStore() {
   const api = useUserApi();
   const loading = ref(false);

frontend/composables/store/use-tool-store.ts

@@ -1,5 +1,6 @@
 import { reactive, ref, Ref } from "@nuxtjs/composition-api";
-import { useStoreActions } from "../partials/use-actions-factory";
+import { usePublicExploreApi } from "../api/api-client";
+import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
 import { useUserApi } from "~/composables/api";
 import { RecipeTool } from "~/lib/api/types/recipe";
 
@@ -26,6 +27,28 @@ export function useToolData() {
   };
 }
 
+export function usePublicToolStore(groupSlug: string) {
+  const api = usePublicExploreApi(groupSlug).explore;
+  const loading = ref(false);
+
+  const actions = {
+    ...usePublicStoreActions<RecipeTool>(api.tools, toolStore, loading),
+    flushStore() {
+      toolStore.value = [];
+    },
+  };
+
+  if (!toolStore.value || toolStore.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items: toolStore,
+    actions,
+    loading,
+  };
+}
+
 export function useToolStore() {
   const api = useUserApi();
   const loading = ref(false);