Refactor zooming code into "effects/use-zoom.js"

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
 

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(() => {
+  useZoom();
-    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);
-  }, []);
   // @endif
 
   useEffect(() => {

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);
+  }, []);
+}