1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import * as React from 'react';
import { QueryClientProvider } from 'react-query';
import { HashRouter as Router, Route, RouteObject, Routes, useRoutes } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
import APIConfig from '~/components//APIConfig';
import { About } from '~/components/about/About';
import APIDiscovery from '~/components/APIDiscovery';
import ErrorBoundary from '~/components/ErrorBoundary';
import Home from '~/components/Home';
import Loading from '~/components/Loading';
import Loading2 from '~/components/Loading2';
import { Head } from '~/components/shared/Head';
import SideBar from '~/components/SideBar';
import StateProvider from '~/components/StateProvider';
import StyleGuide from '~/components/StyleGuide';
import { queryClient } from '~/misc/query';
import { actions, initialState } from '~/store';
import styles from './App.module.scss';
const { lazy, Suspense } = React;
const Connections = lazy(() => import('~/components/Connections'));
const Config = lazy(() => import('~/components/Config'));
const Logs = lazy(() => import('~/components/Logs'));
const Proxies = lazy(() => import('~/components/proxies/Proxies'));
const Rules = lazy(() => import('~/components/Rules'));
const routes = [
{ path: '/', element: <Home /> },
{ path: '/connections', element: <Connections /> },
{ path: '/configs', element: <Config /> },
{ path: '/logs', element: <Logs /> },
{ path: '/proxies', element: <Proxies /> },
{ path: '/rules', element: <Rules /> },
{ path: '/about', element: <About /> },
process.env.NODE_ENV === 'development' ? { path: '/style', element: <StyleGuide /> } : false,
].filter(Boolean) as RouteObject[];
function SideBarApp() {
return (
<>
<APIDiscovery />
<SideBar />
<div className={styles.content}>
<Suspense fallback={<Loading2 />}>{useRoutes(routes)}</Suspense>
</div>
</>
);
}
const App = () => (
<ErrorBoundary>
<RecoilRoot>
<StateProvider initialState={initialState} actions={actions}>
<QueryClientProvider client={queryClient}>
<div className={styles.app}>
<Head />
<Suspense fallback={<Loading />}>
<Router>
<Routes>
<Route path="/backend" element={<APIConfig />} />
<Route path="*" element={<SideBarApp />} />
</Routes>
</Router>
</Suspense>
</div>
</QueryClientProvider>
</StateProvider>
</RecoilRoot>
</ErrorBoundary>
);
export default App;
|
