From 8dcf26b1d3158baedab272e010bddb51f61b1422 Mon Sep 17 00:00:00 2001
From: rasmusq <rasmus.qku@gmail.com>
Date: Thu, 27 Nov 2025 21:21:23 +0100
Subject: [PATCH] update: use better effect pattern for sorted wishlist in edit
 page

---
 src/routes/wishlist/[token]/edit/+page.svelte | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/routes/wishlist/[token]/edit/+page.svelte b/src/routes/wishlist/[token]/edit/+page.svelte
index ad12704..586bfd6 100644
--- a/src/routes/wishlist/[token]/edit/+page.svelte
+++ b/src/routes/wishlist/[token]/edit/+page.svelte
@@ -23,22 +23,24 @@
 	let editFormElement = $state<HTMLElement | null>(null);
 	let searchQuery = $state("");
 
-	let sortedItems = $state<Item[]>([]);
+	let items = $state<Item[]>([]);
+
+	$effect.pre(() => {
+		const sorted = [...data.wishlist.items].sort(
+			(a, b) => Number(a.order) - Number(b.order),
+		);
+		items = sorted;
+	});
+
 	let filteredItems = $derived(
 		searchQuery.trim()
-			? sortedItems.filter(item =>
+			? items.filter(item =>
 				item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
 				item.description?.toLowerCase().includes(searchQuery.toLowerCase())
 			)
-			: sortedItems
+			: items
 	);
 
-	$effect(() => {
-		sortedItems = [...data.wishlist.items].sort(
-			(a, b) => Number(a.order) - Number(b.order),
-		);
-	});
-
 	function handleItemAdded() {
 		showAddForm = false;
 	}
@@ -59,7 +61,7 @@
 	}
 
 	function handleColorChange(itemId: string, newColor: string) {
-		sortedItems = sortedItems.map((item) =>
+		items = items.map((item) =>
 			item.id === itemId ? { ...item, color: newColor } : item,
 		);
 	}
@@ -91,17 +93,16 @@
 	async function handlePositionChange(newPosition: number) {
 		if (!editingItem) return;
 
-		const currentIndex = sortedItems.findIndex(item => item.id === editingItem.id);
+		const currentIndex = items.findIndex(item => item.id === editingItem.id);
 		if (currentIndex === -1) return;
 
 		const newIndex = newPosition - 1; // Convert to 0-based index
 
-		// Reorder the array
-		const newItems = [...sortedItems];
+		const newItems = [...items];
 		const [movedItem] = newItems.splice(currentIndex, 1);
 		newItems.splice(newIndex, 0, movedItem);
 
-		sortedItems = newItems;
+		items = newItems;
 		await handleReorder(newItems);
 	}
 </script>
@@ -150,14 +151,14 @@
 				onSuccess={handleItemUpdated}
 				onCancel={cancelEditing}
 				onColorChange={handleColorChange}
-				currentPosition={sortedItems.findIndex(item => item.id === editingItem.id) + 1}
-				totalItems={sortedItems.length}
+				currentPosition={items.findIndex(item => item.id === editingItem.id) + 1}
+				totalItems={items.length}
 				onPositionChange={handlePositionChange}
 			/>
 		</div>
 	{/if}
 
-	{#if sortedItems.length > 5}
+	{#if items.length > 5}
 		<SearchBar bind:value={searchQuery} />
 	{/if}