Fix stuck segments tab; add /segments/ dev fallback

AthleteView: use segmentsFetched flag to prevent infinite fetch loop when
there are no efforts (segmentSummary.length === 0 was re-triggering the
reactive statement after every empty response). Also improve empty state
message and reset flag after rescan so the table reloads.

astro.config.mjs: extend shell fallback plugin to cover /segments/{id}/
the same way /activity/{id}/ is handled, so segment detail pages work in
the dev server without nginx.
This commit is contained in:
Davide Scaini
2026-05-13 08:35:00 +02:00
parent b8fd4e4ded
commit 59cf99f0af
2 changed files with 16 additions and 9 deletions
+10 -5
View File
@@ -9,15 +9,20 @@ const env = loadEnv(process.env.NODE_ENV ?? 'development', process.cwd(), '');
const apiPort = process.env.VITE_API_PORT || '4041'; const apiPort = process.env.VITE_API_PORT || '4041';
const serveTarget = env.PUBLIC_EDIT_URL || `http://localhost:${apiPort}`; const serveTarget = env.PUBLIC_EDIT_URL || `http://localhost:${apiPort}`;
// In production, nginx serves activity/index.html for all /activity/<id>/ URLs // In production, nginx serves the shell for dynamic sub-paths via try_files.
// via try_files. In dev (Astro dev server), no nginx — this plugin replicates it. // In dev (Astro dev server), no nginx — this plugin replicates those rules.
const activityFallbackPlugin = { const shellFallbackPlugin = {
name: 'activity-shell-fallback', name: 'shell-fallback',
configureServer(server) { configureServer(server) {
server.middlewares.use((req, _res, next) => { server.middlewares.use((req, _res, next) => {
if (req.url && /^\/activity\/[^/]+\/?(\?|$)/.test(req.url)) { if (req.url && /^\/activity\/[^/]+\/?(\?|$)/.test(req.url)) {
req.url = '/activity/'; req.url = '/activity/';
} }
// /segments/{id}/ → /segments/ (but not /segments/new/ which has its own page)
const segMatch = req.url?.match(/^\/segments\/([^/?]+)\//);
if (segMatch && segMatch[1] !== 'new') {
req.url = '/segments/';
}
next(); next();
}); });
}, },
@@ -30,7 +35,7 @@ export default defineConfig({
// When hosting at a subdirectory (e.g. GitHub Pages project site), set: // When hosting at a subdirectory (e.g. GitHub Pages project site), set:
// base: "/repo-name", // base: "/repo-name",
vite: { vite: {
plugins: [activityFallbackPlugin], plugins: [shellFallbackPlugin],
optimizeDeps: { optimizeDeps: {
include: ['maplibre-gl'], include: ['maplibre-gl'],
esbuildOptions: { target: 'es2022' }, esbuildOptions: { target: 'es2022' },
+6 -4
View File
@@ -32,6 +32,7 @@
} }
let segmentSummary: SegmentSummaryItem[] = []; let segmentSummary: SegmentSummaryItem[] = [];
let segmentsLoading = false; let segmentsLoading = false;
let segmentsFetched = false;
let segmentsHandle = ''; let segmentsHandle = '';
let rescanning = false; let rescanning = false;
let rescanMsg: string | null = null; let rescanMsg: string | null = null;
@@ -46,8 +47,9 @@
history.replaceState(null, '', qs ? `?${qs}` : window.location.pathname); history.replaceState(null, '', qs ? `?${qs}` : window.location.pathname);
} }
$: if (activeTab === 'segments' && segmentsHandle && segmentSummary.length === 0 && !segmentsLoading) { $: if (activeTab === 'segments' && segmentsHandle && !segmentsFetched && !segmentsLoading) {
segmentsLoading = true; segmentsLoading = true;
segmentsFetched = true;
fetch(`/api/users/${segmentsHandle}/segment_summary`) fetch(`/api/users/${segmentsHandle}/segment_summary`)
.then(r => r.ok ? r.json() : []) .then(r => r.ok ? r.json() : [])
.then(d => { segmentSummary = d; }) .then(d => { segmentSummary = d; })
@@ -191,8 +193,8 @@
const d = await r.json(); const d = await r.json();
if (r.ok) { if (r.ok) {
rescanMsg = `Found ${d.efforts_found} effort${d.efforts_found !== 1 ? 's' : ''}.`; rescanMsg = `Found ${d.efforts_found} effort${d.efforts_found !== 1 ? 's' : ''}.`;
// Refresh the summary
segmentSummary = []; segmentSummary = [];
segmentsFetched = false;
} else rescanMsg = d.detail ?? 'Rescan failed.'; } else rescanMsg = d.detail ?? 'Rescan failed.';
} catch { rescanMsg = 'Could not reach server.'; } } catch { rescanMsg = 'Could not reach server.'; }
rescanning = false; rescanning = false;
@@ -203,9 +205,9 @@
</div> </div>
</div> </div>
{#if segmentsLoading} {#if segmentsLoading}
<p class="text-zinc-500 text-sm">Loading segments</p> <p class="text-zinc-500 text-sm">Loading…</p>
{:else if segmentSummary.length === 0} {:else if segmentSummary.length === 0}
<p class="text-zinc-500 text-sm">No segment efforts yet.</p> <p class="text-zinc-500 text-sm">No segment efforts yet. Use "Rescan all activities" to detect efforts from existing activities.</p>
{:else} {:else}
<div class="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden"> <div class="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
<table class="w-full text-sm"> <table class="w-full text-sm">