From 2ea66f9d8d1a377e620a72561c7faf1bc744b3e1 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 14 Jul 2020 03:16:38 +0800
Subject: [PATCH] Refactor zooming code into "effects/use-zoom.js"

---
 CHANGELOG.md              |  3 ++-
 ui/component/app/view.jsx | 45 ++-----------------------------------
 ui/effects/use-zoom.js    | 47 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 44 deletions(-)
 create mode 100644 ui/effects/use-zoom.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b033f672..64af1d476 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+- Allow zooming on Desktop _community pr!_ ([#4513](https://github.com/lbryio/lbry-desktop/pull/4513))
+
 ### Changed
 
 ### Fixed
@@ -26,7 +28,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - New channel create/edit page ([#4445](https://github.com/lbryio/lbry-desktop/pull/4445))
 - Add dialog to copy various types of links for a claim _community pr!_ ([#4474](https://github.com/lbryio/lbry-desktop/pull/4474))
 - Add password reset link to settings page for logged in users _community pr!_ ([#4473](https://github.com/lbryio/lbry-desktop/pull/4473))
-- Allow zooming on Desktop _community pr!_ ([#4513](https://github.com/lbryio/lbry-desktop/pull/4513))
 
 ### Changed
 
diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index 1241f334c..9e7ff65c3 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -18,7 +18,7 @@ import REWARDS from 'rewards';
 import usePersistedState from 'effects/use-persisted-state';
 import FileDrop from 'component/fileDrop';
 // @if TARGET='app'
-import { changeZoomFactor, ZOOM } from 'util/zoomWindow';
+import useZoom from 'effects/use-zoom';
 // @endif
 // @if TARGET='web'
 import OpenInAppLink from 'web/component/openInAppLink';
@@ -177,48 +177,7 @@ function App(props: Props) {
 
   // Enable ctrl +/- zooming on Desktop.
   // @if TARGET='app'
-  useEffect(() => {
-    const handleKeyPress = e => {
-      if (e.ctrlKey && !e.shiftKey) {
-        switch (e.code) {
-          case 'NumpadAdd':
-          case 'Equal':
-            e.preventDefault();
-            changeZoomFactor(ZOOM.INCREMENT);
-            break;
-          case 'NumpadSubtract':
-          case 'Minus':
-            e.preventDefault();
-            changeZoomFactor(ZOOM.DECREMENT);
-            break;
-          case 'Numpad0':
-          case 'Digit0':
-            e.preventDefault();
-            changeZoomFactor(ZOOM.RESET);
-            break;
-          default:
-            // Do nothing
-            break;
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyPress);
-    return () => window.removeEventListener('keydown', handleKeyPress);
-  }, []);
-
-  useEffect(() => {
-    const handleWheel = e => {
-      if (e.ctrlKey && !e.shiftKey) {
-        if (e.deltaY < 0) {
-          changeZoomFactor(ZOOM.INCREMENT);
-        } else {
-          changeZoomFactor(ZOOM.DECREMENT);
-        }
-      }
-    };
-    window.addEventListener('wheel', handleWheel);
-    return () => window.removeEventListener('wheel', handleWheel);
-  }, []);
+  useZoom();
   // @endif
 
   useEffect(() => {
diff --git a/ui/effects/use-zoom.js b/ui/effects/use-zoom.js
new file mode 100644
index 000000000..32022ffb2
--- /dev/null
+++ b/ui/effects/use-zoom.js
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { changeZoomFactor, ZOOM } from 'util/zoomWindow';
+
+export default function useHover(ref) {
+  useEffect(() => {
+    const handleKeyPress = e => {
+      if (e.ctrlKey && !e.shiftKey) {
+        switch (e.code) {
+          case 'NumpadAdd':
+          case 'Equal':
+            e.preventDefault();
+            changeZoomFactor(ZOOM.INCREMENT);
+            break;
+          case 'NumpadSubtract':
+          case 'Minus':
+            e.preventDefault();
+            changeZoomFactor(ZOOM.DECREMENT);
+            break;
+          case 'Numpad0':
+          case 'Digit0':
+            e.preventDefault();
+            changeZoomFactor(ZOOM.RESET);
+            break;
+          default:
+            // Do nothing
+            break;
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, []);
+
+  useEffect(() => {
+    const handleWheel = e => {
+      if (e.ctrlKey && !e.shiftKey) {
+        if (e.deltaY < 0) {
+          changeZoomFactor(ZOOM.INCREMENT);
+        } else {
+          changeZoomFactor(ZOOM.DECREMENT);
+        }
+      }
+    };
+    window.addEventListener('wheel', handleWheel);
+    return () => window.removeEventListener('wheel', handleWheel);
+  }, []);
+}