filter tasks

src/App.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { About, Tasks, Navbar } from './components'
 
-const defaultState = { loading: true, search: '' }
+const defaultState = { loading: true, tasks: [], search: '', newTask: '' }
 
 // hard-coded for now, but can be passed anything and set on state
-const data = { user: { name: 'Scott', role: 'manager' }, component: 'tasks' }
+const data = { user: { name: 'Scott', role: 'manager' }, component: 'tasks', tasks: ['arf', 'bruf', 'crap'] }
 
 class App extends React.Component {
   constructor() {
@@ -13,6 +13,7 @@ class App extends React.Component {
     this.navigate = this.navigate.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.addTask = this.addTask.bind(this)
   }
 
   fetchData() {
@@ -39,6 +40,14 @@ class App extends React.Component {
     console.log("Search term: ", this.state.search)
     this.setState({ search: ''})
   }
+
+  addTask(e) {
+    e.preventDefault()
+    console.log("Added task: ", e.target.value)
+    this.setState( { tasks: this.state.tasks.concat(this.state.newTask) })
+  }
+
+
   renderLoading() {
     return <div>Loading...</div>
   }
@@ -48,17 +57,20 @@ class App extends React.Component {
   renderAbout() {
     return <About {...this.state} />
   }
-  renderTasks() {
+  renderTasks(filtered) {
     // {...this.state} passes everything on state to the component
-    return <Tasks {...this.state} />
+    return <Tasks handleChange={this.handleChange} addTask={this.addTask} filtered={filtered} {...this.state} />
   }
   render() {
 
+    const filtered = this.state.tasks.filter(task => this.state.search === task.slice(0, this.state.search.length))
+
     const renderComponent = () => this.state.loading ? this.renderLoading()
-	: this.state.component === 'tasks' ? this.renderTasks()
+	: this.state.component === 'tasks' ? this.renderTasks(filtered)
 	: this.state.component === 'about' ? this.renderAbout()
         : this.renderError()
 
+
 	return (<div>
 	<Navbar handleChange={this.handleChange} handleSubmit={this.handleSubmit} navigate={this.navigate} {...this.state} />
 	{ renderComponent() }

src/components/tasks.js

@@ -2,7 +2,18 @@ import React from 'react'
 
 function Tasks(props) {
   // props are passed from App as {...this.state}
-  return <h1>{`Hello, ${props.user.name}!`}</h1>
+	const filtered = props.filtered || []
+  return (
+    <div>
+      <h1>{`Hello, ${props.user.name}!`}</h1>
+      <p>Your tasks:</p>
+      <ul>{filtered.map(task => <li key={task}>{task}</li> )}</ul>
+      <form>New:
+          <input name="newTask" value={props.newTask} onChange={ props.handleChange } />
+          <button type="submit" onClick={ props.addTask }>Add!!!</button>
+      </form>
+    </div>
+  )
 }
 
 export default Tasks