Implement progressive enhancement for favorites button
Some checks failed
CI / update (push) Failing after 6s
Some checks failed
CI / update (push) Failing after 6s
- Add server-side form handling for favorites without JavaScript - Create toggleFavorite server action that uses existing API endpoint - Update FavoriteButton component with form-based fallback - Maintain JavaScript enhancement for smoother UX when available - Use server-side fetch to reuse centralized favorites API logic 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,50 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
|
||||
export const actions = {
|
||||
toggleFavorite: async ({ request, locals, url, fetch }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
if (!session?.user?.nickname) {
|
||||
throw error(401, 'Authentication required');
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
const recipeId = formData.get('recipeId') as string;
|
||||
const isFavorite = formData.get('isFavorite') === 'true';
|
||||
|
||||
if (!recipeId) {
|
||||
throw error(400, 'Recipe ID required');
|
||||
}
|
||||
|
||||
try {
|
||||
// Use the existing API endpoint
|
||||
const method = isFavorite ? 'DELETE' : 'POST';
|
||||
const response = await fetch('/api/rezepte/favorites', {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ recipeId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
console.error('API error:', response.status, errorData);
|
||||
throw error(response.status, `Failed to toggle favorite: ${errorData}`);
|
||||
}
|
||||
|
||||
// Redirect back to the same page to refresh the state
|
||||
throw redirect(303, url.pathname);
|
||||
} catch (e) {
|
||||
// If it's a redirect, let it through
|
||||
if (e && typeof e === 'object' && 'status' in e && e.status === 303) {
|
||||
throw e;
|
||||
}
|
||||
console.error('Favorite toggle error:', e);
|
||||
throw error(500, 'Failed to toggle favorite');
|
||||
}
|
||||
},
|
||||
|
||||
swapYeast: async ({ request, url }) => {
|
||||
const formData = await request.formData();
|
||||
const yeastId = parseInt(formData.get('yeastId') as string);
|
||||
|
Reference in New Issue
Block a user