From e82866f39bcd39f015ce075b303f7b8d43817ec3 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sun, 8 Jun 2025 22:37:58 +0300
Subject: [PATCH] fix coin not loading data when already on coin page

---
 .../src/routes/coin/[coinSymbol]/+page.svelte | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/website/src/routes/coin/[coinSymbol]/+page.svelte b/website/src/routes/coin/[coinSymbol]/+page.svelte
index 260f617..4ac75d8 100644
--- a/website/src/routes/coin/[coinSymbol]/+page.svelte
+++ b/website/src/routes/coin/[coinSymbol]/+page.svelte
@@ -26,7 +26,6 @@
 	import { getPublicUrl, getTimeframeInSeconds } from '$lib/utils.js';
 	import { websocketController, type PriceUpdate, isConnectedStore } from '$lib/stores/websocket';
 	import SEO from '$lib/components/self/SEO.svelte';
-	import { page } from '$app/state';
 
 	const { data } = $props();
 	let coinSymbol = $derived(data.coinSymbol);
@@ -40,6 +39,8 @@
 	let selectedTimeframe = $state('1m');
 	let lastPriceUpdateTime = 0;
 
+	let previousCoinSymbol = $state<string | null>(null);
+
 	const timeframeOptions = [
 		{ value: '1m', label: '1 minute' },
 		{ value: '5m', label: '5 minutes' },
@@ -54,40 +55,34 @@
 		await loadUserHolding();
 
 		websocketController.setCoin(coinSymbol.toUpperCase());
-
 		websocketController.subscribeToPriceUpdates(coinSymbol.toUpperCase(), handlePriceUpdate);
+
+		previousCoinSymbol = coinSymbol;
 	});
 
 	$effect(() => {
 		return () => {
-			websocketController.unsubscribeFromPriceUpdates(coinSymbol.toUpperCase());
+			if (previousCoinSymbol) {
+				websocketController.unsubscribeFromPriceUpdates(previousCoinSymbol.toUpperCase());
+			}
 		};
 	});
 
-	// Handle route changes to update coin data
 	$effect(() => {
-		const currentCoinSymbol = page.params.coinSymbol;
-		if (currentCoinSymbol && currentCoinSymbol !== coinSymbol) {
+		if (coinSymbol && previousCoinSymbol && coinSymbol !== previousCoinSymbol) {
 			loading = true;
 			coin = null;
 			chartData = [];
 			volumeData = [];
 			userHolding = 0;
 
-			// Unsubscribe from the old coin's updates
-			websocketController.unsubscribeFromPriceUpdates(coinSymbol.toUpperCase());
+			websocketController.unsubscribeFromPriceUpdates(previousCoinSymbol.toUpperCase());
 
-			// Update the data prop which will trigger coinSymbol to update via $derived
-			data.coinSymbol = currentCoinSymbol;
-
-			// Load new coin data and set up new subscriptions
 			loadCoinData().then(() => {
 				loadUserHolding();
-				websocketController.setCoin(currentCoinSymbol.toUpperCase());
-				websocketController.subscribeToPriceUpdates(
-					currentCoinSymbol.toUpperCase(),
-					handlePriceUpdate
-				);
+				websocketController.setCoin(coinSymbol.toUpperCase());
+				websocketController.subscribeToPriceUpdates(coinSymbol.toUpperCase(), handlePriceUpdate);
+				previousCoinSymbol = coinSymbol;
 			});
 		}
 	});