So far, we've learned how to write and implement the first three major CRUD operations: Create, Read, and Update. We've created a new Product, learned to read the data and it's related models from the database, and we've learned to update the data.

In this lesson, we'll learn to create an operation. We'll create a new server action that deletes a Product in the database.

Creating a New Server Action - Delete a Product

Let's open our file once more and create a new server action called .

products.ts;

export async function deleteProduct() {
  try {
    // todo: delete the product
    return true;
  } catch (error) {
    return false;
  }
}

Like always, we begin by creating a new async function called . Next we'll add a try-catch block to handle any errors that may occur during the deletion process.

Next we need to figure out what we'll need to delete a product. We'll need the of the product we want to delete. We'll pass this as an argument to the function.

Hint

products.ts;

export async function deleteProduct(id: number) {
  try {
    await prisma.product.delete({
      where: {
        id: id,
      },
    });
    return true;
  } catch (error) {
    return false;
  }
}

Just like with the function, we use the method to delete the product from the database. We pass the of the product we want to the object to specify which product we want to delete.

Integrating the deleteProduct Server Action

Now that we've created the server action, let's integrate it into our application.

We already have a component that we can use to delete a product. We'll import the server action and call it when the user clicks the button.

Let's open up .

You'll see it's already importing the as a prop, which is all we'll need to make this work.

Let's import our server action and call it when the user clicks the button.

DeleteProduct.tsx

"use client";

// import useRouter so we can redirect the user after deleting the product
import { useRouter } from "next/navigation";
import { TrashIcon } from "lucide-react";

// import the deleteProduct server action
import { deleteProduct } from "@/lib/actions/products";
import { Button } from "@/components/ui/button";
export default function DeleteProduct({ id }: { id: string }) {
  // initialize the router
  const router = useRouter();

  // create a function to handle the delete operation
  const handleDelete = async () => {
    const didDelete = await deleteProduct(parseInt(id));
    if (didDelete) router.push("/search");
    // else show error, like a toast
  };

  return (
    <div className="...">
      <div className="...">
        <div className="space-y-4">
          <div className="flex items-center justify-center">
            <TrashIcon className="h-12 w-12 text-red-500" />
          </div>
          <div className="space-y-2 text-center">
            <h2 className="text-2xl font-bold">Are you sure?</h2>
            <p className="text-gray-500 dark:text-gray-400">
              This action cannot be undone. This will permanently delete product
              #{id}.
            </p>
          </div>
        </div>
        <div className="flex justify-center gap-4">
          {/* add the onClick event */}
          <Button onClick={handleDelete} variant="destructive">
            Confirm Delete
          </Button>
          <Button variant="outline">Cancel</Button>
        </div>
      </div>
    </div>
  );

}

There's also cancel button that doesn't do anything yet. You can add a event to it and redirect the user back to the product page.

//
<Button onClick={() => router.push(`/product/view/${id}`)} variant="outline">Cancel</Button>

Conclusion

In this lesson, we learned how to create a new server action to delete a product from the database. We used the method to delete the product from the database. We also learned how to integrate the server action into our application.

0 Comments

Top comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account