notnull/tasks-mockup
2
0
Fork 0
Code Issues 5 Pull Requests 1 Releases Wiki Activity

edit add task update functionality

Browse Source
This commit is contained in:
notnull 2019-06-22 16:31:34 -04:00
parent 82d1bb966b
commit 2c27754d88
3 changed files with 177 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/App.js
View File

@ -1,7 +1,15 @@
import React from 'react' import React from 'react'
import axios from 'axios' import axios from 'axios'
import { About, Tasks, Task, Profile, Projects, Project, Navbar } from './components' import {
About,
Tasks,
UpdateTask,
Profile,
Projects,
Project,
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(process.env)
@ -82,7 +90,9 @@ class App extends React.Component {
e.preventDefault() e.preventDefault()
const newTask = { const newTask = {
desc: this.state.newTask, desc: this.state.newTask,
projectName: this.state.projects.find(p => p.id === this.state.selectedProjectId)['name'], projectName: this.state.projects.find(
p => p.id === this.state.selectedProjectId,
)['name'],
// TODO // TODO
// the backend expects projectName because it creates the project on the fly if none exists with that name // 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 // this feature comes at the price that there can't be two independent projects with the same name
@ -111,19 +121,24 @@ class App extends React.Component {
} }
} }
async updateTask(e) { async updateTask(e, updatedTask) {
e.preventDefault() e.preventDefault()
const task = this.state.tasks.find(t => t.id === this.state.selectedTaskId) console.log('updatedTask:', updatedTask)
// TODO update properties from form const oldTask = this.state.tasks.find(
console.log(e.target) t => t.id === this.state.selectedTaskId,
)
if (JSON.stringify(oldTask) === JSON.stringify(updatedTask)) return
try { try {
const { data, error } = await axios.put(api + `/api/tasks/${task.id}`, task) const { data, error } = await axios.put(
console.log('Tried to update task.') api + `/api/tasks/${oldTask.id}`,
updatedTask,
)
if (error) { if (error) {
alert('Received error when updating task: ', error) alert('Received error when updating task: ', error)
} else if (data.desc && data.projectId) { } 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) console.log('Successfully updated task:', data)
// TODO this.setState({ tasks: this.state.tasks.concat(data), newTask: '' })
} else { } else {
console.log('Received malformed data when updating task: ', data) console.log('Received malformed data when updating task: ', data)
} }
@ -140,7 +155,10 @@ class App extends React.Component {
alert('Received error when deleting task: ', error) alert('Received error when deleting task: ', error)
} else { } else {
console.log('Successfully deleted task: ', data) console.log('Successfully deleted task: ', data)
this.setState({ tasks: this.state.tasks.filter(t => t.id !== data.id), newTask: '' }) this.setState({
tasks: this.state.tasks.filter(t => t.id !== data.id),
newTask: '',
})
} }
} catch (e) { } catch (e) {
alert('Failed to delete task: ', e) alert('Failed to delete task: ', e)
@ -154,7 +172,10 @@ class App extends React.Component {
} }
try { try {
task.completed = !task.completed task.completed = !task.completed
const { data, error } = await axios.put(api + `/api/tasks/${task.id}`, task) const { data, error } = await axios.put(
api + `/api/tasks/${task.id}`,
task,
)
if (error) { if (error) {
alert(`Received error when completing task ${task.desc}: ${error}`) alert(`Received error when completing task ${task.desc}: ${error}`)
} else if (data.id) { } else if (data.id) {
@ -206,20 +227,32 @@ class App extends React.Component {
} }
const tasks = this.state.tasks.filter(t => t.projectId === project.id) const tasks = this.state.tasks.filter(t => t.projectId === project.id)
if (tasks.length > 0) { if (tasks.length > 0) {
if (window.confirm(`Project ${project.name} has ${tasks.length} tasks. Are you sure?`)) { if (
this.setState({ tasks: this.state.tasks.filter(t => t.projectId !== project.id) }) window.confirm(
console.log(`Removed ${tasks.length} tasks of project '${project.name}'.`) `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 { } else {
return return
} }
} }
try { try {
const { data, error } = await axios.post(api + `/api/projects/${project.id}/delete`) const { data, error } = await axios.post(
api + `/api/projects/${project.id}/delete`,
)
if (error) { if (error) {
alert(`Received error when deleting project ${project.name}: ${error}`) alert(`Received error when deleting project ${project.name}: ${error}`)
} else if (data.name) { } else if (data.name) {
console.log('Deleted project:', data) console.log('Deleted project:', data)
this.setState({ projects: this.state.projects.filter(p => p.id !== project.id) }) this.setState({
projects: this.state.projects.filter(p => p.id !== project.id),
})
this.navigate('projects') this.navigate('projects')
} else { } else {
alert(`Failed to delete project '${project.name}'.`) alert(`Failed to delete project '${project.name}'.`)
@ -285,9 +318,9 @@ class App extends React.Component {
/> />
) )
} }
renderTask() { renderUpdateTask() {
return ( return (
<Task <UpdateTask
handleChange={this.handleChange} handleChange={this.handleChange}
updateTask={this.updateTask} updateTask={this.updateTask}
navigate={this.navigate} navigate={this.navigate}
@ -299,7 +332,9 @@ class App extends React.Component {
//console.log(this.state) //console.log(this.state)
// TODO refactor task filtering // TODO refactor task filtering
const completed = const completed =
(this.state.tasks && this.state.tasks.filter(task => task.completed === true)) || [] (this.state.tasks &&
this.state.tasks.filter(task => task.completed === true)) ||
[]
const filtered = const filtered =
(this.state.tasks && (this.state.tasks &&
this.state.tasks.filter( this.state.tasks.filter(
@ -315,7 +350,7 @@ class App extends React.Component {
: this.state.component === 'tasks' : this.state.component === 'tasks'
? this.renderTasks(filtered, completed) ? this.renderTasks(filtered, completed)
: this.state.component === 'task' : this.state.component === 'task'
? this.renderTask() ? this.renderUpdateTask()
: this.state.component === 'about' : this.state.component === 'about'
? this.renderAbout() ? this.renderAbout()
: this.state.component === 'profile' : this.state.component === 'profile'
@ -328,7 +363,11 @@ class App extends React.Component {
return ( return (
<div> <div>
<Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} /> <Navbar
handleChange={this.handleChange}
navigate={this.navigate}
{...this.state}
/>
{renderComponent()} {renderComponent()}
</div> </div>
) )

2
src/components/index.js
View File

@ -1,7 +1,7 @@
export { default as Navbar } from './navbar' export { default as Navbar } from './navbar'
export { default as About } from './about' export { default as About } from './about'
export { default as Tasks } from './tasks' export { default as Tasks } from './tasks'
export { default as Task } from './task' export { default as UpdateTask } from './update-task'
export { default as Profile } from './profile' export { default as Profile } from './profile'
export { default as Projects } from './projects' export { default as Projects } from './projects'
export { default as Project } from './project' export { default as Project } from './project'

172
src/components/update-task.js
View File

@ -1,61 +1,121 @@
import React from 'react' import React from 'react'
function Task(props) { // TODO
if (!props.selectedTaskId) { // if (!this.props.selectedTaskId) {
props.navigate('tasks') // props.navigate('tasks')
return null // return null
// }
class UpdateTask extends React.Component {
constructor(props) {
super(props)
const task = props.tasks.find(t => t.id === props.selectedTaskId)
this.state = task
this.handleChange = this.handleChange.bind(this)
} }
const task = props.tasks.find(t => t.id === props.selectedTaskId)
console.log(task)
return ( handleChange(e) {
<div> this.setState({ [e.target.name]: e.target.value })
<h2>Task: {task.desc}</h2> }
<form className="form-group" name="task">
<ul className="list-group"> render() {
<li className="list-group-item row"> console.log('inside of the task form: ', this.state)
<span className="col">completed:</span> const oldDesc = this.props.tasks.find(t => t.id === this.state.id)['desc']
<input return (
className="col" <div>
type="checkbox" <h2>Task: {oldDesc}</h2>
name="completed" <form>
value={task.completed} <div className="form-group row">
onChange={props.handleChange} <label htmlFor="desc" className="col-sm-2 col-form-label">
/> Task Description:
</li> </label>
<li className="list-group-item row"> <div className="col-sm-10">
<span className="col">created:</span> <input
<span className="col">{task.createdAt}</span> type="text"
</li> className="form-control"
<li className="list-group-item row"> name="desc"
<span className="col-sm-1">project:</span> value={this.state.desc}
<select onChange={this.handleChange}
className="col-sm-6" />
name="taskNewProjectId" </div>
onChange={props.handleChange} </div>
defaultValue={task.projectId}
> <div className="form-group row">
{props.projects.map(p => { <label htmlFor="projectName" className="col-sm-2 col-form-label">
return ( Project
<option key={p.id} value={p.id} onChange={props.handleChange}> </label>
{p.name} <div className="col-sm-10">
</option> <select
) className="form-control col-sm-6"
})} name="taskNewProjectId"
</select> onChange={this.handleChange}
</li> defaultValue={this.state.projectId}
<li className="list-group-item row"> >
<input {this.props.projects.map(p => {
className="btn btn-outline-success col" return (
type="submit" <option
onClick={props.updateTask} key={p.id}
value="Save" value={p.id}
/> onChange={this.props.handleChange}
</li> >
</ul> {p.name}
</form> </option>
</div> )
) })}
</select>
</div>
</div>
<div className="form-group row">
<label htmlFor="completed" className="col-sm-2 col-form-label">
completed
</label>
<div className="col-sm-10">
<button
type="button"
className={`form-control btn ${
this.state.completed
? 'btn-outline-secondary'
: 'btn-outline-success'
}`}
name="completed"
value={this.state.completed}
onClick={() =>
this.setState({ completed: !this.state.completed })
}
>
{this.state.completed ? 'Mark Incomplete' : 'Mark Complete'}
</button>
</div>
</div>
<div className="form-group row">
<label htmlFor="createdAt" className="col-sm-2 col-form-label">
CreatedAt
</label>
<div className="col-sm-10">
<input
className="form-control"
name="createdAt"
value={this.state.createdAt}
readOnly
/>
</div>
</div>
<div className="form-group row">
<div className="col-sm-10">
<button
type="submit"
className="btn btn-primary"
onClick={e => this.props.updateTask(e, this.state)}
>
Save
</button>
</div>
</div>
</form>
</div>
)
}
} }
export default UpdateTask
export default Task