From 1d326ae69c70a91f05b1cc4dc85d01bf09e7079d Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Sat, 24 Jul 2021 20:42:52 +0300
Subject: [PATCH] Added page navigation with number

---
 src/pages/BookView/BookView.module.css |  4 ++++
 src/pages/BookView/index.tsx           | 11 +++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/BookView/BookView.module.css b/src/pages/BookView/BookView.module.css
index 8c80780..940680a 100644
--- a/src/pages/BookView/BookView.module.css
+++ b/src/pages/BookView/BookView.module.css
@@ -56,6 +56,10 @@
   justify-content: center;
 }
 
+.pageNumber {
+  cursor: pointer;
+}
+
 .pageSwitchArrow {
   background: none;
   border: none;
diff --git a/src/pages/BookView/index.tsx b/src/pages/BookView/index.tsx
index 65fb059..c28d1c6 100644
--- a/src/pages/BookView/index.tsx
+++ b/src/pages/BookView/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from "react";
+import React, { MouseEventHandler, useContext, useEffect, useRef } from "react";
 import { Redirect, useRoute } from "wouter";
 
 import styles from "./BookView.module.css";
@@ -60,6 +60,13 @@ export const BookView = ({ setLoading, loading }: IPageProps) => {
 
   const goPrev = () => goToPage(currentPage - 1);
   const goNext = () => goToPage(currentPage + 1);
+  const insertNumber: MouseEventHandler<HTMLSpanElement> = (e) => {
+    const str = prompt("Page number");
+    if (str) {
+      const n = parseInt(str);
+      if (!isNaN(n) && n > 0) goToPage(n - 1);
+    }
+  };
 
   if (books) {
     if (params?.hash && params.hash in books)
@@ -81,7 +88,7 @@ export const BookView = ({ setLoading, loading }: IPageProps) => {
             <button className={styles.pageSwitchArrow} onClick={goPrev}>
               {currentPage !== 0 && "←"}
             </button>
-            <span>
+            <span className={styles.pageNumber} onClick={insertNumber}>
               {currentPage + 1} / {pagesNumber}
             </span>
             <button className={styles.pageSwitchArrow} onClick={goNext}>