From 4266e2a55781afee00add487a898a3b54666ca73 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Fri, 16 Jul 2021 14:57:11 +0500
Subject: [PATCH] Added page scroll with right/left keys

---
 src/pages/BookView/index.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/pages/BookView/index.tsx b/src/pages/BookView/index.tsx
index e160706..0654319 100644
--- a/src/pages/BookView/index.tsx
+++ b/src/pages/BookView/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { Redirect, useRoute } from "wouter";
 
 import styles from "./BookView.module.css";
@@ -21,6 +21,29 @@ export const BookView = () => {
     params?.hash ? books[params.hash]?.content : undefined
   );
 
+  const currentPageRef = useRef(currentPage);
+
+  useEffect(() => {
+    currentPageRef.current = currentPage;
+  }, [currentPage]);
+
+  useEffect(() => {
+    if (ready) {
+      const handleKey = ({ key }: KeyboardEvent) => {
+        switch (key) {
+          case "ArrowLeft":
+            goToPage(currentPageRef.current - 1);
+            break;
+          case "ArrowRight":
+            goToPage(currentPageRef.current + 1);
+            break;
+        }
+      };
+
+      window.addEventListener("keydown", handleKey);
+    }
+  }, [ready]);
+
   if (params?.hash && params.hash in books)
     return (
       <>
@@ -30,12 +53,8 @@ export const BookView = () => {
           </div>
         )}
         <div className={styles.content} ref={contentRef} />
-        <div
-          style={{ visibility: "visible", height: "100%" }}
-          className={styles.pageContainer}
-          ref={pageContainerRef}
-        >
-          <div onClick={() => goToPage(currentPage + 1)} ref={pageRef} />
+        <div className={styles.pageContainer} ref={pageContainerRef}>
+          <div ref={pageRef} />
         </div>
       </>
     );