From d0f42ce6b326ac9fcc4649ffa31a4b105d98fab8 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Fri, 18 Dec 2020 00:00:52 +0800
Subject: [PATCH] Desktop: Enable 'Alt+Left/Right' for history navigation.

## Why
- Consistent behavior across Web and Desktop.
---
 CHANGELOG.md                  |  2 ++
 ui/component/app/view.jsx     |  6 ++++++
 ui/effects/use-history-nav.js | 25 +++++++++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 ui/effects/use-history-nav.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3cf61cd1a..49180440f 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
 
+- Desktop: Enable 'Alt+Left/Right' for history navigation _community pr!_ ([#5203](https://github.com/lbryio/lbry-desktop/pull/5203))
+
 ### Changed
 
 ### Fixed
diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index 9d01f23bb..8908c9f0f 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -22,6 +22,7 @@ import Spinner from 'component/spinner';
 import SyncFatalError from 'component/syncFatalError';
 // @if TARGET='app'
 import useZoom from 'effects/use-zoom';
+import useHistoryNav from 'effects/use-history-nav';
 // @endif
 // @if TARGET='web'
 import OpenInAppLink from 'web/component/openInAppLink';
@@ -192,6 +193,11 @@ function App(props: Props) {
   useZoom();
   // @endif
 
+  // Enable 'Alt + Left/Right' for history navigation on Desktop.
+  // @if TARGET='app'
+  useHistoryNav(history);
+  // @endif
+
   useEffect(() => {
     if (referredRewardAvailable && sanitizedReferrerParam && isRewardApproved) {
       setReferrer(sanitizedReferrerParam, true);
diff --git a/ui/effects/use-history-nav.js b/ui/effects/use-history-nav.js
new file mode 100644
index 000000000..aa82b4077
--- /dev/null
+++ b/ui/effects/use-history-nav.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export default function useHistoryNav(history) {
+  useEffect(() => {
+    const handleKeyPress = e => {
+      if ((e.metaKey || e.altKey) && !e.ctrlKey && !e.shiftKey) {
+        switch (e.code) {
+          case 'ArrowLeft':
+            e.preventDefault();
+            history.goBack();
+            break;
+          case 'ArrowRight':
+            e.preventDefault();
+            history.goForward();
+            break;
+          default:
+            // Do nothing
+            break;
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, []);
+}