Todoアプリ - 連携編

import { Todo } from "@/types/todo";

const API_URL = "http://localhost:8000";

export async function fetchTodos(): Promise<Todo[]> {
  const res = await fetch(`${API_URL}/todos`);
  return res.json();
}

export async function createTodo(title: string): Promise<Todo> {
  const res = await fetch(`${API_URL}/todos`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title }),
  });
  return res.json();
}

export async function updateTodo(
  id: number,
  data: { title?: string; completed?: boolean }
): Promise<Todo> {
  const res = await fetch(`${API_URL}/todos/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
  return res.json();
}

export async function deleteTodo(id: number): Promise<void> {
  await fetch(`${API_URL}/todos/${id}`, {
    method: "DELETE",
  });
}

"use client";

import { useState, useEffect } from "react";
import { Todo } from "@/types/todo";
import * as api from "@/lib/api";

export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTitle, setNewTitle] = useState("");
  const [loading, setLoading] = useState(true);

  // 初回読み込み：ページ表示時にAPIからTodoを取得
  useEffect(() => {
    api.fetchTodos().then((data) => {
      setTodos(data);
      setLoading(false);
    });
  }, []);

  // Todo追加：APIに送信してから画面を更新
  const addTodo = async () => {
    if (!newTitle.trim()) return;
    const newTodo = await api.createTodo(newTitle);
    setTodos([...todos, newTodo]);
    setNewTitle("");
  };

  // 完了切り替え：APIに更新を送信
  const toggleTodo = async (id: number, completed: boolean) => {
    const updated = await api.updateTodo(id, {
      completed: !completed,
    });
    setTodos(todos.map(t => t.id === id ? updated : t));
  };

  // 削除：APIから削除してから画面を更新
  const handleDelete = async (id: number) => {
    await api.deleteTodo(id);
    setTodos(todos.filter(t => t.id !== id));
  };

  // ローディング中の表示
  if (loading) {
    return (
      <main className="min-h-screen p-8 max-w-md mx-auto
        text-center text-gray-500">
        Loading...
      </main>
    );
  }

  return (
    <main className="min-h-screen p-8 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-6 text-center">
        Todoリスト
      </h1>

      {/* 追加フォーム */}
      <div className="flex mb-6">
        <input
          type="text"
          value={newTitle}
          onChange={(e) => setNewTitle(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && addTodo()}
          placeholder="新しいTodoを入力..."
          className="flex-1 border rounded-l-lg px-4 py-2"
        />
        <button
          onClick={addTodo}
          className="bg-blue-500 text-white px-4 py-2
            rounded-r-lg hover:bg-blue-600"
        >
          追加
        </button>
      </div>

      {/* Todoリスト */}
      <ul className="space-y-2">
        {todos.map((todo) => (
          <li
            key={todo.id}
            className="flex items-center justify-between
              p-3 bg-gray-50 rounded"
          >
            <div className="flex items-center">
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id, todo.completed)}
                className="mr-3"
              />
              <span
                className={todo.completed ?
                  "line-through text-gray-400" : ""}
              >
                {todo.title}
              </span>
            </div>
            <button
              onClick={() => handleDelete(todo.id)}
              className="text-red-500 hover:text-red-700"
            >
              削除
            </button>
          </li>
        ))}
      </ul>
    </main>
  );
}