Skip to main content

Updating tasks

Todo app isn't done if you can't mark a task as done!

For that, we will need to do two things:

  1. Implement Wasp action that updates the task.
  2. Modify our React code so it calls that action.

Action#

Wasp declaration#

We declare Wasp action:

main.wasp
// ...
action updateTask {  fn: import { updateTask } from "@ext/actions.js",  entities: [Task]}

JS implementation#

We define JS implementation of Wasp action in ext/actions.js:

ext/actions.js
// ...
export const updateTask = async (args, context) => {  return context.entities.Task.update({    where: { id: args.taskId },    data: {      isDone: args.data.isDone    }  })}

React logic#

And we update the React component:

ext/MainPage.js
// ...import updateTask from '@wasp/actions/updateTask'
// ...
const Task = (props) => {  const handleIsDoneChange = async (event) => {    try {      await updateTask({        taskId: props.task.id,        data: { isDone: event.target.checked }      })    } catch (error) {      window.alert('Error while updating task: ' + error.message)    }  }
  return (    <div>      <input        type='checkbox' id={props.task.id}        checked={props.task.isDone}        onChange={handleIsDoneChange}      />      {props.task.description}    </div>  )}// ...

Awesome! We can now tick this task as done ;).