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/pages/cookbooks/_slug.vue

@@ -1,64 +1,12 @@
 <template>
-  <v-container v-if="book" fluid>
-    <v-app-bar color="transparent" flat class="mt-n1 rounded">
-      <v-icon large left> {{ $globals.icons.pages }} </v-icon>
-      <v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
-    </v-app-bar>
-    <v-card flat>
-      <v-card-text class="py-0">
-        {{ book.description }}
-      </v-card-text>
-    </v-card>
-
-    <v-container class="pa-0">
-      <RecipeCardSection
-        class="mb-5 mx-1"
-        :recipes="recipes"
-        :query="{ cookbook: slug }"
-        @sortRecipes="assignSorted"
-        @replaceRecipes="replaceRecipes"
-        @appendRecipes="appendRecipes"
-        @delete="removeRecipe"
-      />
-    </v-container>
-  </v-container>
+  <CookbookPage />
 </template>
 
 <script lang="ts">
-import { defineComponent, useRoute, ref, useMeta } from "@nuxtjs/composition-api";
-import { useLazyRecipes } from "~/composables/recipes";
-import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
-import { useCookbook } from "~/composables/use-group-cookbooks";
+import { defineComponent } from "@nuxtjs/composition-api";
+import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
 
 export default defineComponent({
-  components: { RecipeCardSection },
-  setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
-    const route = useRoute();
-    const slug = route.value.params.slug;
-    const { getOne } = useCookbook();
-
-    const tab = ref(null);
-    const book = getOne(slug);
-
-    useMeta(() => {
-      return {
-        title: book?.value?.name || "Cookbook",
-      };
-    });
-
-    return {
-      book,
-      slug,
-      tab,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-    };
-  },
-  head: {}, // Must include for useMeta
-});
+  components: { CookbookPage },
+})
 </script>

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

@@ -0,0 +1,23 @@
+<template>
+  <client-only>
+    <CookbookPage :group-slug="groupSlug" />
+  </client-only>
+</template>
+
+  <script lang="ts">
+  import { defineComponent, useRoute } from "@nuxtjs/composition-api";
+  import CookbookPage from "@/components/Domain/Cookbook/CookbookPage.vue";
+
+  export default defineComponent({
+    components: { CookbookPage },
+    layout: "explore",
+    setup() {
+      const route = useRoute();
+      const groupSlug = route.value.params.groupSlug;
+
+      return {
+        groupSlug,
+      }
+    },
+  })
+  </script>

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

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div v-if="recipe">
     <client-only>
-      <RecipePage v-if="recipe" :recipe="recipe" />
+      <RecipePage :recipe="recipe" />
     </client-only>
   </div>
 </template>
@@ -9,24 +9,24 @@
 <script lang="ts">
 import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
