formatting / prettier fix

src/App.js

@@ -1,12 +1,27 @@
 import React from 'react'
 import { About, Tasks, Profile, Projects, Project, Navbar } from './components'
 
-const defaultState = { user: {}, loading: true, tasks: [], search: '', newTask: '', newProject: '', project: 0 }
+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',
+const data = {
-	       tasks: [{ id: 0, desc: 'arf', project: 1}, { id:1, desc: 'bruf', project: 0 }, { id: 2, desc: 'crap', project: 1 }],
+  user: { name: 'Scott', role: 'manager' },
-	       projects: [{ id: 0, name: 'mop'}, { id: 1, name: 'biz'}]}
+  component: 'tasks',
+  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() {
@@ -35,45 +50,58 @@ class App extends React.Component {
   }
 
   navigate(component) {
-    this.setState( {component} )
+    this.setState({ component })
   }
 
   handleChange(e) {
-    this.setState( { [e.target.name]: e.target.value })
+    this.setState({ [e.target.name]: e.target.value })
     //console.log( this.state )
   }
   handleSubmit(e) {
     e.preventDefault()
-    console.log("Search term: ", this.state.search)
+    console.log('Search term: ', this.state.search)
-    this.setState({ search: ''})
+    this.setState({ search: '' })
   }
 
   addTask(e) {
     e.preventDefault()
-      this.setState( { tasks: this.state.tasks.concat( { id: this.state.tasks.length, desc: this.state.newTask, project: this.state.project } ), 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) })
+    this.setState({ tasks: this.state.tasks.filter(t => t.id !== id) })
   }
   completeTask(id) {
-   const otherTasks = this.state.tasks.filter(t=> t.id !== id)
+    const otherTasks = this.state.tasks.filter(t => t.id !== id)
-   const completedTask = this.state.tasks.find(t => t.id === id)
+    const completedTask = this.state.tasks.find(t => t.id === id)
-   completedTask.completed = ! completedTask.completed
+    completedTask.completed = !completedTask.completed
-   console.log(completedTask)
+    console.log(completedTask)
-   this.setState( { tasks: otherTasks.concat(completedTask) })
+    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: '' })
+    this.setState({
+      projects: this.state.projects.concat({
+        id: this.state.projects.length,
+        name: this.state.newProject,
+      }),
+      newProject: '',
+    })
   }
   editProject(id) {
-      this.setState( { project: id } )
+    this.setState({ project: id })
-      this.navigate('project')
+    this.navigate('project')
   }
   deleteProject(id) {
     //e.preventDefault()
-    this.setState( { projects: this.state.projects.filter(p => p.id !== id)})
+    this.setState({ projects: this.state.projects.filter(p => p.id !== id) })
   }
 
   renderLoading() {
@@ -86,35 +114,79 @@ class App extends React.Component {
     return <Profile {...this.state} />
   }
   renderProjects() {
-      return <Projects navigate={this.navigate} handleChange={this.handleChange} createProject={this.createProject} editProject={this.editProject} deleteProject={this.deleteProject} {...this.state} />
+    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} />
+    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} editProject={this.editProject} {...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() {
-
     const completed = this.state.tasks.filter(task => task.completed === true)
-    const filtered = this.state.tasks.filter(task => task.completed !== true && this.state.search === task.desc.slice(0, this.state.search.length))
+    const filtered = this.state.tasks.filter(
+      task =>
+        task.completed !== true &&
+        this.state.search === task.desc.slice(0, this.state.search.length),
+    )
 
-    const renderComponent = () => this.state.loading ? this.renderLoading()
+    const renderComponent = () =>
-       : this.state.component === 'tasks' ? this.renderTasks(filtered, completed)
+      this.state.loading
-       : this.state.component === 'about' ? this.renderAbout()
+        ? this.renderLoading()
-       : this.state.component === 'profile' ? this.renderProfile()
+        : this.state.component === 'tasks'
-       : this.state.component === 'projects' ? this.renderProjects()
+        ? this.renderTasks(filtered, completed)
-       : this.state.component === 'project' ? this.renderProject()
+        : this.state.component === 'about'
-       : this.renderError()
+        ? this.renderAbout()
+        : this.state.component === 'profile'
+        ? this.renderProfile()
+        : this.state.component === 'projects'
+        ? this.renderProjects()
+        : this.state.component === 'project'
+        ? this.renderProject()
+        : this.renderError()
 
-	return (<div>
+    return (
-	<Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} />
+      <div>
-	{ renderComponent() }
+        <Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} />
-     </div>)
+        {renderComponent()}
+      </div>
+    )
   }
 }
 

src/components/index.js

@@ -1,11 +1,6 @@
-// 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 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

