client/src/App.js - master - morlli/zavav

client/src/App.js
85 строк3 KB
morlli
28 май 2026, 19:48
28 май 2026, 19:483299f08
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import axios from 'axios';

// Pages
import Home from './pages/Home';
import Pets from './pages/Pets';
import PetDetail from './pages/PetDetail';
import AdoptionForm from './pages/AdoptionForm';
import Login from './pages/Login';
import Register from './pages/Register';
import Profile from './pages/Profile';
import ShelterDashboard from './pages/ShelterDashboard';
import AdminDashboard from './pages/AdminDashboard';

// Components
import Navbar from './components/Navbar';
import Footer from './components/Footer';

// Services
import authService from './services/authService';

function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check if user is already logged in
    const user = authService.getCurrentUser();
    if (user) {
      setCurrentUser(user);
    }
    setLoading(false);
  }, []);

  const login = (userData) => {
    authService.login(userData);
    setCurrentUser(userData);
  };

  const logout = () => {
    authService.logout();
    setCurrentUser(null);
  };

  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }

  return (
    <Router>
      <div className="flex flex-col min-h-screen">
        <Navbar currentUser={currentUser} onLogout={logout} />
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/pets" element={<Pets />} />
            <Route path="/pets/:id" element={<PetDetail />} />
            <Route path="/pets/:id/adopt" element={
              currentUser ? <AdoptionForm /> : <Navigate to="/login" />
            } />
            <Route path="/login" element={
              !currentUser ? <Login onLogin={login} /> : <Navigate to="/" />
            } />
            <Route path="/register" element={
              !currentUser ? <Register onLogin={login} /> : <Navigate to="/" />
            } />
            <Route path="/profile" element={
              currentUser ? <Profile /> : <Navigate to="/login" />
            } />
            <Route path="/shelter/dashboard" element={
              currentUser?.role === 'shelter' ? <ShelterDashboard /> : <Navigate to="/" />
            } />
            <Route path="/admin/users" element={
              currentUser?.role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />
            } />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
}

export default App;