Files
gymflow/src/App.tsx
2025-12-12 21:01:45 +02:00

102 lines
3.1 KiB
TypeScript

import React, { useState, useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import Navbar from './components/Navbar';
import Tracker from './components/Tracker/index';
import History from './components/History';
import Stats from './components/Stats';
import AICoach from './components/AICoach';
import Plans from './components/Plans';
import Login from './components/Login';
import Profile from './components/Profile';
import { Language, User } from './types';
import { getSystemLanguage } from './services/i18n';
import { useAuth } from './context/AuthContext';
function App() {
const { currentUser, updateUser, logout, isLoading } = useAuth();
const [language, setLanguage] = useState<Language>('en');
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
if (currentUser?.profile?.language) {
setLanguage(currentUser.profile.language as Language);
} else {
setLanguage(getSystemLanguage());
}
}, [currentUser]);
const handleLogin = (user: User) => {
updateUser(user);
navigate('/');
};
const handleLogout = () => {
logout();
navigate('/login');
};
if (isLoading) {
return (
<div className="h-[100dvh] w-screen bg-surface flex items-center justify-center text-on-surface">
<div className="animate-pulse">Loading...</div>
</div>
);
}
if (!currentUser && location.pathname !== '/login') {
return <Navigate to="/login" />;
}
return (
<div className="h-[100dvh] w-screen bg-surface text-on-surface font-sans flex flex-col md:flex-row overflow-hidden">
{currentUser && (
<Navbar lang={language} />
)}
{/* Main Content Area */}
<main className="flex-1 h-full relative w-full max-w-5xl mx-auto md:px-4">
<div className="h-full w-full pb-20 md:pb-0 bg-surface">
<Routes>
<Route path="/login" element={
!currentUser ? (
<Login onLogin={handleLogin} language={language} onLanguageChange={setLanguage} />
) : (
<Navigate to="/" />
)
} />
<Route path="/" element={
<Tracker lang={language} />
} />
<Route path="/plans" element={
<Plans lang={language} />
} />
<Route path="/history" element={
<History lang={language} />
} />
<Route path="/stats" element={
<Stats lang={language} />
} />
<Route path="/coach" element={
<AICoach lang={language} />
} />
<Route path="/profile" element={
<Profile
user={currentUser}
onLogout={handleLogout}
lang={language}
onLanguageChange={setLanguage}
onUserUpdate={updateUser}
/>
} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
</main>
</div>
);
}
export default App;