002836773d
The error "React refresh preamble was not loaded" in `sonner.tsx` suggests a problem with the Vite configuration or React refresh setup. The AI will investigate the Vite configuration (`vite.config.ts`) and the component's import/export structure to ensure proper React refresh functionality.
77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
|
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { Suspense, lazy, useEffect } from 'react';
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
import Auth from './pages/Auth';
|
|
import ProtectedRoute from './components/auth/ProtectedRoute';
|
|
import { authStore } from './stores/authStore';
|
|
|
|
// Lazy-loaded components
|
|
const Dashboard = lazy(() => import('./pages/Index'));
|
|
const Transacoes = lazy(() => import('./pages/Transacoes'));
|
|
const Categorias = lazy(() => import('./pages/Categorias'));
|
|
const Metas = lazy(() => import('./pages/Metas'));
|
|
const Calendario = lazy(() => import('./pages/Calendario'));
|
|
const WhatsApp = lazy(() => import('./pages/WhatsApp'));
|
|
const GruposWhatsApp = lazy(() => import('./pages/GruposWhatsApp'));
|
|
const NotFound = lazy(() => import('./pages/NotFound'));
|
|
const CartoesCredito = lazy(() => import('./pages/CartoesCredito'));
|
|
|
|
function App() {
|
|
const isLoggedIn = authStore((state) => state.isLoggedIn);
|
|
const setLoggedIn = authStore((state) => state.setLoggedIn);
|
|
|
|
// Initialize authStore state once at mount time
|
|
useEffect(() => {
|
|
const storedAuth = localStorage.getItem('autenticado') === 'true';
|
|
setLoggedIn(storedAuth);
|
|
}, [setLoggedIn]);
|
|
|
|
return (
|
|
<Router>
|
|
<Toaster />
|
|
|
|
<Routes>
|
|
{/* The auth route should not be inside ProtectedRoute */}
|
|
<Route
|
|
path="/auth"
|
|
element={isLoggedIn ? <Navigate to="/" replace /> : <Auth />}
|
|
/>
|
|
|
|
{/* Protected routes */}
|
|
<Route path="/" element={
|
|
<ProtectedRoute>
|
|
<Suspense fallback={<div className="flex items-center justify-center min-h-screen">Carregando...</div>}>
|
|
<Dashboard />
|
|
</Suspense>
|
|
</ProtectedRoute>
|
|
} />
|
|
|
|
<Route path="/transacoes" element={
|
|
<ProtectedRoute>
|
|
<Suspense fallback={<div className="flex items-center justify-center min-h-screen">Carregando...</div>}>
|
|
<Transacoes />
|
|
</Suspense>
|
|
</ProtectedRoute>
|
|
} />
|
|
|
|
<Route path="/cartoes" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><CartoesCredito /></Suspense></ProtectedRoute>} />
|
|
<Route path="/categorias" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><Categorias /></Suspense></ProtectedRoute>} />
|
|
<Route path="/metas" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><Metas /></Suspense></ProtectedRoute>} />
|
|
<Route path="/calendario" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><Calendario /></Suspense></ProtectedRoute>} />
|
|
<Route path="/whatsapp" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><WhatsApp /></Suspense></ProtectedRoute>} />
|
|
<Route path="/grupos-whatsapp" element={<ProtectedRoute><Suspense fallback={<div>Carregando...</div>}><GruposWhatsApp /></Suspense></ProtectedRoute>} />
|
|
|
|
{/* Not found route */}
|
|
<Route path="*" element={
|
|
<Suspense fallback={<div className="flex items-center justify-center min-h-screen">Carregando...</div>}>
|
|
<NotFound />
|
|
</Suspense>
|
|
} />
|
|
</Routes>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|