Feature/remove use back to util (#360)

* Remove "useBackTo"

Not needed

* Use browser back navigation to close the reader

This will cause the previous page (manga or updates) to be opened instead of always opening the manga page

src/components/MangaCard.tsx

@@ -15,7 +15,6 @@ import { Avatar, Box, CardContent, Grid, styled } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { IMangaCard } from '@/typings';
 import requestManager from '@/lib/RequestManager';
-import { BACK } from '@/util/useBackTo';
 import useLocalStorage from '@/util/useLocalStorage';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import SpinnerImage from '@/components/util/SpinnerImage';
@@ -89,7 +88,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
 
     const [ItemWidth] = useLocalStorage<number>('ItemWidth', 300);
 
-    const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
+    const mangaLinkTo = `/manga/${id}/`;
 
     if (gridLayout !== GridLayout.List) {
         const columns = Math.ceil(dimensions / ItemWidth);

src/components/manga/ChapterCard.tsx

@@ -30,7 +30,6 @@ import { useTranslation } from 'react-i18next';
 import { IChapter, IDownloadChapter } from '@/typings';
 import requestManager from '@/lib/RequestManager';
 import { getUploadDateString } from '@/util/date';
-import { BACK } from '@/util/useBackTo';
 import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
 
 interface IProps {
@@ -113,7 +112,6 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                 <CardActionArea
                     component={Link}
                     to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
-                    state={{ backLink: BACK }}
                     style={{
                         color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
                     }}

src/components/manga/ResumeFAB.tsx

@@ -11,7 +11,6 @@ import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { IChapter } from '@/typings';
-import { BACK } from '@/util/useBackTo';
 import StyledFab from '@/components/util/StyledFab';
 
 interface ResumeFABProps {
@@ -27,13 +26,7 @@ export default function ResumeFab(props: ResumeFABProps) {
         mangaId,
     } = props;
     return (
-        <StyledFab
-            component={Link}
-            variant="extended"
-            color="primary"
-            to={`/manga/${mangaId}/chapter/${index}`}
-            state={{ backLink: BACK }}
-        >
+        <StyledFab component={Link} variant="extended" color="primary" to={`/manga/${mangaId}/chapter/${index}`}>
             <PlayArrow />
             {index === 1 ? t('global.button.start') : t('global.button.resume')}
         </StyledFab>

src/components/navbar/DefaultNavBar.tsx

@@ -27,7 +27,6 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 import { NavbarItem } from '@/typings';
-import useBackTo from '@/util/useBackTo';
 import NavBarContext from '@/components/context/NavbarContext';
 import ExtensionOutlinedIcon from '@/components/util/CustomExtensionOutlinedIcon';
 import DesktopSideBar from '@/components/navbar/navigation/DesktopSideBar';
@@ -86,8 +85,7 @@ const navbarItems: Array<NavbarItem> = [
 ];
 
 export default function DefaultNavBar() {
-    const { title, action, override } = useContext(NavBarContext);
-    const backTo = useBackTo();
+    const { title, action, override, defaultBackTo: backToUrl } = useContext(NavBarContext);
 
     const theme = useTheme();
     const navigate = useNavigate();
@@ -109,7 +107,7 @@ export default function DefaultNavBar() {
     }
 
     const handleBack = () => {
-        if (backTo.url != null) return;
+        if (backToUrl != null) return;
         navigate(-1);
     };
 
@@ -119,8 +117,8 @@ export default function DefaultNavBar() {
                 <Toolbar>
                     {!isMainRoute && (
                         <IconButton
-                            component={backTo.url ? Link : 'button'}
-                            to={backTo.url}
+                            component={backToUrl ? Link : 'button'}
+                            to={backToUrl}
                             edge="start"
                             sx={{ marginRight: theme.spacing(2) }}
                             color="inherit"

src/components/navbar/ReaderNavBar.tsx

@@ -25,7 +25,6 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
 import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from '@/typings';
-import useBackTo from '@/util/useBackTo';
 import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
 
 const Root = styled('div')(({ theme }) => ({
@@ -126,7 +125,6 @@ interface IProps {
 export default function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const backTo = useBackTo();
     const location = useLocation<{
         prevDrawerOpen?: boolean;
         prevSettingsCollapseOpen?: boolean;
@@ -188,9 +186,9 @@ export default function ReaderNavBar(props: IProps) {
     }, [handleScroll]); // handleScroll changes on every render
 
     const handleClose = () => {
-        if (backTo.back) navigate(-1);
-        else if (backTo.url) navigate(backTo.url);
-        else navigate(`/manga/${manga.id}`);
+        // 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 (

src/screens/DownloadQueue.tsx

@@ -21,7 +21,6 @@ import { useTranslation } from 'react-i18next';
 import { IChapter, IQueue } from '@/typings';
 import requestManager from '@/lib/RequestManager';
 import StrictModeDroppable from '@/lib/StrictModeDroppable';
-import { BACK } from '@/util/useBackTo';
 import makeToast from '@/components/util/Toast';
 import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
 import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
@@ -120,7 +119,6 @@ const DownloadQueue: React.FC = () => {
                                                 <CardActionArea
                                                     component={Link}
                                                     to={`/manga/${item.chapter.mangaId}`}
-                                                    state={{ backLink: BACK }}
                                                     sx={{
                                                         display: 'flex',
                                                         alignItems: 'center',

src/util/useBackTo.ts

@@ -1,25 +0,0 @@
-/*
- * 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 { useLocation } from 'react-router-dom';
-import { useNavBarContext } from '@/components/context/NavbarContext';
-
-export const BACK = '__BACK__';
-
-const useBackTo = (): { url?: string; back: boolean } => {
-    const location = useLocation<{ backLink?: string }>();
-    const { defaultBackTo } = useNavBarContext();
-
-    const url = location.state?.backLink ?? defaultBackTo;
-    return {
-        url: url === BACK ? undefined : url,
-        back: url === BACK,
-    };
-};
-
-export default useBackTo;