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/lib/api/base/base-clients.ts

@@ -20,11 +20,10 @@ export abstract class BaseAPI {
   }
 }
 
-export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
+export abstract class BaseCRUDAPIReadOnly<ReadType>
   extends BaseAPI
-  implements CrudAPIInterface
-{
-  abstract baseRoute: string;
+  implements CrudAPIInterface {
+  abstract baseRoute: (string);
   abstract itemRoute(itemId: string | number): string;
 
   async getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
@@ -32,13 +31,17 @@ export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
     return await this.requests.get<PaginationData<ReadType>>(route(this.baseRoute, { page, perPage, ...params }));
   }
 
-  async createOne(payload: CreateType) {
-    return await this.requests.post<ReadType>(this.baseRoute, payload);
-  }
-
   async getOne(itemId: string | number) {
     return await this.requests.get<ReadType>(this.itemRoute(itemId));
   }
+}
+
+export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
+  extends BaseCRUDAPIReadOnly<ReadType>
+  implements CrudAPIInterface {
+  async createOne(payload: CreateType) {
+    return await this.requests.post<ReadType>(this.baseRoute, payload);
+  }
 
   async updateOne(itemId: string | number, payload: UpdateType) {
     return await this.requests.put<ReadType, UpdateType>(this.itemRoute(itemId), payload);

frontend/lib/api/client-public.ts

@@ -5,13 +5,20 @@ import { ApiRequestInstance } from "~/lib/api/types/non-generated";
 
 export class PublicApi {
   public validators: ValidatorsApi;
-  public explore: ExploreApi;
   public shared: SharedApi;
 
   constructor(requests: ApiRequestInstance) {
     this.validators = new ValidatorsApi(requests);
-    this.explore = new ExploreApi(requests);
     this.shared = new SharedApi(requests);
+  }
+}
+
+export class PublicExploreApi extends PublicApi {
+  public explore: ExploreApi;
+
+  constructor(requests: ApiRequestInstance, groupSlug: string) {
+    super(requests);
+    this.explore = new ExploreApi(requests, groupSlug);
 
     Object.freeze(this);
   }

frontend/lib/api/public/explore.ts

@@ -1,14 +1,25 @@
 import { BaseAPI } from "../base/base-clients";
-import { Recipe } from "~/lib/api/types/recipe";
-
-const prefix = "/api";
-
-const routes = {
-  recipe: (groupSlug: string, recipeSlug: string) => `${prefix}/explore/recipes/${groupSlug}/${recipeSlug}`,
-};
+import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+import { PublicRecipeApi } from "./explore/recipes";
+import { PublicFoodsApi } from "./explore/foods";
+import { PublicCategoriesApi, PublicTagsApi, PublicToolsApi } from "./explore/organizers";
+import { PublicCookbooksApi } from "./explore/cookbooks";
 
 export class ExploreApi extends BaseAPI {
-  async recipe(groupSlug: string, recipeSlug: string) {
-    return await this.requests.get<Recipe>(routes.recipe(groupSlug, recipeSlug));
+  public recipes: PublicRecipeApi;
+  public cookbooks: PublicCookbooksApi;
+  public foods: PublicFoodsApi;
+  public categories: PublicCategoriesApi;
+  public tags: PublicTagsApi;
+  public tools: PublicToolsApi;
+
+  constructor(requests: ApiRequestInstance, groupSlug: string) {
+    super(requests);
+    this.recipes = new PublicRecipeApi(requests, groupSlug);
+    this.cookbooks = new PublicCookbooksApi(requests, groupSlug);
+    this.foods = new PublicFoodsApi(requests, groupSlug);
+    this.categories = new PublicCategoriesApi(requests, groupSlug);
+    this.tags = new PublicTagsApi(requests, groupSlug);
+    this.tools = new PublicToolsApi(requests, groupSlug);
   }
 }

frontend/lib/api/public/explore/cookbooks.ts

@@ -0,0 +1,19 @@
+import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+import { RecipeCookBook } from "~/lib/api/types/cookbook";
+import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+
+const prefix = "/api";
+
+const routes = {
+    cookbooksGroupSlug: (groupSlug: string | number) => `${prefix}/explore/cookbooks/${groupSlug}`,
+    cookbooksGroupSlugCookbookId: (groupSlug: string | number, cookbookId: string | number) => `${prefix}/explore/cookbooks/${groupSlug}/${cookbookId}`,
+};
+
+export class PublicCookbooksApi extends BaseCRUDAPIReadOnly<RecipeCookBook> {
+    baseRoute = routes.cookbooksGroupSlug(this.groupSlug);
+    itemRoute = (itemId: string | number) => routes.cookbooksGroupSlugCookbookId(this.groupSlug, itemId);
+
+    constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+        super(requests);
+    }
+}

frontend/lib/api/public/explore/foods.ts

@@ -0,0 +1,19 @@
+import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+import { IngredientFood } from "~/lib/api/types/recipe";
+import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+
+const prefix = "/api";
+
+const routes = {
+    foodsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/foods/${groupSlug}`,
+    foodsGroupSlugFoodId: (groupSlug: string | number, foodId: string | number) => `${prefix}/explore/foods/${groupSlug}/${foodId}`,
+};
+
+export class PublicFoodsApi extends BaseCRUDAPIReadOnly<IngredientFood> {
+    baseRoute = routes.foodsGroupSlug(this.groupSlug);
+    itemRoute = (itemId: string | number) => routes.foodsGroupSlugFoodId(this.groupSlug, itemId);
+
+    constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+        super(requests);
+    }
+}

frontend/lib/api/public/explore/organizers.ts

@@ -0,0 +1,41 @@
+import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
+import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+
+const prefix = "/api";
+
+const routes = {
+    categoriesGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/categories`,
+    categoriesGroupSlugCategoryId: (groupSlug: string | number, categoryId: string | number) => `${prefix}/explore/organizers/${groupSlug}/categories/${categoryId}`,
+    tagsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/tags`,
+    tagsGroupSlugTagId: (groupSlug: string | number, tagId: string | number) => `${prefix}/explore/organizers/${groupSlug}/tags/${tagId}`,
+    toolsGroupSlug: (groupSlug: string | number) => `${prefix}/explore/organizers/${groupSlug}/tools`,
+    toolsGroupSlugToolId: (groupSlug: string | number, toolId: string | number) => `${prefix}/explore/organizers/${groupSlug}/tools/${toolId}`,
+};
+
+export class PublicCategoriesApi extends BaseCRUDAPIReadOnly<RecipeCategory> {
+    baseRoute = routes.categoriesGroupSlug(this.groupSlug);
+    itemRoute = (itemId: string | number) => routes.categoriesGroupSlugCategoryId(this.groupSlug, itemId);
+
+    constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+        super(requests);
+    }
+}
+
+export class PublicTagsApi extends BaseCRUDAPIReadOnly<RecipeTag> {
+    baseRoute = routes.tagsGroupSlug(this.groupSlug);
+    itemRoute = (itemId: string | number) => routes.tagsGroupSlugTagId(this.groupSlug, itemId);
+
+    constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+        super(requests);
+    }
+}
+
+export class PublicToolsApi extends BaseCRUDAPIReadOnly<RecipeTool> {
+    baseRoute = routes.toolsGroupSlug(this.groupSlug);
+    itemRoute = (itemId: string | number) => routes.toolsGroupSlugToolId(this.groupSlug, itemId);
+
+    constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+        super(requests);
+    }
+}

frontend/lib/api/public/explore/recipes.ts

@@ -0,0 +1,19 @@
+import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+import { Recipe } from "~/lib/api/types/recipe";
+import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+
+const prefix = "/api";
+
+const routes = {
+  recipesGroupSlug: (groupSlug: string | number) => `${prefix}/explore/recipes/${groupSlug}`,
+  recipesGroupSlugRecipeSlug: (groupSlug: string | number, recipeSlug: string | number) => `${prefix}/explore/recipes/${groupSlug}/${recipeSlug}`,
+};
+
+export class PublicRecipeApi extends BaseCRUDAPIReadOnly<Recipe> {
+  baseRoute = routes.recipesGroupSlug(this.groupSlug);
+  itemRoute = (itemId: string | number) => routes.recipesGroupSlugRecipeSlug(this.groupSlug, itemId);
+
+  constructor(requests: ApiRequestInstance, private readonly groupSlug: string) {
+    super(requests);
+  }
+}