import { useState } from 'react'; import { Navbar } from './components/Navbar'; import { Generator } from './components/Generator'; import { LoginView } from './components/LoginView'; import { HistoryView } from './components/HistoryView'; import { KittyGame } from './components/KittyGame'; import { FlappyCat } from './components/FlappyCat'; import { useAuth } from './hooks/useAuth'; export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game'; const getSubdomain = () => { const hostname = window.location.hostname; // Handle localhost and 127.0.0.1 cases. // For more advanced cases (like bare IP hosting) // a regex may be necessary. if (hostname === 'localhost' || hostname === '127.0.0.1') { return null; } const parts = hostname.split('.'); if (parts.length <= 2) return null; return parts[0]; }; function App() { const [url, setUrl] = useState(''); const [view, setView] = useState('home'); const { isAuthenticated, logout } = useAuth(); const subdomain = getSubdomain(); /** * STAN POCHODNY (Derived State) * Rozwiązuje błąd "cascading renders". Jeśli użytkownik jest na subdomenie * i nie jest zalogowany, automatycznie renderujemy widok logowania, * ale nie nadpisujemy stanu 'view' w nieskończoność. */ const activeView = (subdomain && !isAuthenticated) ? 'login' : view; const renderView = () => { switch (activeView) { case 'login': return ( setView('home')} onSuccess={() => setView('home')} /> ); case 'history': // Strażnik dostępu dla widoku historii if (!isAuthenticated) { return setView('home')} onSuccess={() => setView('home')} />; } return setView('home')} />; case 'jump-game': return setView('home')} />; case 'flappy-game': return setView('home')} />; default: return alert('Meow!')} />; } }; return (
setView(v)} isAuthenticated={isAuthenticated} onLogout={logout} />
{/* Jeśli użytkownik jest zalogowany (SSO), activeView od razu pokaże Generator, zamiast LoginView. */} {renderView()}
); } export default App;