React To-Do App with JSON Server

import React, { useEffect, useState } from "react";
import axios from "axios";
import TaskItem from "./TaskItem";
import TaskFilter from "./TaskFilter";

function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState("all");
  const [selectedTasks, setSelectedTasks] = useState([]);

  // Fetch tasks
  useEffect(() => {
    const fetchTasks = async () => {
      try {
        const response = await axios.get("http://localhost:5000/tasks");
        setTasks(response.data);
      } catch (error) {
        console.error("Error fetching tasks:", error);
      }
    };

    fetchTasks();
  }, []);

  const handleSelectTask = (id) => {
    setSelectedTasks((prev) =>
      prev.includes(id) ? prev.filter((taskId) => taskId !== id) : [...prev, id]
    );
  };

  const handleMarkAllCompleted = async () => {
    try {
      const updatedTasks = await Promise.all(
        tasks.map((task) => {
          if (selectedTasks.includes(task.id) && !task.completed) {
            return axios
              .put(`http://localhost:5000/tasks/${task.id}`, {
                ...task,
                completed: true,
              })
              .then((res) => res.data);
          }
          return task;
        })
      );
      setTasks(updatedTasks);
      setSelectedTasks([]);
    } catch (error) {
      console.error("Error marking tasks as completed:", error);
    }
  };

  const handleDeleteSelected = async () => {
    try {
      await Promise.all(
        selectedTasks.map((id) =>
          axios.delete(`http://localhost:5000/tasks/${id}`)
        )
      );
      setTasks((prev) => prev.filter((task) => !selectedTasks.includes(task.id)));
      setSelectedTasks([]);
    } catch (error) {
      console.error("Error deleting tasks:", error);
    }
  };

  const filteredTasks = tasks.filter((task) => {
    if (filter === "completed") return task.completed;
    if (filter === "pending") return !task.completed;
    return true;
  });

  return (
    <div>
      <TaskFilter filter={filter} setFilter={setFilter} />
      <div className="bulk-actions">
        <button onClick={handleMarkAllCompleted} disabled={!selectedTasks.length}>
          Mark Selected as Completed
        </button>
        <button onClick={handleDeleteSelected} disabled={!selectedTasks.length}>
          Delete Selected
        </button>
      </div>
      <div className="task-list">
        {filteredTasks.length > 0 ? (
          filteredTasks.map((task) => (
            <TaskItem
              key={task.id}
              task={task}
              isSelected={selectedTasks.includes(task.id)}
              onSelect={handleSelectTask}
              onTaskUpdated={(updatedTask) => {
                setTasks((prev) =>
                  prev.map((t) => (t.id === updatedTask.id ? updatedTask : t))
                );
              }}
              onTaskDeleted={(taskId) =>
                setTasks((prev) => prev.filter((t) => t.id !== taskId))
              }
            />
          ))
        ) : (
          <p>No tasks found.</p>
        )}
      </div>
    </div>
  );
}

export default TaskList;