From d29aed92eb6ccd03fec88e0ff1adde4440fd97d4 Mon Sep 17 00:00:00 2001
From: aruay99 <aruaiberdk@gmail.com>
Date: Fri, 24 Nov 2023 19:08:00 +0600
Subject: [PATCH 1/2] feat: separate DeleteAll  into  separate component

---
 .../products/components/DeleteAllProducts.tsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/features/products/components/DeleteAllProducts.tsx

diff --git a/src/features/products/components/DeleteAllProducts.tsx b/src/features/products/components/DeleteAllProducts.tsx
new file mode 100644
index 00000000..36148bdf
--- /dev/null
+++ b/src/features/products/components/DeleteAllProducts.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button, Dialog } from '~/components';
+import { Icons } from '~/lib/phosphor';
+
+const DeleteAllProducts = ({ onClick, disabled, n, onConfirm }) => {
+  const openDialog = () => onClick(true);
+
+  const nString = `${n} product${n === 1 ? '' : 's'}`;
+
+  return (
+    <>
+      <Button
+        onClick={openDialog}
+        disabled={disabled}
+        color="danger"
+        variant="primary"
+        icon={<Icons.Trash />}
+      >
+        Delete All
+      </Button>
+      <Dialog
+        open={onClick}
+        onClose={() => onClick(false)}
+        title={`Delete ${nString}`}
+        actions={[
+          <Button
+            key="cancel"
+            variant="secondary"
+            onClick={() => onClick(false)}
+          >
+            Cancel
+          </Button>,
+          <Button
+            key="delete"
+            color="danger"
+            onClick={() => {
+              onClick(false);
+              onConfirm();
+            }}
+            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;

From 0869d9e5f546d54c0334116203074dae79ee4a74 Mon Sep 17 00:00:00 2001
From: aruay99 <aruaiberdk@gmail.com>
Date: Fri, 24 Nov 2023 19:40:49 +0600
Subject: [PATCH 2/2] fix: fix the bug

---
 .../products/components/DeleteAllProducts.tsx | 32 +++++++++-----
 src/features/products/routes/Products.tsx     | 44 ++-----------------
 2 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/src/features/products/components/DeleteAllProducts.tsx b/src/features/products/components/DeleteAllProducts.tsx
index 36148bdf..14d3682f 100644
--- a/src/features/products/components/DeleteAllProducts.tsx
+++ b/src/features/products/components/DeleteAllProducts.tsx
@@ -1,9 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Dialog } from '~/components';
 import { Icons } from '~/lib/phosphor';
 
-const DeleteAllProducts = ({ onClick, disabled, n, onConfirm }) => {
-  const openDialog = () => onClick(true);
+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'}`;
 
@@ -14,28 +27,25 @@ const DeleteAllProducts = ({ onClick, disabled, n, onConfirm }) => {
         disabled={disabled}
         color="danger"
         variant="primary"
+        // icon size should match the size specified here
         icon={<Icons.Trash />}
       >
         Delete All
       </Button>
       <Dialog
-        open={onClick}
-        onClose={() => onClick(false)}
+        open={isDialogOpen}
+        onClose={closeDialog}
         title={`Delete ${nString}`}
         actions={[
-          <Button
-            key="cancel"
-            variant="secondary"
-            onClick={() => onClick(false)}
-          >
+          <Button key="cancel" variant="secondary" onClick={closeDialog}>
             Cancel
           </Button>,
           <Button
             key="delete"
             color="danger"
             onClick={() => {
-              onClick(false);
               onConfirm();
+              closeDialog();
             }}
             icon={<Icons.Trash />}
           >
diff --git a/src/features/products/routes/Products.tsx b/src/features/products/routes/Products.tsx
index 92d1ef25..515de1d9 100644
--- a/src/features/products/routes/Products.tsx
+++ b/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">