■P247

src/components/TrashedTaskItem.jsx
────────────────
import { ArchiveRestore, Trash2 } from "lucide-react";

export function TrashedTaskItem({ task, onRestore, onDelete }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded bg-slate-200 px-4 py-2">
      <p>{task.title}</p>
      <div className="flex items-center gap-2">
        <button
          type="button"
          className="rounded bg-gray-200 p-2 transition-colors hover:bg-gray-300"
          onClick={() =>
            onRestore(task.id, {
              status: "notStarted", // ステータスを「未着手」で復元
            })
          }
          aria-label={`タスク「${task.title}」をゴミ箱から復元する`}
        >
          <ArchiveRestore className="size-5 text-gray-500" />
        </button>
        <button
          type="button"
          className="rounded bg-gray-200 p-2 transition-colors hover:bg-gray-300"
          onClick={() => onDelete(task.id)}
          aria-label={`タスク「${task.title}」を完全に削除する`}
        >
          <Trash2 className="size-5 text-gray-500" />
        </button>
      </div>
    </div>
  );
};
────────────────


■P248

src/hooks/useTasks.js
────────────────
import { useLocalStorageState } from "./useLocalStorageState";

export function useTasks() {
  const [taskList, setTaskList] = useLocalStorageState("taskList", []);

  const activeTaskList = taskList.filter(({ status }) => status !== "trashed");

  // タスクを作成する
  const createTask = (title) => {
    setTaskList((prevTaskList) => {
      const newTask = {
        id: Date.now(),
        title,
        status: "notStarted",
      };
      return [...prevTaskList, newTask];
    });
  };

  // タスクを更新する
  const updateTask = (id, updatedTask) => {
    setTaskList((prevTaskList) => {
      return prevTaskList.map((task) =>
        task.id === id ? { ...task, ...updatedTask } : task,
      );
    });
  };

  // ゴミ箱のタスク一覧
  const trashedTaskList = taskList.filter(({ status }) => status === "trashed");

  // タスクを削除する
  const deleteTask = (id) => {
    setTaskList((prevTaskList) => {
      return prevTaskList.filter((task) => task.id !== id);
    });
  };

  // ゴミ箱のタスクを全て削除する
  const deleteAllTrashedTasks = () => {
    setTaskList((prevTaskList) => {
      return prevTaskList.filter((task) => task.status !== "trashed");
    });
  };

  return {
    activeTaskList,
    createTask,
    updateTask,
    trashedTaskList,
    deleteTask,
    deleteAllTrashedTasks,
  };
};
────────────────


■P250

src/components/TrashedTaskList.jsx
────────────────
import { Trash2 } from "lucide-react";
import { useTasks } from "../hooks/useTasks";
import { TrashedTaskItem } from "./TrashedTaskItem";

export function TrashedTaskList() {
  const { trashedTaskList, updateTask, deleteTask, deleteAllTrashedTasks } =
    useTasks();

  return (
    <div className="relative">
      <div className="sticky top-0 flex justify-end bg-slate-100 px-10 py-5">
        <button
          onClick={deleteAllTrashedTasks}
          className="flex items-center gap-1 rounded-md p-2 text-sm text-red-500 transition-colors hover:bg-red-50 disabled:cursor-not-allowed"
          disabled={trashedTaskList.length === 0}
        >
          <Trash2 className="size-4" />
          ゴミ箱を空にする
        </button>
      </div>
      <div className="space-y-3 px-10 pb-10">
        {trashedTaskList.length === 0 && (
          <p className="text-center text-sm">ゴミ箱にタスクはありません</p>
        )}
        {trashedTaskList.map((task) => (
          <TrashedTaskItem
            key={task.id}
            task={task}
            onRestore={updateTask}
            onDelete={deleteTask}
          />
        ))}
      </div>
    </div>
  );
};
────────────────


■P251

src/App.jsx
────────────────
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import { AppLayout } from "./components/AppLayout";
import { TaskList } from "./components/TaskList";
import { TrashedTaskList } from "./components/TrashedTaskList";

const router = createBrowserRouter([
  {
    element: (
      <AppLayout>
        <Outlet />
      </AppLayout>
    ),
    children: [
      {
        path: "/",
        element: <TaskList />, // タスク一覧を表示
      },
      {
        path: "/trash",
         element: <TrashedTaskList />,
      },
    ],
  },
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;
────────────────

