Michael Genson 2c5e5a8421
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>
2023-09-14 06:01:24 -08:00

43 lines
1.1 KiB
Vue

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