From d469b1771e58cb0212f79db21d02b71ca3564ae7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 08:33:03 +1000
Subject: [PATCH] feat(ui): move canvas undo/redo to hook

---
 .../components/ControlLayersToolbar.tsx       |  5 +--
 .../useCanvasUndoRedo.tsx}                    | 35 +++----------------
 2 files changed, 8 insertions(+), 32 deletions(-)
 rename invokeai/frontend/web/src/features/controlLayers/{components/UndoRedoButtonGroup.tsx => hooks/useCanvasUndoRedo.tsx} (50%)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index 885d47d7ff..f5bea9877f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -7,13 +7,15 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
 import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
-import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useCanvasUndoRedo } from 'features/controlLayers/hooks/useCanvasUndoRedo';
 import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
 import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
 export const ControlLayersToolbar = memo(() => {
+  useCanvasUndoRedo();
+
   return (
     <CanvasManagerProviderGate>
       <Flex w="full" gap={2} alignItems="center">
@@ -27,7 +29,6 @@ export const ControlLayersToolbar = memo(() => {
         <Spacer />
         <ToolFillColorPicker />
         <CanvasModeSwitcher />
-        <UndoRedoButtonGroup />
         <CanvasSettingsPopover />
         <ViewerToggleMenu />
       </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasUndoRedo.tsx
similarity index 50%
rename from invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
rename to invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasUndoRedo.tsx
index fb3dae9b90..8013fd36fe 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasUndoRedo.tsx
@@ -1,16 +1,14 @@
 /* eslint-disable i18next/no-literal-string */
-import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { canvasRedo, canvasUndo } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasMayRedo, selectCanvasMayUndo } from 'features/controlLayers/store/selectors';
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-import { PiArrowClockwiseBold, PiArrowCounterClockwiseBold } from 'react-icons/pi';
 import { useDispatch } from 'react-redux';
 
-export const UndoRedoButtonGroup = memo(() => {
-  const { t } = useTranslation();
+export const useCanvasUndoRedo = () => {
+  useAssertSingleton('useCanvasUndoRedo');
   const dispatch = useDispatch();
 
   const mayUndo = useAppSelector(selectCanvasMayUndo);
@@ -27,27 +25,4 @@ export const UndoRedoButtonGroup = memo(() => {
     mayRedo,
     handleRedo,
   ]);
-
-  return (
-    <ButtonGroup isAttached={false}>
-      <IconButton
-        aria-label={t('unifiedCanvas.undo')}
-        tooltip={t('unifiedCanvas.undo')}
-        onClick={handleUndo}
-        icon={<PiArrowCounterClockwiseBold />}
-        isDisabled={!mayUndo}
-        variant="ghost"
-      />
-      <IconButton
-        aria-label={t('unifiedCanvas.redo')}
-        tooltip={t('unifiedCanvas.redo')}
-        onClick={handleRedo}
-        icon={<PiArrowClockwiseBold />}
-        isDisabled={!mayRedo}
-        variant="ghost"
-      />
-    </ButtonGroup>
-  );
-});
-
-UndoRedoButtonGroup.displayName = 'UndoRedoButtonGroup';
+};