■P243

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

export function useLocalStorageState(key, initialValue) {
  const [state, setState] = useState(() => {
    // ローカルストレージから初期値を取得
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  const setLocalStorageState = (value) => {
    setState((prevState) => {
      // 新しい状態を計算
      const newState =
        typeof value === "function" ? value(prevState) : value; // 関数の場合、現在の状態を引数にして呼び出し

      // ローカルストレージに新しい状態を保存
      localStorage.setItem(key, JSON.stringify(newState));

      // 新しい状態を返して状態を更新
      return newState;
    });
  };

  return [state, setLocalStorageState];
}
────────────────


■P244

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,
      );
    });
  };

  return {
    activeTaskList,
    createTask,
    updateTask,
  };
};
────────────────


■P245

src/components/TaskList.jsx
────────────────
import { CreateTaskForm } from "./CreateTaskForm";
import { TaskItem } from "./TaskItem";
import { useTasks } from "../hooks/useTasks";

export function TaskList() {
  const { activeTaskList, createTask, updateTask } = useTasks();

  return (
    <div className="relative">
      <div className="sticky top-0 flex flex-col items-end gap-2 bg-slate-100 px-10 py-5">
        <div className="w-full">
          <CreateTaskForm onSubmit={createTask} />
        </div>
      </div>
      <div className="space-y-3 px-10 pb-10">
        {activeTaskList.length === 0 ? (
          <p className="text-center text-sm">タスクがありません</p>
        ) : (
          activeTaskList.map((task) => (
            <TaskItem key={task.id} task={task} onChange={updateTask} />
          ))
        )}
      </div>
    </div>
  );
};
────────────────

