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/api/api-client.ts

@@ -3,6 +3,7 @@ import { useContext } from "@nuxtjs/composition-api";
 import type { NuxtAxiosInstance } from "@nuxtjs/axios";
 import { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
 import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
+import { PublicExploreApi } from "~/lib/api/client-public";
 
 const request = {
   async safe<T, U>(
@@ -80,3 +81,11 @@ export const usePublicApi = function (): PublicApi {
   const requests = getRequests($axios);
   return new PublicApi(requests);
 };
+
+export const usePublicExploreApi = function (groupSlug: string): PublicExploreApi {
+  const { $axios, i18n } = useContext();
+  $axios.setHeader("Accept-Language", i18n.locale);
+
+  const requests = getRequests($axios);
+  return new PublicExploreApi(requests, groupSlug);
+}

frontend/composables/partials/use-actions-factory.ts

@@ -1,20 +1,75 @@
 import { Ref, useAsync } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
-import { BaseCRUDAPI } from "~/lib/api/base/base-clients";
+import { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
 import { QueryValue } from "~/lib/api/base/route";
 
 type BoundT = {
   id?: string | number;
 };
 
-interface StoreActions<T extends BoundT> {
+interface PublicStoreActions<T extends BoundT> {
   getAll(page?: number, perPage?: number, params?: any): Ref<T[] | null>;
   refresh(): Promise<void>;
+}
+
+interface StoreActions<T extends BoundT> extends PublicStoreActions<T> {
   createOne(createData: T): Promise<void>;
   updateOne(updateData: T): Promise<void>;
   deleteOne(id: string | number): Promise<void>;
 }
 
+
+/**
+ * usePublicStoreActions is a factory function that returns a set of methods
+ * that can be reused to manage the state of a data store without using
+ * Vuex. This is primarily used for basic GET/GETALL operations that required
+ * a lot of refreshing hooks to be called on operations
+ */
+export function usePublicStoreActions<T extends BoundT>(
+  api: BaseCRUDAPIReadOnly<T>,
+  allRef: Ref<T[] | null> | null,
+  loading: Ref<boolean>
+): PublicStoreActions<T> {
+  function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params.orderBy ??= "name";
+    params.orderDirection ??= "asc";
+
+    loading.value = true;
+    const allItems = useAsync(async () => {
+      const { data } = await api.getAll(page, perPage, params);
+
+      if (data && allRef) {
+        allRef.value = data.items;
+      }
+
+      if (data) {
+        return data.items ?? [];
+      } else {
+        return [];
+      }
+    }, useAsyncKey());
+
+    loading.value = false;
+    return allItems;
+  }
+
+  async function refresh() {
+    loading.value = true;
+    const { data } = await api.getAll();
+
+    if (data && data.items && allRef) {
+      allRef.value = data.items;
+    }
+
+    loading.value = false;
+  }
+
+  return {
+    getAll,
+    refresh,
+  };
+}
+
 /**
  * useStoreActions is a factory function that returns a set of methods
  * that can be reused to manage the state of a data store without using

frontend/composables/recipes/use-recipes.ts

@@ -1,5 +1,6 @@
 import { useAsync, ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
+import { usePublicExploreApi } from "~/composables/api/api-client";
 import { useUserApi } from "~/composables/api";
 import { Recipe } from "~/lib/api/types/recipe";
 import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
@@ -7,8 +8,9 @@ import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
 export const allRecipes = ref<Recipe[]>([]);
 export const recentRecipes = ref<Recipe[]>([]);
 
-export const useLazyRecipes = function () {
-  const api = useUserApi();
+export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
+  // passing the group slug switches to using the public API
+  const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
 
   const recipes = ref<Recipe[]>([]);
 
@@ -20,6 +22,7 @@ export const useLazyRecipes = function () {
     query: RecipeSearchQuery | null = null,
     queryFilter: string | null = null,
   ) {
+
     const { data } = await api.recipes.getAll(page, perPage, {
       orderBy,
       orderDirection,
@@ -73,8 +76,12 @@ export const useLazyRecipes = function () {
   };
 };
 
-export const useRecipes = (all = false, fetchRecipes = true, loadFood = false) => {
-  const api = useUserApi();
+export const useRecipes = (
+  all = false, fetchRecipes = true,
+  loadFood = false,
+  publicGroupSlug: string | null = null
+) => {
+  const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
 
   // recipes is non-reactive!!
   const { recipes, page, perPage } = (() => {

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);

frontend/composables/use-group-cookbooks.ts

@@ -1,13 +1,15 @@
 import { useAsync, ref, Ref, useContext } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "./use-utils";
+import { usePublicExploreApi } from "./api/api-client";
 import { useUserApi } from "~/composables/api";
 import { ReadCookBook, UpdateCookBook } from "~/lib/api/types/cookbook";
 
 let cookbookStore: Ref<ReadCookBook[] | null> | null = null;
 
-export const useCookbook = function () {
+export const useCookbook = function (publicGroupSlug: string | null = null) {
   function getOne(id: string | number) {
-    const api = useUserApi();
+    // passing the group slug switches to using the public API
+    const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
 
     const units = useAsync(async () => {
       const { data } = await api.cookbooks.getOne(id);
@@ -21,6 +23,48 @@ export const useCookbook = function () {
   return { getOne };
 };
 
+export const usePublicCookbooks = function (groupSlug: string) {
+  const api = usePublicExploreApi(groupSlug).explore;
+  const loading = ref(false);
+
+  const actions = {
+    getAll() {
+      loading.value = true;
+      const units = useAsync(async () => {
+        const { data } = await api.cookbooks.getAll(1, -1, { orderBy: "position", orderDirection: "asc" });
+
+        if (data) {
+          return data.items;
+        } else {
+          return null;
+        }
+      }, useAsyncKey());
+
+      loading.value = false;
+      return units;
+    },
+    async refreshAll() {
+      loading.value = true;
+      const { data } = await api.cookbooks.getAll(1, -1, { orderBy: "position", orderDirection: "asc" });
+
+      if (data && data.items && cookbookStore) {
+        cookbookStore.value = data.items;
+      }
+
+      loading.value = false;
+    },
+    flushStore() {
+      cookbookStore = null;
+    },
+  };
+
+  if (!cookbookStore) {
+    cookbookStore = actions.getAll();
+  }
+
+  return { cookbooks: cookbookStore, actions };
+}
+
 export const useCookbooks = function () {
   const api = useUserApi();
   const loading = ref(false);