yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix coin not loading data when already on coin page

Browse source
This commit is contained in:
Face 2025-06-08 22:37:58 +03:00
parent 7829be19f1
commit e82866f39b
1 changed files with 12 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

29
website/src/routes/coin/[coinSymbol]/+page.svelte
View file

@ -26,7 +26,6 @@
import { getPublicUrl, getTimeframeInSeconds } from '$lib/utils.js'; import { getPublicUrl, getTimeframeInSeconds } from '$lib/utils.js';
import { websocketController, type PriceUpdate, isConnectedStore } from '$lib/stores/websocket'; import { websocketController, type PriceUpdate, isConnectedStore } from '$lib/stores/websocket';
import SEO from '$lib/components/self/SEO.svelte'; import SEO from '$lib/components/self/SEO.svelte';
import { page } from '$app/state';
const { data } = $props(); const { data } = $props();
let coinSymbol = $derived(data.coinSymbol); let coinSymbol = $derived(data.coinSymbol);
@ -40,6 +39,8 @@
let selectedTimeframe = $state('1m'); let selectedTimeframe = $state('1m');
let lastPriceUpdateTime = 0; let lastPriceUpdateTime = 0;
let previousCoinSymbol = $state<string | null>(null);
const timeframeOptions = [ const timeframeOptions = [
{ value: '1m', label: '1 minute' }, { value: '1m', label: '1 minute' },
{ value: '5m', label: '5 minutes' }, { value: '5m', label: '5 minutes' },
@ -54,40 +55,34 @@
await loadUserHolding(); await loadUserHolding();
websocketController.setCoin(coinSymbol.toUpperCase()); websocketController.setCoin(coinSymbol.toUpperCase());
websocketController.subscribeToPriceUpdates(coinSymbol.toUpperCase(), handlePriceUpdate); websocketController.subscribeToPriceUpdates(coinSymbol.toUpperCase(), handlePriceUpdate);
previousCoinSymbol = coinSymbol;
}); });
$effect(() => { $effect(() => {
return () => { return () => {
websocketController.unsubscribeFromPriceUpdates(coinSymbol.toUpperCase()); if (previousCoinSymbol) {
websocketController.unsubscribeFromPriceUpdates(previousCoinSymbol.toUpperCase());
}
}; };
}); });
// Handle route changes to update coin data
$effect(() => { $effect(() => {
const currentCoinSymbol = page.params.coinSymbol; if (coinSymbol && previousCoinSymbol && coinSymbol !== previousCoinSymbol) {
if (currentCoinSymbol && currentCoinSymbol !== coinSymbol) {
loading = true; loading = true;
coin = null; coin = null;
chartData = []; chartData = [];
volumeData = []; volumeData = [];
userHolding = 0; userHolding = 0;
// Unsubscribe from the old coin's updates websocketController.unsubscribeFromPriceUpdates(previousCoinSymbol.toUpperCase());
websocketController.unsubscribeFromPriceUpdates(coinSymbol.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(() => { loadCoinData().then(() => {
loadUserHolding(); loadUserHolding();
websocketController.setCoin(currentCoinSymbol.toUpperCase()); websocketController.setCoin(coinSymbol.toUpperCase());
websocketController.subscribeToPriceUpdates( websocketController.subscribeToPriceUpdates(coinSymbol.toUpperCase(), handlePriceUpdate);
currentCoinSymbol.toUpperCase(), previousCoinSymbol = coinSymbol;
handlePriceUpdate
);
}); });
} }
}); });