Extensions to TODO

Part 1

Download the files from the TODO example from lecture:

Extend the application in the following ways:

  1. add the ability to mark a task as complete
    1. change the data structure of the 'sample' tasks in the server 'DB' to include information about whether a task is completed ex. {name: "Wash Dishes", completed: true}
    2. use curl to verify that the tasks are being returned correctly from the "GET /api/tasks" endpoint curl localhost:8082/api/tasks
    3. change the browser js to show completed tasks differently
    4. add an endpoint to the server to mark a task as complete
      (should it be a GET, or POST, PUT, or other? PUT; it's meant for idempotent changes)
      (what information will this endpoint need? at least the id of the task to change, and whether to mark it complete or incomplete; this data could go in the URL or in the body)
    5. test the route you just created with curl how to make a PUT request with curl
    6. add a button to each task which triggers a function that uses fetch() to make an ajax request to the endpoint you created; when it returns successfully, it should modify the task in the client to include the new state
  2. add the ability to re-order todos (with arrow buttons)
    1. write a function on the server that given an array, an index and a direction, returns a new array with the value at the index moved earlier or later)
               const move = (arr, i, dir) => {
      
               }
               move([1,2,3,4,5],0,1) // = [2,1,3,4,5]
               move([1,2,3,4,5],3,-1) // = [1,2,4,3,5]
                
    2. create an endpoint on the server that moves a task (making use of the function you just wrote); test it with curl
      (should it be GET, POST, PUT, other? either POST or PUT are appropriate)
    3. change the client javascript to include two buttons (↑ and ↓))
    4. have each button call a function that uses fetch() to make the appropriate ajax HTTP request
    5. have each button also move the task on the client side

Part 2 - Auth

Download the files from the TODO with auth example from lecture:

Extend the application in the following ways:

  1. Show the user's email when they are logged in
    1. the existing code already queries to check if a user is logged in; check what data that endpoint returns (you may need to extend it to include the email)
    2. use that data to append the user's email somewhere on the page
  2. Show a log out button when logged in; make it log a user out
    1. Make a new endpoint (POST /logout) that deletes the session cookie (set the header: "Set-Cookie": [`userId=-1; Max-Age=-1`])
    2. add a button to the UI (only when logged in)
    3. make the button trigger a function that uses fetch() to make an AJAX request to the logout endpoint
  3. when displaying tasks, only show those for a given user
    1. change the sample data to include which user it belongs to
    2. change the GET /api/tasks filter the tasks based on the user-id in the session (or return an empty list if not logged in)
  4. when creating a task, store whose task it is
    1. change the PUT /api/tasks endpoint to use the user-id in the session when adding a task to the 'DB'
  5. stretch: add the ability to add a partner to a task, have it show on their list too