better approach

Author: thomasballinger

src/routes/inputs/Inputs.svelte

@@ -1,87 +1,58 @@
 <script lang="ts">
-import { useQuery, useConvexClient } from '$lib/client.svelte.js';
-import type { Doc } from '../../convex/_generated/dataModel.js';
-import { api } from '../../convex/_generated/api.js';
+import { useQuery, useConvexClient } from '$lib/client.svelte.js';
+import type { Doc } from '../../convex/_generated/dataModel.js';
+import { api } from '../../convex/_generated/api.js';
 
-const convex = useConvexClient();
-const serverNumbers = useQuery(api.numbers.get, {});
+const convex = useConvexClient();
+const serverNumbers = useQuery(api.numbers.get, {});
 
-let numbers = $state(serverNumbers.isLoading ? {} : { a: serverNumbers.a, b: serverNumbers.b, c: serverNumbers.c });
-let pendingMutations = $state(0);
-let lastMutationPromise: Promise<any> | null = $state(null);
-let hasUnsentChanges = $state(false); // Track if we have changes waiting in debounce
+let numbers = $state(null);
+// Have some changes not yet been sent?
+let hasUnsentChanges = $state(false);
+// Does delivered server state not yet reflect all local changes?
+let hasUnsavedChanges = $state(false);
+let mutationInFlight = $state(false);
 
-// Stay in sync with server data only when no mutations are pending and there are now changes waiting to be sent
-$effect(() => {
- if (!serverNumbers.isLoading && serverNumbers.data && 
-pendingMutations === 0 && !hasUnsentChanges) {
-console.log('Received data from server:', {
- a: serverNumbers.data.a,
- b: serverNumbers.data.b,
- c: serverNumbers.data.c,
-});
-numbers.a = serverNumbers.data.a;
-numbers.b = serverNumbers.data.b;
-numbers.c = serverNumbers.data.c;
- }
-});
+// Initialize local state when server data first arrives
+$effect(() => {
+ if (!serverNumbers.isLoading && serverNumbers.data && !numbers) {
+ numbers = { ...serverNumbers.data };
+ }
+});
 
-// Queue updates and track pending mutations
-async function queueMutation() {
- if (serverNumbers.isLoading) return;
+// Update local state with server data
+$effect(() => {
+ if (!hasUnsavedChanges && !serverNumbers.isLoading && serverNumbers.data) {
+ numbers = { ...serverNumbers.data };
+ }
+});
 
- pendingMutations++;
- hasUnsentChanges = false;
+async function publishChanges() {
+ hasUnsentChanges = true;
+ hasUnsavedChanges = true;
+ if (!numbers || mutationInFlight) return;
 
- console.log('Updating server with', numbers, pendingMutations, 'mutations pending');
- const currentMutation = convex.mutation(api.numbers.update, {
-a: numbers.a,
-b: numbers.b,
-c: numbers.c
- });
+ hasUnsentChanges = false;
+ mutationInFlight = true
+ await convex.mutation(api.numbers.update, numbers);
+ mutationInFlight = false
 
- lastMutationPromise = currentMutation;
+ if (hasUnsentChanges) {
+publishChanges();
+ } else {
+hasUnsavedChanges = false;
+ }
+}
 
- try {
-await currentMutation;
-console.log('saved to server');
- } finally {
-pendingMutations--;
-
-// If this was the last mutation in the queue,
-// explicitly sync with server state
-if (pendingMutations === 0 && !hasUnsentChanges && 
- serverNumbers.data && currentMutation === lastMutationPromise) {
- console.log('finished persisting state to server, back to following useQuery');
- numbers.a = serverNumbers.data.a;
- numbers.b = serverNumbers.data.b;
- numbers.c = serverNumbers.data.c;
-}
- }
-}
+function handleNumericInput(prop, e) {
+ numbers[prop] = e.currentTarget.valueAsNumber
+ publishChanges();
+};
 
-// Track changes immediately but debounce the actual mutation
-let updateTimeout: number | undefined;
-$effect(() => {
- if (serverNumbers.isLoading) return;
-
- // reference values so this is reactive on them
- const currentValues = {
-a: numbers.a,
-b: numbers.b,
-c: numbers.c
- };
- hasUnsentChanges = true;
- 
- clearTimeout(updateTimeout);
- updateTimeout = setTimeout(queueMutation, 500) as unknown as number;
-
- return () => clearTimeout(updateTimeout);
-});
 </script>
 
 <div class="numbers">
- {#if serverNumbers.isLoading}
+ {#if serverNumbers.isLoading || !numbers}
  <div>
  <p>Loading values...</p>
  </div>
@@ -91,7 +62,8 @@
  <input 
  id="a"
  type="number"
- bind:value={numbers.a}
+oninput={(e) => handleNumericInput('a', e)}
+value={numbers.a}
  />
  </div>
 
@@ -100,7 +72,8 @@
  <input 
  id="b"
  type="number"
- bind:value={numbers.b}
+oninput={(e) => handleNumericInput('b', e)}
+value={numbers.b}
  />
  </div>
 
@@ -109,7 +82,8 @@
  <input 
  id="c"
  type="number"
- bind:value={numbers.c}
+oninput={(e) => handleNumericInput('c', e)}
+value={numbers.c}
  />
  </div>