Fix: Import ErrorBoundary correctly

This commit is contained in:
Tola Leng
2025-06-15 21:47:03 +08:00
parent 4486a79e58
commit 08b00728c2
+49 -101
View File
@@ -1,114 +1,62 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from './contexts/ThemeContext'; import { Toaster } from '@/components/ui/sonner';
import { LanguageProvider } from './contexts/LanguageContext'; import { ThemeProvider } from '@/contexts/ThemeContext';
import { SidebarProvider } from './contexts/SidebarContext'; import { LanguageProvider } from '@/contexts/LanguageContext';
import { ErrorBoundary } from './components/ErrorBoundary'; import { SidebarProvider } from '@/contexts/SidebarContext';
import { Toaster } from './components/ui/sonner'; import { ErrorBoundary } from '@/components/ErrorBoundary';
import { authService } from './services/authService';
// Pages // Pages
import Index from './pages/Index'; import Index from '@/pages/Index';
import Login from './pages/Login'; import Login from '@/pages/Login';
import Dashboard from './pages/Dashboard'; import Dashboard from '@/pages/Dashboard';
import ServiceDetail from './pages/ServiceDetail'; import ServiceDetail from '@/pages/ServiceDetail';
import Settings from './pages/Settings'; import Profile from '@/pages/Profile';
import Profile from './pages/Profile'; import Settings from '@/pages/Settings';
import SslDomain from './pages/SslDomain'; import OperationalPage from '@/pages/OperationalPage';
import ScheduleIncident from './pages/ScheduleIncident'; import ScheduleIncident from '@/pages/ScheduleIncident';
import OperationalPage from './pages/OperationalPage'; import SslDomain from '@/pages/SslDomain';
import PublicStatusPage from './pages/PublicStatusPage'; import PublicStatusPage from '@/pages/PublicStatusPage';
import NotFound from './pages/NotFound'; import NotFound from '@/pages/NotFound';
const queryClient = new QueryClient(); const queryClient = new QueryClient({
defaultOptions: {
// Protected Route Component queries: {
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { retry: 1,
const isAuthenticated = authService.isAuthenticated(); refetchOnWindowFocus: false,
return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />; },
}; },
});
function App() { function App() {
return ( return (
<ErrorBoundary> <QueryClientProvider client={queryClient}>
<QueryClientProvider client={queryClient}> <ThemeProvider>
<ThemeProvider> <LanguageProvider>
<LanguageProvider> <SidebarProvider>
<SidebarProvider> <ErrorBoundary>
<Router> <Router>
<div className="min-h-screen bg-background text-foreground"> <Routes>
<Routes> <Route path="/" element={<Index />} />
<Route path="/" element={<Index />} /> <Route path="/login" element={<Login />} />
<Route path="/login" element={<Login />} /> <Route path="/dashboard" element={<Dashboard />} />
<Route <Route path="/services/:id" element={<ServiceDetail />} />
path="/dashboard" <Route path="/profile" element={<Profile />} />
element={ <Route path="/settings" element={<Settings />} />
<ProtectedRoute> <Route path="/operational-page" element={<OperationalPage />} />
<Dashboard /> <Route path="/schedule-incident" element={<ScheduleIncident />} />
</ProtectedRoute> <Route path="/ssl-domain" element={<SslDomain />} />
} <Route path="/status/:slug" element={<PublicStatusPage />} />
/> <Route path="*" element={<NotFound />} />
<Route </Routes>
path="/service/:id"
element={
<ProtectedRoute>
<ServiceDetail />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
<ProtectedRoute>
<Settings />
</ProtectedRoute>
}
/>
<Route
path="/profile"
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
/>
<Route
path="/ssl-domain"
element={
<ProtectedRoute>
<SslDomain />
</ProtectedRoute>
}
/>
<Route
path="/schedule-incident"
element={
<ProtectedRoute>
<ScheduleIncident />
</ProtectedRoute>
}
/>
<Route
path="/operational-page"
element={
<ProtectedRoute>
<OperationalPage />
</ProtectedRoute>
}
/>
<Route path="/status/:pageSlug" element={<PublicStatusPage />} />
<Route path="*" element={<NotFound />} />
</Routes>
<Toaster />
</div>
</Router> </Router>
</SidebarProvider> <Toaster />
</LanguageProvider> </ErrorBoundary>
</ThemeProvider> </SidebarProvider>
</QueryClientProvider> </LanguageProvider>
</ErrorBoundary> </ThemeProvider>
</QueryClientProvider>
); );
} }