Order Sets - Delete

flask/api.py

@@ -89,7 +89,7 @@ def sub_order_set_create(username, sub):
 
   return jsonify(new_order_pool.to_dict())
 
-@api.route('/subs/<username>/sets/<set_id>', methods = ['GET', 'POST'])
+@api.route('/subs/<username>/sets/<set_id>', methods = ['GET', 'POST', 'DELETE'])
 @authorized_sub
 def sub_order_set(username, set_id, sub):
   op = orders_pool(sub.id, set_id)
@@ -160,5 +160,8 @@ def sub_order_set(username, set_id, sub):
       except:
         transaction.rollback()
         abort(500)
+  elif request.method == 'DELETE':
+    op.delete_instance(recursive=True)
+    return ('', 204)
 
   return jsonify(op.to_dict())

flask/vite/src/ConfirmDialogButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useDisclosure } from "@mantine/hooks";
+
+import { Button, Modal, Text, Flex } from "@mantine/core";
+
+export const ConfirmDialogButton: React.FC<{
+  text: string;
+  buttonText: string;
+  buttonColor: string;
+  onConfirm: () => void;
+  children: React.ReactNode;
+}> = ({ text, buttonText, buttonColor, onConfirm, children }) => {
+  const [opened, { open, close }] = useDisclosure();
+
+  const handleConfirm = React.useCallback(() => {
+    close();
+    onConfirm();
+  }, [close, onConfirm]);
+
+  return (
+    <>
+      <Modal opened={opened} onClose={close} p="sm" withCloseButton={false}>
+        <Text mb="xl">{text}</Text>
+        <Flex gap="md" justify="flex-end">
+          <Button onClick={close}>Cancel</Button>
+          <Button color={buttonColor} onClick={handleConfirm}>
+            {buttonText}
+          </Button>
+        </Flex>
+      </Modal>
+      <Button color={buttonColor} onClick={open}>
+        {children}
+      </Button>
+    </>
+  );
+};

flask/vite/src/NavigateButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Button } from "@mantine/core";
+import { useNavigate } from "react-router";
+
+export const NavigateButton: React.FC<{
+  children: React.ReactNode;
+  to: string;
+}> = ({ children, to }) => {
+  const navigate = useNavigate();
+
+  const handleClick = React.useCallback(() => {
+    navigate(to);
+  }, [to]);
+
+  return (
+    <Button onClick={handleClick} px="md" w="auto">
+      {children}
+    </Button>
+  );
+};

flask/vite/src/SubOrderSet.tsx

@@ -39,6 +39,22 @@ export const subOrderSetLoader = async ({
     response.json(),
   );
 
+export const subOrderSetAction = async ({
+  request,
+  params: { username, set_id: id },
+}: {
+  request: Request;
+  params: Params<string>;
+}) => {
+  if (request.method == "DELETE") {
+    const response = await fetch(`/api/subs/${username}/sets/${id}`, {
+      method: "DELETE",
+    });
+
+    return { ok: response.ok };
+  }
+};
+
 type FormOrderSetOrderAddOn = Omit<OrderSetOrderAddOn, "id"> & {
   id: number | string;
   _delete?: boolean;

flask/vite/src/SubOrderSets.tsx

@@ -8,9 +8,11 @@ import {
   Badge,
 } from "@mantine/core";
 import { TimeValue } from "@mantine/dates";
-import { IconPencil, IconPlus } from "@tabler/icons-react";
+import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
 import React from "react";
-import { Params, useLoaderData, useParams, useNavigate } from "react-router";
+import { Params, useLoaderData, useParams, useFetcher } from "react-router";
+import { ConfirmDialogButton } from "./ConfirmDialogButton";
+import { NavigateButton } from "./NavigateButton";
 
 export const subOrderSetsLoader = async ({
   params: { username },
@@ -18,24 +20,8 @@ export const subOrderSetsLoader = async ({
   params: Params<string>;
 }) => fetch(`/api/subs/${username}/sets`).then((response) => response.json());
 
-const NavigateButton: React.FC<{
-  children: React.ReactNode;
-  to: string;
-}> = ({ children, to }) => {
-  const navigate = useNavigate();
-
-  const handleClick = React.useCallback(() => {
-    navigate(to);
-  }, [to]);
-
-  return (
-    <Button onClick={handleClick} px="md" w="auto">
-      {children}
-    </Button>
-  );
-};
-
 export const SubOrderSets: React.FC = () => {
+  const fetcher = useFetcher();
   const { username: sub_username } = useParams();
   const orderSets = useLoaderData<
     (Pick<
@@ -46,6 +32,16 @@ export const SubOrderSets: React.FC = () => {
     })[]
   >();
 
+  const handleDelete = React.useCallback(
+    (id: number) => {
+      fetcher.submit(null, {
+        action: `/dashboard/subs/${sub_username}/${id}`,
+        method: "DELETE",
+      });
+    },
+    [fetcher],
+  );
+
   return (
     <Container>
       <Title order={1} mb="lg">
@@ -77,7 +73,15 @@ export const SubOrderSets: React.FC = () => {
                     ) : null}
                     <Text mb="md">Orders: {orders.length}</Text>
                   </Flex>
-                  <Flex justify="end">
+                  <Flex gap="md" justify="end">
+                    <ConfirmDialogButton
+                      buttonColor="red"
+                      buttonText="Delete"
+                      text={`Are you sure you want to delete ${name}?`}
+                      onConfirm={() => handleDelete(id)}
+                    >
+                      <IconTrash />
+                    </ConfirmDialogButton>
                     <NavigateButton
                       to={`/dashboard/subs/${sub_username}/${id}`}
                     >

flask/vite/src/main.tsx

@@ -17,7 +17,11 @@ import "@mantine/notifications/styles.css";
 
 import { SubsList, subsListLoader } from "./SubsList";
 import { SubOrderSets, subOrderSetsLoader } from "./SubOrderSets";
-import { SubOrderSet, subOrderSetLoader } from "./SubOrderSet";
+import {
+  SubOrderSet,
+  subOrderSetLoader,
+  subOrderSetAction,
+} from "./SubOrderSet";
 
 const theme = createTheme({
   components: {
@@ -64,6 +68,7 @@ const router = createBrowserRouter([
     path: "dashboard/subs/:username/:set_id",
     Component: SubOrderSet,
     loader: subOrderSetLoader,
+    action: subOrderSetAction,
   },
 ]);