تعديل البيانات: Server Actions

// الحل الكامل

// 1. ملف app/actions.js
"use server";

import { revalidatePath } from "next/cache";

export async function addTodo(prevState, formData) {
  const title = formData.get("title")?.trim();

  if (!title || title.length < 2) {
    return { success: false, error: "المهمة يجب أن تكون حرفين على الأقل" };
  }

  await db.todos.create({
    data: { title, completed: false },
  });

  revalidatePath("/todos");
  return { success: true, error: null };
}

export async function deleteTodo(id) {
  await db.todos.delete({ where: { id } });
  revalidatePath("/todos");
}

export async function toggleTodo(id, completed) {
  await db.todos.update({
    where: { id },
    data: { completed: !completed },
  });
  revalidatePath("/todos");
}

// 2. ملف app/todos/page.js
import { Suspense } from "react";
import TodoForm from "@/components/TodoForm";
import TodoList from "@/components/TodoList";

export default function TodosPage() {
  return (
    <div className="p-8 max-w-lg mx-auto">
      <h1 className="text-3xl font-bold mb-8">إدارة المهام</h1>
      <TodoForm />
      <Suspense fallback={<p>جاري تحميل المهام...</p>}>
        <TodoList />
      </Suspense>
    </div>
  );
}

// 3. ملف components/TodoForm.js
"use client";

import { useActionState } from "react";
import { addTodo } from "@/app/actions";

export default function TodoForm() {
  const [state, formAction, isPending] = useActionState(addTodo, {
    success: false,
    error: null,
  });

  return (
    <form action={formAction} className="flex gap-2 mb-6">
      <input
        type="text"
        name="title"
        placeholder="مهمة جديدة..."
        className="flex-1 p-2 border rounded"
        disabled={isPending}
      />
      <button
        type="submit"
        disabled={isPending}
        className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      >
        {isPending ? "..." : "إضافة"}
      </button>
      {state.error && (
        <p className="text-red-500 text-sm w-full">{state.error}</p>
      )}
    </form>
  );
}

// 4. ملف components/TodoList.js
import { db } from "@/lib/database";
import TodoItem from "./TodoItem";

export default async function TodoList() {
  const todos = await db.todos.findMany({
    orderBy: { createdAt: "desc" },
  });

  if (todos.length === 0) {
    return <p className="text-gray-500 text-center">لا توجد مهام بعد</p>;
  }

  return (
    <div className="space-y-2">
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
}

// 5. ملف components/TodoItem.js
"use client";

import { useTransition } from "react";
import { deleteTodo, toggleTodo } from "@/app/actions";

export default function TodoItem({ todo }) {
  const [isPending, startTransition] = useTransition();

  return (
    <div className="flex items-center gap-3 p-3 border rounded-lg">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => {
          startTransition(() => toggleTodo(todo.id, todo.completed));
        }}
        disabled={isPending}
      />
      <span className={todo.completed ? "line-through text-gray-400" : ""}>
        {todo.title}
      </span>
      <button
        onClick={() => {
          startTransition(() => deleteTodo(todo.id));
        }}
        disabled={isPending}
        className="mr-auto text-red-500 text-sm"
      >
        حذف
      </button>
    </div>
  );
}