refactored backend functionality into controllers
This commit is contained in:
parent
4892efea27
commit
9278713cfa
248
src/App.js
248
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'
|
||||
//console.log(process.env)
|
||||
console.log('Using api at ' + api)
|
||||
const API = process.env.REACT_APP_API || 'http://localhost:1337'
|
||||
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.completeTask = this.completeTask.bind(this)
|
||||
this.createProject = this.createProject.bind(this)
|
||||
this.selectProject = this.selectProject.bind(this)
|
||||
this.selectTask = this.selectTask.bind(this)
|
||||
this.updateTask = this.updateTask.bind(this)
|
||||
this.deleteProject = this.deleteProject.bind(this)
|
||||
this.updateProfile = this.updateProfile.bind(this)
|
||||
|
||||
this.createTask = createTask.bind(this)
|
||||
this.updateTask = updateTask.bind(this)
|
||||
this.deleteTask = deleteTask.bind(this)
|
||||
this.completeTask = completeTask.bind(this)
|
||||
|
||||
this.createProject = createProject.bind(this)
|
||||
this.deleteProject = deleteProject.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}
|
||||
|
||||
20
src/controllers/profile.js
Normal file
20
src/controllers/profile.js
Normal file
@ -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}`)
|
||||
}
|
||||
}
|
||||
69
src/controllers/projects.js
Normal file
69
src/controllers/projects.js
Normal file
@ -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}`)
|
||||
}
|
||||
}
|
||||
112
src/controllers/tasks.js
Normal file
112
src/controllers/tasks.js
Normal file
@ -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')
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user