459 lines
15 KiB
TypeScript
459 lines
15 KiB
TypeScript
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
|
import MapPage, { type ExportState } from './components/map/MapPage';
|
|
import PricingPage from './components/pricing/PricingPage';
|
|
import HomePage from './components/home/HomePage';
|
|
import LearnPage from './components/learn/LearnPage';
|
|
import AccountPage, { SavedPage, InvitesPage } from './components/account/AccountPage';
|
|
import InvitePage from './components/invite/InvitePage';
|
|
import Header, { type Page } from './components/ui/Header';
|
|
import AuthModal from './components/ui/AuthModal';
|
|
import SaveSearchModal from './components/ui/SaveSearchModal';
|
|
import LicenseSuccessModal from './components/ui/LicenseSuccessModal';
|
|
import type { FeatureMeta, FeatureGroup, POICategoriesResponse, POICategoryGroup } from './types';
|
|
import { fetchWithRetry, apiUrl } from './lib/api';
|
|
import { trackEvent } from './lib/analytics';
|
|
import { parseUrlState } from './lib/url-state';
|
|
import { INITIAL_VIEW_STATE } from './lib/consts';
|
|
import { useTheme } from './hooks/useTheme';
|
|
import { useIsMobile } from './hooks/useIsMobile';
|
|
import { useAuth } from './hooks/useAuth';
|
|
import { useTelemetry } from './hooks/useTelemetry';
|
|
import { useSavedSearches } from './hooks/useSavedSearches';
|
|
import { useSavedProperties } from './hooks/useSavedProperties';
|
|
|
|
declare global {
|
|
interface Window {
|
|
__screenshot_ready?: boolean;
|
|
__map_idle?: boolean;
|
|
}
|
|
}
|
|
|
|
function pageToPath(page: Page, inviteCode?: string): string {
|
|
switch (page) {
|
|
case 'dashboard':
|
|
return '/dashboard';
|
|
case 'learn':
|
|
return '/learn';
|
|
case 'pricing':
|
|
return '/pricing';
|
|
case 'saved':
|
|
return '/saved';
|
|
case 'invites':
|
|
return '/invites';
|
|
case 'account':
|
|
return '/account';
|
|
case 'invite':
|
|
return `/invite/${inviteCode || ''}`;
|
|
default:
|
|
return '/';
|
|
}
|
|
}
|
|
|
|
function pathToPage(pathname: string): { page: Page; inviteCode?: string } | null {
|
|
if (pathname === '/dashboard') return { page: 'dashboard' };
|
|
if (pathname === '/saved') return { page: 'saved' };
|
|
if (pathname === '/invites') return { page: 'invites' };
|
|
if (pathname === '/learn') return { page: 'learn' };
|
|
if (pathname === '/pricing') return { page: 'pricing' };
|
|
if (pathname === '/account') return { page: 'account' };
|
|
if (pathname === '/support') return { page: 'learn' };
|
|
if (pathname.startsWith('/invite/')) {
|
|
const code = pathname.slice('/invite/'.length);
|
|
return { page: 'invite', inviteCode: code };
|
|
}
|
|
if (pathname === '/') return { page: 'home' };
|
|
return null;
|
|
}
|
|
|
|
export default function App() {
|
|
const urlState = useMemo(() => parseUrlState(), []);
|
|
const [mapUrlState, setMapUrlState] = useState(urlState);
|
|
const dashboardSearchRef = useRef(
|
|
window.location.pathname === '/dashboard' ? window.location.search : ''
|
|
);
|
|
const activePageRef = useRef<Page>('home');
|
|
const initialViewState = useMemo(
|
|
() => mapUrlState.viewState || INITIAL_VIEW_STATE,
|
|
[mapUrlState.viewState]
|
|
);
|
|
|
|
const isScreenshotMode = useMemo(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params.get('screenshot') === '1';
|
|
}, []);
|
|
const isOgMode = useMemo(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params.get('og') === '1';
|
|
}, []);
|
|
|
|
const [features, setFeatures] = useState<FeatureMeta[]>([]);
|
|
const [poiCategoryGroups, setPOICategoryGroups] = useState<POICategoryGroup[]>([]);
|
|
const [initialLoading, setInitialLoading] = useState(true);
|
|
const [pendingInfoFeature, setPendingInfoFeature] = useState<string | null>(null);
|
|
const [inviteCode, setInviteCode] = useState<string | null>(() => {
|
|
const fromPath = pathToPage(window.location.pathname);
|
|
return fromPath?.inviteCode ?? null;
|
|
});
|
|
const [activePage, setActivePage] = useState<Page>(() => {
|
|
if (isScreenshotMode) return 'dashboard';
|
|
|
|
// Derive page from URL pathname
|
|
const fromPath = pathToPage(window.location.pathname);
|
|
if (fromPath) return fromPath.page;
|
|
|
|
// Restore from history state (e.g. popstate)
|
|
if (window.history.state?.page) return window.history.state.page;
|
|
|
|
// Unknown path — track as 404
|
|
if (window.location.pathname !== '/') {
|
|
trackEvent('404', { path: window.location.pathname });
|
|
}
|
|
return 'home';
|
|
});
|
|
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isMobile = useIsMobile();
|
|
useTelemetry();
|
|
const {
|
|
user,
|
|
loading: authLoading,
|
|
error: authError,
|
|
login,
|
|
register,
|
|
loginWithOAuth,
|
|
logout,
|
|
requestPasswordReset,
|
|
refreshAuth,
|
|
clearError,
|
|
} = useAuth();
|
|
const [showAuthModal, setShowAuthModal] = useState(false);
|
|
const [authModalTab, setAuthModalTab] = useState<'login' | 'register'>('login');
|
|
const [showLicenseSuccess, setShowLicenseSuccess] = useState(false);
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.get('license_success') === '1') {
|
|
params.delete('license_success');
|
|
const newUrl = params.toString()
|
|
? `${window.location.pathname}?${params.toString()}`
|
|
: window.location.pathname;
|
|
window.history.replaceState({}, '', newUrl);
|
|
trackEvent('Purchase');
|
|
setShowLicenseSuccess(true);
|
|
refreshAuth();
|
|
}
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const savedSearches = useSavedSearches(user?.id ?? null);
|
|
const savedProperties = useSavedProperties(user?.id ?? null);
|
|
const [showSaveModal, setShowSaveModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
let featuresLoaded = false;
|
|
let poisLoaded = false;
|
|
|
|
const checkDone = () => {
|
|
if (featuresLoaded && poisLoaded) setInitialLoading(false);
|
|
};
|
|
|
|
fetchWithRetry<{ groups: FeatureGroup[] }>(
|
|
apiUrl('features'),
|
|
(json) => {
|
|
const flat: FeatureMeta[] = json.groups.flatMap((g) =>
|
|
g.features.map((f) => ({ ...f, group: g.name }))
|
|
);
|
|
setFeatures(flat);
|
|
featuresLoaded = true;
|
|
checkDone();
|
|
},
|
|
controller.signal
|
|
);
|
|
|
|
fetchWithRetry<POICategoriesResponse>(
|
|
apiUrl('poi-categories'),
|
|
(json) => {
|
|
setPOICategoryGroups(json.groups);
|
|
poisLoaded = true;
|
|
checkDone();
|
|
},
|
|
controller.signal
|
|
);
|
|
|
|
return () => controller.abort();
|
|
}, []);
|
|
|
|
const navigateTo = useCallback(
|
|
(page: Page, hash?: string, infoFeature?: string) => {
|
|
// Save dashboard search params before navigating away
|
|
if (activePageRef.current === 'dashboard') {
|
|
dashboardSearchRef.current = window.location.search;
|
|
}
|
|
if (infoFeature) {
|
|
window.history.replaceState({ ...window.history.state, infoFeature }, '');
|
|
}
|
|
const path = pageToPath(page, inviteCode ?? undefined);
|
|
// Restore dashboard search params when navigating back
|
|
const search = page === 'dashboard' ? dashboardSearchRef.current : '';
|
|
const url = hash ? `${path}${search}#${hash}` : `${path}${search}`;
|
|
window.history.pushState({ page }, '', url);
|
|
if (page === 'dashboard') {
|
|
setMapUrlState(parseUrlState());
|
|
}
|
|
setActivePage(page);
|
|
},
|
|
[inviteCode]
|
|
);
|
|
|
|
useEffect(() => {
|
|
activePageRef.current = activePage;
|
|
}, [activePage]);
|
|
|
|
useEffect(() => {
|
|
if (!window.history.state?.page) {
|
|
window.history.replaceState(
|
|
{ page: activePage },
|
|
'',
|
|
pageToPath(activePage) + window.location.search + window.location.hash
|
|
);
|
|
}
|
|
const handlePopState = (e: PopStateEvent) => {
|
|
let page: Page;
|
|
if (e.state?.page) {
|
|
page = e.state.page;
|
|
setActivePage(page);
|
|
if (e.state.infoFeature) {
|
|
setPendingInfoFeature(e.state.infoFeature);
|
|
}
|
|
} else {
|
|
// Fall back to deriving page from pathname
|
|
const parsed = pathToPage(window.location.pathname);
|
|
page = parsed?.page || 'home';
|
|
setActivePage(page);
|
|
if (parsed?.inviteCode) setInviteCode(parsed.inviteCode);
|
|
}
|
|
// Re-parse URL state when returning to dashboard via back/forward
|
|
if (page === 'dashboard') {
|
|
setMapUrlState(parseUrlState());
|
|
}
|
|
};
|
|
window.addEventListener('popstate', handlePopState);
|
|
return () => window.removeEventListener('popstate', handlePopState);
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const { fetchSearches } = savedSearches;
|
|
const { fetchProperties: fetchSavedProperties } = savedProperties;
|
|
useEffect(() => {
|
|
if (activePage === 'saved') {
|
|
fetchSearches();
|
|
fetchSavedProperties();
|
|
}
|
|
if (activePage === 'dashboard' && user) {
|
|
fetchSavedProperties();
|
|
}
|
|
}, [activePage, fetchSearches, fetchSavedProperties, user]);
|
|
|
|
const isAuthRequiredPage =
|
|
activePage === 'account' || activePage === 'saved' || activePage === 'invites';
|
|
useEffect(() => {
|
|
if (authLoading) return;
|
|
if (isAuthRequiredPage && !user) {
|
|
setAuthModalTab('login');
|
|
setShowAuthModal(true);
|
|
navigateTo('home');
|
|
}
|
|
if (activePage === 'pricing' && (user?.subscription === 'licensed' || user?.isAdmin)) {
|
|
navigateTo('dashboard');
|
|
}
|
|
}, [activePage, isAuthRequiredPage, user, authLoading, navigateTo]);
|
|
|
|
const [exportState, setExportState] = useState<ExportState | null>(null);
|
|
|
|
if ((isScreenshotMode || isOgMode) && inviteCode) {
|
|
return (
|
|
<InvitePage
|
|
code={inviteCode}
|
|
user={null}
|
|
theme={theme}
|
|
screenshotMode
|
|
onLoginClick={() => {}}
|
|
onRegisterClick={() => {}}
|
|
onLicenseGranted={() => {}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (isScreenshotMode) {
|
|
return (
|
|
<MapPage
|
|
features={features}
|
|
poiCategoryGroups={poiCategoryGroups}
|
|
initialFilters={urlState.filters || { 'Listing status': ['Historical sale'] }}
|
|
initialViewState={initialViewState}
|
|
initialPOICategories={urlState.poiCategories || new Set()}
|
|
initialTab={urlState.tab || 'area'}
|
|
initialLoading={initialLoading}
|
|
theme={theme}
|
|
pendingInfoFeature={null}
|
|
onClearPendingInfoFeature={() => {}}
|
|
onNavigateTo={() => {}}
|
|
screenshotMode
|
|
ogMode={isOgMode}
|
|
initialTravelTime={urlState.travelTime}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col">
|
|
<Header
|
|
activePage={activePage}
|
|
onPageChange={navigateTo}
|
|
theme={theme}
|
|
onToggleTheme={toggleTheme}
|
|
onExport={exportState?.onExport ?? null}
|
|
exporting={exportState?.exporting ?? false}
|
|
onSaveSearch={activePage === 'dashboard' && user ? () => setShowSaveModal(true) : null}
|
|
savingSearch={savedSearches.saving}
|
|
user={user}
|
|
onLoginClick={() => {
|
|
setAuthModalTab('login');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onRegisterClick={() => {
|
|
setAuthModalTab('register');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onLogout={logout}
|
|
isMobile={isMobile}
|
|
/>
|
|
{activePage === 'home' ? (
|
|
<HomePage
|
|
onOpenDashboard={() => navigateTo('dashboard')}
|
|
onOpenPricing={() => navigateTo('pricing')}
|
|
theme={theme}
|
|
hidePricing={user?.subscription === 'licensed' || user?.isAdmin}
|
|
/>
|
|
) : activePage === 'pricing' && !(user?.subscription === 'licensed' || user?.isAdmin) ? (
|
|
<PricingPage
|
|
onOpenDashboard={() => navigateTo('dashboard')}
|
|
user={user}
|
|
onLoginClick={() => {
|
|
setAuthModalTab('login');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onRegisterClick={() => {
|
|
setAuthModalTab('register');
|
|
setShowAuthModal(true);
|
|
}}
|
|
/>
|
|
) : activePage === 'learn' ? (
|
|
<LearnPage />
|
|
) : activePage === 'saved' && user ? (
|
|
<SavedPage
|
|
searches={savedSearches.searches}
|
|
searchesLoading={savedSearches.loading}
|
|
onDeleteSearch={savedSearches.deleteSearch}
|
|
onUpdateSearchNotes={savedSearches.updateSearchNotes}
|
|
onUpdateSearchName={savedSearches.updateSearchName}
|
|
onOpenSearch={(params) => {
|
|
window.location.href = `/dashboard?${params}`;
|
|
}}
|
|
savedProperties={savedProperties.properties}
|
|
propertiesLoading={savedProperties.loading}
|
|
onDeleteProperty={savedProperties.deleteProperty}
|
|
onUpdatePropertyNotes={savedProperties.updatePropertyNotes}
|
|
onOpenProperty={(postcode) => {
|
|
window.location.href = `/dashboard?pc=${encodeURIComponent(postcode)}`;
|
|
}}
|
|
/>
|
|
) : activePage === 'invites' && user ? (
|
|
<InvitesPage user={user} />
|
|
) : activePage === 'account' && user ? (
|
|
<AccountPage user={user} onRefreshAuth={refreshAuth} />
|
|
) : activePage === 'invite' && inviteCode ? (
|
|
<InvitePage
|
|
code={inviteCode}
|
|
user={user}
|
|
theme={theme}
|
|
onLoginClick={() => {
|
|
setAuthModalTab('login');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onRegisterClick={() => {
|
|
setAuthModalTab('register');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onLicenseGranted={() => {
|
|
setShowLicenseSuccess(true);
|
|
refreshAuth();
|
|
}}
|
|
/>
|
|
) : (
|
|
<MapPage
|
|
features={features}
|
|
poiCategoryGroups={poiCategoryGroups}
|
|
initialFilters={mapUrlState.filters || { 'Listing status': ['Historical sale'] }}
|
|
initialViewState={initialViewState}
|
|
initialPOICategories={mapUrlState.poiCategories || new Set()}
|
|
initialTab={mapUrlState.tab || 'area'}
|
|
initialLoading={initialLoading}
|
|
theme={theme}
|
|
pendingInfoFeature={pendingInfoFeature}
|
|
onClearPendingInfoFeature={() => setPendingInfoFeature(null)}
|
|
onNavigateTo={navigateTo}
|
|
onExportStateChange={setExportState}
|
|
isMobile={isMobile}
|
|
initialTravelTime={mapUrlState.travelTime}
|
|
initialPostcode={mapUrlState.postcode}
|
|
user={user}
|
|
onLoginClick={() => {
|
|
setAuthModalTab('login');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onRegisterClick={() => {
|
|
setAuthModalTab('register');
|
|
setShowAuthModal(true);
|
|
}}
|
|
onSaveProperty={user ? savedProperties.saveProperty : undefined}
|
|
onUnsaveProperty={user ? savedProperties.deleteProperty : undefined}
|
|
isPropertySaved={user ? savedProperties.isPropertySaved : undefined}
|
|
getSavedPropertyId={user ? savedProperties.getSavedPropertyId : undefined}
|
|
deferTutorial={showLicenseSuccess}
|
|
/>
|
|
)}
|
|
{showAuthModal && (
|
|
<AuthModal
|
|
onClose={() => setShowAuthModal(false)}
|
|
onLogin={login}
|
|
onRegister={register}
|
|
onOAuthLogin={loginWithOAuth}
|
|
onForgotPassword={requestPasswordReset}
|
|
loading={authLoading}
|
|
error={authError}
|
|
onClearError={clearError}
|
|
initialTab={authModalTab}
|
|
/>
|
|
)}
|
|
{showSaveModal && (
|
|
<SaveSearchModal
|
|
onClose={() => setShowSaveModal(false)}
|
|
onSave={savedSearches.saveSearch}
|
|
onViewSearches={() => {
|
|
setShowSaveModal(false);
|
|
navigateTo('saved');
|
|
}}
|
|
saving={savedSearches.saving}
|
|
error={savedSearches.error}
|
|
/>
|
|
)}
|
|
{showLicenseSuccess && (
|
|
<LicenseSuccessModal
|
|
onClose={() => {
|
|
setShowLicenseSuccess(false);
|
|
navigateTo('dashboard');
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|