src/useTasks.js

import { useReducer, useEffect } from "react";

function getTasks(options) {
  return fetch("/tasks", options).then((res) => res.json());
}

function updateTask(tasks, id, updatedTask) {
  return tasks.map((task) =>
    task.id === id ? { ...task, ...updatedTask } : task
  );
}
function deleteTask(tasks, id) {
  return tasks.filter((task) => task.id !== id);
}

export const reducer = (tasks, action) => {
  switch (action.type) {
    case "UPDATE_TASKS":
      return action.tasks;
    case "ARCHIVE_TASK":
      return updateTask(tasks, action.id, { state: "TASK_ARCHIVED" });
    case "PIN_TASK":
      return updateTask(tasks, action.id, { state: "TASK_PINNED" });
    case "INBOX_TASK":
      return updateTask(tasks, action.id, { state: "TASK_INBOX" });
    case "DELETE_TASK":
      return deleteTask(tasks, action.id);
    case "EDIT_TITLE":
      return updateTask(tasks, action.id, { title: action.title });
    default:
      return tasks;
  }
};

export function useTasks() {
  const [tasks, dispatch] = useReducer(reducer, []);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    getTasks({ signal })
      .then(({ tasks }) => {
        dispatch({ type: "UPDATE_TASKS", tasks });
      })
      .catch((error) => {
        if (!abortController.signal.aborted) {
          console.log(error);
        }
      });

    return () => {
      abortController.abort();
    };
  }, []);

  return [tasks, dispatch];
}