add Project(s)

src/App.js

@@ -1,11 +1,12 @@
 import React from 'react'
-import { About, Tasks, Profile, Navbar } from './components'
+import { About, Tasks, Profile, Projects, Project, Navbar } from './components'
 
-const defaultState = { user: {}, loading: true, tasks: [], search: '', newTask: '' }
+const defaultState = { user: {}, loading: true, tasks: [], search: '', newTask: '', newProject: '', project: 0 }
 
 // hard-coded for now, but can be passed anything and set on state
 const data = { user: { name: 'Scott', role: 'manager' }, component: 'tasks',
-  tasks: [{ id: 0, desc: 'arf'}, { id:1, desc: 'bruf' }, { id: 2, desc: 'crap' }] }
+	       tasks: [{ id: 0, desc: 'arf', project: 1}, { id:1, desc: 'bruf', project: 0 }, { id: 2, desc: 'crap', project: 1 }],
+	       projects: [{ id: 0, name: 'mop'}, { id: 1, name: 'biz'}]}
 
 class App extends React.Component {
   constructor() {
@@ -17,6 +18,9 @@ class App extends React.Component {
     this.addTask = this.addTask.bind(this)
     this.deleteTask = this.deleteTask.bind(this)
     this.completeTask = this.completeTask.bind(this)
+    this.createProject = this.createProject.bind(this)
+    this.editProject = this.editProject.bind(this)
+    this.deleteProject = this.deleteProject.bind(this)
   }
 
   fetchData() {
@@ -46,7 +50,7 @@ class App extends React.Component {
 
   addTask(e) {
     e.preventDefault()
-    this.setState( { tasks: this.state.tasks.concat( { id: this.state.tasks.length, desc: this.state.newTask } ), newTask: '' })
+      this.setState( { tasks: this.state.tasks.concat( { id: this.state.tasks.length, desc: this.state.newTask, project: this.state.project } ), newTask: '' })
   }
   deleteTask(id) {
    this.setState( { tasks: this.state.tasks.filter(t => t.id !== id) })
@@ -59,6 +63,19 @@ class App extends React.Component {
    this.setState( { tasks: otherTasks.concat(completedTask) })
   }
 
+  createProject(e) {
+    e.preventDefault()
+    this.setState( { projects: this.state.projects.concat( { id: this.state.projects.length, name: this.state.newProject }), newProject: '' })
+  }
+  editProject(id) {
+      this.setState( { project: id } )
+      this.navigate('project')
+  }
+  deleteProject(id) {
+    //e.preventDefault()
+    this.setState( { projects: this.state.projects.filter(p => p.id !== id)})
+  }
+
   renderLoading() {
     return <div>Loading...</div>
   }
@@ -68,12 +85,18 @@ class App extends React.Component {
   renderProfile() {
     return <Profile {...this.state} />
   }
+  renderProjects() {
+      return <Projects navigate={this.navigate} handleChange={this.handleChange} createProject={this.createProject} editProject={this.editProject} deleteProject={this.deleteProject} {...this.state} />
+  }
+  renderProject() {
+      return <Project handleChange={this.handleChange} createProject={this.createProject} editProject={this.editProject} deleteProject={this.deleteProject} addTask={this.addTask} completeTask={this.completeTask} deleteTask={this.deleteTask} {...this.state} />
+  }
   renderAbout() {
     return <About {...this.state} />
   }
   renderTasks(filtered, completed) {
     // {...this.state} passes everything on state to the component
-    return <Tasks handleChange={this.handleChange} handleSubmit={this.handleSubmit} addTask={this.addTask} completeTask={this.completeTask} deleteTask={this.deleteTask} filtered={filtered} completed={completed} {...this.state} />
+      return <Tasks handleChange={this.handleChange} handleSubmit={this.handleSubmit} addTask={this.addTask} completeTask={this.completeTask} deleteTask={this.deleteTask} filtered={filtered} completed={completed} editProject={this.editProject} {...this.state} />
   }
   render() {
 
@@ -84,6 +107,8 @@ class App extends React.Component {
        : this.state.component === 'tasks' ? this.renderTasks(filtered, completed)
        : this.state.component === 'about' ? this.renderAbout()
        : this.state.component === 'profile' ? this.renderProfile()
+       : this.state.component === 'projects' ? this.renderProjects()
+       : this.state.component === 'project' ? this.renderProject()
        : this.renderError()
 
 	return (<div>

src/components/index.js

@@ -5,5 +5,7 @@ export { default as Navbar } from './navbar'
 export { default as About } from './about'
 export { default as Tasks } from './tasks'
 export { default as Profile } from './profile'
+export { default as Projects } from './projects'
+export { default as Project } from './project'
 // export {default as CreateASign} from ./create-a-sign.js
 // etc

src/components/navbar.js

@@ -8,9 +8,11 @@ function Navbar(props) {
             { props.appname }
           </div>
 
-          <div className={`nav-item mr-3 ${ props.component === 'tasks' ? "active" : 'disable'}`} onClick={() => props.navigate("tasks") }>Tasks</div>
+	  <div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : ''}`} onClick={() => props.navigate("projects") }>Projects</div>
 
-	  <div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : 'disable'}`} onClick={() => props.navigate("about") }>About</div>
+          <div className={`nav-item mr-3 ${ props.component === 'tasks' ? "active" : ''}`} onClick={() => props.navigate("tasks") }>Tasks</div>
+
+	  <div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : ''}`} onClick={() => props.navigate("about") }>About</div>
 
             <div className="ml-auto>" onClick={() => props.navigate("profile") }>
             <img className="rounded-circle mr-1" alt={props.user.name}

src/components/project.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Tasks from './tasks'
+
+function Project(props) {
+    console.log(props.projects)
+    const filtered = props.tasks.filter(t => t.project === props.project && !t.completed )
+    const completed = props.tasks.filter(t => t.project === props.project && t.completed === true )
+
+    return (
+	<div>
+	    <h2>{props.projects[props.project].name}</h2>
+	    <Tasks {...props} filtered={filtered} completed={completed} />
+	    </div>
+    )
+}
+
+export default Project

src/components/projects.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function Projects(props) {
+    return (
+      <div>
+      <h3 className="mt-4">Projects</h3>
+      <ul className="list-group">
+       {props.projects.map(project =>
+        <li className="list-group-item" key={project.id}>
+        <button className="btn btn-outline-danger mr-1" onClick={ () => props.deleteProject(project.id) }>X</button>
+			   <span onClick={() => props.editProject(project.id) }>{project.name}</span>
+        </li> )
+       }
+       <form className="" onSubmit={ props.createProject }>
+            <input className="form-control input-sm" placeholder="Create Project" name="newProject" value={props.newProject} onChange={props.handleChange} />
+        </form>
+      </ul>
+
+      </div>
+    )
+}
+
+export default Projects

src/components/tasks.js

@@ -15,13 +15,21 @@ function Tasks(props) {
        {filtered.map(task =>
         <li className="list-group-item" key={task.id} onClick={ props.editTask }>
         <button className="btn btn-outline-danger mr-1" onClick={ () => props.deleteTask(task.id) }>X</button>
-        {task.desc}
+		     {task.desc}{props.component === 'project' ? null
+				 : <span className="" onClick={() => props.editProject(task.project) }> ({props.projects[task.project].name})</span>}
         <button className={`btn btn-${ task.completed ? "secondary" : "outline-success" } float-right`} onClick={ () => props.completeTask(task.id) }>&#10004;</button>
         </li> )
        }
-       <form className="" onSubmit={ props.addTask }>
-          <input className="form-control input-sm" placeholder="Add task" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
-        </form>
+       <li className="list-group-item">
+         <form className="row" onSubmit={ props.addTask }>
+          <input className="col form-control input-sm" placeholder="Add task" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
+	  { props.component === 'project' ? null :
+	  <select className="form-control custom-select col" name="project" value={props.project} onChange={ props.handleChange }>
+	  {props.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option> ) }
+	      </select>
+	  }
+      </form>
+       </li>
       </ul>
 
      { completed.length === 0 ? null : <h3 className="mt-4">Completed</h3> }