// AdminApp.jsx — admin router shell. Hash routes to section components.
// Sections register themselves on window and are listed in ADMIN_SECTIONS below.
const { useState, useEffect } = React;
const ADMIN_SECTIONS = [
{ path: '', label: 'Events', component: 'EventsSection' },
{ path: 'posts', label: 'Field Notes', component: 'PostsSection' },
{ path: 'roster', label: 'Roster', component: 'RosterSection' },
{ path: 'features', label: 'Features', component: 'FeaturesSection' },
{ path: 'stats', label: 'Stats Import', component: 'StatsImportSection' },
{ path: 'scorecards', label: 'Scorecards', component: 'ScorecardImportSection' },
{ path: 'merch', label: 'Merch', component: 'MerchSection' },
];
const useRoute = () => {
const [route, setRoute] = useState(() => (location.hash.replace('#/', '').replace('#', '') || ''));
useEffect(() => {
const onHash = () => {
setRoute(location.hash.replace('#/', '').replace('#', '') || '');
window.scrollTo({ top: 0, behavior: 'instant' });
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
};
const AdminHeader = ({ route }) => {
const [email, setEmail] = useState('');
useEffect(() => {
// /whoami is a Pages Function; 404 locally and in non-Access deploys.
fetch('/whoami', { headers: { Accept: 'application/json' } })
.then(r => r.ok ? r.json() : null)
.then(data => { if (data && data.email) setEmail(data.email); })
.catch(() => {});
}, []);
return (
ADMIN
);
};
const AdminFooter = () => (
);
const AdminApp = () => {
const route = useRoute();
// Docs routes (e.g. #/docs/ADMIN_SETUP.md) still render via DocsPage when loaded.
let SectionComponent;
if (route.startsWith('docs/') && window.DocsPage) {
SectionComponent = window.DocsPage;
} else {
const match = ADMIN_SECTIONS.find(s => s.path === route) || ADMIN_SECTIONS[0];
SectionComponent = window[match.component];
}
const [banner, setBanner] = useState(null);
// Pull store credentials from /api/config on first mount. The Pages Function
// checks Cloudflare Access headers server-side, so this only succeeds for
// allowlisted users. Sets each store's URL+password and kicks off a refresh.
useEffect(() => {
let cancelled = false;
fetch('/api/config', { headers: { Accept: 'application/json' } })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`/api/config ${r.status}`)))
.then(cfg => {
if (cancelled || !cfg) return;
if (cfg.events && window.EventsStore && cfg.events.url && cfg.events.password) {
window.EventsStore.configure(cfg.events.url, cfg.events.password);
window.EventsStore.refresh().catch(() => {});
}
if (cfg.posts && window.PostsStore && cfg.posts.password) {
window.PostsStore.configure('', cfg.posts.password);
window.PostsStore.refresh().catch(() => {});
}
if (cfg.roster && window.RosterStore && cfg.roster.url && cfg.roster.password) {
window.RosterStore.configure(cfg.roster.url, cfg.roster.password);
window.RosterStore.refresh().catch(() => {});
}
})
.catch(() => { /* local dev / no function deployed — fall back to manual forms */ });
return () => { cancelled = true; };
}, []);
if (!SectionComponent) {
return (
<>
Section not loaded
Expected {ADMIN_SECTIONS.find(s => s.path === route)?.component || route} on window.
);
}
return (
<>
);
};
window.AdminApp = AdminApp;