refactored backend functionality into controllers

src/App.js

@@ -1,6 +1,23 @@
 import React from 'react'
 import axios from 'axios'
 
+import {
+  createTask,
+  updateTask,
+  deleteTask,
+  selectTask,
+  completeTask,
+} from './controllers/tasks'
+
+import {
+  createProject,
+  //updateProject,
+  deleteProject,
+  selectProject,
+} from './controllers/projects'
+
+import { updateProfile } from './controllers/profile'
+
 import {
   About,
   Tasks,
@@ -11,9 +28,8 @@ import {
   Navbar,
 } from './components'
 
-const api = process.env.REACT_APP_API || 'http://localhost:1337'
+const API = process.env.REACT_APP_API || 'http://localhost:1337'
-//console.log(process.env)
+console.log('Using API at ' + API)
-console.log('Using api at ' + api)
 
 const defaultState = {
   loading: true,
@@ -35,20 +51,24 @@ 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)
+
-    this.deleteTask = this.deleteTask.bind(this)
+    this.createTask = createTask.bind(this)
-    this.completeTask = this.completeTask.bind(this)
+    this.updateTask = updateTask.bind(this)
-    this.createProject = this.createProject.bind(this)
+    this.deleteTask = deleteTask.bind(this)
-    this.selectProject = this.selectProject.bind(this)
+    this.completeTask = completeTask.bind(this)
-    this.selectTask = this.selectTask.bind(this)
+
-    this.updateTask = this.updateTask.bind(this)
+    this.createProject = createProject.bind(this)
-    this.deleteProject = this.deleteProject.bind(this)
+    this.deleteProject = deleteProject.bind(this)
-    this.updateProfile = this.updateProfile.bind(this)
+
+    this.updateProfile = updateProfile.bind(this)
+
+    this.selectTask = selectTask.bind(this)
+    this.selectProject = selectProject.bind(this)
   }
 
   async fetchTasks() {
     try {
-      const { data } = await axios.get(api + '/api/tasks')
+      const { data } = await axios.get(API + '/api/tasks')
       return data
     } catch (error) {
       console.log(error)
@@ -58,7 +78,7 @@ class App extends React.Component {
 
   async fetchProjects() {
     try {
-      const { data } = await axios.get(api + '/api/projects')
+      const { data } = await axios.get(API + '/api/projects')
       return data
     } catch (error) {
       console.log(error)
@@ -88,202 +108,6 @@ class App extends React.Component {
     this.setState({ search: '' })
   }
 
-  async addTask(e) {
-    e.preventDefault()
-    if (!this.state.selectedProjectId) {
-      alert('No project selected, silly!')
-      return
-    }
-    const newTask = {
-      desc: this.state.newTask,
-      projectName: this.state.projects.find(
-        p => p.id === this.state.selectedProjectId,
-      )['name'],
-      // TODO
-      // the backend expects projectName because it creates the project on the fly if none exists with that name
-      // this feature comes at the price that there can't be two independent projects with the same name
-      // which could be handy if users want to have private projects
-    }
-    if (newTask.desc === '') {
-      alert('Task description is empty.')
-      return
-    } else if (!newTask.projectName) {
-      alert('Select a project for new task.')
-      return
-    }
-    try {
-      console.log('Adding task: ', newTask)
-      const { data, error } = await axios.post(api + '/api/tasks', newTask)
-      if (error) {
-        alert('Received error when adding task: ', error)
-      } else if (data.desc && data.projectId) {
-        console.log('Successfully added task:', data)
-        this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
-      } else {
-        console.log('Received malformed data for added task: ', data)
-      }
-    } catch (e) {
-      alert(`Failed to add task: ${e}`)
-    }
-  }
-
-  async updateTask(e, updatedTask) {
-    e.preventDefault()
-    //console.log('updatedTask:', updatedTask)
-    const oldTask = this.state.tasks.find(t => t.id === updatedTask.id)
-    if (JSON.stringify(oldTask) === JSON.stringify(updatedTask)) return
-    updatedTask['projectId'] = parseInt(updatedTask.projectId)
-    try {
-      const { data, error } = await axios.put(
-        api + `/api/tasks/${oldTask.id}`,
-        updatedTask,
-      )
-      if (error) {
-        alert('Received error when updating task: ', error)
-      } else if (data.desc && data.projectId) {
-        const oldTasks = this.state.tasks.filter(t => t.id !== updatedTask.id)
-        this.setState({ tasks: oldTasks.concat(updatedTask) })
-        console.log('Successfully updated task:', data)
-      } else {
-        console.log('Received malformed data when updating task: ', data)
-      }
-    } catch (e) {
-      alert(`Updating task failed: ${e}`)
-    }
-  }
-
-  async deleteTask(id) {
-    this.setState({ tasks: this.state.tasks.filter(t => t.id !== id) })
-    try {
-      const { data, error } = await axios.post(api + `/api/tasks/${id}/delete`)
-      if (error) {
-        alert('Received error when deleting task: ', error)
-      } else {
-        console.log('Successfully deleted task: ', data)
-        this.setState({
-          tasks: this.state.tasks.filter(t => t.id !== data.id),
-          newTask: '',
-        })
-      }
-    } catch (e) {
-      alert('Failed to delete task: ', e)
-    }
-  }
-  async completeTask(id) {
-    const task = this.state.tasks.find(t => t.id === id)
-    if (!task.id) {
-      alert(`Couldn't find task with id ${id}`)
-      return
-    }
-    try {
-      task.completed = !task.completed
-      const { data, error } = await axios.put(
-        api + `/api/tasks/${task.id}`,
-        task,
-      )
-      if (error) {
-        alert(`Received error when completing task ${task.desc}: ${error}`)
-      } else if (data.id) {
-        const otherTasks = this.state.tasks.filter(t => t.id !== id)
-        this.setState({ tasks: otherTasks.concat(data) })
-        console.log(`Completed task:`, data)
-      } else {
-        alert(`Failed to complete task with id ${id}`)
-      }
-    } catch (e) {
-      alert(`Failed to complete task ${task.desc}: ${e}`)
-    }
-  }
-  selectTask(id) {
-    this.setState({ selectedTaskId: id })
-    this.navigate('task')
-  }
-
-  async createProject(e) {
-    e.preventDefault()
-    const project = { name: this.state.newProject }
-    try {
-      const { data, error } = await axios.post(api + '/api/projects', project)
-      if (error) {
-        alert(`Received error when creating project ${project.name}: ${error}`)
-      } else if (data.id) {
-        this.setState({
-          projects: this.state.projects.concat(data),
-          newProject: '',
-        })
-        console.log(`Added project: `, data)
-      } else {
-        alert(`Failed to add project '${project}'.`)
-      }
-    } catch (e) {
-      alert(`Failed to add project '${this.state.newProject}'.`)
-    }
-  }
-
-  selectProject(selectedProjectId) {
-    this.setState({ selectedProjectId })
-    this.navigate('project')
-  }
-  async deleteProject(id) {
-    const project = this.state.projects.find(p => p.id === id)
-    if (!project.id) {
-      alert(`Could not find project with id ${id}.`)
-      return
-    }
-    const tasks = this.state.tasks.filter(t => t.projectId === project.id)
-    if (tasks.length > 0) {
-      if (
-        window.confirm(
-          `Project ${project.name} has ${tasks.length} tasks. Are you sure?`,
-        )
-      ) {
-        this.setState({
-          tasks: this.state.tasks.filter(t => t.projectId !== project.id),
-        })
-        console.log(
-          `Removed ${tasks.length} tasks of project '${project.name}'.`,
-        )
-      } else {
-        return
-      }
-    }
-    try {
-      const { data, error } = await axios.post(
-        api + `/api/projects/${project.id}/delete`,
-      )
-      if (error) {
-        alert(`Received error when deleting project ${project.name}: ${error}`)
-      } else if (data.name) {
-        console.log('Deleted project:', data)
-        this.setState({
-          projects: this.state.projects.filter(p => p.id !== project.id),
-        })
-        this.navigate('projects')
-      } else {
-        alert(`Failed to delete project '${project.name}'.`)
-      }
-    } catch (e) {
-      alert(`Failed to delete project '${project.name}': ${e}`)
-    }
-  }
-  async updateProfile(e) {
-    e.preventDefault()
-    const user = {} // TODO update properties from form
-    console.log(e.target)
-    try {
-      const { data, error } = await axios.put(api + `/api/user`, user)
-      console.log('Trying to update user profile: ', user)
-      if (error) {
-        alert('Received error when updating user profile: ', error)
-      } else if (data) {
-        this.setState({ user: data })
-        console.log('Successfully updated user profile:', data)
-      }
-    } catch (e) {
-      alert(`Updating user profile failed: ${e}`)
-    }
-  }
-
   renderLoading() {
     return <div>Loading...</div>
   }
@@ -320,7 +144,7 @@ class App extends React.Component {
         selectProject={this.selectProject}
         selectTask={this.selectTask}
         deleteProject={this.deleteProject}
-        addTask={this.addTask}
+        createTask={this.createTask}
         completeTask={this.completeTask}
         deleteTask={this.deleteTask}
         navigate={this.navigate}
@@ -336,7 +160,7 @@ class App extends React.Component {
       <Tasks
         handleChange={this.handleChange}
         handleSubmit={this.handleSubmit}
-        addTask={this.addTask}
+        createTask={this.createTask}
         completeTask={this.completeTask}
         deleteTask={this.deleteTask}
         filtered={filtered}

src/controllers/profile.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+const API = process.env.REACT_APP_API || 'http://localhost:1337'
+
+export async function updateProfile(e) {
+  e.preventDefault()
+  const user = {} // TODO update properties from form
+  console.log(e.target)
+  try {
+    const { data, error } = await axios.put(API + `/api/user`, user)
+    console.log('Trying to update user profile: ', user)
+    if (error) {
+      alert('Received error when updating user profile: ', error)
+    } else if (data) {
+      this.setState({ user: data })
+      console.log('Successfully updated user profile:', data)
+    }
+  } catch (e) {
+    alert(`Updating user profile failed: ${e}`)
+  }
+}

src/controllers/projects.js

@@ -0,0 +1,69 @@
+import axios from 'axios'
+const API = process.env.REACT_APP_API || 'http://localhost:1337'
+
+export async function createProject(e) {
+  e.preventDefault()
+  const project = { name: this.state.newProject }
+  try {
+    const { data, error } = await axios.post(API + '/api/projects', project)
+    if (error) {
+      alert(`Received error when creating project ${project.name}: ${error}`)
+    } else if (data.id) {
+      this.setState({
+        projects: this.state.projects.concat(data),
+        newProject: '',
+      })
+      console.log(`Added project: `, data)
+    } else {
+      alert(`Failed to add project '${project}'.`)
+    }
+  } catch (e) {
+    alert(`Failed to add project '${this.state.newProject}'.`)
+  }
+}
+
+export function selectProject(selectedProjectId) {
+  this.setState({ selectedProjectId })
+  this.navigate('project')
+}
+
+export async function deleteProject(id) {
+  const project = this.state.projects.find(p => p.id === id)
+  if (!project.id) {
+    alert(`Could not find project with id ${id}.`)
+    return
+  }
+  const tasks = this.state.tasks.filter(t => t.projectId === project.id)
+  if (tasks.length > 0) {
+    if (
+      window.confirm(
+        `Project ${project.name} has ${tasks.length} tasks. Are you sure?`,
+      )
+    ) {
+      this.setState({
+        tasks: this.state.tasks.filter(t => t.projectId !== project.id),
+      })
+      console.log(`Removed ${tasks.length} tasks of project '${project.name}'.`)
+    } else {
+      return
+    }
+  }
+  try {
+    const { data, error } = await axios.post(
+      API + `/api/projects/${project.id}/delete`,
+    )
+    if (error) {
+      alert(`Received error when deleting project ${project.name}: ${error}`)
+    } else if (data.name) {
+      console.log('Deleted project:', data)
+      this.setState({
+        projects: this.state.projects.filter(p => p.id !== project.id),
+      })
+      this.navigate('projects')
+    } else {
+      alert(`Failed to delete project '${project.name}'.`)
+    }
+  } catch (e) {
+    alert(`Failed to delete project '${project.name}': ${e}`)
+  }
+}

src/controllers/tasks.js

@@ -0,0 +1,112 @@
+import axios from 'axios'
+const API = process.env.REACT_APP_API || 'http://localhost:1337'
+
+export async function createTask(e) {
+  e.preventDefault()
+  if (!this.state.selectedProjectId) {
+    alert('No project selected, silly!')
+    return
+  }
+  const newTask = {
+    desc: this.state.newTask,
+    projectName: this.state.projects.find(
+      p => p.id === this.state.selectedProjectId,
+    )['name'],
+    // TODO
+    // the backend expects projectName because it creates the project on the fly if none exists with that name
+    // this feature comes at the price that there can't be two independent projects with the same name
+    // which could be handy if users want to have private projects
+  }
+  if (newTask.desc === '') {
+    alert('Task description is empty.')
+    return
+  } else if (!newTask.projectName) {
+    alert('Select a project for new task.')
+    return
+  }
+  try {
+    console.log('Adding task: ', newTask)
+    const { data, error } = await axios.post(API + '/api/tasks', newTask)
+    if (error) {
+      alert('Received error when adding task: ', error)
+    } else if (data.desc && data.projectId) {
+      console.log('Successfully added task:', data)
+      this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
+    } else {
+      console.log('Received malformed data for added task: ', data)
+    }
+  } catch (e) {
+    alert(`Failed to add task: ${e}`)
+  }
+}
+
+export async function updateTask(e, updatedTask) {
+  e.preventDefault()
+  //console.log('updatedTask:', updatedTask)
+  const oldTask = this.state.tasks.find(t => t.id === updatedTask.id)
+  if (JSON.stringify(oldTask) === JSON.stringify(updatedTask)) return
+  updatedTask['projectId'] = parseInt(updatedTask.projectId)
+  try {
+    const { data, error } = await axios.put(
+      API + `/api/tasks/${oldTask.id}`,
+      updatedTask,
+    )
+    if (error) {
+      alert('Received error when updating task: ', error)
+    } else if (data.desc && data.projectId) {
+      const oldTasks = this.state.tasks.filter(t => t.id !== updatedTask.id)
+      this.setState({ tasks: oldTasks.concat(updatedTask) })
+      console.log('Successfully updated task:', data)
+    } else {
+      console.log('Received malformed data when updating task: ', data)
+    }
+  } catch (e) {
+    alert(`Updating task failed: ${e}`)
+  }
+}
+
+export async function deleteTask(id) {
+  this.setState({ tasks: this.state.tasks.filter(t => t.id !== id) })
+  try {
+    const { data, error } = await axios.post(API + `/api/tasks/${id}/delete`)
+    if (error) {
+      alert('Received error when deleting task: ', error)
+    } else {
+      console.log('Successfully deleted task: ', data)
+      this.setState({
+        tasks: this.state.tasks.filter(t => t.id !== data.id),
+        newTask: '',
+      })
+    }
+  } catch (e) {
+    alert('Failed to delete task: ', e)
+  }
+}
+
+export async function completeTask(id) {
+  const task = this.state.tasks.find(t => t.id === id)
+  if (!task.id) {
+    alert(`Couldn't find task with id ${id}`)
+    return
+  }
+  try {
+    task.completed = !task.completed
+    const { data, error } = await axios.put(API + `/api/tasks/${task.id}`, task)
+    if (error) {
+      alert(`Received error when completing task ${task.desc}: ${error}`)
+    } else if (data.id) {
+      const otherTasks = this.state.tasks.filter(t => t.id !== id)
+      this.setState({ tasks: otherTasks.concat(data) })
+      console.log(`Completed task:`, data)
+    } else {
+      alert(`Failed to complete task with id ${id}`)
+    }
+  } catch (e) {
+    alert(`Failed to complete task ${task.desc}: ${e}`)
+  }
+}
+
+export function selectTask(id) {
+  this.setState({ selectedTaskId: id })
+  this.navigate('task')
+}