79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from 'react';
|
||
import ClaimForm from './pages/ClaimForm';
|
||
import HelloAuth from './pages/HelloAuth';
|
||
import BottomBar from './components/BottomBar';
|
||
import './App.css';
|
||
import { miniappLog, miniappSendLogs } from './utils/miniappLogger';
|
||
|
||
function App() {
|
||
const [pathname, setPathname] = useState<string>(() => window.location.pathname || '');
|
||
const [avatarUrl, setAvatarUrl] = useState<string>(() => localStorage.getItem('user_avatar_url') || '');
|
||
const lastRouteTsRef = useRef<number>(Date.now());
|
||
const lastPathRef = useRef<string>(pathname);
|
||
|
||
useEffect(() => {
|
||
const onPopState = () => setPathname(window.location.pathname || '');
|
||
window.addEventListener('popstate', onPopState);
|
||
return () => window.removeEventListener('popstate', onPopState);
|
||
}, []);
|
||
|
||
// Логируем смену маршрута + ловим быстрый возврат на /hello (симптом бага)
|
||
useEffect(() => {
|
||
const now = Date.now();
|
||
const prev = lastPathRef.current;
|
||
lastPathRef.current = pathname;
|
||
lastRouteTsRef.current = now;
|
||
miniappLog('route', { prev, next: pathname });
|
||
|
||
if (pathname.startsWith('/hello') && !prev.startsWith('/hello')) {
|
||
// Вернулись на /hello: отправим дамп, чтобы поймать “ложится”
|
||
void miniappSendLogs('returned_to_hello');
|
||
}
|
||
}, [pathname]);
|
||
|
||
// Ловим клики в первые 2с после смены маршрута (ghost click / попадание в бар)
|
||
useEffect(() => {
|
||
const onClickCapture = (e: MouseEvent) => {
|
||
const dt = Date.now() - lastRouteTsRef.current;
|
||
if (dt > 2000) return;
|
||
const t = e.target as HTMLElement | null;
|
||
const inBar = !!t?.closest?.('.app-bottom-bar');
|
||
miniappLog('click_capture', {
|
||
dtFromRouteMs: dt,
|
||
inBottomBar: inBar,
|
||
tag: t?.tagName,
|
||
id: t?.id,
|
||
class: t?.className,
|
||
x: (e as MouseEvent).clientX,
|
||
y: (e as MouseEvent).clientY,
|
||
});
|
||
};
|
||
window.addEventListener('click', onClickCapture, true);
|
||
return () => window.removeEventListener('click', onClickCapture, true);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setAvatarUrl(localStorage.getItem('user_avatar_url') || '');
|
||
}, [pathname]);
|
||
|
||
const isNewClaimPage = pathname === '/new';
|
||
|
||
const navigateTo = useCallback((path: string) => {
|
||
window.history.pushState({}, '', path);
|
||
setPathname(path);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="App">
|
||
{pathname.startsWith('/hello') ? (
|
||
<HelloAuth onAvatarChange={setAvatarUrl} onNavigate={navigateTo} />
|
||
) : (
|
||
<ClaimForm forceNewClaim={isNewClaimPage} />
|
||
)}
|
||
<BottomBar currentPath={pathname} avatarUrl={avatarUrl || undefined} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|