-import { usePublicApi } from "~/composables/api/api-client";
+import { usePublicExploreApi } from "~/composables/api/api-client";
 import { useRecipeMeta } from "~/composables/recipes";
 
 export default defineComponent({
   components: { RecipePage },
-  layout: "basic",
+  layout: "explore",
   setup() {
     const route = useRoute();
     const router = useRouter();
     const groupSlug = route.value.params.groupSlug;
-    const slug = route.value.params.slug;
-    const api = usePublicApi();
+    const recipeSlug = route.value.params.recipeSlug;
+    const api = usePublicExploreApi(groupSlug);
 
     const { meta, title } = useMeta();
     const { recipeMeta } = useRecipeMeta();
 
     const recipe = useAsync(async () => {
-      const { data, error } = await api.explore.recipe(groupSlug, slug);
+      const { data, error } = await api.explore.recipes.getOne(recipeSlug);
 
       if (error) {
         console.error("error loading recipe -> ", error);

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

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="groupSlug">
+    <client-only>
+      <RecipeExplorerPage :group-slug="groupSlug" />
+    </client-only>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { invoke } from "@vueuse/core";
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+
+export default defineComponent({
+  components: { RecipeExplorerPage },
+  layout: "explore",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = route.value.params.groupSlug;
+    const api = usePublicExploreApi(groupSlug);
+
+    invoke(async () => {
+      if (!groupSlug) {
+        return;
+      }
+
+      // try to fetch one tag to make sure the group slug is valid
+      const { data } = await api.explore.tags.getAll(1, 1);
+      if (!data) {
+        // the group slug is invalid, so leave the page (this results in a 404)
+        router.push("/explore/recipes");
+      }
+    });
+
+    return {
+      groupSlug,
+    };
+  },
+});
+</script>

frontend/pages/index.vue

@@ -1,481 +1,40 @@
 <template>
-  <v-container fluid class="pa-0">
-    <div class="search-container py-8">
-      <form class="search-box pa-2" @submit.prevent="search">
-        <div class="d-flex justify-center my-2">
-          <v-text-field
-            ref="input"
-            v-model="state.search"
-            outlined
-            hide-details
-            clearable
-            color="primary"
-            :placeholder="$tc('search.search-placeholder')"
-            :prepend-inner-icon="$globals.icons.search"
-            @keyup.enter="hideKeyboard"
-          />
-        </div>
-        <div class="search-row">
-          <!-- Category Filter -->
-          <SearchFilter
-            v-if="categories"
-            v-model="selectedCategories"
-            :require-all.sync="state.requireAllCategories"
-            :items="categories"
-          >
-            <v-icon left>
-              {{ $globals.icons.tags }}
-            </v-icon>
-            {{ $t("category.categories") }}
-          </SearchFilter>
-
-          <!-- Tag Filter -->
-          <SearchFilter v-if="tags" v-model="selectedTags" :require-all.sync="state.requireAllTags" :items="tags">
-            <v-icon left>
-              {{ $globals.icons.tags }}
-            </v-icon>
-            {{ $t("tag.tags") }}
-          </SearchFilter>
-
-          <!-- Tool Filter -->
-          <SearchFilter v-if="tools" v-model="selectedTools" :require-all.sync="state.requireAllTools" :items="tools">
-            <v-icon left>
-              {{ $globals.icons.tools }}
-            </v-icon>
-            {{ $t("tool.tools") }}
-          </SearchFilter>
-
-          <!-- Food Filter -->
-          <SearchFilter v-if="foods" v-model="selectedFoods" :require-all.sync="state.requireAllFoods" :items="foods">
-            <v-icon left>
-              {{ $globals.icons.foods }}
-            </v-icon>
-            {{ $t("general.foods") }}
-          </SearchFilter>
-
-          <!-- Sort Options -->
-          <v-menu offset-y nudge-bottom="3">
-            <template #activator="{ on, attrs }">
-              <v-btn class="ml-auto" small color="accent" v-bind="attrs" v-on="on">
-                <v-icon :left="!$vuetify.breakpoint.xsOnly">
-                  {{ state.orderDirection === "asc" ? $globals.icons.sortAscending : $globals.icons.sortDescending }}
-                </v-icon>
-                {{ $vuetify.breakpoint.xsOnly ? null : sortText }}
-              </v-btn>
-            </template>
-            <v-card>
-              <v-list>
-                <v-list-item @click="toggleOrderDirection()">
-                  <v-icon left>
-                    {{ $globals.icons.sort }}
-                  </v-icon>
-                  <v-list-item-title>
-                    {{ state.orderDirection === "asc" ? "Sort Descending" : "Sort Ascending" }}
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item
-                  v-for="v in sortable"
-                  :key="v.name"
-                  :input-value="state.orderBy === v.value"
-                  @click="state.orderBy = v.value"
-                >
-                  <v-icon left>
-                    {{ v.icon }}
-                  </v-icon>
-                  <v-list-item-title>{{ v.name }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-
-          <!-- Settings -->
-          <v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
-            <template #activator="{ on, attrs }">
-              <v-btn small color="accent" dark v-bind="attrs" v-on="on">
-                <v-icon small>
-                  {{ $globals.icons.cog }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-card>
-              <v-card-text>
-                <v-switch v-model="state.auto" :label="$t('search.auto-search')" single-line></v-switch>
-                <v-btn block color="primary" @click="reset">
-                  {{ $tc("general.reset") }}
-                </v-btn>
-              </v-card-text>
-            </v-card>
-          </v-menu>
-        </div>
-        <div v-if="!state.auto" class="search-button-container">
-          <v-btn x-large color="primary" type="submit" block>
-            <v-icon left>
-              {{ $globals.icons.search }}
-            </v-icon>
-            {{ $tc("search.search") }}
-          </v-btn>
-        </div>
-      </form>
-    </div>
-    <v-divider></v-divider>
-    <v-container class="mt-6 px-md-6">
-      <RecipeCardSection
-        class="mt-n5"
-        :icon="$globals.icons.search"
-        :title="$tc('search.results')"
-        :recipes="recipes"
-        :query="passedQuery"
-        @replaceRecipes="replaceRecipes"
-        @appendRecipes="appendRecipes"
-      />
-    </v-container>
-  </v-container>
+  <div v-if="groupSlug">
+    <RecipeExplorerPage :group-slug="groupSlug" />
+  </div>
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
-import { watchDebounced } from "@vueuse/shared";
-import SearchFilter from "~/components/Domain/SearchFilter.vue";
-import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
-import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
-import { NoUndefinedField } from "~/lib/api/types/non-generated";
-import { useLazyRecipes } from "~/composables/recipes";
-import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
+import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { invoke } from "@vueuse/core";
+import { useUserApi } from "~/composables/api/api-client";
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
 
 export default defineComponent({
-  components: { SearchFilter, RecipeCardSection },
+  components: { RecipeExplorerPage },
   setup() {
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
+    const { $auth } = useContext();
+    const api = useUserApi();
 
-    const router = useRouter();
-    const { $globals, i18n } = useContext();
+    // @ts-ignore $auth.user is typed as unknown, even though it's a user
+    const groupId: string | undefined = $auth.user?.groupId;
+    const groupSlug = ref<string>();
 
-    const state = ref({
-      auto: true,
-      search: "",
-      orderBy: "created_at",
-      orderDirection: "desc" as "asc" | "desc",
 
-      // and/or
-      requireAllCategories: false,
-      requireAllTags: false,
-      requireAllTools: false,
-      requireAllFoods: false,
+    invoke(async () => {
+      if (!groupId) {
+        return;
+      }
+
+      const { data } = await api.groups.getOne(groupId);
+      if (data) {
+        groupSlug.value = data.slug;
+      }
     });
 
-    const categories = useCategoryStore();
-    const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
-
-    const foods = useFoodStore();
-    const selectedFoods = ref<IngredientFood[]>([]);
-
-    const tags = useTagStore();
-    const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
-
-    const tools = useToolStore();
-    const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
-
-    const passedQuery = ref<RecipeSearchQuery | null>(null);
-
-    function reset() {
-      state.value.search = "";
-      state.value.orderBy = "created_at";
-      state.value.orderDirection = "desc";
-      state.value.requireAllCategories = false;
-      state.value.requireAllTags = false;
-      state.value.requireAllTools = false;
-      state.value.requireAllFoods = false;
-      selectedCategories.value = [];
-      selectedFoods.value = [];
-      selectedTags.value = [];
-      selectedTools.value = [];
-
-      router.push({
-        query: {},
-      });
-
-      search();
-    }
-
-    function toggleOrderDirection() {
-      state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
-    }
-
-    function toIDArray(array: { id: string }[]) {
-      return array.map((item) => item.id);
-    }
-
-    function hideKeyboard() {
-      input.value.blur()
-    }
-
-    const input: Ref<any> = ref(null);
-
-    async function search() {
-      await router.push({
-        query: {
-          categories: toIDArray(selectedCategories.value),
-          foods: toIDArray(selectedFoods.value),
-          tags: toIDArray(selectedTags.value),
-          tools: toIDArray(selectedTools.value),
-          // Only add the query param if it's or not default
-          ...{
-            auto: state.value.auto ? undefined : "false",
-            search: state.value.search === "" ? undefined : state.value.search,
-            orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
-            orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
-            requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
-            requireAllTags: state.value.requireAllTags ? "true" : undefined,
-            requireAllTools: state.value.requireAllTools ? "true" : undefined,
-            requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
-          },
-        },
-      });
-
-      passedQuery.value = {
-        search: state.value.search,
-        categories: toIDArray(selectedCategories.value),
-        foods: toIDArray(selectedFoods.value),
-        tags: toIDArray(selectedTags.value),
-        tools: toIDArray(selectedTools.value),
-        requireAllCategories: state.value.requireAllCategories,
-        requireAllTags: state.value.requireAllTags,
-        requireAllTools: state.value.requireAllTools,
-        requireAllFoods: state.value.requireAllFoods,
-        orderBy: state.value.orderBy,
-        orderDirection: state.value.orderDirection,
-        _searchSeed: Date.now().toString()
-      };
-    }
-
-    function waitUntilAndExecute(
-      condition: () => boolean,
-      callback: () => void,
-      opts = { timeout: 2000, interval: 500 }
-    ): Promise<void> {
-      return new Promise((resolve, reject) => {
-        const state = {
-          timeout: undefined as number | undefined,
-          interval: undefined as number | undefined,
-        };
-
-        const check = () => {
-          if (condition()) {
-            clearInterval(state.interval);
-            clearTimeout(state.timeout);
-            callback();
-            resolve();
-          }
-        };
-
-        // For some reason these were returning NodeJS.Timeout
-        state.interval = setInterval(check, opts.interval) as unknown as number;
-        state.timeout = setTimeout(() => {
-          clearInterval(state.interval);
-          reject(new Error("Timeout"));
-        }, opts.timeout) as unknown as number;
-      });
-    }
-
-    const sortText = computed(() => {
-      const sort = sortable.find((s) => s.value === state.value.orderBy);
-      if (!sort) return "";
-      return `${sort.name}`;
-    });
-
-    const sortable = [
-      {
-        icon: $globals.icons.orderAlphabeticalAscending,
-        name: i18n.tc("general.sort-alphabetically"),
-        value: "name",
-      },
-      {
-        icon: $globals.icons.newBox,
-        name: i18n.tc("general.created"),
-        value: "created_at",
-      },
-      {
-        icon: $globals.icons.chefHat,
-        name: i18n.tc("general.last-made"),
-        value: "last_made",
-      },
-      {
-        icon: $globals.icons.star,
-        name: i18n.tc("general.rating"),
-        value: "rating",
-      },
-      {
-        icon: $globals.icons.update,
-        name: i18n.tc("general.updated"),
-        value: "update_at",
-      },
-      {
-        icon: $globals.icons.diceMultiple,
-        name: i18n.tc("general.random"),
-        value: "random",
-      },
-    ];
-
-    onMounted(() => {
-      // Hydrate Search
-      // wait for stores to be hydrated
-
-      // read query params
-      const query = router.currentRoute.query;
-
-      if (query.auto) {
-        state.value.auto = query.auto === "true";
-      }
-
-      if (query.search) {
-        state.value.search = query.search as string;
-      }
-
-      if (query.orderBy) {
-        state.value.orderBy = query.orderBy as string;
-      }
-
-      if (query.orderDirection) {
-        state.value.orderDirection = query.orderDirection as "asc" | "desc";
-      }
-
-      const promises: Promise<void>[] = [];
-
-      if (query.categories) {
-        promises.push(
-          waitUntilAndExecute(
-            () => categories.items.value.length > 0,
-            () => {
-              const result = categories.items.value.filter((item) =>
-                (query.categories as string[]).includes(item.id as string)
-              );
-
-              selectedCategories.value = result as NoUndefinedField<RecipeCategory>[];
-            }
-          )
-        );
-      }
-
-      if (query.foods) {
-        promises.push(
-          waitUntilAndExecute(
-            () => {
-              if (foods.foods.value) {
-                return foods.foods.value.length > 0;
-              }
-              return false;
-            },
-            () => {
-              const result = foods.foods.value?.filter((item) => (query.foods as string[]).includes(item.id));
-              selectedFoods.value = result ?? [];
-            }
-          )
-        );
-      }
-
-      if (query.tags) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tags.items.value.length > 0,
-            () => {
-              const result = tags.items.value.filter((item) => (query.tags as string[]).includes(item.id as string));
-              selectedTags.value = result as NoUndefinedField<RecipeTag>[];
-            }
-          )
-        );
-      }
-
-      if (query.tools) {
-        promises.push(
-          waitUntilAndExecute(
-            () => tools.items.value.length > 0,
-            () => {
-              const result = tools.items.value.filter((item) => (query.tools as string[]).includes(item.id));
-              selectedTools.value = result as NoUndefinedField<RecipeTool>[];
-            }
-          )
-        );
-      }
-
-      Promise.allSettled(promises).then(() => {
-        search();
-      });
-    });
-
-    watchDebounced(
-      [
-        () => state.value.search,
-        () => state.value.requireAllCategories,
-        () => state.value.requireAllTags,
-        () => state.value.requireAllTools,
-        () => state.value.requireAllFoods,
-        () => state.value.orderBy,
-        () => state.value.orderDirection,
-        selectedCategories,
-        selectedFoods,
-        selectedTags,
-        selectedTools,
-      ],
-      async () => {
-        if (state.value.auto) {
-          await search();
-        }
-      },
-      {
-        debounce: 500,
-      }
-    );
-
     return {
-      sortText,
-      search,
-      reset,
-      state,
-      categories: categories.items as unknown as NoUndefinedField<RecipeCategory>[],
-      tags: tags.items as unknown as NoUndefinedField<RecipeTag>[],
-      foods: foods.foods,
-      tools: tools.items as unknown as NoUndefinedField<RecipeTool>[],
-
-      sortable,
-      toggleOrderDirection,
-      hideKeyboard,
-      input,
-
-      selectedCategories,
-      selectedFoods,
-      selectedTags,
-      selectedTools,
-      appendRecipes,
-      assignSorted,
-      recipes,
-      removeRecipe,
-      replaceRecipes,
-      passedQuery,
+      groupSlug,
     };
   },
 });
 </script>
-
-<style lang="css">
-.search-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.search-container {
-  display: flex;
-  justify-content: center;
-}
-
-.search-box {
-  width: 950px;
-}
-
-.search-button-container {
-  margin: 3rem auto 0 auto;
-  max-width: 500px;
-}
-</style>

frontend/pages/user/profile/index.vue

@@ -16,18 +16,29 @@
             </v-icon>
             {{ $t('profile.get-invite-link') }}
           </v-btn>
+          <v-btn
+            v-if="group && group.preferences && !group.preferences.privateGroup"
+            outlined
+            rounded
+            @click="getPublicLink()"
+          >
+            <v-icon left>
+              {{ $globals.icons.shareVariant }}
+            </v-icon>
+            {{ $t('profile.get-public-link') }}
+          </v-btn>
         </v-card-actions>
-        <div v-show="generatedLink !== ''">
+        <div v-show="generatedSignupLink !== ''">
           <v-card-text>
             <p class="text-center pb-0">
-              {{ generatedLink }}
+              {{ generatedSignupLink }}
             </p>
             <v-text-field v-model="sendTo" :label="$t('user.email')" :rules="[validators.email]"> </v-text-field>
           </v-card-text>
           <v-card-actions class="py-0 align-center" style="gap: 4px">
-            <BaseButton cancel @click="generatedLink = ''"> {{ $t("general.close") }} </BaseButton>
+            <BaseButton cancel @click="generatedSignupLink = ''"> {{ $t("general.close") }} </BaseButton>
             <v-spacer></v-spacer>
-            <AppButtonCopy :icon="false" color="info" :copy-text="generatedLink" />
+            <AppButtonCopy :icon="false" color="info" :copy-text="generatedSignupLink" />
             <BaseButton color="info" :disabled="!validEmail" :loading="loading" @click="sendInvite">
               <template #icon>
                 {{ $globals.icons.email }}
@@ -36,6 +47,18 @@
             </BaseButton>
           </v-card-actions>
         </div>
+        <div v-show="showPublicLink">
+          <v-card-text>
+            <p class="text-center pb-0">
+              {{ publicLink }}
+            </p>
+          </v-card-text>
+          <v-card-actions class="py-0 align-center" style="gap: 4px">
+            <BaseButton cancel @click="showPublicLink = false"> {{ $t("general.close") }} </BaseButton>
+            <v-spacer></v-spacer>
+            <AppButtonCopy :icon="false" color="info" :copy-text="publicLink" />
+          </v-card-actions>
+        </div>
       </v-card>
     </section>
     <section class="my-3">
@@ -196,6 +219,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync } from "@nuxtjs/composition-api";
+import { invoke, until } from "@vueuse/core";
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
@@ -203,6 +227,7 @@ import { alert } from "~/composables/use-toast";
 import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
 import { useAsyncKey } from "~/composables/use-utils";
 import StatsCards from "~/components/global/StatsCards.vue";
+import { GroupInDB, UserOut } from "~/lib/api/types/user";
 
 export default defineComponent({
   name: "UserProfile",
@@ -215,16 +240,41 @@ export default defineComponent({
   setup() {
     const { $auth, i18n } = useContext();
 
-    const user = computed(() => $auth.user);
+    // @ts-ignore $auth.user is typed as unknown, but it's a user
+    const user = computed<UserOut | null>(() => $auth.user);
+    const group = ref<GroupInDB | null>(null);
 
-    const generatedLink = ref("");
+    const showPublicLink = ref(false);
+    const publicLink = ref("");
+
+    const generatedSignupLink = ref("");
     const token = ref("");
     const api = useUserApi();
+
+    invoke(async () => {
+      await until(user.value).not.toBeNull();
+      if (!user.value) {
+        return;
+      }
+
+      const { data } = await api.groups.getOne(user.value.groupId);
+      group.value = data;
+    });
+
+    function getPublicLink() {
+      if (group.value) {
+        publicLink.value = `${window.location.origin}/explore/recipes/${group.value.slug}`
+        showPublicLink.value = true;
+        generatedSignupLink.value = "";
+      }
+    }
+
     async function getSignupLink() {
       const { data } = await api.groups.createInvitation({ uses: 1 });
       if (data) {
         token.value = data.token;
-        generatedLink.value = constructLink(data.token);
+        generatedSignupLink.value = constructLink(data.token);
+        showPublicLink.value = false;
       }
     }
 
@@ -341,11 +391,15 @@ export default defineComponent({
       getStatsTitle,
       getStatsIcon,
       getStatsTo,
+      group,
       stats,
       user,
       constructLink,
-      generatedLink,
+      generatedSignupLink,
+      showPublicLink,
+      publicLink,
       getSignupLink,
+      getPublicLink,
       sendInvite,
       validators,
       validEmail,