TODO in react

Part 1

Start with the template from codepen:

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 initial state to include information about whether a task is completed ex. {name: "Wash Dishes", completed: false}
    2. change the views js to show completed tasks differently
    3. write a function to update the completed state of a particular TODO item
  2. add the ability to hide/show completed todos
    1. add some state that can be true or false to determine whether or not to show completed todos
    2. add a button that will toggle that newly-added state between true and false
    3. change the AppView component so that when that state is true, all the todo items get passed to the Todos component, but when the state is false, only non-completed items are passed to the component
  3. Change the counter to show the number of tasks which are completed/uncompleted
  4. stretch: add the ability to re-order todos

Part 2 - Persisting

Start from the codepen below, replacing the hard-coded user name in API_URL with one of your own choosing

You can have a look at the code for the API server, which is deployed at to see what it's capable of:

Extend the application in the following ways:

  1. persist editing task
    1. the server has a POST endpoint at /${userid}/todos/${todoid} that accepts a JSON object that will be merged into the existing todo item and returns the updated task
    2. update the function that toggles completion to send a request to the server to persist the update to the todo item
  2. Don't hard code the "user id"
    1. currently, you're hard-coding a user id into the fetch requests you're making to the API server
    2. update this so it's configurable by the user
    3. make a new state to hold the user id
    4. if it's empty, show an input field allowing the user to type in their user id instead of the TODO list
    5. change the API_URL variable to just include the domain name part and append the user id in the fetch calls
    6. you'll also need to change the useEffect now, since you need to fetch the todos whenever the user id changes
  3. stretch: refactor to use a reducer instead