feat: Remove Explore URLs and make the normal URLs public (#2632)

* add groupSlug to most routes

* fixed more routing issues

* fixed jank and incorrect routes

* remove public explore links

* remove unused groupSlug and explore routes

* nuked explore pages

* fixed public toolstore bug

* fixed various routes missing group slug

* restored public app header menu

* fix janky login redirect

* 404 recipe API call returns to login

* removed unused explore layout

* force redirect when using the wrong group slug

* fixed dead admin links

* removed unused middleware from earlier attempt

* 🧹

* improve cookbooks sidebar
fixed sidebar link not working
fixed sidebar link target
hide cookbooks header when there are none

* added group slug to user

* fix $auth typehints

* vastly simplified groupSlug logic

* allow logged-in users to view other groups

* fixed some edgecases that bypassed isOwnGroup

* fixed static home ref

* 🧹

* fixed redirect logic

* lint warning

* removed group slug from group and user pages
refactored all components to use route groupSlug or user group slug
moved some group pages to recipe pages

* fixed some bad types

* 🧹

* moved groupSlug routes under /g/groupSlug

* move /recipe/ to /r/

* fix backend url generation and metadata injection

* moved shopping lists to root/other route fixes

* changed shared from /recipes/ to /r/

* fixed 404 redirect not awaiting

* removed unused import

* fix doc links

* fix public recipe setting not affecting public API

* fixed backend tests

* fix nuxt-generate command

---------

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

frontend/composables/recipe-page/shared-state.ts

@@ -151,12 +151,12 @@ export function usePageUser(): { user: UserOut } {
         id: "",
         group: "",
         groupId: "",
+        groupSlug: "",
         cacheKey: "",
         email: "",
       },
     };
   }
 
-  // @ts-expect-error - We know that the API always returns a UserOut, but I'm unsure how to type the $auth to know what type user is
-  return { user: $auth.user as UserOut };
+  return { user: $auth.user };
 }

frontend/composables/recipes/use-recipe-search.ts

@@ -1,6 +1,7 @@
 import { Ref, ref } from "@nuxtjs/composition-api";
 import { watchDebounced } from "@vueuse/core";
 import { UserApi } from "~/lib/api";
+import { ExploreApi } from "~/lib/api/public/explore";
 import { Recipe } from "~/lib/api/types/recipe";
 
 export interface UseRecipeSearchReturn {
@@ -17,7 +18,7 @@ export interface UseRecipeSearchReturn {
  * on the query. Useful for searchable list views. For advanced
  * search, use the `useRecipeQuery` composable.
  */
-export function useRecipeSearch(api: UserApi): UseRecipeSearchReturn {
+export function useRecipeSearch(api: UserApi | ExploreApi): UseRecipeSearchReturn {
   const query = ref("");
   const error = ref("");
   const loading = ref(false);

frontend/composables/recipes/use-recipes.ts

@@ -1,4 +1,4 @@
-import { useAsync, ref } from "@nuxtjs/composition-api";
+import { useAsync, useRouter, ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { usePublicExploreApi } from "~/composables/api/api-client";
 import { useUserApi } from "~/composables/api";
@@ -9,6 +9,8 @@ export const allRecipes = ref<Recipe[]>([]);
 export const recentRecipes = ref<Recipe[]>([]);
 
 export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
+  const router = useRouter();
+
   // passing the group slug switches to using the public API
   const api = publicGroupSlug ? usePublicExploreApi(publicGroupSlug).explore : useUserApi();
 
@@ -23,7 +25,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
     queryFilter: string | null = null,
   ) {
 
-    const { data } = await api.recipes.getAll(page, perPage, {
+    const { data, error } = await api.recipes.getAll(page, perPage, {
       orderBy,
       orderDirection,
       paginationSeed: query?._searchSeed, // propagate searchSeed to stabilize random order pagination
@@ -40,6 +42,11 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
       requireAllFoods: query?.requireAllFoods,
       queryFilter,
     });
+
+    if (error?.response?.status === 404) {
+      router.push("/login");
+    }
+
     return data ? data.items : [];
   }
 

frontend/composables/use-logged-in-state.ts

@@ -0,0 +1,17 @@
+import { computed, useContext, useRoute } from "@nuxtjs/composition-api";
+
+export const useLoggedInState = function () {
+  const { $auth } = useContext();
+  const route = useRoute();
+
+  const loggedIn = computed(() => $auth.loggedIn);
+  const isOwnGroup = computed(() => {
+    if (!route.value.params.groupSlug) {
+      return loggedIn.value;
+    } else {
+      return loggedIn.value && $auth.user?.groupSlug === route.value.params.groupSlug;
+    }
+  });
+
+  return { loggedIn, isOwnGroup };
+}