@@ -2,24 +2,42 @@ import React from 'react'
 
 function Navbar(props) {
   // props are passed from App as {...this.state}
-    return (
+  return (
-       <nav className="navbar navbar-light bg-light">
+    <nav className="navbar navbar-light bg-light">
-          <div className="navbar-brand ml-2">
+      <div className="navbar-brand ml-2">{props.appname}</div>
-            { props.appname }
-          </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' : ''}`}
+        onClick={() => props.navigate('projects')}
+      >
+        Projects
+      </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 === '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={`nav-item mr-3 ${props.component === 'about' ? 'active' : ''}`}
+        onClick={() => props.navigate('about')}
+      >
+        About
+      </div>
 
-            <div className="ml-auto>" onClick={() => props.navigate("profile") }>
+      <div className="ml-auto>" onClick={() => props.navigate('profile')}>
-            <img className="rounded-circle mr-1" alt={props.user.name}
+        <img
-              width="16px" height="16px" src="/img/default-user-image.png" />
+          className="rounded-circle mr-1"
-	    {`Hello, ${props.user.name}!`}
+          alt={props.user.name}
-          </div>
+          width="16px"
-        </nav>
+          height="16px"
+          src="/img/default-user-image.png"
+        />
+        {`Hello, ${props.user.name}!`}
+      </div>
+    </nav>
   )
 }
 

src/components/profile.js

@@ -1,9 +1,7 @@
 import React from 'react'
 
 function Profile(props) {
-    return (
+  return <div>You are {props.user.name}.</div>
-	<div>You are { props.user.name }.</div>
-    )
 }
 
 export default Profile

src/components/project.js

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

src/components/projects.js

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

src/components/tasks.js

@@ -2,46 +2,99 @@ import React from 'react'
 
 function Tasks(props) {
   // props are passed from App as {...this.state}
-	const filtered = props.filtered || []
+  const filtered = props.filtered || []
-        const completed = props.completed || []
+  const completed = props.completed || []
   return (
     <div>
       <h3 className="mt-4">Your open tasks</h3>
       <form className="form-inline my-2 my-lg-0">
-        <input className="form-control input-sm mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
+        <input
-        <button className="btn btn-outline-secondary my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Show all</button>
+          className="form-control input-sm mr-sm-2"
+          type="search"
+          value={props.search}
+          name="search"
+          placeholder="Filter"
+          onChange={e => props.handleChange(e)}
+        />
+        <button
+          className="btn btn-outline-secondary my-2 my-sm-0"
+          type="submit"
+          onClick={e => props.handleSubmit(e)}
+        >
+          Show all
+        </button>
       </form>
       <ul className="list-group">
-       {filtered.map(task =>
+        {filtered.map(task => (
-        <li className="list-group-item" key={task.id} onClick={ props.editTask }>
+          <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>
+            <button
-		     {task.desc}{props.component === 'project' ? null
+              className="btn btn-outline-danger mr-1"
-				 : <span className="" onClick={() => props.editProject(task.project) }> ({props.projects[task.project].name})</span>}
+              onClick={() => props.deleteTask(task.id)}
-        <button className={`btn btn-${ task.completed ? "secondary" : "outline-success" } float-right`} onClick={ () => props.completeTask(task.id) }>&#10004;</button>
+            >
-        </li> )
+              X
-       }
+            </button>
-       <li className="list-group-item">
+            {task.desc}
-         <form className="row" onSubmit={ props.addTask }>
+            {props.component === 'project' ? null : (
-          <input className="col form-control input-sm" placeholder="Add task" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
+              <span className="" onClick={() => props.editProject(task.project)}>
-	  { props.component === 'project' ? null :
+                {' '}
-	  <select className="form-control custom-select col" name="project" value={props.project} onChange={ props.handleChange }>
+                ({props.projects[task.project].name})
-	  {props.projects.map(p => <option key={p.id} value={p.id}>{p.name}</option> ) }
+              </span>
-	      </select>
+            )}
-	  }
+            <button
-      </form>
+              className={`btn btn-${task.completed ? 'secondary' : 'outline-success'} float-right`}
-       </li>
+              onClick={() => props.completeTask(task.id)}
+            >
+              &#10004;
+            </button>
+          </li>
+        ))}
+        <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> }
+      {completed.length === 0 ? null : <h3 className="mt-4">Completed</h3>}
-     <ul className="list-group">
+      <ul className="list-group">
-     {completed.map(task =>
+        {completed.map(task => (
-        <li className="list-group-item" key={task.id} onClick={ props.editTask }>
+          <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>
+            <button
-        {task.desc}
+              className="btn btn-outline-danger mr-1"
-        <button className={`btn btn-${ task.completed ? "secondary" : "outline-success" } float-right`} onClick={ () => props.completeTask(task.id) }>&#10004;</button>
+              onClick={() => props.deleteTask(task.id)}
-        </li> )
+            >
-     }
+              X
-     </ul>
+            </button>
+            {task.desc}
+            <button
+              className={`btn btn-${task.completed ? 'secondary' : 'outline-success'} float-right`}
+              onClick={() => props.completeTask(task.id)}
+            >
+              &#10004;
+            </button>
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }