feat: separate DeleteAll into separate component

src/features/products/components/DeleteAllProducts.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Button, Dialog } from '~/components';
+import { Icons } from '~/lib/phosphor';
+
+interface DeleteAllProductsProps {
+  disabled: boolean;
+  n: number;
+  onConfirm: () => void;
+}
+
+const DeleteAllProducts: React.FC<DeleteAllProductsProps> = ({
+  disabled,
+  n,
+  onConfirm,
+}) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const openDialog = () => setIsDialogOpen(true);
+  const closeDialog = () => setIsDialogOpen(false);
+
+  const nString = `${n} product${n === 1 ? '' : 's'}`;
+
+  return (
+    <>
+      <Button
+        onClick={openDialog}
+        disabled={disabled}
+        color="danger"
+        variant="primary"
+        // icon size should match the size specified here
+        icon={<Icons.Trash />}
+      >
+        Delete All
+      </Button>
+      <Dialog
+        open={isDialogOpen}
+        onClose={closeDialog}
+        title={`Delete ${nString}`}
+        actions={[
+          <Button key="cancel" variant="secondary" onClick={closeDialog}>
+            Cancel
+          </Button>,
+          <Button
+            key="delete"
+            color="danger"
+            onClick={() => {
+              onConfirm();
+              closeDialog();
+            }}
+            icon={<Icons.Trash />}
+          >
+            Delete All
+          </Button>,
+        ]}
+      >
+        You are about to delete <b>{nString}</b>.
+        <br />
+        <br />
+        <b>This action cannot be undone.</b>
+      </Dialog>
+    </>
+  );
+};
+
+export default DeleteAllProducts;

src/features/products/routes/Products.tsx

@@ -6,6 +6,7 @@ import {
   useDeleteProducts,
   useQueryProducts,
 } from '~/features/products';
+import DeleteAllProducts from '~/features/products/components/DeleteAllProducts';
 import { ProductsList } from '../components';
 import { Icons } from '~/lib/phosphor';
 
@@ -22,46 +23,9 @@ export function Products() {
     <div className="space-y-4">
       {/* Temporary delete all products button until we have a proper header for that */}
       {/* TODO: isolate this into a component */}
-      <Button // TODO: add tooltip? Not sure if we need it. Find examples of this.
-        onClick={openDialog}
-        disabled={!n}
-        color="danger"
-        variant="primary"
-        // size="md" TODO: match the size of the icon to the size specified here.
-        icon={<Icons.Trash />}
-      >
-        Delete All
-      </Button>
-      <Dialog
-        open={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
-        title={`Delete ${nString}`}
-        actions={[
-          <Button
-            key="cancel"
-            variant="secondary"
-            onClick={() => setIsDialogOpen(false)}
-          >
-            Cancel
-          </Button>,
-          <Button // TODO: add keyboard actions
-            key="delete"
-            color="danger"
-            onClick={() => {
-              setIsDialogOpen(false);
-              mutate();
-            }}
-            icon={<Icons.Trash />}
-          >
-            Delete All
-          </Button>,
-        ]}
-      >
-        You are about to delete <b>{nString}</b>.
-        <br />
-        <br />
-        <b>This action cannot be undone.</b>
-      </Dialog>
+      {/* TODO: add tooltip? Not sure if we need it. Find examples of this*/}
+      {/*// size="md" TODO: match the size of the icon to the size specified here. */}
+      <DeleteAllProducts disabled={n === 0} n={n} onConfirm={() => mutate()} />
 
       <ProductsList />
       <div className="rounded-md border border-gray-200 bg-white p-4">