Optimistic updates

Author: gopinav

data-fetching-demo/src/app/products-db/page.tsx

@@ -1,6 +1,5 @@
-import { removeProduct } from "@/actions/products";
 import { getProducts } from "@/prisma-db";
-import Link from "next/link";
+import { ProductDetail } from "./product-detail";
 
 export type Product = {
   id: number;
@@ -11,28 +10,6 @@ export type Product = {
 
 export default async function ProductsPrismaDBPage() {
   const products: Product[] = await getProducts();
-  return (
-    <ul className="space-y-4 p-4">
-      {products.map((product) => (
-        <li
-          key={product.id}
-          className="p-4 bg-white shadow-md rounded-lg text-gray-700"
-        >
-          <h2 className="text-xl font-semibold">
-            <Link href={`/products-db/${product.id}`}>{product.title}</Link>
-          </h2>
-          <p>{product.description}</p>
-          <p className="text-lg font-medium">${product.price}</p>
-          <form action={removeProduct.bind(null, product.id)}>
-            <button
-              type="submit"
-              className="px-4 py-2 mt-4 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-600"
-            >
-              Delete
-            </button>
-          </form>
-        </li>
-      ))}
-    </ul>
-  );
+
+  return <ProductDetail products={products} />;
 }

data-fetching-demo/src/app/products-db/product-detail.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useOptimistic } from "react";
+import { removeProduct } from "@/actions/products";
+import Link from "next/link";
+
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  description: string | null;
+};
+
+export const ProductDetail = ({ products }: { products: Product[] }) => {
+  const [optimisticProducts, setOptimisticProducts] = useOptimistic(
+    products,
+    (currentProducts, productId) => {
+      return currentProducts.filter((product) => product.id !== productId);
+    }
+  );
+
+  const removeProductById = async (productId: number) => {
+    setOptimisticProducts(productId);
+    await removeProduct(productId);
+  };
+
+  return (
+    <ul className="space-y-4 p-4">
+      {optimisticProducts.map((product) => (
+        <li
+          key={product.id}
+          className="p-4 bg-white shadow-md rounded-lg text-gray-700"
+        >
+          <h2 className="text-xl font-semibold">
+            <Link href={`/products-db/${product.id}`}>{product.title}</Link>
+          </h2>
+          <p>{product.description}</p>
+          <p className="text-lg font-medium">${product.price}</p>
+          <form action={removeProductById.bind(null, product.id)}>
+            <button
+              type="submit"
+              className="px-4 py-2 mt-4 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-600"
+            >
+              Delete
+            </button>
+          </form>
+        </li>
+      ))}
+    </ul>
+  );
+};