Merge pull request #31 from dorianim/fix/binding-loop-regression

Fix: regression which caused binding loop in timer editor

web/src/routes/manage/[id]/edit/+page.svelte

@@ -18,17 +18,14 @@
 		if (browser && !localStorage.getItem('token')) goto('/manage/login');
 	}
 
-	const onSubmit = async (newTimerData: TimerUpdateRequest) => {
-		submitResult = updateTimer(
-			timerData.id,
-			newTimerData,
-			localStorage.getItem('token')!,
-			fetch
-		).then((timer: Timer) => {
-			timerData = timer;
-			goto(`/manage/${timerData.id}`);
-			return timer;
-		});
+	const onSubmit = async () => {
+		submitResult = updateTimer(timerData.id, timerData, localStorage.getItem('token')!, fetch).then(
+			(timer: Timer) => {
+				timerData = timer;
+				goto(`/manage/${timerData.id}`);
+				return timer;
+			}
+		);
 	};
 </script>
 
@@ -52,7 +49,7 @@
 				>
 			</aside>
 		{/if}
-		<TimerForm {timerData} {onSubmit} />
+		<TimerForm bind:timerData {onSubmit} />
 		<ImportExport bind:timerData {data} />
 	{:catch error}
 		<div class="alert variant-ghost-error">

web/src/routes/manage/[id]/edit/TimerForm.svelte

@@ -30,15 +30,11 @@
 	}
 
 	export let timerData: Timer;
-	export let onSubmit: (timerData: Timer) => void;
+	export let onSubmit: () => void;
 
 	let formData: TimerFormData;
 	let editingSegment: number | undefined = undefined;
 
-	const handleSubmit = () => {
-		onSubmit(formDataToTimerData(formData));
-	};
-
 	const timerDataToFormData = (timerData: Timer): TimerFormData => {
 		return {
 			start_at_date: new Date(timerData.start_at).toISOString().split('T')[0],
@@ -72,7 +68,16 @@
 		}
 	};
 
-	$: formData = timerDataToFormData(timerData);
+	const updateFormData = (timerData: Timer) => {
+		formData = timerDataToFormData(timerData);
+	};
+
+	const updateTimerData = (formData: TimerFormData) => {
+		timerData = formDataToTimerData(formData);
+	};
+
+	$: updateFormData(timerData);
+	$: updateTimerData(formData);
 
 	const precisionLabel = ['none', 'low', 'medium', 'high', 'very high'];
 </script>
@@ -267,7 +272,7 @@
 		current time on the timer <b class="text-[#E01B24]">WILL CHANGE</b> as soon as you save!
 	</p>
 
-	<button class="btn variant-filled-secondary" on:click={handleSubmit}>
+	<button class="btn variant-filled-secondary" on:click={onSubmit}>
 		<span><Fa icon={faSave} /></span><span>Save</span>
 	</button>
 </form>