From f7c2152f45cd696426ccba668899990c8ee9b285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Lu=C3=ADs?= <matheus.bernardi@lnls.br>
Date: Thu, 28 Mar 2024 16:18:54 -0300
Subject: [PATCH] refactor: unify clear canvas and reset buttons

---
 .../components/toolbar/clear-canvas.tsx       | 52 -------------------
 apps/pianno/components/toolbar/reset.tsx      | 24 +++++++--
 apps/pianno/components/toolbar/toolbar.tsx    |  2 -
 3 files changed, 19 insertions(+), 59 deletions(-)
 delete mode 100644 apps/pianno/components/toolbar/clear-canvas.tsx

diff --git a/apps/pianno/components/toolbar/clear-canvas.tsx b/apps/pianno/components/toolbar/clear-canvas.tsx
deleted file mode 100644
index acd74a0..0000000
--- a/apps/pianno/components/toolbar/clear-canvas.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
-import { useStoreActions } from '@/hooks/use-store';
-import { useTemporalStore } from '@/providers/store';
-import { Trash2Icon } from 'lucide-react';
-import { FC } from 'react';
-
-import { Button } from '../ui/button';
-
-interface ClearCanvasProps {}
-
-const ClearCanvas: FC<ClearCanvasProps> = ({}) => {
-  const { softReset } = useStoreActions();
-  const { clear } = useTemporalStore((state) => state);
-  const onContinue = () => {
-    softReset();
-    clear();
-  };
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button size="icon" title="clear canvas" variant="outline">
-          <Trash2Icon className="h-4 w-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            annotations and reset your canvas.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onContinue}>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
-export default ClearCanvas;
diff --git a/apps/pianno/components/toolbar/reset.tsx b/apps/pianno/components/toolbar/reset.tsx
index b80ea38..4ba1a1d 100644
--- a/apps/pianno/components/toolbar/reset.tsx
+++ b/apps/pianno/components/toolbar/reset.tsx
@@ -9,21 +9,27 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-import { useStoreActions } from '@/hooks/use-store';
+import { useStoreActions, useStoreImg } from '@/hooks/use-store';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { useTemporalStore } from '@/providers/store';
 import { RotateCcwIcon } from 'lucide-react';
 import { FC } from 'react';
 
-import { Button } from '../ui/button';
+import { Button, buttonVariants } from '../ui/button';
 
 interface ResetProps {}
 
 const Reset: FC<ResetProps> = ({}) => {
-  const { recenterViewport, reset } = useStoreActions();
+  const { recenterViewport, reset, softReset } = useStoreActions();
+  const img = useStoreImg();
   const { clear } = useTemporalStore((state) => state);
   const [width, height] = useWindowSize();
-  const onContinue = () => {
+  const handleClean = () => {
+    softReset();
+    clear();
+    recenterViewport(img.width, img.height);
+  };
+  const handleReset = () => {
     reset();
     clear();
     recenterViewport(width, height);
@@ -45,7 +51,15 @@ const Reset: FC<ResetProps> = ({}) => {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onContinue}>Continue</AlertDialogAction>
+          <AlertDialogAction disabled={img.src === '#'} onClick={handleClean}>
+            Clear Canvas
+          </AlertDialogAction>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+            onClick={handleReset}
+          >
+            Clear Everything
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/apps/pianno/components/toolbar/toolbar.tsx b/apps/pianno/components/toolbar/toolbar.tsx
index 5623744..2df1d78 100644
--- a/apps/pianno/components/toolbar/toolbar.tsx
+++ b/apps/pianno/components/toolbar/toolbar.tsx
@@ -18,7 +18,6 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Button, buttonVariants } from '../ui/button';
-import ClearCanvas from './clear-canvas';
 import OpenImageDialog from './open';
 import Reset from './reset';
 import SaveDialog from './save';
@@ -161,7 +160,6 @@ const Toolbar = () => {
             {action.children}
           </Button>
         ))}
-        <ClearCanvas />
         <Reset />
       </div>
       {img.src === '#' && <ToolbarMessenger />}