packages/devtools-ui/src/devtools.tsx
import React from "react";
import { DevToolsContextProvider } from "@refinedev/devtools-shared";
import { ReloadOnChanges } from "./reload-on-changes";
import { Layout } from "./components/layout";
import {
BrowserRouter,
Navigate,
Outlet,
Route,
Routes,
} from "react-router-dom";
import { Authenticated } from "./components/authenticated";
import { Overview } from "./pages/overview";
import { Login } from "./pages/login";
import { Onboarding } from "./pages/onboarding";
import { Monitor } from "./pages/monitor";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { Onboarded } from "./components/onboarded";
import { InitialLayout } from "./components/initial-layout";
import { RaffleHandler } from "./components/raffle-handler";
import { MonitorHighlightHandler } from "./components/monitor-highlight-handler";
import { LocationChangeHandler } from "./components/location-change-handler";
import { getLastLocation } from "./utils/last-location";
import { AfterLogin } from "./pages/after-login";
dayjs.extend(relativeTime);
export const DevToolsApp = () => {
return (
<DevToolsContextProvider __devtools>
<ReloadOnChanges />
<BrowserRouter>
<Routes>
<Route
path="/after-login"
element={
<InitialLayout>
<AfterLogin />
</InitialLayout>
}
/>
<Route
element={
<Authenticated key="app" fallback={<Navigate to="/login" />}>
<Outlet />
</Authenticated>
}
>
<Route
element={
<Onboarded
key="onboarded"
fallback={<Navigate to="/onboarding" />}
>
<Layout>
<Outlet />
<RaffleHandler />
</Layout>
</Onboarded>
}
>
<Route path="/" element={<Navigate to={getLastLocation()} />} />
<Route path="/overview" element={<Overview />} />
<Route path="/monitor" element={<Monitor />} />
<Route path="*" element={<Navigate to="/overview" />} />
</Route>
<Route
element={
<Onboarded
key="onboarding"
fallback={
<InitialLayout>
<Outlet />
</InitialLayout>
}
>
<Navigate to="/overview" />
</Onboarded>
}
>
<Route path="/onboarding" element={<Onboarding />} />
<Route path="*" element={<Navigate to="/overview" />} />
</Route>
</Route>
<Route
element={
<Authenticated
key="gate"
fallback={
<InitialLayout>
<Outlet />
</InitialLayout>
}
>
<Navigate to="/overview" />
</Authenticated>
}
>
<Route path="/login" element={<Login />} />
<Route path="*" element={<Navigate to="/login" />} />
</Route>
</Routes>
<LocationChangeHandler />
<MonitorHighlightHandler />
</BrowserRouter>
</DevToolsContextProvider>
);
};