feat: Improve Public URL Readability (#2482)

* added support for group slugs

* modified frontend to use links with group slug

* fixed test refs

* unused import

---------

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

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -496,6 +496,22 @@ export default defineComponent({
     }
 
     const { copyText } = useCopy();
+    const groupSlug = ref<string>("");
+
+    async function setGroupSlug() {
+      if (!props.groupId) {
+        groupSlug.value = props.groupId;
+        return;
+      }
+
+      const {data} = await api.groups.getOne(props.groupId);
+      if (!data) {
+        groupSlug.value = props.groupId;
+        return;
+      }
+
+      groupSlug.value = data.slug;
+    }
 
     // Note: Print is handled as an event in the parent component
     const eventHandlers: { [key: string]: () => void | Promise<any> } = {
@@ -525,13 +541,18 @@ export default defineComponent({
       share: () => {
         state.shareDialog = true;
       },
-      publicUrl: () => {
+      publicUrl: async () => {
         if (!props.groupId) {
           alert.error("Unknown group ID");
           console.error("prop `groupId` is required when requesting a public URL");
           return;
         }
-        copyText(`${window.location.origin}/explore/recipes/${props.groupId}/${props.slug}`);
+
+        if (!groupSlug.value) {
+          await setGroupSlug();
+        }
+
+        copyText(`${window.location.origin}/explore/recipes/${groupSlug.value}/${props.slug}`);
       },
     };
 

frontend/lib/api/public/explore.ts

@@ -4,11 +4,11 @@ import { Recipe } from "~/lib/api/types/recipe";
 const prefix = "/api";
 
 const routes = {
-  recipe: (groupId: string, recipeSlug: string) => `${prefix}/explore/recipes/${groupId}/${recipeSlug}`,
+  recipe: (groupSlug: string, recipeSlug: string) => `${prefix}/explore/recipes/${groupSlug}/${recipeSlug}`,
 };
 
 export class ExploreApi extends BaseAPI {
-  async recipe(groupId: string, recipeSlug: string) {
-    return await this.requests.get<Recipe>(routes.recipe(groupId, recipeSlug));
+  async recipe(groupSlug: string, recipeSlug: string) {
+    return await this.requests.get<Recipe>(routes.recipe(groupSlug, recipeSlug));
   }
 }

frontend/lib/api/types/user.ts

@@ -41,6 +41,7 @@ export interface GroupBase {
 export interface GroupInDB {
   name: string;
   id: string;
+  slug: string;
   categories?: CategoryBase[];
   webhooks?: unknown[];
   users?: UserOut[];

frontend/pages/explore/recipes/_groupSlug/_slug.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
-    const groupId = route.value.params.groupId;
+    const groupSlug = route.value.params.groupSlug;
     const slug = route.value.params.slug;
     const api = usePublicApi();
 
@@ -26,7 +26,7 @@ export default defineComponent({
     const { recipeMeta } = useRecipeMeta();
 
     const recipe = useAsync(async () => {
-      const { data, error } = await api.explore.recipe(groupId, slug);
+      const { data, error } = await api.explore.recipe(groupSlug, slug);
 
       if (error) {
         console.error("error loading recipe -> ", error);