Fix navbar back button behavior (#195)

* Enable passing backLink through location state. Explicitly handle cases for BACK

* Allow pages to override default backLink. Fix manga page back link

* Cleanup

src/components/navbar/DefaultNavBar.tsx

@@ -23,12 +23,13 @@ import GetAppIcon from '@mui/icons-material/GetApp';
 import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
 import { Box } from '@mui/system';
 import { createPortal } from 'react-dom';
+import useBackTo from 'util/useBackTo';
 import DesktopSideBar from './navigation/DesktopSideBar';
 import MobileBottomBar from './navigation/MobileBottomBar';
 
@@ -80,6 +81,7 @@ const navbarItems: Array<NavbarItem> = [
 
 export default function DefaultNavBar() {
     const { title, action, override } = useContext(NavBarContext);
+    const backTo = useBackTo();
     const { darkTheme } = useContext(DarkTheme);
 
     const theme = useTheme();
@@ -100,28 +102,30 @@ export default function DefaultNavBar() {
         navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
     }
 
+    const handleBack = () => {
+        if (backTo.url != null) return;
+        history.goBack();
+    };
+
     return (
         <Box sx={{ flexGrow: 1 }}>
             <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                 <Toolbar>
-                    {
-                        !navbarItems.some(({ path }) => path === history.location.pathname)
-                            && (
-                                <IconButton
-                                    edge="start"
-                                    sx={{ marginRight: theme.spacing(2) }}
-                                    color="inherit"
-                                    aria-label="menu"
-                                    disableRipple
-                                    // when page is opened in new tab backbutton will
-                                    // take you to the library
-                                    onClick={() => (history.length === 1 ? history.push('/library') : history.goBack())}
-                                    size="large"
-                                >
-                                    <ArrowBack />
-                                </IconButton>
-                            )
-                    }
+                    {!isMainRoute && (
+                        <IconButton
+                            component={backTo.url ? Link : 'button'}
+                            to={backTo.url}
+                            edge="start"
+                            sx={{ marginRight: theme.spacing(2) }}
+                            color="inherit"
+                            aria-label="menu"
+                            disableRipple
+                            size="large"
+                            onClick={handleBack}
+                        >
+                            <ArrowBack />
+                        </IconButton>
+                    )}
                     <Typography variant={isMobileWidth ? 'h6' : 'h5'} sx={{ flexGrow: 1 }} noWrap textOverflow="ellipsis">
                         {title}
                     </Typography>

src/components/navbar/NavBarContextProvider.tsx

@@ -13,6 +13,7 @@ interface IProps{
 }
 
 export default function NavBarProvider({ children }:IProps) {
+    const [defaultBackTo, setDefaultBackTo] = useState<string | undefined>();
     const [title, setTitle] = useState<string>('Tachidesk');
     const [action, setAction] = useState<any>(<div />);
     const [override, setOverride] = useState<INavbarOverride>({
@@ -21,6 +22,8 @@ export default function NavBarProvider({ children }:IProps) {
     });
 
     const value = {
+        defaultBackTo,
+        setDefaultBackTo,
         title,
         setTitle,
         action,

src/components/navbar/ReaderNavBar.tsx

@@ -27,6 +27,7 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/system';
+import useBackTo from 'util/useBackTo';
 
 const Root = styled('div')(({ theme }) => ({
     top: 0,
@@ -129,6 +130,7 @@ interface IProps {
 
 export default function ReaderNavBar(props: IProps) {
     const history = useHistory();
+    const backTo = useBackTo();
 
     const {
         settings, setSettings, manga, chapter, curPage,
@@ -167,6 +169,12 @@ export default function ReaderNavBar(props: IProps) {
         };
     }, [handleScroll]);// handleScroll changes on every render
 
+    const handleClose = () => {
+        if (backTo.back) history.goBack();
+        else if (backTo.url) history.push(backTo.url);
+        else history.push(`/manga/${manga.id}`);
+    };
+
     return (
         <>
             <Slide
@@ -203,7 +211,7 @@ export default function ReaderNavBar(props: IProps) {
                             color="inherit"
                             aria-label="menu"
                             disableRipple
-                            onClick={() => history.push('..')}
+                            onClick={handleClose}
                             size="large"
                             sx={{ mr: -1 }}
                         >
@@ -315,7 +323,7 @@ export default function ReaderNavBar(props: IProps) {
                         && (
                             <Link
                                 replace
-                                to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
+                                to={{ pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`, state: history.location.state }}
                             >
                                 <Button
                                     variant="outlined"
@@ -331,7 +339,7 @@ export default function ReaderNavBar(props: IProps) {
                             <Link
                                 replace
                                 style={{ gridArea: 'next' }}
-                                to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
+                                to={{ pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`, state: history.location.state }}
                             >
                                 <Button
                                     variant="outlined"