fix: prevent infinite effect loop in recipe translation workflow
All checks were successful
CI / update (push) Successful in 1m14s
All checks were successful
CI / update (push) Successful in 1m14s
Convert recipe data functions to $derived reactive variables to prevent infinite $effect loops. Previously, calling functions inline in component props created new objects on every reactive check, causing the TranslationApproval component's syncBaseRecipeReferences $effect to run continuously, resulting in the translation workflow hanging.
This commit is contained in:
@@ -85,24 +85,22 @@
|
||||
return season;
|
||||
}
|
||||
|
||||
// Prepare German recipe data
|
||||
function getGermanRecipeData() {
|
||||
return {
|
||||
...card_data,
|
||||
...add_info,
|
||||
images: uploaded_image_filename ? [{ mediapath: uploaded_image_filename, alt: "", caption: "" }] : [],
|
||||
season: season_local,
|
||||
short_name: short_name.trim(),
|
||||
portions: portions_local,
|
||||
datecreated: new Date(),
|
||||
datemodified: new Date(),
|
||||
instructions,
|
||||
ingredients,
|
||||
preamble,
|
||||
addendum,
|
||||
isBaseRecipe,
|
||||
};
|
||||
}
|
||||
// Prepare German recipe data - use $derived to prevent infinite effect loops
|
||||
let germanRecipeData = $derived({
|
||||
...card_data,
|
||||
...add_info,
|
||||
images: uploaded_image_filename ? [{ mediapath: uploaded_image_filename, alt: "", caption: "" }] : [],
|
||||
season: season_local,
|
||||
short_name: short_name.trim(),
|
||||
portions: portions_local,
|
||||
datecreated: new Date(),
|
||||
datemodified: new Date(),
|
||||
instructions,
|
||||
ingredients,
|
||||
preamble,
|
||||
addendum,
|
||||
isBaseRecipe,
|
||||
});
|
||||
|
||||
// Show translation workflow before submission
|
||||
function prepareSubmit() {
|
||||
@@ -385,7 +383,7 @@ button.action_button {
|
||||
{#if showTranslationWorkflow}
|
||||
<div id="translation-section">
|
||||
<TranslationApproval
|
||||
germanData={getGermanRecipeData()}
|
||||
germanData={germanRecipeData}
|
||||
onapproved={handleTranslationApproved}
|
||||
onskipped={handleTranslationSkipped}
|
||||
oncancelled={handleTranslationCancelled}
|
||||
|
||||
@@ -103,8 +103,8 @@
|
||||
return season;
|
||||
}
|
||||
|
||||
// Get current German recipe data
|
||||
function getCurrentRecipeData() {
|
||||
// Get current German recipe data - use $derived to prevent infinite effect loops
|
||||
let currentRecipeData = $derived.by(() => {
|
||||
// Ensure we always have a valid images array with at least one item
|
||||
let recipeImages;
|
||||
if (uploaded_image_filename) {
|
||||
@@ -142,11 +142,11 @@
|
||||
note,
|
||||
isBaseRecipe,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Detect which fields have changed from the original
|
||||
function detectChangedFields(): string[] {
|
||||
const current = getCurrentRecipeData();
|
||||
const current = currentRecipeData;
|
||||
const changed: string[] = [];
|
||||
|
||||
const fieldsToCheck = [
|
||||
@@ -486,7 +486,7 @@
|
||||
{#if showTranslationWorkflow}
|
||||
<div id="translation-section">
|
||||
<TranslationApproval
|
||||
germanData={getCurrentRecipeData()}
|
||||
germanData={currentRecipeData}
|
||||
englishData={translationData}
|
||||
changedFields={changedFields}
|
||||
isEditMode={true}
|
||||
|
||||
Reference in New Issue
Block a user