updated src/App.js, src/tasks.js, src/projects/js to fetch API data

src/App.js

@@ -1,26 +1,18 @@
 import React from 'react'
+import axios from 'axios'
+
 import { About, Tasks, Profile, Projects, Project, Navbar } from './components'
 
 const defaultState = {
-  user: {},
+  user: { name: 'Scott' },
   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', project: 1 },
-    { id: 1, desc: 'bruf', project: 0 },
-    { id: 2, desc: 'crap', project: 1 },
-  ],
-  projects: [{ id: 0, name: 'mop' }, { id: 1, name: 'biz' }],
+  project: {},
+  projects: [],
+  component: 'projects',
 }
 
 class App extends React.Component {
@@ -38,15 +30,29 @@ class App extends React.Component {
     this.deleteProject = this.deleteProject.bind(this)
   }
 
-  fetchData() {
-    // later this can be an API request to some backend, or
-    // can get passed data from the native app
-    return data
+  async fetchTasks() {
+    console.log('Fetching tasks...')
+    const { data } = await axios.get('/api/tasks')
+    await this.setState({ tasks: data })
+  }
+
+  async fetchProjects() {
+    console.log('Fetching projects...')
+    const { data } = await axios.get('/api/projects')
+    await this.setState({ projects: data })
+  }
+
+  async fetchData() {
+    await this.fetchTasks()
+    await this.fetchProjects()
+    await this.setState({ loading: false })
+    await console.log(
+      'Ok, everything should be loaded now and nothing should render after this without input!'
+    )
   }
 
   componentDidMount() {
-    const data = this.fetchData()
-    this.setState({ loading: false, ...data })
+    this.fetchData()
   }
 
   navigate(component) {
@@ -55,7 +61,6 @@ class App extends React.Component {
 
   handleChange(e) {
     this.setState({ [e.target.name]: e.target.value })
-    //console.log( this.state )
   }
   handleSubmit(e) {
     e.preventDefault()
@@ -95,13 +100,19 @@ class App extends React.Component {
       newProject: '',
     })
   }
-  editProject(id) {
-    this.setState({ project: id })
+
+  // TODO: 'editProject' sounds like the functionality refers to editing, not
+  // just setting it on the state, so this should maybe be renamed to
+  // selectProject
+  editProject(selectedProjectId) {
+    this.setState({ selectedProjectId })
     this.navigate('project')
   }
-  deleteProject(id) {
+  async 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) })
+    await axios.post(`/api/projects/${id}/delete`)
+    // TODO: some delete success function
   }
 
   renderLoading() {
@@ -143,7 +154,6 @@ class App extends React.Component {
     return <About {...this.state} />
   }
   renderTasks(filtered, completed) {
-    // {...this.state} passes everything on state to the component
     return (
       <Tasks
         handleChange={this.handleChange}
@@ -159,11 +169,12 @@ class App extends React.Component {
     )
   }
   render() {
+    console.log(this.state)
     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),
+        this.state.search === task.desc.slice(0, this.state.search.length)
     )
 
     const renderComponent = () =>
@@ -183,7 +194,11 @@ class App extends React.Component {
 
     return (
       <div>
-        <Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} />
+        <Navbar
+          handleChange={this.handleChange}
+          navigate={this.navigate}
+          {...this.state}
+        />
         {renderComponent()}
       </div>
     )

src/components/project.js

@@ -2,13 +2,19 @@ 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)
+  const projectName =
+    props.projects.find(p => p.id === props.selectedProjectId).name || 'Default'
+  const filtered = props.tasks.filter(
+    t => t.projectId === props.selectedProjectId && !t.completed
+  )
+  const completed = props.tasks.filter(
+    t =>
+      (t.projectId === props.selectedProjectId && t.completed === true) || null
+  )
 
   return (
     <div>
-      <h2>{props.projects[props.project].name}</h2>
+      <h2>{projectName}</h2>
       <Tasks {...props} filtered={filtered} completed={completed} />
     </div>
   )

src/components/projects.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 function Projects(props) {
+  console.log('PROJECTS PROPS', props)
   return (
     <div>
       <h3 className="mt-4">Projects</h3>
@@ -13,7 +14,11 @@ function Projects(props) {
             >
               X
             </button>
-            <span onClick={() => props.editProject(project.id)}>{project.name}</span>
+            {props.selectedProjectId ? null : (
+              <span onClick={() => props.editProject(project.id)}>
+                {project.name}{' '}
+              </span>
+            )}
           </li>
         ))}
         <form className="" onSubmit={props.createProject}>