team-devoops/client/src/App.tsx at 760c0c39bff35099b066a796873385334594eda5 · AET-DevOps25/team-devoops · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Layout from './components/Layout';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import MatchRequests from './components/MatchRequests';
import Matches from './components/Matches';
import { useAuth0 } from '@auth0/auth0-react';
import Profile from './components/Profile';

interface AppProps {
  toggleColorMode: () => void;
  mode: 'light' | 'dark';
}

// Protected Route wrapper component using Auth0
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated, isLoading } = useAuth0();

  // Show loading state while Auth0 is initializing
  if (isLoading) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh',
          fontSize: '18px',
        }}
      >
        Loading...
      </div>
    );
  }

  // Redirect to login if not authenticated
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
};

const App = ({ toggleColorMode, mode }: AppProps) => {
  return (
    <Router>
      <Routes>
        {/* Public routes */}
        <Route path="/login" element={<Login />} />

        {/* Protected routes - all require authentication */}
        <Route
          path="/"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <Dashboard />
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <Dashboard />
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/preferences"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <MatchRequests />
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/matches"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <Matches />
              </Layout>
            </ProtectedRoute>
          }
        />
        <Route
          path="/profile"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <Profile />
              </Layout>
            </ProtectedRoute>
          }
        />

        {/* Account settings route */}
        <Route
          path="/account"
          element={
            <ProtectedRoute>
              <Layout toggleColorMode={toggleColorMode} mode={mode}>
                <div>Account Settings (Coming Soon)</div>
              </Layout>
            </ProtectedRoute>
          }
        />

        {/* Catch all route */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Router>
  );
};

export default App;