Introduce item deletion confirmation step

v3xlabs · Dec 2, 2024 · c615e4b · c615e4b
1 parent b6e4f89
commit c615e4b
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 16 deletions.
diff --git a/web/package.json b/web/package.json
@@ -17,6 +17,7 @@
         "@eslint/eslintrc": "^3.1.0",
         "@eslint/js": "^9.8.0",
         "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-avatar": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-hover-card": "^1.1.2",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/Unauthorized.tsx b/web/src/components/Unauthorized.tsx
@@ -1,9 +1,12 @@
+import { SCPage } from '../layouts/SimpleCenterPage';
+
 export const UnauthorizedResourceModal = () => {
     return (
-        <div>
-            <h1>Unauthorized</h1>
-            <p>You are not authorized to access this resource.</p>
-            <div>Try logging in</div>
-        </div>
+        <SCPage title="Unauthorized">
+            <div className="card">
+                <p>You are not authorized to access this resource.</p>
+                <div>Try logging in</div>
+            </div>
+        </SCPage>
     );
 };
diff --git a/web/src/index.css b/web/src/index.css
@@ -6,6 +6,10 @@
     @apply bg-white text-neutral-800 border border-solid border-neutral-200 px-3 py-1 h-fit hover:cursor-pointer hover:bg-neutral-50 rounded-md focus:outline focus:outline-2 outline-offset-2 outline-blue-500;
 	@apply disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 disabled:hover:bg-neutral-100 disabled:cursor-not-allowed;
 }
+.btn-delete {
+	@apply bg-red-500 text-white hover:bg-red-600 border-red-400 hover:border-red-500;
+	@apply disabled:bg-red-300 disabled:text-red-500 disabled:border-red-300 disabled:hover:bg-red-300 disabled:hover:border-red-300 disabled:cursor-not-allowed;
+}
 
 .card {
 	@apply border border-solid border-neutral-200 rounded-md;

diff --git a/web/src/routes/item/$itemId/edit.tsx b/web/src/routes/item/$itemId/edit.tsx
@@ -1,14 +1,63 @@
-import { createFileRoute, Link, useParams } from '@tanstack/react-router';
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import {
+    createFileRoute,
+    Link,
+    useNavigate,
+    useParams,
+} from '@tanstack/react-router';
+import { FC } from 'react';
 
 import { useApiDeleteItem } from '../../../api/item';
 import { SCPage } from '../../../layouts/SimpleCenterPage';
 
+export const DeleteItemModal: FC<{ itemId: string }> = ({ itemId }) => {
+    const { mutate: deleteItem } = useApiDeleteItem();
+    const navigate = useNavigate();
+
+    return (
+        <AlertDialog.Root>
+            <AlertDialog.Trigger asChild>
+                <button className="btn btn-delete">Delete Item</button>
+            </AlertDialog.Trigger>
+            <AlertDialog.Portal>
+                <AlertDialog.Overlay className="bg-black/5 backdrop-blur-sm fixed inset-0" />
+                <AlertDialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-[500px] bg-white focus:outline-none card space-y-2">
+                    <AlertDialog.Title className="m-0 text-blue-500 text-lg">
+                        Are you absolutely sure?
+                    </AlertDialog.Title>
+                    <AlertDialog.Description className="mb-6">
+                        This action cannot be undone. This will permanently
+                        delete this item.
+                    </AlertDialog.Description>
+                    <div className="gap-4 flex justify-end">
+                        <AlertDialog.Cancel asChild>
+                            <button className="btn">Cancel</button>
+                        </AlertDialog.Cancel>
+                        <AlertDialog.Action asChild>
+                            <button
+                                className="btn btn-delete"
+                                onClick={async () => {
+                                    await deleteItem(itemId);
+                                    navigate({
+                                        to: '/item/$itemId',
+                                        params: { itemId },
+                                    });
+                                }}
+                            >
+                                Yes, delete item
+                            </button>
+                        </AlertDialog.Action>
+                    </div>
+                </AlertDialog.Content>
+            </AlertDialog.Portal>
+        </AlertDialog.Root>
+    );
+};
+
 export const Route = createFileRoute('/item/$itemId/edit')({
     component: () => {
         const { itemId } = useParams({ from: '/item/$itemId/edit' });
 
-        const { mutate: deleteItem } = useApiDeleteItem();
-
         return (
             <SCPage title={`Edit Item ${itemId}`}>
                 <div className="card">
@@ -20,14 +69,7 @@ export const Route = createFileRoute('/item/$itemId/edit')({
                     >
                         Save
                     </Link>
-                    <button
-                        className="btn btn-delete"
-                        onClick={() => {
-                            deleteItem(itemId);
-                        }}
-                    >
-                        Delete
-                    </button>
+                    <DeleteItemModal itemId={itemId} />
                 </div>
             </SCPage>
         );