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
|
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Link, Switch, Route, useHistory } from 'react-router-dom';
import { Navbar, Nav, Container, Form, Button } from 'react-bootstrap';
import { UserContext, Login, Logout, OauthCallback, AuthenticationProvider } from './auth.js';
import { Flash } from './flash';
import { ThemeContext, ThemeProvider, ThemeSwitcher } from './theme.js';
import { AddNode, EditNode, DeleteNode, ViewNode, SearchNodes, 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="/add">Add</Nav.Link>
<Nav.Link as={Link} to="/logout">Logout [{props.value.username}]</Nav.Link>
</>;
}
function SearchBox(props) {
const [query, setQuery] = useState('');
let history = useHistory();
function on_search_change(event) {
setQuery(event.target.value);
}
function on_submit(event) {
event.preventDefault();
//this.setState({search: true});
//console.log('this', this);
history.push('/search?q=' + encodeURIComponent(query));
}
if (!props.value.is_logged_in) {
return '';
}
return <Form inline onSubmit={on_submit} action="/search">
<Form.Control onChange={on_search_change} name="q" />
<Button variant="secondary">Search</Button>
</Form>;
}
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>
<UserContext.Consumer>
{value => <SearchBox value={value} />}
</UserContext.Consumer>
<ThemeSwitcher />
</Navbar.Collapse>
</Navbar>)}
</ThemeContext.Consumer>;
}
function Router() {
return <BrowserRouter>
<Navigation />
<Flash />
<Container>
<Switch>
<Route path="/login" component={Login} />
<Route path="/logout" component={Logout} />
<Route path="/oauth-callback" component={OauthCallback} />
<Route path="/add" component={AddNode} />
<Route path="/node/:id/edit" component={EditNode} />
<Route path="/node/:id/delete" component={DeleteNode} />
<Route path="/node/:id" component={ViewNode} />
<Route path="/search" component={SearchNodes} />
<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')
);
|
