-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
103 lines (97 loc) · 2.48 KB
/
App.js
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { lazy, useContext, Suspense } from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom';
import './App.css';
import AppShell from './AppShell';
import { AuthProvider, AuthContext } from './context/AuthContext';
import { FetchProvider } from './context/FetchContext';
import FourOFour from './pages/FourOFour';
import Home from './pages/Home';
import Login from './pages/Login';
import Signup from './pages/Signup';
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Inventory = lazy(() => import('./pages/Inventory'));
const Account = lazy(() => import('./pages/Account'));
const Settings = lazy(() => import('./pages/Settings'));
const Users = lazy(() => import('./pages/Users'));
const AuthenticatedRoute = ({ children, ...rest }) => {
const authContext = useContext(AuthContext);
return (
<Route { ...rest } render={() =>
authContext.isAuthenticated() ? (
<AppShell>
{children}
</AppShell>
) : (
<Redirect to='/' />
)
}/>
)
}
const AdminRoute = ({ children, ...rest }) => {
const authContext = useContext(AuthContext);
return (
<Route { ...rest } render={() =>
authContext.isAuthenticated() && authContext.isAdmin() ? (
<AppShell>
{children}
</AppShell>
) : (
<Redirect to='/' />
)
}/>
)
}
const AppRoutes = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/signup">
<Signup />
</Route>
<Route exact path="/">
<Home />
</Route>
<AuthenticatedRoute path='/dashboard'>
<Dashboard />
</AuthenticatedRoute>
<AdminRoute path="/inventory">
<Inventory />
</AdminRoute>
<AuthenticatedRoute path="/account">
<Account />
</AuthenticatedRoute>
<AuthenticatedRoute path="/settings">
<Settings />
</AuthenticatedRoute>
<AdminRoute path="/users">
<Users />
</AdminRoute>
<Route path="*">
<FourOFour />
</Route>
</Switch>
</Suspense>
);
};
function App() {
return (
<Router>
<AuthProvider>
<FetchProvider>
<div className="bg-gray-100">
<AppRoutes />
</div>
</FetchProvider>
</AuthProvider>
</Router>
);
}
export default App;