frontend/src/App.js

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';
import ChatContainer from './components/Chat/ChatContainer';
import LoadingSpinner from './components/Common/LoadingSpinner';

function App() {
  const { user, loading } = useAuth();

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div className="app">

      <Routes>

        <Route 

          path="/login" 

          element={!user ? <Login /> : <Navigate to="/" />} 

        />

        <Route 

          path="/register" 

          element={!user ? <Register /> : <Navigate to="/" />} 

        />

        <Route 

          path="/" 

          element={user ? <ChatContainer /> : <Navigate to="/login" />} 

        />

        <Route 

          path="/chat/:conversationId" 

          element={user ? <ChatContainer /> : <Navigate to="/login" />} 

        />

      </Routes>

    </div>
  );
}

export default App;