navbar + search

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Tasks } from './components'
+import { About, Tasks, Navbar } from './components'
 
-const defaultState = { loading: true }
+const defaultState = { loading: true, search: '' }
 
 // hard-coded for now, but can be passed anything and set on state
 const data = { user: { name: 'Scott', role: 'manager' }, component: 'tasks' }
@@ -10,6 +10,9 @@ class App extends React.Component {
   constructor() {
     super()
     this.state = defaultState
+    this.navigate = this.navigate.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
   }
 
   fetchData() {
@@ -23,22 +26,43 @@ class App extends React.Component {
     this.setState({ loading: false, ...data })
   }
 
+  navigate(component) {
+    this.setState( {component} )
+  }
+
+  handleChange(e) {
+    this.setState( { [e.target.name]: e.target.value })
+    console.log( this.state )
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    console.log("Search term: ", this.state.search)
+    this.setState({ search: ''})
+  }
   renderLoading() {
     return <div>Loading...</div>
   }
-
   renderError() {
     return <div>Something went wrong. Please try again.</div>
   }
+  renderAbout() {
+    return <About {...this.state} />
+  }
   renderTasks() {
     // {...this.state} passes everything on state to the component
     return <Tasks {...this.state} />
   }
   render() {
-    if (this.state.loading) return this.renderLoading()
-    if (this.state.error) return this.renderError()
-    if (this.state.component === 'tasks') return this.renderTasks()
-    return <div />
+
+    const renderComponent = () => this.state.loading ? this.renderLoading()
+	: this.state.component === 'tasks' ? this.renderTasks()
+	: this.state.component === 'about' ? this.renderAbout()
+        : this.renderError()
+
+	return (<div>
+	<Navbar handleChange={this.handleChange} handleSubmit={this.handleSubmit} navigate={this.navigate} {...this.state} />
+	{ renderComponent() }
+     </div>)
   }
 }
 

src/components/about.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function About(props) {
+  // props are passed from App as {...this.state}
+  return "we'r here"
+}
+export default About

src/components/index.js

@@ -1,6 +1,8 @@
 // this is just for exporting each component from this folder,
 // so they can all be imported neatly into App using object destructuring
 
+export { default as Navbar } from './navbar'
+export { default as About } from './about'
 export { default as Tasks } from './tasks'
 // export {default as CreateASign} from ./create-a-sign.js
 // etc

src/components/navbar.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+function Navbar(props) {
+  // props are passed from App as {...this.state}
+return (
+<nav className="navbar navbar-expand-lg navbar-light bg-light">
+  <a className="navbar-brand" href="#">&gt;.&lt;</a>
+  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+    <span className="navbar-toggler-icon"></span>
+  </button>
+
+  <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
+    <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
+      <li className={`nav-item ${ props.component === 'about' ? "active" : ''}`}>
+        <a className="nav-link" href="#" onClick={() => {props.navigate("about")} }>About</a>
+      </li>
+      <li className={`nav-item ${ props.component === 'tasks' ? "active" : ''}`}>
+        <a className="nav-link" href="#" onClick={() => props.navigate("tasks") }>Tasks <span className="sr-only">(current)</span>
+</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link disabled" href="#">hi</a>
+      </li>
+    </ul>
+    <form className="form-inline my-2 my-lg-0">
+      <input className="form-control mr-sm-2" type="search" value={props.search} name="search" placeholder="Search" onChange={(e) => props.handleChange(e)} />
+      <button className="btn btn-outline-success my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Search</button>
+    </form>
+  </div>
+</nav>
+)
+}
+
+export default Navbar