add ability to delete categories

Author: nihodi

app/(pages)/(main)/volunteering/menu/category.tsx

@@ -8,6 +8,7 @@ import { MenuCategory } from "@prisma/client";
 import { NewProduct, Product } from "@/app/(pages)/(main)/volunteering/menu/product";
 import { styled } from "@mui/system";
 import CircularProgress from "@mui/material/CircularProgress";
+import { DeletionConfirmationDialog } from "@/app/components/input/DeletionConfirmationDialog";
 
 
 // Updates a given category.
@@ -66,6 +67,10 @@ export function Category(
     let [isUpdating, setIsUpdating] = useState<boolean>(false);
 
 
+    let [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
+    let [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+
     useEffect(() => {
         // useEffect is always run once at the start.
         if (isFirst) {
@@ -81,7 +86,7 @@ export function Category(
         <Stack>
             <Grid container spacing={ 2 } columns={ 10 }>
 
-                <Grid item xs={ 9 }>
+                <Grid item xs={ 8 }>
                     <LargeTextField
                         type="text"
                         value={ categoryName }
@@ -120,6 +125,17 @@ export function Category(
                         }
                     </Button>
                 </Grid>
+
+                <Grid item xs={ 1 } display="flex" alignItems="center">
+                    <Button
+                        color="error"
+                        onClick={ () => {
+                            setDeleteDialogOpen(true);
+                        } }
+                    >
+                        Delete
+                    </Button>
+                </Grid>
             </Grid>
 
 
@@ -147,6 +163,21 @@ export function Category(
 
                 <NewProduct onUpdate={ props.onUpdate } categoryId={ props.category.id }></NewProduct>
             </Grid>
+
+            <DeletionConfirmationDialog
+                open={ deleteDialogOpen }
+                onClose={ () => setDeleteDialogOpen(false) }
+                onDelete={ () => {
+                    setIsDeleting(true);
+                    deleteCategory(props.category.id).then(() => {
+                        props.onUpdate();
+                    });
+                } }
+                showSpinner={ isDeleting }
+                title="Delete category?"
+            >
+                Are you sure you want to delete this category?
+            </DeletionConfirmationDialog>
         </Stack>
     )
 }
@@ -187,9 +218,7 @@ export function NewCategory(props: { onUpdate: () => void }) {
                         setIsCreating(false);
                         props.onUpdate();
                     });
-                }
-
-                }
+                } }
             >{ isCreating ? <CircularProgress/> : <>Create</> }</Button>
 
 

app/api/v2/escape/menu/categories/[categoryId]/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSession } from "next-auth";
+import { Auth } from "@/app/api/utils/auth";
+import prisma from "@/prisma/prismaClient";
+import { authOptions } from "@/app/api/utils/authOptions";
+
+export async function DELETE(
+    _req: NextRequest,
+    context: { params: Promise<{ categoryId: string }> }
+) {
+    const params = await context.params;
+
+    let session = await getServerSession(authOptions);
+    let auth = new Auth(session, params)
+        .requireRoles([])
+        .requireParams(["categoryId"]);
+
+    if (auth.failed) return auth.response;
+
+    let categoryId = Number(params.categoryId);
+    // verify productId is an integer
+    if (isNaN(categoryId) || !categoryId) {
+        return NextResponse.json({error: "categoryId must be an integer"}, {status: 400});
+    }
+
+
+    await prisma.$transaction(async () => {
+        await prisma.menuProduct.deleteMany({
+            where: {
+                category_id: categoryId
+            }
+        });
+
+        await prisma.menuCategory.delete(
+            {
+                where: {
+                    id: categoryId,
+                },
+            }
+        );
+    });
+
+    return NextResponse.json({})
+}