Migrate Traefik Proxy dashboard UI to React

webui/src/App.tsx

@@ -0,0 +1,113 @@
+import { Box, darkTheme, FaencyProvider, lightTheme } from '@traefiklabs/faency'
+import { Suspense, useEffect } from 'react'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
+import { HashRouter, Navigate, Route, Routes as RouterRoutes, useLocation } from 'react-router-dom'
+import { SWRConfig } from 'swr'
+
+import Page from './layout/Page'
+import fetch from './libs/fetch'
+
+import { useIsDarkMode } from 'hooks/use-theme'
+import useVersion from 'hooks/use-version'
+import ErrorSuspenseWrapper from 'layout/ErrorSuspenseWrapper'
+import { Dashboard, HTTPPages, NotFound, TCPPages, UDPPages } from 'pages'
+import { DashboardSkeleton } from 'pages/dashboard/Dashboard'
+
+export const LIGHT_THEME = lightTheme('blue')
+export const DARK_THEME = darkTheme('blue')
+
+// TODO: Restore the loader.
+const PageLoader = () => (
+  <Page>
+    <Box css={{ position: 'absolute', top: 0, left: 0, right: 0 }}>{/*<Loading />*/}</Box>
+  </Page>
+)
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation()
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export const Routes = () => {
+  const { showHubButton } = useVersion()
+
+  return (
+    <Suspense fallback={<PageLoader />}>
+      {showHubButton && (
+        <Helmet>
+          <script src="https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js"></script>
+        </Helmet>
+      )}
+      <RouterRoutes>
+        <Route
+          path="/"
+          element={
+            <ErrorSuspenseWrapper suspenseFallback={<DashboardSkeleton />}>
+              <Dashboard />
+            </ErrorSuspenseWrapper>
+          }
+        />
+        <Route path="/http/routers" element={<HTTPPages.HttpRouters />} />
+        <Route path="/http/services" element={<HTTPPages.HttpServices />} />
+        <Route path="/http/middlewares" element={<HTTPPages.HttpMiddlewares />} />
+        <Route path="/tcp/routers" element={<TCPPages.TcpRouters />} />
+        <Route path="/tcp/services" element={<TCPPages.TcpServices />} />
+        <Route path="/tcp/middlewares" element={<TCPPages.TcpMiddlewares />} />
+        <Route path="/udp/routers" element={<UDPPages.UdpRouters />} />
+        <Route path="/udp/services" element={<UDPPages.UdpServices />} />
+        <Route path="/http/routers/:name" element={<HTTPPages.HttpRouter />} />
+        <Route path="/http/services/:name" element={<HTTPPages.HttpService />} />
+        <Route path="/http/middlewares/:name" element={<HTTPPages.HttpMiddleware />} />
+        <Route path="/tcp/routers/:name" element={<TCPPages.TcpRouter />} />
+        <Route path="/tcp/services/:name" element={<TCPPages.TcpService />} />
+        <Route path="/tcp/middlewares/:name" element={<TCPPages.TcpMiddleware />} />
+        <Route path="/udp/routers/:name" element={<UDPPages.UdpRouter />} />
+        <Route path="/udp/services/:name" element={<UDPPages.UdpService />} />
+        <Route path="/http" element={<Navigate to="/http/routers" replace />} />
+        <Route path="/tcp" element={<Navigate to="/tcp/routers" replace />} />
+        <Route path="/udp" element={<Navigate to="/udp/routers" replace />} />
+        <Route path="*" element={<NotFound />} />
+      </RouterRoutes>
+    </Suspense>
+  )
+}
+
+const isDev = import.meta.env.NODE_ENV === 'development'
+
+const App = () => {
+  const isDarkMode = useIsDarkMode()
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.remove(LIGHT_THEME)
+      document.documentElement.classList.add(DARK_THEME)
+    } else {
+      document.documentElement.classList.remove(DARK_THEME)
+      document.documentElement.classList.add(LIGHT_THEME)
+    }
+  }, [isDarkMode])
+
+  return (
+    <FaencyProvider>
+      <HelmetProvider>
+        <SWRConfig
+          value={{
+            revalidateOnFocus: !isDev,
+            fetcher: fetch,
+          }}
+        >
+          <HashRouter basename={import.meta.env.VITE_APP_BASE_URL || ''}>
+            <ScrollToTop />
+            <Routes />
+          </HashRouter>
+        </SWRConfig>
+      </HelmetProvider>
+    </FaencyProvider>
+  )
+}
+
+export default App