From 224df1300fda215b5d010b578e7ea669daa6fed6 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 4 Mar 2024 20:40:14 +0100
Subject: [PATCH] Feature/improve back navigation button (#636)

* Improve detection of last page in history

* Use "useBackButton" in reader
---
 src/components/navbar/ReaderNavBar.tsx | 20 ++++++--------------
 src/util/useBackButton.ts              | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index a7cdfdce..c43ecc1f 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -25,6 +25,8 @@ import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
 import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
+import { useBackButton } from '@/util/useBackButton.ts';
+import { useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 
 const Root = styled('div')({
     zIndex: 10,
@@ -137,6 +139,9 @@ export function ReaderNavBar(props: IProps) {
     const { settings, setSettingValue, manga, chapter, curPage, scrollToPage, openNextChapter, retrievingNextChapter } =
         props;
 
+    const handleBack = useBackButton();
+    useSetDefaultBackTo(`/manga/${manga.id}`);
+
     const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen);
     const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true);
     const [hideOpenButton, setHideOpenButton] = useState(settings.staticNav || prevDrawerOpen);
@@ -188,19 +193,6 @@ export function ReaderNavBar(props: IProps) {
         };
     }, [handleScroll]); // handleScroll changes on every render
 
-    const handleClose = () => {
-        const isLastPageInHistory = location.key === 'default';
-
-        if (isLastPageInHistory) {
-            navigate(`/manga/${manga.id}`);
-            return;
-        }
-
-        // this works because opening previous/next chapter will replace the current history element.
-        // in case this gets changed this has to be updated
-        navigate(-1);
-    };
-
     return (
         <Root>
             <Slide direction="right" in={drawerOpen} timeout={200} appear={false} mountOnEnter unmountOnExit>
@@ -233,7 +225,7 @@ export function ReaderNavBar(props: IProps) {
                                 color="inherit"
                                 aria-label="menu"
                                 disableRipple
-                                onClick={handleClose}
+                                onClick={handleBack}
                                 size="large"
                                 sx={{ mr: -1 }}
                             >
diff --git a/src/util/useBackButton.ts b/src/util/useBackButton.ts
index 690942e0..7fe77e93 100644
--- a/src/util/useBackButton.ts
+++ b/src/util/useBackButton.ts
@@ -18,14 +18,20 @@ export const useBackButton = () => {
     const { defaultBackTo: backToUrl } = useContext(NavBarContext);
 
     return () => {
-        const isLastPageInHistory = location.key === 'default';
-        const wasPreviousPageReader = history[history.length - 2]?.match(/\/manga\/[0-9]+\/chapter\/[0-9]+.*/g);
+        const isHistoryEmpty = !history.length;
+        const isLastPageInHistoryCurrentPage = history.length === 1 && history[0] === location.pathname;
 
-        if (isLastPageInHistory || wasPreviousPageReader) {
-            navigate(backToUrl ?? '');
+        const canNavigateBack = !isHistoryEmpty && !isLastPageInHistoryCurrentPage;
+        if (canNavigateBack) {
+            navigate(-1);
             return;
         }
 
-        navigate(-1);
+        if (backToUrl) {
+            navigate(backToUrl);
+            return;
+        }
+
+        navigate('/library');
     };
 };