Wanted Pre-Onboarding Frontend course: the selection assignment

I created the project with CRA and used Tailwind CSS for styling.

For routing, I used React-Router-Dom.

I think the part I spent the most time on was making the button change when the edit button is clicked, and then updating the TodoList state after the edit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const handleUpdateTodo = async (
    id: number,
    checked: boolean,
    changeTodo: string
  ) => {
    if (!token) return;
    const responseTodo = await fetchUpdateToDoApi(
      token,
      id,
      checked,
      changeTodo
    );

    const updateTodoList = todoList.map((todo) => {
      if (todo.id === responseTodo.id) {
        return {
          ...todo,
          isCompleted: checked,
          todo: changeTodo,
        };
      }
      return todo;
    });
    setTodoList(updateTodoList);
  };

When the user types into the edit input and an onClick() event fires, I first pass the todo's id, whether it is checked, and the changed todo text as arguments.

Once those values come in, the function calls fetchUpdateToDoApi, but before that it returns if there is no token value.

Of course, I had already used useEffect() to send the user to the login page when there is no token.

After the request finishes, I have to either fetch the list again or update the changed data, and I chose the latter.

I run map() over the existing todoList, and when the id matches, I spread the todo, change only the checked state and the todo text, and then update the state with the updated todoList through setTodoList().

What I felt doing this assignment: it had been a while since I last built a ToDo List, so it took quite a bit of time.

Still, in some ways my coding seems to have improved a lot compared to when I started. But now I need to get a job, so I should work at building things more completely and faster.

Below is the todoPage I built.