09 Practice Project Bug with the tasks when mooving from one project to another project we can see the tasks of another project

[DotanMezushan]

The issue was that the full list of tasks (tasks) was not filtered by the project id (projectId). As a result, when switching between projects, tasks from all projects were displayed instead of showing only the tasks belonging to the selected project.

The solution was to filter the tasks in the SelectedProject component so that only the tasks associated with the selected project are included.

import Tasks from "./Tasks.jsx";

export default function SelectedProject({
  project,
  onDelete,
  onAddTask,
  onDeleteTask,
  tasks
}) {
  const formatedDate = new Date(project.dueDate).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  const projectTasks = tasks.filter((task) => task.projectId === project.id);
  
  return (
    <div className="w-[35rem] mt-16">
      <header className="pb-4 mb-4 border-b-2 border-stone-300 ">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold text-stone-600 mb-2">
            {project.title}
          </h1>
          <button
            onClick={onDelete}
            className="text-stone-600 hover:text-stone-950"
          >
            Delete
          </button>
        </div>
        <p className="mb-4 text-stone-400">{formatedDate}</p>
        <p className="text-stone-600 whitespace-pre-wrap">
          {project.description}
        </p>
      </header>
      <Tasks onAdd={onAddTask} onDelete={onDeleteTask} tasks={projectTasks} />
    </div>
  );
}