feat: delete a book

Author: ivan-dalmet

app/components/ui/sonner.tsx

@@ -7,7 +7,7 @@ export const Sonner = ({ ...props }: ToasterProps) => {
     <Toaster
       theme={theme === 'dark' ? 'dark' : 'light'}
       className="toaster group mt-safe-top"
-      position="top-right"
+      position="top-center"
       offset={{
         top: 'calc(16px + env(safe-area-inset-top))',
         bottom: 'calc(16px + env(safe-area-inset-bottom))',

app/features/book/manager/page-book.tsx

@@ -1,19 +1,23 @@
 import { getUiState } from '@bearstudio/ui-state';
 import { ORPCError } from '@orpc/client';
-import { useQuery } from '@tanstack/react-query';
-import { Link } from '@tanstack/react-router';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, useRouter } from '@tanstack/react-router';
+import { useCanGoBack } from '@tanstack/react-router';
 import { AlertCircleIcon, PencilLineIcon, Trash2Icon } from 'lucide-react';
+import { toast } from 'sonner';
 
 import { orpc } from '@/lib/orpc/client';
 
 import { BackButton } from '@/components/back-button';
 import { PageError } from '@/components/page-error';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { ConfirmResponsiveDrawer } from '@/components/ui/confirm-responsive-drawer';
 import { ResponsiveIconButton } from '@/components/ui/responsive-icon-button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Spinner } from '@/components/ui/spinner';
 
+import { WithPermissions } from '@/features/auth/with-permission';
 import { BookCover } from '@/features/book/book-cover';
 import {
   PageLayout,
@@ -23,6 +27,9 @@ import {
 } from '@/layout/manager/page-layout';
 
 export const PageBook = (props: { params: { id: string } }) => {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const canGoBack = useCanGoBack();
   const bookQuery = useQuery(
     orpc.book.getById.queryOptions({ input: { id: props.params.id } })
   );
@@ -39,15 +46,65 @@ export const PageBook = (props: { params: { id: string } }) => {
     return set('default', { book: bookQuery.data });
   });
 
+  const deleteBook = async () => {
+    try {
+      await orpc.book.deleteById.call({ id: props.params.id });
+      await Promise.all([
+        // Invalidate books list
+        queryClient.invalidateQueries({
+          queryKey: orpc.book.getAll.key(),
+          type: 'all',
+        }),
+        // Remove user from cache
+        queryClient.removeQueries({
+          queryKey: orpc.book.getById.key({ input: { id: props.params.id } }),
+        }),
+      ]);
+
+      toast.success('Book deleted');
+
+      // Redirect
+      if (canGoBack) {
+        router.history.back();
+      } else {
+        router.navigate({ to: '..', replace: true });
+      }
+    } catch {
+      toast.error('Failed to book the user');
+    }
+  };
+
   return (
     <PageLayout>
       <PageLayoutTopBar
         backButton={<BackButton />}
         actions={
           <>
-            <ResponsiveIconButton variant="ghost" label="Delete">
-              <Trash2Icon />
-            </ResponsiveIconButton>
+            <WithPermissions
+              permissions={[
+                {
+                  book: ['delete'],
+                },
+              ]}
+            >
+              <ConfirmResponsiveDrawer
+                onConfirm={() => deleteBook()}
+                title={`Delete ${bookQuery.data?.title}`}
+                description={
+                  <>
+                    You are about to permanently delete this book.{' '}
+                    <strong>This action cannot be undone.</strong> Please
+                    confirm your decision carefully.
+                  </>
+                }
+                confirmText="Delete"
+                confirmVariant="destructive"
+              >
+                <ResponsiveIconButton variant="ghost" label="Delete" size="sm">
+                  <Trash2Icon />
+                </ResponsiveIconButton>
+              </ConfirmResponsiveDrawer>
+            </WithPermissions>
             <Button asChild size="sm" variant="secondary">
               <Link
                 to="/manager/books/$id/update"

app/features/user/manager/page-user.tsx

@@ -61,7 +61,7 @@ export const PageUser = (props: { params: { id: string } }) => {
 
   const deleteUser = async () => {
     try {
-      await orpc.user.delete.call({ id: props.params.id });
+      await orpc.user.deleteById.call({ id: props.params.id });
       await Promise.all([
         // Invalidate users list
         queryClient.invalidateQueries({
@@ -74,6 +74,8 @@ export const PageUser = (props: { params: { id: string } }) => {
         }),
       ]);
 
+      toast.success('User deleted');
+
       // Redirect
       if (canGoBack) {
         router.history.back();

app/server/routers/book.ts

@@ -195,4 +195,31 @@ export default {
         throw new ORPCError('INTERNAL_SERVER_ERROR');
       }
     }),
+
+  deleteById: protectedProcedure({
+    permission: {
+      user: ['delete'],
+    },
+  })
+    .route({
+      method: 'DELETE',
+      path: '/books/{id}',
+      tags,
+    })
+    .input(
+      zBook().pick({
+        id: true,
+      })
+    )
+    .output(z.void())
+    .handler(async ({ context, input }) => {
+      context.logger.info('Delete book');
+      try {
+        await context.db.book.delete({
+          where: { id: input.id },
+        });
+      } catch {
+        throw new ORPCError('INTERNAL_SERVER_ERROR');
+      }
+    }),
 };

app/server/routers/user.ts

@@ -204,7 +204,7 @@ export default {
       }
     }),
 
-  delete: protectedProcedure({
+  deleteById: protectedProcedure({
     permission: {
       user: ['delete'],
     },