نظام التخزين (Cache Components)

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

// 1. ملف lib/products.js
import { cacheLife, cacheTag } from "next/cache";
import { db } from "./database";

export async function getProducts(categoryId) {
  "use cache";
  cacheLife("hours");
  cacheTag("products");

  console.log("جلب المنتجات من قاعدة البيانات");
  return await db.products.findMany({
    where: categoryId ? { categoryId } : {},
    orderBy: { createdAt: "desc" },
  });
}

export async function getProduct(id) {
  "use cache";
  cacheLife({ revalidate: 600 }); // 10 دقائق
  cacheTag(`product-${id}`);

  console.log(`جلب المنتج ${id} من قاعدة البيانات`);
  return await db.products.findUnique({ where: { id } });
}

export async function getCategories() {
  "use cache";
  cacheLife("days");
  cacheTag("categories");

  return await db.categories.findMany();
}

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

import { revalidateTag } from "next/cache";
import { redirect } from "next/navigation";

export async function createProduct(prevState, formData) {
  const name = formData.get("name")?.trim();
  const price = Number(formData.get("price"));
  const categoryId = formData.get("categoryId");

  if (!name || price <= 0) {
    return { error: "بيانات غير صحيحة" };
  }

  await db.products.create({
    data: { name, price, categoryId },
  });

  revalidateTag("products");
  return { error: null };
}

export async function deleteProduct(productId) {
  await db.products.delete({ where: { id: productId } });

  revalidateTag("products");
  revalidateTag(`product-${productId}`);
  redirect("/products");
}

// 3. ملف app/products/page.js
import { Suspense } from "react";
import { getProducts, getCategories } from "@/lib/products";
import ProductForm from "@/components/ProductForm";
import ProductList from "@/components/ProductList";

export default async function ProductsPage() {
  const [products, categories] = await Promise.all([
    getProducts(),
    getCategories(),
  ]);

  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">المنتجات ({products.length})</h1>

      <ProductForm categories={categories} />

      <Suspense fallback={<p>جاري تحميل المنتجات...</p>}>
        <ProductList products={products} />
      </Suspense>
    </div>
  );
}