Ricardo Müller - React Take-Home Challenge: Task Manager App

[RicardoAm0908]

Issues to address

Task Filter Bug

This was an simple resolution, only changing the return values

From:

if (filter === "completed") return task.completed === false;
if (filter === "pending") return task.completed === true;

To:

if (filter === "completed") return task.completed === true;
if (filter === "pending") return task.completed === false;

By the way, I fixed a React error that existed when initializing the newTask state.

From:

const [newTask, setNewTask] = useState<string>();

To:

const [newTask, setNewTask] = useState<string>("");

Task Deletion Issue

I rewrite this small function because mutating the tasks array from deleting was not correct practice when we are changing (in this case removing) an item from the list.

So I change the handleDeleteTask, to use filters. At this point, I decided to create another function called updateTasksList, to start refactoring the code. At the same moment I create the functionality to save the tasks on the localStore, but gonna talk about further ahead:

From:

    const index = tasks.findIndex((task) => task.id === id);
    if (index !== -1) {
      tasks.splice(index, 1);
      setTasks(tasks);
    }

To:

    const updatedTasks = tasks.filter((item) => item.id !== id);
    updateTasksList(updatedTasks);

And the updateTaskList

     const updateTasksList = (newList: Task[]) => {
        setTasks(newList);
        setOnLocalStorage(newList);
    }

Styling Inconsistencies

To be honest, I find some, but I rewrote most of the style of this project, I'll show one or two that I changed directly, but most of this part I solved when I was styling the page.

Example:

This button style on TaskItem.tsx

From:

    <button
        onClick={() => onDelete(task.id)}
        style={{
          backgroundColor: "red",
          color: "white",
          padding: "4px 8px",
          borderRadius: "4px",
        }}
      >

To:

    <button
        onClick={() => onDelete(task.id)}
        className="rounded bg-red-600 text-white py-2 px-2"
    >

TypeScript Warnings/Errors

Code Refactoring

This two topics I'm gonna talk together, because most of the job is done at the same point.
Starting on code refactoring:

I create an button class, in src\components\Button.tsx , when I only send the custom css that might have, text, type of button (and I use the type to define the colors, so we can have some button pattern) and the action.
In this line, I move all the menu code to it own component, as so the menu items too.

I also rewrite most of the functions on the TaskManager.tsx, having one function to update the list of tasks (state and localStorage), making any function just doing what should do (insert on list, remove from the list or updating data) and not worried about saving, changed all the wrong param names from the tasks (title called name, completed called isCompleted).

I changed how some HTML were written, to go on the way good HTML practices, like use ul and li to lists.

I also started to use useEffect in this project, to manipulate user changes, like the clicks on the menus or to get the initial data from the localstorage.

At the moment that the code creates a newTask, there was a huge bug about the generatedID, because if I add 3 itens, remove 1 and add another, the new item will have the same id as another, because the code was using the lenght of the list. Now I use the reduce to get the bigger Id on the list and Add 1 on it.

Optional Enhancements

Persistence

Like I said before, I add an store called task.ts (src\store\task.ts), who was the control of the localStorage, getting the data from it or rewriting.

I use the get on the start of the code and write again any time that we change some data (add, delete or update). In this project I prefer to use the localStorage and the state together, so we don't have to read the localStorage every time.

Improved UI/UX

src\components\ConfirmationModal.tsx Is the file from a simple Confirmation Modal from the delete proccess.

Talking about another UI/UX improves, I redesign part of the site, using an Dark Theme, breaking the big screens on 2, so the user can se more of the list and add another any time on the left. At the same point I made it responsive to mobile screens.

All the website is more reative, like on click at the task, the status change is on time, updating the list (if there's a filter). If there's no filter, we move the "completed" tasks to the end, because on a task manager, the tasks no completed is more important that the ones that is already done.

I asked the help to some AIs to develop a little logo, so I beliave it makes diference on de UI.
Also, on clicking on the menus, I add as visual feedback, so the user can understand what filter he have chosen.