feat: add delete product

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

Hide file tree

Showing 8 changed files with 64 additions and 10 deletions.
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
@@ -34,7 +34,7 @@ public function store(ProductRequest $request): RedirectResponse
 
         $product->save();
 
-        return redirect()->intended(route('product.show'));
+        return redirect()->intended(route('product.show', $product->id));
     }
 
     public function edit(string $id) {
@@ -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/Create.tsx b/resources/js/Pages/Product/Create.tsx
@@ -35,7 +35,11 @@ export default function Create() {
       <Head title="Create Product" />
       <section className="px-10 md:px-20 py-8 flex flex-col gap-8">
         <div className="flex flex-col items-start gap-4 w-full">
-          <ButtonLink leftIcon={ArrowLeft} href={route("product.index")}>
+          <ButtonLink
+            leftIcon={ArrowLeft}
+            href={route("product.index")}
+            openNewTab={false}
+          >
             Back to Home
           </ButtonLink>
           <Typography variant="h1">Add Product</Typography>

diff --git a/resources/js/Pages/Product/Edit.tsx b/resources/js/Pages/Product/Edit.tsx
@@ -48,7 +48,7 @@ export default function Edit({ product }: { product: ProductType }) {
           <ButtonLink leftIcon={ArrowLeft} href={route("product.index")}>
             Back to Home
           </ButtonLink>
-          <Typography variant="h1">Add Product</Typography>
+          <Typography variant="h1">Edit Product</Typography>
           <form onSubmit={submit} className="w-full flex flex-col gap-4">
             <div className="flex flex-col gap-1.5">
               <InputLabel htmlFor="name">

diff --git a/resources/js/Pages/Product/Index.tsx b/resources/js/Pages/Product/Index.tsx
@@ -17,7 +17,11 @@ const ProductIndex = () => {
           <Typography variant="h1" className="font-semibold mb-4">
             All Product
           </Typography>
-          <ButtonLink href="" leftIcon={Plus}>
+          <ButtonLink
+            href={route("product.create")}
+            openNewTab={false}
+            leftIcon={Plus}
+          >
             Add Product
           </ButtonLink>
         </div>

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" />
@@ -45,12 +56,16 @@ export default function Show({ product }: { product: ProductType }) {
           </div>
         </div>
         <div className="mt-4 flex items-center flex-col gap-2">
-          <ButtonLink href="/" className="flex w-3/5">
+          <ButtonLink
+            href={route("product.edit", product.id)}
+            openNewTab={false}
+            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>