fix: use dynamic recipeLang in API calls instead of hardcoded /api/rezepte
All checks were successful
CI / update (push) Successful in 4m3s
All checks were successful
CI / update (push) Successful in 4m3s
Client-side navigation to /recipes hung because getUserFavorites and other endpoints were hardcoded to /api/rezepte, causing fetch mismatches during SvelteKit's client-side routing.
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "homepage",
|
"name": "homepage",
|
||||||
"version": "1.4.2",
|
"version": "1.4.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
|
let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
|
||||||
|
|
||||||
|
const recipeLang = $derived($page.url.pathname.split('/')[1] || 'rezepte');
|
||||||
|
|
||||||
let isLoading = $state(false);
|
let isLoading = $state(false);
|
||||||
|
|
||||||
async function toggleFavorite(event: Event) {
|
async function toggleFavorite(event: Event) {
|
||||||
@@ -17,7 +20,7 @@
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const method = isFavorite ? 'DELETE' : 'POST';
|
const method = isFavorite ? 'DELETE' : 'POST';
|
||||||
const response = await fetch('/api/rezepte/favorites', {
|
const response = await fetch(`/api/${recipeLang}/favorites`, {
|
||||||
method,
|
method,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
|
|||||||
@@ -284,7 +284,7 @@
|
|||||||
const apiBase = `/api/${isEnglish ? 'recipes' : 'rezepte'}`;
|
const apiBase = `/api/${isEnglish ? 'recipes' : 'rezepte'}`;
|
||||||
const [tagsRes, iconsRes] = await Promise.all([
|
const [tagsRes, iconsRes] = await Promise.all([
|
||||||
fetch(`${apiBase}/items/tag`),
|
fetch(`${apiBase}/items/tag`),
|
||||||
fetch('/api/rezepte/items/icon')
|
fetch(`${apiBase}/items/icon`)
|
||||||
]);
|
]);
|
||||||
availableTags = await tagsRes.json();
|
availableTags = await tagsRes.json();
|
||||||
availableIcons = await iconsRes.json();
|
availableIcons = await iconsRes.json();
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import type { Session } from '@auth/sveltekit';
|
|||||||
|
|
||||||
type BriefRecipeWithFavorite = BriefRecipeType & { isFavorite: boolean };
|
type BriefRecipeWithFavorite = BriefRecipeType & { isFavorite: boolean };
|
||||||
|
|
||||||
export async function getUserFavorites(fetch: typeof globalThis.fetch, locals: App.Locals): Promise<string[]> {
|
export async function getUserFavorites(fetch: typeof globalThis.fetch, locals: App.Locals, recipeLang = 'rezepte'): Promise<string[]> {
|
||||||
const session = await locals.auth();
|
const session = await locals.auth();
|
||||||
|
|
||||||
if (!session?.user?.nickname) {
|
if (!session?.user?.nickname) {
|
||||||
@@ -15,7 +15,7 @@ export async function getUserFavorites(fetch: typeof globalThis.fetch, locals: A
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const favRes = await fetch('/api/rezepte/favorites');
|
const favRes = await fetch(`/api/${recipeLang}/favorites`);
|
||||||
if (favRes.ok) {
|
if (favRes.ok) {
|
||||||
const favData = await favRes.json();
|
const favData = await favRes.json();
|
||||||
return favData.favorites || [];
|
return favData.favorites || [];
|
||||||
@@ -44,11 +44,12 @@ export function addFavoriteStatusToRecipes(recipes: BriefRecipeType[], userFavor
|
|||||||
export async function loadRecipesWithFavorites(
|
export async function loadRecipesWithFavorites(
|
||||||
fetch: typeof globalThis.fetch,
|
fetch: typeof globalThis.fetch,
|
||||||
locals: App.Locals,
|
locals: App.Locals,
|
||||||
recipeLoader: () => Promise<BriefRecipeType[]>
|
recipeLoader: () => Promise<BriefRecipeType[]>,
|
||||||
|
recipeLang = 'rezepte'
|
||||||
): Promise<{ recipes: BriefRecipeWithFavorite[], session: Session | null }> {
|
): Promise<{ recipes: BriefRecipeWithFavorite[], session: Session | null }> {
|
||||||
const [recipes, userFavorites, session] = await Promise.all([
|
const [recipes, userFavorites, session] = await Promise.all([
|
||||||
recipeLoader(),
|
recipeLoader(),
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
// Fetch all_brief, favorites, and session in parallel
|
// Fetch all_brief, favorites, and session in parallel
|
||||||
const [res_all_brief, userFavorites, session] = await Promise.all([
|
const [res_all_brief, userFavorites, session] = await Promise.all([
|
||||||
fetch(`${apiBase}/items/all_brief`).then(r => r.json()),
|
fetch(`${apiBase}/items/all_brief`).then(r => r.json()),
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ export const actions: Actions = {
|
|||||||
try {
|
try {
|
||||||
// Use the existing API endpoint
|
// Use the existing API endpoint
|
||||||
const method = isFavorite ? 'DELETE' : 'POST';
|
const method = isFavorite ? 'DELETE' : 'POST';
|
||||||
const response = await fetch('/api/rezepte/favorites', {
|
const response = await fetch(`/api/${url.pathname.split('/')[1]}/favorites`, {
|
||||||
method,
|
method,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export const load: PageLoad = async ({ fetch, params, url, data }) => {
|
|||||||
// Check if this recipe is favorited by the user
|
// Check if this recipe is favorited by the user
|
||||||
let isFavorite = false;
|
let isFavorite = false;
|
||||||
try {
|
try {
|
||||||
const favRes = await fetch(`/api/rezepte/favorites/check/${params.name}`);
|
const favRes = await fetch(`/api/${params.recipeLang}/favorites/check/${params.name}`);
|
||||||
if (favRes.ok) {
|
if (favRes.ok) {
|
||||||
const favData = await favRes.json();
|
const favData = await favRes.json();
|
||||||
isFavorite = favData.isFavorite;
|
isFavorite = favData.isFavorite;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
const [res, allRes, userFavorites, session] = await Promise.all([
|
const [res, allRes, userFavorites, session] = await Promise.all([
|
||||||
fetch(`${apiBase}/items/category/${params.category}`),
|
fetch(`${apiBase}/items/category/${params.category}`),
|
||||||
fetch(`${apiBase}/items/all_brief`),
|
fetch(`${apiBase}/items/all_brief`),
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { browser } from '$app/environment';
|
|||||||
import { isOffline, canUseOfflineData } from '$lib/offline/helpers';
|
import { isOffline, canUseOfflineData } from '$lib/offline/helpers';
|
||||||
import { getAllIcons, isOfflineDataAvailable } from '$lib/offline/db';
|
import { getAllIcons, isOfflineDataAvailable } from '$lib/offline/db';
|
||||||
|
|
||||||
export const load: PageLoad = async ({ fetch }) => {
|
export const load: PageLoad = async ({ fetch, params }) => {
|
||||||
// Check if we should use offline data
|
// Check if we should use offline data
|
||||||
if (browser && isOffline() && canUseOfflineData()) {
|
if (browser && isOffline() && canUseOfflineData()) {
|
||||||
try {
|
try {
|
||||||
@@ -19,7 +19,7 @@ export const load: PageLoad = async ({ fetch }) => {
|
|||||||
|
|
||||||
// Online mode - fetch from API
|
// Online mode - fetch from API
|
||||||
try {
|
try {
|
||||||
const res_icons = await fetch(`/api/rezepte/items/icon`);
|
const res_icons = await fetch(`/api/${params.recipeLang}/items/icon`);
|
||||||
const icons = await res_icons.json();
|
const icons = await res_icons.json();
|
||||||
return { icons, isOffline: false };
|
return { icons, isOffline: false };
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
@@ -6,8 +6,8 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
|
|
||||||
const [item_season, icons, userFavorites, session] = await Promise.all([
|
const [item_season, icons, userFavorites, session] = await Promise.all([
|
||||||
fetch(`${apiBase}/items/icon/` + params.icon).then(r => r.json()),
|
fetch(`${apiBase}/items/icon/` + params.icon).then(r => r.json()),
|
||||||
fetch(`/api/rezepte/items/icon`).then(r => r.json()),
|
fetch(`${apiBase}/items/icon`).then(r => r.json()),
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export const load: PageServerLoad = async ({ url, fetch, params, locals }) => {
|
|||||||
const [searchResponse, allRecipesResponse, userFavorites] = await Promise.all([
|
const [searchResponse, allRecipesResponse, userFavorites] = await Promise.all([
|
||||||
fetch(apiUrl.toString()),
|
fetch(apiUrl.toString()),
|
||||||
fetch(`${apiBase}/items/all_brief`),
|
fetch(`${apiBase}/items/all_brief`),
|
||||||
getUserFavorites(fetch, locals)
|
getUserFavorites(fetch, locals, params.recipeLang)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const results = await searchResponse.json();
|
const results = await searchResponse.json();
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
|
|
||||||
// Get user favorites and session
|
// Get user favorites and session
|
||||||
const [userFavorites, session] = await Promise.all([
|
const [userFavorites, session] = await Promise.all([
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
|
|
||||||
// Get user favorites and session
|
// Get user favorites and session
|
||||||
const [userFavorites, session] = await Promise.all([
|
const [userFavorites, session] = await Promise.all([
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
|
|||||||
const [res_tag, allRes, userFavorites, session] = await Promise.all([
|
const [res_tag, allRes, userFavorites, session] = await Promise.all([
|
||||||
fetch(`${apiBase}/items/tag/${params.tag}`),
|
fetch(`${apiBase}/items/tag/${params.tag}`),
|
||||||
fetch(`${apiBase}/items/all_brief`),
|
fetch(`${apiBase}/items/all_brief`),
|
||||||
getUserFavorites(fetch, locals),
|
getUserFavorites(fetch, locals, params.recipeLang),
|
||||||
locals.auth()
|
locals.auth()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user