117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { AuthProvider } from '@/hooks/useAuth';
|
|
import { ToastProvider } from '@/components/Toast';
|
|
import ProtectedRoute from '@/components/ProtectedRoute';
|
|
import Navbar from '@/components/Navbar';
|
|
import LoginPage from '@/pages/LoginPage';
|
|
import RegisterPage from '@/pages/RegisterPage';
|
|
import FeedPage from '@/pages/FeedPage';
|
|
import UploadPage from '@/pages/UploadPage';
|
|
import CatPage from '@/pages/CatPage';
|
|
import ProfilePage from '@/pages/ProfilePage';
|
|
import AdminPage from '@/pages/AdminPage';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 30_000,
|
|
retry: 1,
|
|
},
|
|
},
|
|
});
|
|
|
|
function AnimatedRoutes() {
|
|
const location = useLocation();
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = containerRef.current;
|
|
if (el) {
|
|
el.classList.remove('page-enter-active');
|
|
el.classList.add('page-enter');
|
|
requestAnimationFrame(() => {
|
|
el.classList.remove('page-enter');
|
|
el.classList.add('page-enter-active');
|
|
});
|
|
}
|
|
}, [location.pathname]);
|
|
|
|
return (
|
|
<div ref={containerRef} className="page-enter-active">
|
|
<Routes location={location}>
|
|
<Route path="/login" element={<LoginPage />} />
|
|
<Route path="/register" element={<RegisterPage />} />
|
|
<Route
|
|
path="/feed"
|
|
element={
|
|
<ProtectedRoute>
|
|
<FeedPage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/upload"
|
|
element={
|
|
<ProtectedRoute>
|
|
<UploadPage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/cat/:id"
|
|
element={
|
|
<ProtectedRoute>
|
|
<CatPage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/profile"
|
|
element={
|
|
<ProtectedRoute>
|
|
<ProfilePage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/profile/:id"
|
|
element={
|
|
<ProtectedRoute>
|
|
<ProfilePage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/admin"
|
|
element={
|
|
<ProtectedRoute>
|
|
<AdminPage />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route path="/" element={<Navigate to="/feed" replace />} />
|
|
<Route path="*" element={<Navigate to="/feed" replace />} />
|
|
</Routes>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter>
|
|
<AuthProvider>
|
|
<ToastProvider>
|
|
<Navbar />
|
|
<main>
|
|
<AnimatedRoutes />
|
|
</main>
|
|
</ToastProvider>
|
|
</AuthProvider>
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|