feat: add delete product

ainunns · Oct 9, 2024 · fcf1191 · fcf1191
1 parent 5b7a469
commit fcf1191
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
@@ -76,4 +76,11 @@ public function show(string $id) {
         return Inertia::render('Product/Show', compact('product'));
     }
 
+    public function destroy(string $id) {
+        $product = Product::findOrFail($id);
+        $product->delete();
+
+        return redirect()->route('product.index');
+    }
+
 }
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "vite": "^5.0"
   },
   "dependencies": {
+    "@inertiajs/inertia": "^0.11.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.451.0",
     "tailwind-merge": "^2.5.3"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/resources/js/Layouts/GuestLayout.tsx b/resources/js/Layouts/GuestLayout.tsx
@@ -1,14 +1,14 @@
 import ApplicationLogo from "@/Components/ApplicationLogo";
-import { Link } from "@inertiajs/react";
+import UnstyledLink from "@/Components/UnstyledLink";
 import type { PropsWithChildren } from "react";
 
 export default function Guest({ children }: PropsWithChildren) {
   return (
     <div className="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0">
       <div>
-        <Link href="/">
+        <UnstyledLink href="/">
           <ApplicationLogo className="h-20 w-20 fill-current text-gray-500" />
-        </Link>
+        </UnstyledLink>
       </div>
 
       <div className="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg">

diff --git a/resources/js/Pages/Product/Show.tsx b/resources/js/Pages/Product/Show.tsx
@@ -1,11 +1,22 @@
+import Button from "@/Components/Button";
 import ButtonLink from "@/Components/ButtonLink";
 import Typography from "@/Components/Typography";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { ProductType } from "@/types/entities/product";
+import { Inertia } from "@inertiajs/inertia";
 import { Head } from "@inertiajs/react";
 import { ArrowLeft } from "lucide-react";
 
 export default function Show({ product }: { product: ProductType }) {
+  const handleDelete = () => {
+    if (confirm("Are you sure you want to delete this product?")) {
+      Inertia.delete(`/product/${product.id}/delete`, {
+        onSuccess: () => {
+          alert("Product deleted successfully!");
+        },
+      });
+    }
+  };
   return (
     <AuthenticatedLayout>
       <Head title="Detail Product" />
@@ -48,9 +59,9 @@ export default function Show({ product }: { product: ProductType }) {
           <ButtonLink href="/" className="flex w-3/5">
             Edit Product
           </ButtonLink>
-          <ButtonLink href="/" className="flex w-3/5">
+          <Button onClick={handleDelete} className="flex w-3/5">
             Delete Product
-          </ButtonLink>
+          </Button>
         </div>
       </div>
     </AuthenticatedLayout>