Fix/back button not working without browser history (#389)

* Introduce local history stack

To be able to know if the browser back navigation should be used, it is sometimes necessary to know which the previous page was.
E.g. it should not be used in case the current page is the manga page and the previous one is the reader.

* Handle cases where there is no previous page in the history stack

* Always use a button for the navigation back button

* Navigate from base route to library by replacing the current location

The base route should not be included in the history
This commit is contained in:
schroda
2023-06-26 20:40:35 +02:00
committed by GitHub
parent 1d76e990ae
commit 09b10cd5ab
11 changed files with 83 additions and 12 deletions

42
src/util/useHistory.ts Normal file
View File

@@ -0,0 +1,42 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useState } from 'react';
import { NavigationType, useLocation, useNavigationType } from 'react-router-dom';
// eslint-disable-next-line import/prefer-default-export
export const useHistory = () => {
const location = useLocation();
const navigationType = useNavigationType();
const [history, setHistory] = useState<string[]>([location.pathname]);
useEffect(() => {
const isLastPageInHistory = location.key === 'default';
const ignoreInitialPop = isLastPageInHistory && history.length === 1;
if (ignoreInitialPop) {
return;
}
switch (navigationType) {
case NavigationType.Pop:
setHistory([...history.slice(0, -1)]);
break;
case NavigationType.Push:
setHistory([...history, location.pathname]);
break;
case NavigationType.Replace:
setHistory([...history.slice(0, -1), location.pathname]);
break;
default:
throw new Error(`Unexpected NavigationType "${navigationType}"`);
}
}, [location]);
return history;
};