Files
h2h-prototype/frontend/src/App.tsx
2026-01-02 10:43:20 -06:00

90 lines
2.2 KiB
TypeScript

import { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useAuthStore } from './store'
import { Home } from './pages/Home'
import { Login } from './pages/Login'
import { Register } from './pages/Register'
import { Dashboard } from './pages/Dashboard'
import { BetMarketplace } from './pages/BetMarketplace'
import { BetDetails } from './pages/BetDetails'
import { MyBets } from './pages/MyBets'
import { Wallet } from './pages/Wallet'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
},
},
})
function PrivateRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuthStore()
return isAuthenticated ? <>{children}</> : <Navigate to="/login" />
}
function App() {
const { loadUser } = useAuthStore()
useEffect(() => {
loadUser()
}, [loadUser])
return (
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route
path="/dashboard"
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
/>
<Route
path="/marketplace"
element={
<PrivateRoute>
<BetMarketplace />
</PrivateRoute>
}
/>
<Route
path="/bets/:id"
element={
<PrivateRoute>
<BetDetails />
</PrivateRoute>
}
/>
<Route
path="/my-bets"
element={
<PrivateRoute>
<MyBets />
</PrivateRoute>
}
/>
<Route
path="/wallet"
element={
<PrivateRoute>
<Wallet />
</PrivateRoute>
}
/>
</Routes>
</BrowserRouter>
</QueryClientProvider>
)
}
export default App