// VersionWatcher.jsx — polls /api/version every POLL_INTERVAL_MS and
// shows a top-right banner when the deployed site version differs from
// the version that was loaded in this browser tab. The banner offers a
// "hard refresh" button (cache-busting query string + reload) and an
// optional dismiss for the session. Mounted globally from App.jsx and
// from admin.html.
//
// Polling cadence is tight (20 s) and reinforced by focus +
// visibilitychange + online listeners so a new deploy surfaces within
// a few seconds of the operator returning to the tab. The banner is
// big, slides in, and stays put until acknowledged.
const { useState: useStateV, useEffect: useEffectV } = React;
const POLL_INTERVAL_MS = 20_000;
function VersionWatcher({ lang }) {
const isKo = (lang || 'ko') === 'ko';
const loaded = window.DREAMPATH_VERSION || '00.000.00';
const [latest, setLatest] = useStateV(loaded);
const [lastChecked, setLastChecked] = useStateV(0);
// Session-level dismiss so the banner does not nag after the user closes
// it; a real refresh clears the flag because sessionStorage survives.
// We key the dismiss by the version we saw, so a *new* deploy after the
// dismiss will surface the banner again.
const [dismissed, setDismissed] = useStateV(() => {
try { return sessionStorage.getItem('dp_version_dismissed') || ''; } catch { return ''; }
});
useEffectV(() => {
let alive = true;
async function tick() {
try {
const r = await fetch('/api/version', { cache: 'no-store' });
if (!r.ok) return;
const d = await r.json();
if (alive && d && d.version) {
setLatest(d.version);
setLastChecked(Date.now());
}
} catch {}
}
tick();
const t = setInterval(tick, POLL_INTERVAL_MS);
// Re-check whenever the operator returns to the tab — covers the
// "left it open over lunch" case + new-deploy-while-on-other-tab.
const onFocus = () => tick();
const onVisible = () => { if (document.visibilityState === 'visible') tick(); };
const onOnline = () => tick();
window.addEventListener('focus', onFocus);
document.addEventListener('visibilitychange', onVisible);
window.addEventListener('online', onOnline);
return () => {
alive = false;
clearInterval(t);
window.removeEventListener('focus', onFocus);
document.removeEventListener('visibilitychange', onVisible);
window.removeEventListener('online', onOnline);
};
}, []);
function hardRefresh() {
try { sessionStorage.removeItem('dp_version_dismissed'); } catch {}
// Cache-busting query string — forces the HTML + the babel-compiled
// .jsx files to be re-fetched on most CDN configurations. Keeps the
// current path so the user lands on the same view post-refresh.
const u = new URL(window.location.href);
u.searchParams.set('v', latest);
window.location.replace(u.toString());
}
function dismiss() {
setDismissed(latest);
try { sessionStorage.setItem('dp_version_dismissed', latest); } catch {}
}
const isStale = latest && latest !== loaded;
const isDismissed = dismissed === latest;
if (!isStale || isDismissed) return null;
return (
<>
↑
{isKo ? '새 버전이 배포되었습니다' : 'A new version has been deployed'}
{isKo ? '새로고침하면 최신 화면으로 전환됩니다.' : 'Refresh to load the latest version.'}