Implement user favorites feature for recipes
- Add UserFavorites MongoDB model with ObjectId references - Create authenticated API endpoints for favorites management - Add Heart icon and FavoriteButton components with toggle functionality - Display favorite button below recipe tags for logged-in users - Add Favoriten navigation link (visible only when authenticated) - Create favorites page with grid layout and search functionality - Store favorites by MongoDB ObjectId for data integrity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,9 @@ if(data.session){
|
||||
<Header>
|
||||
<ul class=site_header slot=links>
|
||||
<li><a href="/rezepte">Alle Rezepte</a></li>
|
||||
{#if user}
|
||||
<li><a href="/rezepte/favorites">Favoriten</a></li>
|
||||
{/if}
|
||||
<li><a href="/rezepte/season">In Saison</a></li>
|
||||
<li><a href="/rezepte/category">Kategorie</a></li>
|
||||
<li><a href="/rezepte/icon">Icon</a></li>
|
||||
|
@@ -12,6 +12,7 @@
|
||||
import {season} from '$lib/js/season_store';
|
||||
import RecipeNote from '$lib/components/RecipeNote.svelte';
|
||||
import {stripHtmlTags} from '$lib/js/stripHtmlTags';
|
||||
import FavoriteButton from '$lib/components/FavoriteButton.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -308,6 +309,15 @@ h4{
|
||||
<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="tags center">
|
||||
<FavoriteButton
|
||||
recipeId={data.short_name}
|
||||
isFavorite={data.isFavorite || false}
|
||||
isLoggedIn={!!data.session?.user}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if data.note}
|
||||
<RecipeNote note={data.note}></RecipeNote>
|
||||
{/if}
|
||||
|
@@ -6,5 +6,21 @@ export async function load({ fetch, params}) {
|
||||
if(!res.ok){
|
||||
throw error(res.status, item.message)
|
||||
}
|
||||
return item;
|
||||
|
||||
// Check if this recipe is favorited by the user
|
||||
let isFavorite = false;
|
||||
try {
|
||||
const favRes = await fetch(`/api/rezepte/favorites/check/${params.name}`);
|
||||
if (favRes.ok) {
|
||||
const favData = await favRes.json();
|
||||
isFavorite = favData.isFavorite;
|
||||
}
|
||||
} catch (e) {
|
||||
// Silently fail if not authenticated or other error
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
isFavorite
|
||||
};
|
||||
}
|
||||
|
32
src/routes/rezepte/favorites/+page.server.ts
Normal file
32
src/routes/rezepte/favorites/+page.server.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { PageServerLoad } from "./$types";
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
if (!session?.user?.nickname) {
|
||||
throw redirect(302, '/rezepte');
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/rezepte/favorites/recipes');
|
||||
if (!res.ok) {
|
||||
return {
|
||||
favorites: [],
|
||||
error: 'Failed to load favorites'
|
||||
};
|
||||
}
|
||||
|
||||
const favorites = await res.json();
|
||||
|
||||
return {
|
||||
favorites,
|
||||
session
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
favorites: [],
|
||||
error: 'Failed to load favorites'
|
||||
};
|
||||
}
|
||||
};
|
58
src/routes/rezepte/favorites/+page.svelte
Normal file
58
src/routes/rezepte/favorites/+page.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import '$lib/css/nordtheme.css';
|
||||
import Recipes from '$lib/components/Recipes.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
export let data: PageData;
|
||||
export let current_month = new Date().getMonth() + 1;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.subheading{
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.empty-state{
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
color: var(--nord3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Meine Favoriten - Bocken Rezepte</title>
|
||||
<meta name="description" content="Meine favorisierten Rezepte aus der Bockenschen Küche." />
|
||||
</svelte:head>
|
||||
|
||||
<h1>Favoriten</h1>
|
||||
<p class=subheading>
|
||||
{#if data.favorites.length > 0}
|
||||
{data.favorites.length} favorisierte Rezepte
|
||||
{:else}
|
||||
Noch keine Favoriten gespeichert
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
<Search></Search>
|
||||
|
||||
{#if data.error}
|
||||
<p class="empty-state">Fehler beim Laden der Favoriten: {data.error}</p>
|
||||
{:else if data.favorites.length > 0}
|
||||
<Recipes>
|
||||
{#each data.favorites as recipe}
|
||||
<Card {recipe} {current_month}></Card>
|
||||
{/each}
|
||||
</Recipes>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<p>Du hast noch keine Rezepte als Favoriten gespeichert.</p>
|
||||
<p>Besuche ein <a href="/rezepte">Rezept</a> und klicke auf das Herz-Symbol, um es zu deinen Favoriten hinzuzufügen.</p>
|
||||
</div>
|
||||
{/if}
|
Reference in New Issue
Block a user