1 files changed, 35 insertions, 5 deletions

diff --git a/frontend/src/index.js b/frontend/src/index.js
index c2a2b74..75cdf35 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,21 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';
-import { Navbar, Nav, Container } from 'react-bootstrap';
+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 Main from './app';
+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 => (
@@ -29,6 +51,9 @@ function Navigation() {
 						{value => <LoginNavigation value={value} />}
 					</UserContext.Consumer>
 				</Nav>
+				<UserContext.Consumer>
+					{value => <SearchBox value={value} />}
+				</UserContext.Consumer>
 				<ThemeSwitcher />
 			</Navbar.Collapse>
 		</Navbar>)}
@@ -39,11 +64,16 @@ function Router() {
 	return <BrowserRouter>
 		<Navigation />
 		<Flash />
-		<Container fluid>
+		<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>