From f0ea95e141d1398cfdb991d25517b873f1d5e7f5 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 8 Oct 2024 09:01:55 +0530
Subject: [PATCH] Extract

---
 .../PhotoViewer/ImageEditorOverlay/index.tsx  | 58 ++++++++-----------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 5674984e8e..531c86469a 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -493,6 +493,30 @@ const ImageEditorOverlay = (props: IProps) => {
             log.error("Error saving copy to ente", e);
         }
     };
+
+    const applyCrop = () => {
+        if (!cropBoxRef.current || !canvasRef.current) return;
+
+        const { x1, x2, y1, y2 } = getCropRegionArgs(
+            cropBoxRef.current,
+            canvasRef.current,
+        );
+        setCanvasLoading(true);
+        setTransformationPerformed(true);
+        cropRegionOfCanvas(canvasRef.current, x1, y1, x2, y2);
+        cropRegionOfCanvas(
+            originalSizeCanvasRef.current,
+            x1 / previewCanvasScale,
+            y1 / previewCanvasScale,
+            x2 / previewCanvasScale,
+            y2 / previewCanvasScale,
+        );
+        resetCropBox();
+        setCanvasLoading(false);
+
+        setCurrentTab("transform");
+    };
+
     return (
         <>
             <Backdrop
@@ -583,39 +607,7 @@ const ImageEditorOverlay = (props: IProps) => {
                                     <EnteButton
                                         color="accent"
                                         startIcon={<CropIcon />}
-                                        onClick={() => {
-                                            if (
-                                                !cropBoxRef.current ||
-                                                !canvasRef.current
-                                            )
-                                                return;
-
-                                            const { x1, x2, y1, y2 } =
-                                                getCropRegionArgs(
-                                                    cropBoxRef.current,
-                                                    canvasRef.current,
-                                                );
-                                            setCanvasLoading(true);
-                                            setTransformationPerformed(true);
-                                            cropRegionOfCanvas(
-                                                canvasRef.current,
-                                                x1,
-                                                y1,
-                                                x2,
-                                                y2,
-                                            );
-                                            cropRegionOfCanvas(
-                                                originalSizeCanvasRef.current,
-                                                x1 / previewCanvasScale,
-                                                y1 / previewCanvasScale,
-                                                x2 / previewCanvasScale,
-                                                y2 / previewCanvasScale,
-                                            );
-                                            resetCropBox();
-                                            setCanvasLoading(false);
-
-                                            setCurrentTab("transform");
-                                        }}
+                                        onClick={applyCrop}
                                     >
                                         {t("APPLY_CROP")}
                                     </EnteButton>