fix: portfolio showing "failed" during load
This commit is contained in:
parent
c1bab8ac4a
commit
ccbc0aeaf0
1 changed files with 16 additions and 6 deletions
|
|
@ -17,9 +17,11 @@
|
||||||
let portfolioData = $state<any>(null);
|
let portfolioData = $state<any>(null);
|
||||||
let transactions = $state<any[]>([]);
|
let transactions = $state<any[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
|
let error = $state<string | null>(null);
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
|
await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
|
||||||
|
loading = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
async function fetchPortfolioData() {
|
async function fetchPortfolioData() {
|
||||||
|
|
@ -27,11 +29,14 @@
|
||||||
const response = await fetch('/api/portfolio/total');
|
const response = await fetch('/api/portfolio/total');
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
portfolioData = await response.json();
|
portfolioData = await response.json();
|
||||||
|
error = null;
|
||||||
} else {
|
} else {
|
||||||
|
error = 'Failed to load portfolio data';
|
||||||
toast.error('Failed to load portfolio data');
|
toast.error('Failed to load portfolio data');
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Failed to fetch portfolio data:', e);
|
console.error('Failed to fetch portfolio data:', e);
|
||||||
|
error = 'Failed to load portfolio data';
|
||||||
toast.error('Failed to load portfolio data');
|
toast.error('Failed to load portfolio data');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -48,11 +53,16 @@
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Failed to fetch transactions:', e);
|
console.error('Failed to fetch transactions:', e);
|
||||||
toast.error('Failed to load transactions');
|
toast.error('Failed to load transactions');
|
||||||
} finally {
|
|
||||||
loading = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function retryFetch() {
|
||||||
|
loading = true;
|
||||||
|
error = null;
|
||||||
|
await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
|
||||||
let totalPortfolioValue = $derived(portfolioData ? portfolioData.totalValue : 0);
|
let totalPortfolioValue = $derived(portfolioData ? portfolioData.totalValue : 0);
|
||||||
let hasHoldings = $derived(portfolioData && portfolioData.coinHoldings.length > 0);
|
let hasHoldings = $derived(portfolioData && portfolioData.coinHoldings.length > 0);
|
||||||
let hasTransactions = $derived(transactions.length > 0);
|
let hasTransactions = $derived(transactions.length > 0);
|
||||||
|
|
@ -179,11 +189,11 @@
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<PortfolioSkeleton />
|
<PortfolioSkeleton />
|
||||||
{:else if !portfolioData}
|
{:else if error}
|
||||||
<div class="flex h-96 items-center justify-center">
|
<div class="flex h-96 items-center justify-center">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<div class="text-muted-foreground mb-4 text-xl">Failed to load portfolio</div>
|
<div class="text-muted-foreground mb-4 text-xl">{error}</div>
|
||||||
<Button onclick={fetchPortfolioData}>Try Again</Button>
|
<Button onclick={retryFetch}>Try Again</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
||||||
Reference in a new issue