blob: c2a2b7407b16e396ed4ff1e9ae86843540a673f5 (
plain)
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
|
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { UserContext, Login, Logout, OauthCallback, AuthenticationProvider } from './auth.js';
import { Flash } from './flash';
import { ThemeContext, ThemeProvider, ThemeSwitcher } from './theme.js';
import Main from './app';
function LoginNavigation(props) {
if (!props.value.is_logged_in) {
return <Nav.Link as={Link} to="/login">Login</Nav.Link>
}
return <>
<Nav.Link as={Link} to="/logout">Logout [{props.value.username}]</Nav.Link>
</>;
}
function Navigation() {
return <ThemeContext.Consumer>
{theme => (
<Navbar bg={theme.bg} variant={theme.bg} expand="lg">
<Navbar.Brand as={Link} to="/">Inventory</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-content" />
<Navbar.Collapse id="navbar-content">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/">Home</Nav.Link>
<UserContext.Consumer>
{value => <LoginNavigation value={value} />}
</UserContext.Consumer>
</Nav>
<ThemeSwitcher />
</Navbar.Collapse>
</Navbar>)}
</ThemeContext.Consumer>;
}
function Router() {
return <BrowserRouter>
<Navigation />
<Flash />
<Container fluid>
<Switch>
<Route path="/login" component={Login} />
<Route path="/logout" component={Logout} />
<Route path="/oauth-callback" component={OauthCallback} />
<Route path="/" component={Main} />
</Switch>
</Container>
</BrowserRouter>;
}
function Root() {
return <AuthenticationProvider>
<ThemeProvider>
<Router />
</ThemeProvider>
</AuthenticationProvider>;
}
ReactDOM.render(
<React.StrictMode>
<Root />
</React.StrictMode>,
document.getElementById('root')
);
|
