Line data    Source code

       1             : // Filepath: Melodex/melodex-front-end/src/App.jsx
       2           0 : import React from 'react';
       3           0 : import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
       4           0 : import { SongProvider } from './contexts/SongContext';
       5           0 : import { UserProvider, useUserContext } from './contexts/UserContext';
       6           0 : import { VolumeProvider } from './contexts/VolumeContext'; // Add this import
       7           0 : import Navbar from './components/Navbar';
       8           0 : import { SongRanker } from './components/SongRanker';
       9           0 : import Rankings from './components/Rankings';
      10           0 : import UserProfile from './components/UserProfile';
      11           0 : import Login from './components/Login';
      12           0 : import Register from './components/Register';
      13             : 
      14           0 : const isCypressEnv = typeof window !== 'undefined' && !!(window).Cypress;
      15             : 
      16           0 : const ProtectedRoute = ({ children }) => {
      17           0 :   const { userID, loading } = useUserContext();
      18           0 :   const requireAuth = typeof window !== 'undefined' && !!(window).__E2E_REQUIRE_AUTH__;
      19             :   // In real app, still show loading; in Cypress, don't block rendering
      20           0 :   if (loading && !isCypressEnv) return <div>Loading...</div>;
      21             : 
      22             :   // Allow route when:
      23             :   //  - real userID exists (normal behavior), OR
      24             :   //  - Cypress is running (E2E bypass)
      25             :   // Bypass only if Cypress AND not explicitly requiring real auth
      26           0 :   const allowBypass = isCypressEnv && !requireAuth;
      27           0 :   return (userID || allowBypass) ? children : <Navigate to="/login" replace />;
      28           0 : };
      29             : 
      30           0 : function App() {
      31           0 :   return (
      32           0 :     <Router>
      33           0 :       <VolumeProvider> {/* Add VolumeProvider here */}
      34           0 :         <UserProvider>
      35           0 :           <SongProvider>
      36           0 :             <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      37           0 :               <Navbar />
      38           0 :               <main style={{ flex: '1 0 auto', padding: '0.75rem', width: '100%', maxWidth: 'none', margin: '0 auto' }}>
      39           0 :                 <Routes>
      40           0 :                   <Route path="/login" element={<Login />} />
      41           0 :                   <Route path="/register" element={<Register />} />
      42           0 :                   <Route path="/rank" element={<ProtectedRoute><SongRanker mode="new" key="new" /></ProtectedRoute>} />
      43           0 :                   <Route path="/rerank" element={<ProtectedRoute><SongRanker mode="rerank" key="rerank" /></ProtectedRoute>} />
      44           0 :                   <Route path="/rankings" element={<ProtectedRoute><Rankings /></ProtectedRoute>} />
      45           0 :                   <Route path="/profile" element={<ProtectedRoute><UserProfile /></ProtectedRoute>} />
      46           0 :                   <Route path="/" element={<Navigate to="/login" replace />} />
      47           0 :                   <Route path="*" element={<Navigate to="/login" replace />} />
      48           0 :                 </Routes>
      49           0 :               </main>
      50           0 :               <footer style={{ 
      51           0 :                   background: '#141820', 
      52           0 :                   color: '#bdc3c7', 
      53           0 :                   height: '3.5rem', 
      54           0 :                   display: 'flex', 
      55           0 :                   alignItems: 'center', 
      56           0 :                   padding: '0 1rem', 
      57           0 :                   textAlign: 'left', 
      58           0 :                   flexShrink: 0, 
      59           0 :                   fontSize: '0.8rem', 
      60           0 :                   boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)' 
      61           0 :                 }}>
      62           0 :                 <p style={{ margin: 0 }}>https://linktr.ee/michaeldereus</p>
      63           0 :               </footer>
      64           0 :             </div>
      65           0 :           </SongProvider>
      66           0 :         </UserProvider>
      67           0 :       </VolumeProvider>
      68           0 :     </Router>
      69             :   );
      70           0 : }
      71             : 
      72           0 : export default App;