Add task status toggling to task page in todo app (#664)

* Add task done toggling to task page

* Fix wrong condition in example todo app

waspc/examples/todoApp/ext/Todo.js

@@ -99,11 +99,11 @@ const Tasks = (props) => {
 
 const Task = (props) => {
   const handleTaskIsDoneChange = async (event) => {
-    const taskId = parseInt(event.target.id)
-    const newIsDoneVal = event.target.checked
+    const id = parseInt(event.target.id)
+    const isDone = event.target.checked
 
     try {
-      await updateTaskIsDone({ taskId, newIsDoneVal })
+      await updateTaskIsDone({ id, isDone })
     } catch (err) {
       console.log(err)
       window.alert('Error:' + err.message)
@@ -157,7 +157,7 @@ const NewTaskForm = (props) => {
       />
       <Button
         variant="contained" color="primary" type='submit'
-        >
+      >
         Create new task
       </Button>
     </form>

waspc/examples/todoApp/ext/actions.js

@@ -20,15 +20,15 @@ export const createTask = async (task, context) => {
   })
 }
 
-export const updateTaskIsDone = async ({ taskId, newIsDoneVal }, context) => {
+export const updateTaskIsDone = async ({ id, isDone }, context) => {
   if (!context.user) {
     throw new HttpError(403)
   }
 
   const Task = context.entities.Task
   return Task.updateMany({
-    where: { id: taskId, user: { id: context.user.id } },
-    data: { isDone: newIsDoneVal }
+    where: { id, user: { id: context.user.id } },
+    data: { isDone }
   })
 }
 

waspc/examples/todoApp/ext/pages/Task.js

@@ -2,16 +2,25 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 import { useQuery } from '@wasp/queries'
+import updateTaskIsDone from '@wasp/actions/updateTaskIsDone'
 import getTask from '@wasp/queries/getTask.js'
 
 const Todo = (props) => {
   const taskId = parseInt(props.match.params.id)
-  const { data: task, isFetching, error } =
-    useQuery(getTask, { id: taskId })
+  const { data: task, isFetching, error } = useQuery(getTask, { id: taskId })
 
   if (!task) return <div>Task with id {taskId} does not exist.</div>
   if (error) return <div>Error occurred! {error}</div>
 
+  async function toggleIsDone() {
+    try {
+      updateTaskIsDone({ id: task.id, isDone: !task.isDone })
+    } catch (err) {
+      window.alert("Error: " + err.message)
+      console.log(err)
+    }
+  }
+
   return (
     <>
       {isFetching ? (
@@ -22,6 +31,7 @@ const Todo = (props) => {
           <div> id: {task.id} </div>
           <div> description: {task.description} </div>
           <div> is done: {task.isDone ? 'Yes' : 'No'} </div>
+          <button onClick={toggleIsDone}>Mark as {task.isDone ? 'undone' : 'done'}</button>
         </>
       )}
       <br />