From b5cad72289fbecfedf1a897507a3fa60ec67aeed Mon Sep 17 00:00:00 2001
From: Matt Warman <mwarman@users.noreply.github.com>
Date: Thu, 5 Dec 2024 08:23:51 -0500
Subject: [PATCH] 71 Delete Task (#79)

* initial Dialog components

* disable toggle when processing

* docs

* TaskDeleteDialog component

* docs

* tests

* tests

* tests

* tests

* tests

* docs
---
 src/common/components/Dialog/Backdrop.tsx     | 46 +++++++++
 src/common/components/Dialog/Dialog.tsx       | 69 +++++++++++++
 src/common/components/Dialog/DialogButton.tsx | 45 +++++++++
 .../components/Dialog/DialogButtons.tsx       | 34 +++++++
 .../components/Dialog/DialogContent.tsx       | 30 ++++++
 .../components/Dialog/DialogHeading.tsx       | 30 ++++++
 src/common/components/Dialog/Divider.tsx      | 25 +++++
 .../Dialog/__tests__/Backdrop.test.tsx        | 50 ++++++++++
 .../Dialog/__tests__/DiaglogButtons.test.tsx  | 47 +++++++++
 .../Dialog/__tests__/Dialog.test.tsx          | 98 +++++++++++++++++++
 .../Dialog/__tests__/DialogButton.test.tsx    | 53 ++++++++++
 .../Dialog/__tests__/DialogContent.test.tsx   | 34 +++++++
 .../Dialog/__tests__/DialogHeading.test.tsx   | 34 +++++++
 .../Dialog/__tests__/Divider.test.tsx         | 34 +++++++
 .../Tasks/api/__tests__/useDeleteTask.test.ts | 59 +++++++++++
 .../UsersPage/Tasks/api/useDeleteTask.ts      | 50 ++++++++++
 .../UsersPage/Tasks/api/useUpdateTask.ts      |  2 +-
 .../Tasks/components/TaskCompleteToggle.tsx   |  3 +-
 .../Tasks/components/TaskDeleteDialog.tsx     | 60 ++++++++++++
 .../UsersPage/Tasks/components/TaskDetail.tsx | 72 ++++++++++++--
 .../__tests__/TaskDeleteDialog.test.tsx       | 78 +++++++++++++++
 .../components/__tests__/TaskDetail.test.tsx  | 81 ++++++++++++++-
 src/test/mocks/handlers.ts                    |  9 ++
 23 files changed, 1030 insertions(+), 13 deletions(-)
 create mode 100644 src/common/components/Dialog/Backdrop.tsx
 create mode 100644 src/common/components/Dialog/Dialog.tsx
 create mode 100644 src/common/components/Dialog/DialogButton.tsx
 create mode 100644 src/common/components/Dialog/DialogButtons.tsx
 create mode 100644 src/common/components/Dialog/DialogContent.tsx
 create mode 100644 src/common/components/Dialog/DialogHeading.tsx
 create mode 100644 src/common/components/Dialog/Divider.tsx
 create mode 100644 src/common/components/Dialog/__tests__/Backdrop.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/DiaglogButtons.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/Dialog.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/DialogButton.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/DialogContent.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/DialogHeading.test.tsx
 create mode 100644 src/common/components/Dialog/__tests__/Divider.test.tsx
 create mode 100644 src/pages/UsersPage/Tasks/api/__tests__/useDeleteTask.test.ts
 create mode 100644 src/pages/UsersPage/Tasks/api/useDeleteTask.ts
 create mode 100644 src/pages/UsersPage/Tasks/components/TaskDeleteDialog.tsx
 create mode 100644 src/pages/UsersPage/Tasks/components/__tests__/TaskDeleteDialog.test.tsx

diff --git a/src/common/components/Dialog/Backdrop.tsx b/src/common/components/Dialog/Backdrop.tsx
new file mode 100644
index 0000000..3549bdc
--- /dev/null
+++ b/src/common/components/Dialog/Backdrop.tsx
@@ -0,0 +1,46 @@
+import { PropsWithChildren } from 'react';
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Properties for the `Backdrop` component.
+ * @param {function} [onClick] - Optional. A function called when clicked.
+ * @see {@link BaseComponentProps}
+ * @see {@link PropsWithChildren}
+ */
+interface BackdropProps extends BaseComponentProps, PropsWithChildren {
+  onClick?: (e: React.MouseEvent) => void | Promise<void>;
+}
+
+/**
+ * The `Backdrop` component renders a semi-opaque background for another
+ * component.  Usually used to partially mask background content to draw
+ * attention to content in the foreground such as a `Dialog` or `Menu`.
+ * @param {BackgroundProps} props - Component properties
+ * @returns {JSX.Element} JSX
+ */
+const Backdrop = ({
+  children,
+  className,
+  onClick,
+  testId = 'backdrop',
+}: BackdropProps): JSX.Element => {
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.(e);
+  };
+
+  return (
+    <div
+      className={classNames(
+        'fixed right-0 top-0 z-[1000] h-screen w-screen bg-neutral-500/50',
+        className,
+      )}
+      onClick={handleClick}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Backdrop;
diff --git a/src/common/components/Dialog/Dialog.tsx b/src/common/components/Dialog/Dialog.tsx
new file mode 100644
index 0000000..19e9817
--- /dev/null
+++ b/src/common/components/Dialog/Dialog.tsx
@@ -0,0 +1,69 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+import Backdrop from './Backdrop';
+
+/**
+ * Properties for the `Dialog` component.
+ * @param {boolean} [isOpen] - Indicates if the Dialog should be displayed.
+ * @param {function} [onClose] - A function called when the Dialog closes.
+ * @see {@link BaseComponentProps}
+ * @see {@link PropsWithChildren}
+ */
+export interface DialogProps extends BaseComponentProps, PropsWithChildren {
+  isOpen?: boolean;
+  onClose?: () => void | Promise<void>;
+}
+
+/**
+ * A `Dialog` is a modal window that displays on top of the main content,
+ * typically asking the user to take an action or confirm a decision.
+ * @param {DialogProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const Dialog = ({
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  testId = 'dialog',
+}: DialogProps): JSX.Element => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  useEffect(() => {
+    setIsDialogOpen(isOpen);
+  }, [isOpen]);
+
+  const closeDialog = (): void => {
+    setIsDialogOpen(false);
+    onClose?.();
+  };
+
+  const handleBackdropClick = (): void => {
+    closeDialog();
+  };
+
+  const handleDialogClick = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div className={classNames({ hidden: !isDialogOpen }, className)} data-testid={testId}>
+      <Backdrop
+        className="flex items-center justify-center"
+        onClick={handleBackdropClick}
+        testId={`${testId}-backdrop`}
+      >
+        <div
+          className="m-4 min-w-72 max-w-[560px] rounded-3xl bg-light-bg p-6 dark:bg-dark-bg"
+          onClick={handleDialogClick}
+        >
+          {children}
+        </div>
+      </Backdrop>
+    </div>
+  );
+};
+
+export default Dialog;
diff --git a/src/common/components/Dialog/DialogButton.tsx b/src/common/components/Dialog/DialogButton.tsx
new file mode 100644
index 0000000..cef0a65
--- /dev/null
+++ b/src/common/components/Dialog/DialogButton.tsx
@@ -0,0 +1,45 @@
+import { Button, ButtonProps, ButtonVariant } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Variations of the `DialogButton`.
+ */
+type DialogButtonVariant = 'primary' | 'secondary' | 'danger';
+
+/**
+ * Properties for the `DialogButton` component.
+ * @param {DialogButtonVariant} variant - The variant.
+ * @see {@link ButtonProps}
+ */
+interface DialogButtonProps extends Omit<ButtonProps, 'variant'> {
+  variant?: DialogButtonVariant;
+}
+
+/**
+ * The `DialogButton` is a type of `Button` specifically styled for use
+ * within a `Dialog`.
+ * @param {DialogButtonProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const DialogButton = ({
+  className,
+  variant = 'secondary',
+  testId = 'dialog-button',
+  ...buttonProps
+}: DialogButtonProps): JSX.Element => {
+  return (
+    <Button
+      variant={ButtonVariant.Text}
+      className={classNames(
+        'text-sm',
+        { 'font-bold text-blue-600 dark:text-blue-400': variant === 'primary' },
+        { 'font-bold text-red-600': variant === 'danger' },
+        className,
+      )}
+      testId={testId}
+      {...buttonProps}
+    />
+  );
+};
+
+export default DialogButton;
diff --git a/src/common/components/Dialog/DialogButtons.tsx b/src/common/components/Dialog/DialogButtons.tsx
new file mode 100644
index 0000000..1416a24
--- /dev/null
+++ b/src/common/components/Dialog/DialogButtons.tsx
@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Properties for the `DialogButtons` component.
+ * @see {@link BaseComponentProps}
+ * @see {@link PropsWithChildren}
+ */
+interface DialogButtonsProps extends BaseComponentProps, PropsWithChildren {}
+
+/**
+ * The `DialogButtons` component is a container for one or more `DialogButton`
+ * components.  `DialogButtons` renders the buttons, the `children`, styled
+ * appropriately for appearing within a `Dialog`.
+ * @param {DialogButtonsProps} props - Component properties
+ * @returns {JSX.Element} JSX
+ */
+const DialogButtons = ({
+  children,
+  className,
+  testId = 'dialog-buttons',
+}: DialogButtonsProps): JSX.Element => {
+  return (
+    <div
+      className={classNames('mt-6 flex items-center justify-end gap-4', className)}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DialogButtons;
diff --git a/src/common/components/Dialog/DialogContent.tsx b/src/common/components/Dialog/DialogContent.tsx
new file mode 100644
index 0000000..0aff590
--- /dev/null
+++ b/src/common/components/Dialog/DialogContent.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Properties for the `DialogContent` component.
+ * @see {@link BaseComponentProps}
+ * @see {@link PropsWithChildren}
+ */
+interface DialogContentProps extends BaseComponentProps, PropsWithChildren {}
+
+/**
+ * The `DialogContent` component serves as the container for the main content
+ * of a `Dialog`. All of the main body content should be wrapped by `DialogContent`.
+ * @param {DialogContentProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const DialogContent = ({
+  children,
+  className,
+  testId = 'dialog-content',
+}: DialogContentProps): JSX.Element => {
+  return (
+    <div className={classNames('mb-6 mt-4 text-sm', className)} data-testid={testId}>
+      {children}
+    </div>
+  );
+};
+
+export default DialogContent;
diff --git a/src/common/components/Dialog/DialogHeading.tsx b/src/common/components/Dialog/DialogHeading.tsx
new file mode 100644
index 0000000..c3ae1cf
--- /dev/null
+++ b/src/common/components/Dialog/DialogHeading.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Properties for the `DialogHeading` component.
+ * @see {@link BaseComponentProps}
+ * @see {@link PropsWithChildren}
+ */
+interface DialogHeadingProps extends BaseComponentProps, PropsWithChildren {}
+
+/**
+ * The `DialogHeading` component serves as the container for the heading content
+ * of a `Dialog`. All of the heading content should be wrapped by `DialogHeading`.
+ * @param {DialogHeadingProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const DialogHeading = ({
+  children,
+  className,
+  testId = 'dialog-heading',
+}: DialogHeadingProps): JSX.Element => {
+  return (
+    <div className={classNames('mb-4 line-clamp-2 text-2xl', className)} data-testid={testId}>
+      {children}
+    </div>
+  );
+};
+
+export default DialogHeading;
diff --git a/src/common/components/Dialog/Divider.tsx b/src/common/components/Dialog/Divider.tsx
new file mode 100644
index 0000000..1f06ddf
--- /dev/null
+++ b/src/common/components/Dialog/Divider.tsx
@@ -0,0 +1,25 @@
+import { BaseComponentProps } from '@leanstacks/react-common';
+import classNames from 'classnames';
+
+/**
+ * Properties for the `Divider` component.
+ * @see {@link BaseComponentProps}
+ */
+interface DividerProps extends BaseComponentProps {}
+
+/**
+ * The `Divider` component renders a horizontal line which visually separates
+ * content.
+ * @param {DividerProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const Divider = ({ className, testId = 'divider' }: DividerProps): JSX.Element => {
+  return (
+    <div
+      className={classNames('h-0 w-full border-t border-neutral-500/50', className)}
+      data-testid={testId}
+    ></div>
+  );
+};
+
+export default Divider;
diff --git a/src/common/components/Dialog/__tests__/Backdrop.test.tsx b/src/common/components/Dialog/__tests__/Backdrop.test.tsx
new file mode 100644
index 0000000..38d6502
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/Backdrop.test.tsx
@@ -0,0 +1,50 @@
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import Backdrop from '../Backdrop';
+
+describe('Backdrop', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Backdrop />);
+    await screen.findByTestId('backdrop');
+
+    // ASSERT
+    expect(screen.getByTestId('backdrop')).toBeDefined();
+  });
+
+  it('should use testid', async () => {
+    // ARRANGE
+    render(<Backdrop testId="my-backdrop" />);
+    await screen.findByTestId('my-backdrop');
+
+    // ASSERT
+    expect(screen.getByTestId('my-backdrop')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<Backdrop className="my-class" />);
+    await screen.findByTestId('backdrop');
+
+    // ASSERT
+    expect(screen.getByTestId('backdrop')).toHaveClass('my-class');
+  });
+
+  it('should handle click', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    const clickFn = vi.fn();
+    render(<Backdrop onClick={clickFn} />);
+    await screen.findByTestId('backdrop');
+
+    // ACT
+    await user.click(screen.getByTestId('backdrop'));
+
+    // ASSERT
+    expect(screen.getByTestId('backdrop')).toBeDefined();
+    expect(clickFn).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/DiaglogButtons.test.tsx b/src/common/components/Dialog/__tests__/DiaglogButtons.test.tsx
new file mode 100644
index 0000000..0df883c
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/DiaglogButtons.test.tsx
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import DialogButtons from '../DialogButtons';
+
+describe('DialogButtons', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(
+      <DialogButtons>
+        <div data-testid="children"></div>
+      </DialogButtons>,
+    );
+    await screen.findByTestId('dialog-buttons');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-buttons')).toBeDefined();
+    expect(screen.getByTestId('children')).toBeDefined();
+  });
+
+  it('should use testId', async () => {
+    // ARRANGE
+    render(
+      <DialogButtons testId="my-dialog-buttons">
+        <div data-testid="children"></div>
+      </DialogButtons>,
+    );
+    await screen.findByTestId('my-dialog-buttons');
+
+    // ASSERT
+    expect(screen.getByTestId('my-dialog-buttons')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(
+      <DialogButtons className="my-class">
+        <div data-testid="children"></div>
+      </DialogButtons>,
+    );
+    await screen.findByTestId('dialog-buttons');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-buttons')).toHaveClass('my-class');
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/Dialog.test.tsx b/src/common/components/Dialog/__tests__/Dialog.test.tsx
new file mode 100644
index 0000000..75702ea
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/Dialog.test.tsx
@@ -0,0 +1,98 @@
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import Dialog from '../Dialog';
+
+describe('Dialog', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Dialog />);
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toBeDefined();
+  });
+
+  it('should use testId', async () => {
+    // ARRANGE
+    render(<Dialog testId="my-dialog" />);
+    await screen.findByTestId('my-dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('my-dialog')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<Dialog className="my-class" />);
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toHaveClass('my-class');
+  });
+
+  it('should be hidden by default', async () => {
+    // ARRANGE
+    render(<Dialog />);
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toHaveClass('hidden');
+  });
+
+  it('should not be hidden when isOpen true', async () => {
+    // ARRANGE
+    render(<Dialog isOpen={true} />);
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).not.toHaveClass('hidden');
+  });
+
+  it('should be hidden when isOpen false', async () => {
+    // ARRANGE
+    render(<Dialog isOpen={false} />);
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toHaveClass('hidden');
+  });
+
+  it('should close when backdrop clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    render(<Dialog onClose={closeFn} isOpen={true} />);
+    await screen.findByTestId('dialog');
+    expect(screen.getByTestId('dialog')).not.toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('dialog-backdrop'));
+
+    // ASSERT
+    expect(closeFn).toHaveBeenCalledOnce();
+    expect(screen.getByTestId('dialog')).toHaveClass('hidden');
+  });
+
+  it('should not close when dialog content clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    render(
+      <Dialog onClose={closeFn} isOpen={true}>
+        <div data-testid="content" />
+      </Dialog>,
+    );
+    await screen.findByTestId('dialog');
+    expect(screen.getByTestId('dialog')).not.toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('content'));
+
+    // ASSERT
+    expect(closeFn).not.toHaveBeenCalled();
+    expect(screen.getByTestId('dialog')).not.toHaveClass('hidden');
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/DialogButton.test.tsx b/src/common/components/Dialog/__tests__/DialogButton.test.tsx
new file mode 100644
index 0000000..e1467db
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/DialogButton.test.tsx
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import DialogButton from '../DialogButton';
+
+describe('DialogButton', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<DialogButton>Submit</DialogButton>);
+    await screen.findByTestId('dialog-button');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-button')).toBeDefined();
+    expect(screen.getByTestId('dialog-button')).toHaveTextContent('Submit');
+  });
+
+  it('should use testId', async () => {
+    // ARRANGE
+    render(<DialogButton testId="my-dialog-button">Submit</DialogButton>);
+    await screen.findByTestId('my-dialog-button');
+
+    // ASSERT
+    expect(screen.getByTestId('my-dialog-button')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<DialogButton className="my-class">Submit</DialogButton>);
+    await screen.findByTestId('dialog-button');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-button')).toHaveClass('my-class');
+  });
+
+  it('should render primary variant', async () => {
+    // ARRANGE
+    render(<DialogButton variant="primary">Submit</DialogButton>);
+    await screen.findByTestId('dialog-button');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-button')).toHaveClass('text-blue-600');
+  });
+
+  it('should render danger variant', async () => {
+    // ARRANGE
+    render(<DialogButton variant="danger">Submit</DialogButton>);
+    await screen.findByTestId('dialog-button');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-button')).toHaveClass('text-red-600');
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/DialogContent.test.tsx b/src/common/components/Dialog/__tests__/DialogContent.test.tsx
new file mode 100644
index 0000000..64a412c
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/DialogContent.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import DialogContent from '../DialogContent';
+
+describe('DialogContent', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<DialogContent />);
+    await screen.findByTestId('dialog-content');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-content')).toBeDefined();
+  });
+
+  it('should use testId', async () => {
+    // ARRANGE
+    render(<DialogContent testId="my-dialog-content" />);
+    await screen.findByTestId('my-dialog-content');
+
+    // ASSERT
+    expect(screen.getByTestId('my-dialog-content')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<DialogContent className="my-class" />);
+    await screen.findByTestId('dialog-content');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-content')).toHaveClass('my-class');
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/DialogHeading.test.tsx b/src/common/components/Dialog/__tests__/DialogHeading.test.tsx
new file mode 100644
index 0000000..a4b34c8
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/DialogHeading.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import DialogHeading from '../DialogHeading';
+
+describe('DialogHeading', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<DialogHeading />);
+    await screen.findByTestId('dialog-heading');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-heading')).toBeDefined();
+  });
+
+  it('should use testId', async () => {
+    // ARRANGE
+    render(<DialogHeading testId="my-dialog-heading" />);
+    await screen.findByTestId('my-dialog-heading');
+
+    // ASSERT
+    expect(screen.getByTestId('my-dialog-heading')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<DialogHeading className="my-class" />);
+    await screen.findByTestId('dialog-heading');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-heading')).toHaveClass('my-class');
+  });
+});
diff --git a/src/common/components/Dialog/__tests__/Divider.test.tsx b/src/common/components/Dialog/__tests__/Divider.test.tsx
new file mode 100644
index 0000000..657e612
--- /dev/null
+++ b/src/common/components/Dialog/__tests__/Divider.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import Divider from '../Divider';
+
+describe('Divider', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Divider />);
+    await screen.findByTestId('divider');
+
+    // ASSERT
+    expect(screen.getByTestId('divider')).toBeDefined();
+  });
+
+  it('should use testid', async () => {
+    // ARRANGE
+    render(<Divider testId="my-divider" />);
+    await screen.findByTestId('my-divider');
+
+    // ASSERT
+    expect(screen.getByTestId('my-divider')).toBeDefined();
+  });
+
+  it('should use className', async () => {
+    // ARRANGE
+    render(<Divider className="my-className" />);
+    await screen.findByTestId('divider');
+
+    // ASSERT
+    expect(screen.getByTestId('divider')).toHaveClass('my-className');
+  });
+});
diff --git a/src/pages/UsersPage/Tasks/api/__tests__/useDeleteTask.test.ts b/src/pages/UsersPage/Tasks/api/__tests__/useDeleteTask.test.ts
new file mode 100644
index 0000000..ee4bf9e
--- /dev/null
+++ b/src/pages/UsersPage/Tasks/api/__tests__/useDeleteTask.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+
+import { QueryKeys } from 'common/utils/constants';
+import { Task } from 'pages/UsersPage/api/useGetUserTasks';
+import { todosFixture } from '__fixtures__/todos';
+import { queryClient } from 'test/query-client';
+import { renderHook, waitFor } from 'test/test-utils';
+
+import { useDeleteTask } from '../useDeleteTask';
+
+describe('useDeleteTask', () => {
+  it('should delete task', async () => {
+    // ARRANGE
+    const taskToDelete = todosFixture[0];
+    let isSuccess = false;
+    const { result } = renderHook(() => useDeleteTask());
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    // ACT
+    result.current.mutate(
+      { task: taskToDelete },
+      {
+        onSuccess: () => {
+          isSuccess = true;
+        },
+      },
+    );
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    // ASSERT
+    expect(isSuccess).toBe(true);
+  });
+
+  it('should remove cached data if it exists', async () => {
+    // ARRANGE
+    const taskToDelete = todosFixture[0];
+    queryClient.setQueryData([QueryKeys.Tasks, { userId: taskToDelete.userId }], [taskToDelete]);
+    let isSuccess = false;
+    const { result } = renderHook(() => useDeleteTask());
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    // ACT
+    result.current.mutate(
+      { task: taskToDelete },
+      {
+        onSuccess: () => {
+          isSuccess = true;
+        },
+      },
+    );
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    // ASSERT
+    expect(isSuccess).toBe(true);
+    expect(
+      queryClient.getQueryData<Task[]>([QueryKeys.Tasks, { userId: taskToDelete.userId }])?.length,
+    ).toBe(0);
+  });
+});
diff --git a/src/pages/UsersPage/Tasks/api/useDeleteTask.ts b/src/pages/UsersPage/Tasks/api/useDeleteTask.ts
new file mode 100644
index 0000000..d20b25c
--- /dev/null
+++ b/src/pages/UsersPage/Tasks/api/useDeleteTask.ts
@@ -0,0 +1,50 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import reject from 'lodash/reject';
+
+import { QueryKeys } from 'common/utils/constants';
+import { Task } from 'pages/UsersPage/api/useGetUserTasks';
+import { useAxios } from 'common/hooks/useAxios';
+import { useConfig } from 'common/hooks/useConfig';
+
+/**
+ * The `useDeleteTask` mutation function variables.
+ */
+export type DeleteTaskVariables = {
+  task: Task;
+};
+
+/**
+ * An API hook which deletes a single `Task`. Returns a `UseMutationResult`
+ * object whose `mutate` attribute is a function to delete a `Task`.
+ *
+ * When successful, the hook updates cached `Task` query data.
+ *
+ * @returns Returns a `UseMutationResult`.
+ */
+export const useDeleteTask = () => {
+  const queryClient = useQueryClient();
+  const config = useConfig();
+  const axios = useAxios();
+
+  /**
+   * Delete a `Task`.
+   * @param {DeleteTaskVariables} variables - The mutation function variables.
+   */
+  const deleteTask = async ({ task }: DeleteTaskVariables): Promise<void> => {
+    // throw new Error('Failed');
+    await axios.request({
+      method: 'delete',
+      url: `${config.VITE_BASE_URL_API}/todos/${task.id}`,
+    });
+  };
+
+  return useMutation({
+    mutationFn: deleteTask,
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<Task[]>(
+        [QueryKeys.Tasks, { userId: variables.task.userId }],
+        (cachedTasks) => (cachedTasks ? [...reject(cachedTasks, { id: variables.task.id })] : []),
+      );
+    },
+  });
+};
diff --git a/src/pages/UsersPage/Tasks/api/useUpdateTask.ts b/src/pages/UsersPage/Tasks/api/useUpdateTask.ts
index 90cac4c..0a2d054 100644
--- a/src/pages/UsersPage/Tasks/api/useUpdateTask.ts
+++ b/src/pages/UsersPage/Tasks/api/useUpdateTask.ts
@@ -15,7 +15,7 @@ export type UpdateTaskVariables = {
 
 /**
  * An API hook which updates a single `Task`. Returns a `UseMutationResult`
- * object whose `mutate` attribute is a function to update as `Task`.
+ * object whose `mutate` attribute is a function to update a `Task`.
  *
  * When successful, the hook updates cached `Task` query data.
  * @returns Returns a `UseMutationResult`.
diff --git a/src/pages/UsersPage/Tasks/components/TaskCompleteToggle.tsx b/src/pages/UsersPage/Tasks/components/TaskCompleteToggle.tsx
index 947fb54..f8ad08e 100644
--- a/src/pages/UsersPage/Tasks/components/TaskCompleteToggle.tsx
+++ b/src/pages/UsersPage/Tasks/components/TaskCompleteToggle.tsx
@@ -34,7 +34,7 @@ const TaskCompleteToggle = ({
   testId = 'toggle-task-complete',
 }: TaskCompleteToggleProps): JSX.Element => {
   const { t } = useTranslation();
-  const { mutate: updateTask } = useUpdateTask();
+  const { mutate: updateTask, isPending } = useUpdateTask();
   const { createToast } = useToasts();
 
   const buttonTitle = task.completed
@@ -71,6 +71,7 @@ const TaskCompleteToggle = ({
       variant={ButtonVariant.Text}
       title={buttonTitle}
       onClick={handleButtonClick}
+      disabled={isPending}
       data-testid={testId}
     >
       <FAIcon
diff --git a/src/pages/UsersPage/Tasks/components/TaskDeleteDialog.tsx b/src/pages/UsersPage/Tasks/components/TaskDeleteDialog.tsx
new file mode 100644
index 0000000..c352685
--- /dev/null
+++ b/src/pages/UsersPage/Tasks/components/TaskDeleteDialog.tsx
@@ -0,0 +1,60 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+import { Task } from 'pages/UsersPage/api/useGetUserTasks';
+import Dialog from 'common/components/Dialog/Dialog';
+import DialogHeading from 'common/components/Dialog/DialogHeading';
+import DialogContent from 'common/components/Dialog/DialogContent';
+import Divider from 'common/components/Dialog/Divider';
+import DialogButtons from 'common/components/Dialog/DialogButtons';
+import DialogButton from 'common/components/Dialog/DialogButton';
+
+/**
+ * Properties for the `TaskDeleteDialog` component.
+ * @param {function} onCancel - A function called when the cancel button is clicked.
+ * @param {function} onDelete - A function called when the delete button is clicked.
+ * @param {Task} task - The `Task` being deleted.
+ * @see {@link Dialog}
+ */
+interface TaskDeleteDialogProps extends ComponentPropsWithoutRef<typeof Dialog> {
+  onCancel: () => void;
+  onDelete: () => void;
+  task: Task;
+}
+
+/**
+ * The `TaskDeleteDialog` renders a dialog prompting for deletion confirmation
+ * of a `Task`.
+ * @param {TaskDeleteDialog} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const TaskDeleteDialog = ({
+  onCancel,
+  onDelete,
+  task,
+  testId = 'dialog-task-delete',
+  ...dialogProps
+}: TaskDeleteDialogProps): JSX.Element => {
+  return (
+    <Dialog testId={testId} {...dialogProps}>
+      <DialogHeading>Are you sure?</DialogHeading>
+      <DialogContent>
+        Deleting task <span className="text-neutral-500">{task.title}</span> is permanent.
+      </DialogContent>
+      <Divider />
+      <DialogButtons>
+        <DialogButton onClick={() => onCancel()} testId={`${testId}-button-cancel`}>
+          Cancel
+        </DialogButton>
+        <DialogButton
+          onClick={() => onDelete()}
+          variant="danger"
+          testId={`${testId}-button-delete`}
+        >
+          Delete
+        </DialogButton>
+      </DialogButtons>
+    </Dialog>
+  );
+};
+
+export default TaskDeleteDialog;
diff --git a/src/pages/UsersPage/Tasks/components/TaskDetail.tsx b/src/pages/UsersPage/Tasks/components/TaskDetail.tsx
index 4acd597..75eb241 100644
--- a/src/pages/UsersPage/Tasks/components/TaskDetail.tsx
+++ b/src/pages/UsersPage/Tasks/components/TaskDetail.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   Alert,
   AlertVariant,
@@ -6,16 +8,19 @@ import {
   PropsWithClassName,
   PropsWithTestId,
 } from '@leanstacks/react-common';
-import { useNavigate, useParams } from 'react-router-dom';
 import classNames from 'classnames';
 
+import { Task } from 'pages/UsersPage/api/useGetUserTasks';
 import Text from 'common/components/Text/Text';
 import { useGetTask } from '../api/useGetTask';
-import LoaderSkeleton from 'common/components/Loader/LoaderSkeleton';
+import { useDeleteTask } from '../api/useDeleteTask';
 import { useGetUser } from 'common/api/useGetUser';
+import { useToasts } from 'common/hooks/useToasts';
+import LoaderSkeleton from 'common/components/Loader/LoaderSkeleton';
 import LoaderSpinner from 'common/components/Loader/LoaderSpinner';
 import Badge from 'common/components/Badge/Badge';
 import FAIcon from 'common/components/Icon/FAIcon';
+import TaskDeleteDialog from './TaskDeleteDialog';
 
 /**
  * Properties for the `TaskDetail` component.
@@ -31,19 +36,41 @@ interface TaskDetailProps extends PropsWithClassName, PropsWithTestId {}
  * @returns {JSX.Element} JSX
  */
 const TaskDetail = ({ className, testId = 'task-detail' }: TaskDetailProps): JSX.Element => {
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false);
   const navigate = useNavigate();
   const { taskId } = useParams();
+  const { createToast } = useToasts();
+
   const {
     data: task,
     error: taskError,
     isLoading: isLoadingTask,
   } = useGetTask({ taskId: Number(taskId) });
+
   const {
     data: user,
     error: userError,
     isLoading: isLoadingUser,
   } = useGetUser({ userId: Number(task?.userId) });
 
+  const { mutate: deleteTask, isPending: isDeletePending, error: deleteError } = useDeleteTask();
+
+  const doDelete = (task: Task) => {
+    setIsDeleteDialogOpen(false);
+    deleteTask(
+      { task },
+      {
+        onSuccess: () => {
+          createToast({
+            text: `Deleted task ${task.id}`,
+            isAutoDismiss: true,
+          });
+          navigate(-1);
+        },
+      },
+    );
+  };
+
   return (
     <div className={className} data-testid={testId}>
       <div className="mb-1 flex items-center gap-2 border-b border-neutral-500/10 pb-1">
@@ -53,10 +80,16 @@ const TaskDetail = ({ className, testId = 'task-detail' }: TaskDetailProps): JSX
         {!!task && <div className="text-xl">{`#${task.id}`}</div>}
         <div className="ms-auto flex items-center gap-2">
           <FAIcon icon="pencil" className="px-2 py-1" />
-          <FAIcon icon="trash" className="px-2 py-1" />
           <Button
             variant={ButtonVariant.Text}
-            className=""
+            title="Delete"
+            onClick={() => setIsDeleteDialogOpen(true)}
+            testId={`${testId}-button-delete`}
+          >
+            <FAIcon icon="trash" />
+          </Button>
+          <Button
+            variant={ButtonVariant.Text}
             title="Close"
             onClick={() => navigate(-1)}
             testId={`${testId}-button-close`}
@@ -69,26 +102,37 @@ const TaskDetail = ({ className, testId = 'task-detail' }: TaskDetailProps): JSX
       {taskError && (
         <Alert
           variant={AlertVariant.Error}
-          className="mb-4 flex items-center gap-2 rounded-none"
+          className="my-4 flex items-center gap-2 rounded-none"
           testId={`${testId}-alert-taskError`}
         >
           <FAIcon icon="circleExclamation" />
-          {taskError.message}
+          {`Unable to retrieve task. Detail: ${taskError.message}`}
         </Alert>
       )}
 
       {userError && (
         <Alert
           variant={AlertVariant.Error}
-          className="mb-4 flex items-center gap-2 rounded-none"
+          className="my-4 flex items-center gap-2 rounded-none"
           testId={`${testId}-alert-userError`}
         >
           <FAIcon icon="circleExclamation" />
-          {userError.message}
+          {`Unable to retrieve user. Detail: ${userError.message}`}
+        </Alert>
+      )}
+
+      {deleteError && (
+        <Alert
+          variant={AlertVariant.Error}
+          className="my-4 flex items-center gap-2 rounded-none"
+          testId={`${testId}-alert-deleteError`}
+        >
+          <FAIcon icon="circleExclamation" />
+          {`Unable to delete task. Detail: ${deleteError.message}`}
         </Alert>
       )}
 
-      {isLoadingTask && (
+      {(isLoadingTask || isDeletePending) && (
         <div data-testid={`${testId}-loader`}>
           <div className="mt-4">
             <LoaderSkeleton className="mb-2 h-4 w-12" />
@@ -105,7 +149,7 @@ const TaskDetail = ({ className, testId = 'task-detail' }: TaskDetailProps): JSX
         </div>
       )}
 
-      {task && (
+      {task && !isDeletePending && (
         <div data-testid={`${testId}-task`}>
           <div className="mt-4">
             <div className="text-xs font-bold uppercase">Title</div>
@@ -131,6 +175,14 @@ const TaskDetail = ({ className, testId = 'task-detail' }: TaskDetailProps): JSX
               {task.completed ? 'COMPLETE' : 'INCOMPLETE'}
             </Badge>
           </div>
+
+          <TaskDeleteDialog
+            isOpen={isDeleteDialogOpen}
+            onCancel={() => setIsDeleteDialogOpen(false)}
+            onClose={() => setIsDeleteDialogOpen(false)}
+            onDelete={() => doDelete(task)}
+            task={task}
+          />
         </div>
       )}
     </div>
diff --git a/src/pages/UsersPage/Tasks/components/__tests__/TaskDeleteDialog.test.tsx b/src/pages/UsersPage/Tasks/components/__tests__/TaskDeleteDialog.test.tsx
new file mode 100644
index 0000000..1e121e7
--- /dev/null
+++ b/src/pages/UsersPage/Tasks/components/__tests__/TaskDeleteDialog.test.tsx
@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+
+import { render, screen } from 'test/test-utils';
+import { todosFixture } from '__fixtures__/todos';
+
+import TaskDeleteDialog from '../TaskDeleteDialog';
+
+describe('TaskDeleteDialog', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    const task = todosFixture[0];
+    const mockOnCancel = vi.fn();
+    const mockOnDelete = vi.fn();
+    render(
+      <TaskDeleteDialog
+        task={task}
+        onCancel={mockOnCancel}
+        onDelete={mockOnDelete}
+        testId="dialog"
+      />,
+    );
+    await screen.findByTestId('dialog');
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toBeDefined();
+  });
+
+  it('should call onCancel when cancel button clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    const task = todosFixture[0];
+    const mockOnCancel = vi.fn();
+    const mockOnDelete = vi.fn();
+    render(
+      <TaskDeleteDialog
+        task={task}
+        onCancel={mockOnCancel}
+        onDelete={mockOnDelete}
+        testId="dialog"
+      />,
+    );
+    await screen.findByTestId('dialog');
+
+    // ACT
+    await user.click(screen.getByTestId('dialog-button-cancel'));
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toBeDefined();
+    expect(mockOnCancel).toHaveBeenCalledOnce();
+    expect(mockOnDelete).not.toHaveBeenCalled();
+  });
+
+  it('should call onDelete when delete button clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    const task = todosFixture[0];
+    const mockOnCancel = vi.fn();
+    const mockOnDelete = vi.fn();
+    render(
+      <TaskDeleteDialog
+        task={task}
+        onCancel={mockOnCancel}
+        onDelete={mockOnDelete}
+        testId="dialog"
+      />,
+    );
+    await screen.findByTestId('dialog');
+
+    // ACT
+    await user.click(screen.getByTestId('dialog-button-delete'));
+
+    // ASSERT
+    expect(screen.getByTestId('dialog')).toBeDefined();
+    expect(mockOnDelete).toHaveBeenCalledOnce();
+    expect(mockOnCancel).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/pages/UsersPage/Tasks/components/__tests__/TaskDetail.test.tsx b/src/pages/UsersPage/Tasks/components/__tests__/TaskDetail.test.tsx
index 92f7287..1f1e28b 100644
--- a/src/pages/UsersPage/Tasks/components/__tests__/TaskDetail.test.tsx
+++ b/src/pages/UsersPage/Tasks/components/__tests__/TaskDetail.test.tsx
@@ -1,8 +1,9 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import { UseQueryResult } from '@tanstack/react-query';
+import { UseMutationResult, UseQueryResult } from '@tanstack/react-query';
 
 import { render, screen } from 'test/test-utils';
+import * as UseDeleteTask from 'pages/UsersPage/Tasks/api/useDeleteTask';
 import * as UseGetTask from 'pages/UsersPage/Tasks/api/useGetTask';
 import * as UseGetUser from 'common/api/useGetUser';
 import { Task } from 'pages/UsersPage/api/useGetUserTasks';
@@ -151,4 +152,82 @@ describe('TaskDetail', () => {
     expect(mockNavigate).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenCalledWith(-1);
   });
+
+  it('should display task delete error', async () => {
+    // ARRANGE
+    const useDeleteTaskSpy = vi.spyOn(UseDeleteTask, 'useDeleteTask');
+    useDeleteTaskSpy.mockReturnValue({
+      data: undefined,
+      error: new Error(),
+      isLoading: false,
+    } as unknown as UseMutationResult<void, Error, UseDeleteTask.DeleteTaskVariables>);
+    render(<TaskDetail />);
+    await screen.findByTestId('task-detail-alert-deleteError');
+
+    // ASSERT
+    expect(screen.getByTestId('task-detail-alert-deleteError')).toBeDefined();
+  });
+
+  it('should show the delete dialog', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(<TaskDetail />);
+    await screen.findByTestId('dialog-task-delete');
+    expect(screen.getByTestId('dialog-task-delete')).toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('task-detail-button-delete'));
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-task-delete')).not.toHaveClass('hidden');
+  });
+
+  it('should hide the delete dialog when cancel clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(<TaskDetail />);
+    await screen.findByTestId('dialog-task-delete');
+    expect(screen.getByTestId('dialog-task-delete')).toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('task-detail-button-delete'));
+    expect(screen.getByTestId('dialog-task-delete')).not.toHaveClass('hidden');
+
+    await user.click(screen.getByTestId('dialog-task-delete-button-cancel'));
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-task-delete')).toHaveClass('hidden');
+  });
+
+  it('should hide the delete dialog when backdrop clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(<TaskDetail />);
+    await screen.findByTestId('dialog-task-delete');
+    expect(screen.getByTestId('dialog-task-delete')).toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('task-detail-button-delete'));
+    expect(screen.getByTestId('dialog-task-delete')).not.toHaveClass('hidden');
+
+    await user.click(screen.getByTestId('dialog-task-delete-backdrop'));
+
+    // ASSERT
+    expect(screen.getByTestId('dialog-task-delete')).toHaveClass('hidden');
+  });
+
+  it('should delete a task', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(<TaskDetail />);
+    await screen.findByTestId('task-detail-button-delete');
+
+    // ACT
+    await user.click(screen.getByTestId('task-detail-button-delete'));
+    await user.click(screen.getByTestId('dialog-task-delete-button-delete'));
+
+    // ASSERT
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
+  });
 });
diff --git a/src/test/mocks/handlers.ts b/src/test/mocks/handlers.ts
index 1859095..88034df 100644
--- a/src/test/mocks/handlers.ts
+++ b/src/test/mocks/handlers.ts
@@ -45,4 +45,13 @@ export const handlers = [
     }
     return new HttpResponse(null, { status: 404 });
   }),
+  http.delete('https://jsonplaceholder.typicode.com/todos/:todoId', async ({ params }) => {
+    // delete a task
+    const { todoId } = params;
+    const todo = find(todosFixture, { id: Number(todoId) });
+    if (todo) {
+      return new HttpResponse(null, { status: 200 });
+    }
+    return new HttpResponse(null, { status: 500 });
+  }),
 ];