-
Notifications
You must be signed in to change notification settings - Fork 0
/
Main.jsx
72 lines (58 loc) · 1.79 KB
/
Main.jsx
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
/* eslint eqeqeq: "off", react-hooks/exhaustive-deps: "off"*/
import React, { lazy, Suspense, useEffect } from "react"
import { ThemeProvider, CssBaseline } from '@material-ui/core'
import { Switch, Route, BrowserRouter as Router } from "react-router-dom"
import AppBar from "./AppBar"
import Drawer from "./Drawer"
import Body from "./Body"
//import UserList from "../../pages/user/UserList"
//import DocList from "../../pages/doc/DocList";
//import DocDetail from "../../pages/doc/DocDetail";
import { useLayout } from "../../stores/layout";
import { useAuth } from "../../stores/auth";
import MsgBox from "../app/MsgBox";
import LogIn from "../../pages/auth/LogIn";
import RightDrawer from "./RightDrawer";
const DocDetail = lazy(() => import('../../pages/doc/DocDetail'))
const DocList = lazy(() => import('../../pages/doc/DocList'))
const UserList = lazy(() => import('../../pages/user/UserList'))
export default function Main() {
const { state: layout } = useLayout()
const { isLogged, refresh } = useAuth()
useEffect(() => { refresh() }, [])
return (
<ThemeProvider theme={layout.theme}>
<CssBaseline />
<MsgBox />
{ isLogged() ? (
<Router>
<AppBar />
<Drawer />
<RightDrawer />
<Body>
{/* ATTENTION: the order is important */}
<Switch>
<Route path={["/docs/:id"]}>
<Suspense fallback={<h1>Loading....</h1>}>
<DocDetail />
</Suspense>
</Route>
<Route path={["/docs"]}>
<Suspense fallback={<h1>Loading....</h1>}>
<DocList />
</Suspense>
</Route>
<Route path={["/", "/users"]}>
<Suspense fallback={<h1>Loading....</h1>}>
<UserList />
</Suspense>
</Route>
</Switch>
</Body>
</Router>
) : (
<LogIn />
)}
</ThemeProvider>
)
}