userStory - optimisticUpdate

[avoesen]

Optimistic Updates für die toggleFavorite-Funktion: async function toggleIsFavorite(_id) { // Optimistisch die lokale Kopie der Benutzerdaten aktualisieren const updatedUser = { ...user, recipeInteractions: user.recipeInteractions.some((interaction) => interaction.recipe._id === _id) ? user.recipeInteractions.map((interaction) => interaction.recipe._id === _id ? { ...interaction, isFavorite: !interaction.isFavorite } : interaction ) : [...user.recipeInteractions, { isFavorite: true, recipe: { _id } }], };

// Optimistisches Update durchführen ohne die Daten sofort neu zu fetchen mutate(/api/users/${userId}, updatedUser, false);

try { const response = await fetch(/api/users/${user._id}, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(updatedUser), });

if (!response.ok) throw new Error('Fehler beim Aktualisieren des Benutzers');

// Nach erfolgreichem Update die Daten neu fetchen, um sicherzustellen, dass das UI aktuell ist
mutate(`/api/users/${userId}`);

} catch (error) { console.error('Fehler beim Toggle von isFavorite', error); // Im Fehlerfall den vorherigen Zustand wiederherstellen mutate(/api/users/${userId}); } }

-> soll Wartezeiten in der UI verhindern, währen die Datenbank geupdatet wird. Fürht im ersten Test zu Flackern, evtl. weil die getRecipeProperty-Funktion für einen Moment nicht auf das User-Objekt zugreifen kann.

Button zwischenzeitlich sperren: isMutating aus useSWR nehmen und wenn "true" toggle-Funktion sperren?