From 52203c18ba0100fe48c2ecdfbb5ab458f459c541 Mon Sep 17 00:00:00 2001
From: Valter Martinek <martinek@freevision.sk>
Date: Sun, 20 Nov 2022 22:35:46 +0100
Subject: [PATCH 1/3] Enable passing backLink through location state.
 Explicitly handle cases for BACK

---
 src/components/MangaCard.tsx            |  9 +++--
 src/components/manga/ChapterCard.tsx    |  3 +-
 src/components/manga/ResumeFAB.tsx      |  3 +-
 src/components/navbar/DefaultNavBar.tsx | 44 ++++++++++++++-----------
 src/components/navbar/ReaderNavBar.tsx  | 14 ++++++--
 src/screens/Reader.tsx                  |  4 +--
 src/screens/Updates.tsx                 |  2 +-
 src/util/useBackTo.ts                   | 24 ++++++++++++++
 8 files changed, 72 insertions(+), 31 deletions(-)
 create mode 100644 src/util/useBackTo.ts

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index c70f102fab..b5c22c8036 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -9,12 +9,13 @@ import React from 'react';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Avatar, CardContent, Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { Box, styled } from '@mui/system';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import { BACK } from 'util/useBackTo';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -88,12 +89,14 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     const [useCache] = useLocalStorage<boolean>('useCache', true);
     const [ItemWidth] = useLocalStorage<number>('ItemWidth', 300);
 
+    const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
+
     if (gridLayout !== 2) {
         const colomns = Math.round(dimensions / ItemWidth);
         return (
             // @ts-ignore gridsize type isnt allowed to be a decimal but it works fine
             <Grid item xs={12 / colomns} sm={12 / colomns} md={12 / colomns} lg={12 / colomns}>
-                <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
+                <Link to={mangaLinkTo} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
                     <Box
                         sx={{
                             display: 'flex',
@@ -190,7 +193,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     }
     return (
         <Grid item xs={12} sm={12} md={12} lg={12}>
-            <Link to={`/manga/${id}/`} style={{ textDecoration: 'none', color: 'unset' }}>
+            <Link to={mangaLinkTo} style={{ textDecoration: 'none', color: 'unset' }}>
                 <CardContent sx={{
                     display: 'flex',
                     justifyContent: 'space-between',
diff --git a/src/components/manga/ChapterCard.tsx b/src/components/manga/ChapterCard.tsx
index 66c2e921f3..f4910ad7e4 100644
--- a/src/components/manga/ChapterCard.tsx
+++ b/src/components/manga/ChapterCard.tsx
@@ -29,6 +29,7 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import client from 'util/client';
+import { BACK } from 'util/useBackTo';
 
 interface IProps{
     chapter: IChapter
@@ -118,7 +119,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                 }}
             >
                 <Link
-                    to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
+                    to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: { backLink: BACK } }}
                     style={{
                         textDecoration: 'none',
                         color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
diff --git a/src/components/manga/ResumeFAB.tsx b/src/components/manga/ResumeFAB.tsx
index 9eee4e25e9..325e227636 100644
--- a/src/components/manga/ResumeFAB.tsx
+++ b/src/components/manga/ResumeFAB.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { Fab } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
+import { BACK } from 'util/useBackTo';
 
 interface ResumeFABProps{
     chapter: IChapter
@@ -23,7 +24,7 @@ export default function ResumeFab(props: ResumeFABProps) {
             component={Link}
             variant="extended"
             color="primary"
-            to={`/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`}
+            to={{ pathname: `/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`, state: { backLink: BACK } }}
         >
             <PlayArrow />
             {index === 1 ? 'Start' : 'Resume' }
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index 7ff9f03ad9..e977087220 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/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,10 +81,11 @@ const navbarItems: Array<NavbarItem> = [
 
 export default function DefaultNavBar() {
     const { title, action, override } = useContext(NavBarContext);
+    const backTo = useBackTo();
     const { darkTheme } = useContext(DarkTheme);
 
     const theme = useTheme();
-    const history = useHistory();
+    const history = useHistory<{ backLink?: string }>();
 
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
     const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
@@ -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>
diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index d80a53d737..3476e40e2a 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/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"
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index bac93d3222..370f722aae 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -157,13 +157,13 @@ export default function Reader() {
             formData.append('read', 'true');
             client.patch(`/api/v1/manga/${manga.id}/chapter/${chapter.index}`, formData);
 
-            history.replace(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
+            history.replace({ pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`, state: history.location.state });
         }
     };
 
     const prevChapter = () => {
         if (chapter.index > 1) {
-            history.replace(`/manga/${manga.id}/chapter/${chapter.index - 1}`);
+            history.replace({ pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`, state: history.location.state });
         }
     };
 
diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx
index 04102e96fe..71814087ea 100644
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -181,7 +181,7 @@ export default function Updates() {
                                     transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
                                 },
                             }}
-                            onClick={() => history.push(`/manga/${chapter.mangaId}/chapter/${chapter.index}`)}
+                            onClick={() => history.push({ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: history.location.state })}
                         >
                             <CardContent sx={{
                                 display: 'flex',
diff --git a/src/util/useBackTo.ts b/src/util/useBackTo.ts
new file mode 100644
index 0000000000..40dff7266c
--- /dev/null
+++ b/src/util/useBackTo.ts
@@ -0,0 +1,24 @@
+/*
+ * 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';
+
+export const BACK = '__BACK__';
+
+export const isBack = (backTo: string | undefined): boolean => backTo === BACK;
+
+const useBackTo = (): { url?: string, back: boolean } => {
+    const location = useLocation<{ backLink?: string }>();
+
+    const url = location.state?.backLink;
+    return {
+        url: url === BACK ? undefined : url,
+        back: url === BACK,
+    };
+};
+
+export default useBackTo;

From fbae953afe2bc2a1d40763417b49a0c7ad23edb7 Mon Sep 17 00:00:00 2001
From: Valter Martinek <martinek@freevision.sk>
Date: Sun, 20 Nov 2022 22:37:49 +0100
Subject: [PATCH 2/3] Allow pages to override default backLink. Fix manga page
 back link

---
 src/components/context/NavbarContext.tsx      | 19 ++++++++++++++++++-
 .../navbar/NavBarContextProvider.tsx          |  3 +++
 src/screens/Manga.tsx                         |  4 +++-
 src/util/useBackTo.ts                         |  4 +++-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/context/NavbarContext.tsx b/src/components/context/NavbarContext.tsx
index 4a700a296e..e4e64d53d1 100644
--- a/src/components/context/NavbarContext.tsx
+++ b/src/components/context/NavbarContext.tsx
@@ -5,9 +5,13 @@
  * 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 React from 'react';
+import React, { useContext, useEffect } from 'react';
 
 type ContextType = {
+    // Default back button url
+    defaultBackTo: string | undefined
+    setDefaultBackTo: React.Dispatch<React.SetStateAction<string | undefined>>
+
     // AppBar title
     title: string
     setTitle: React.Dispatch<React.SetStateAction<string>>
@@ -22,6 +26,8 @@ type ContextType = {
 };
 
 const NavBarContext = React.createContext<ContextType>({
+    defaultBackTo: undefined,
+    setDefaultBackTo: ():void => {},
     title: 'Tachidesk',
     setTitle: ():void => {},
     action: <div />,
@@ -31,3 +37,14 @@ const NavBarContext = React.createContext<ContextType>({
 });
 
 export default NavBarContext;
+
+export const useNavBarContext = () => useContext(NavBarContext);
+
+export const useSetDefaultBackTo = (value: string) => {
+    const { setDefaultBackTo } = useNavBarContext();
+
+    useEffect(() => {
+        setDefaultBackTo(value);
+        return () => setDefaultBackTo(undefined);
+    }, [value]);
+};
diff --git a/src/components/navbar/NavBarContextProvider.tsx b/src/components/navbar/NavBarContextProvider.tsx
index 37728bdc12..81a4dc4cb8 100644
--- a/src/components/navbar/NavBarContextProvider.tsx
+++ b/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,
diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx
index 3a83748efa..be8e6609a9 100644
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -10,7 +10,7 @@ import {
     CircularProgress, IconButton, Stack, Tooltip,
 } from '@mui/material';
 import { Box } from '@mui/system';
-import NavbarContext from 'components/context/NavbarContext';
+import NavbarContext, { useSetDefaultBackTo } from 'components/context/NavbarContext';
 import ChapterList from 'components/manga/ChapterList';
 import { useRefreshManga } from 'components/manga/hooks';
 import MangaDetails from 'components/manga/MangaDetails';
@@ -37,6 +37,8 @@ const Manga: React.FC = () => {
 
     const [refresh, { loading: refreshing }] = useRefreshManga(id);
 
+    useSetDefaultBackTo(manga?.inLibrary === false && manga.sourceId != null ? `/sources/${manga.sourceId}/popular` : '/library');
+
     useEffect(() => {
         // Automatically fetch manga from source if data is older then 24 hours
         // Automatic fetch is done only once, to prevent issues when server does
diff --git a/src/util/useBackTo.ts b/src/util/useBackTo.ts
index 40dff7266c..6f212fa1da 100644
--- a/src/util/useBackTo.ts
+++ b/src/util/useBackTo.ts
@@ -5,6 +5,7 @@
  * 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 { useNavBarContext } from 'components/context/NavbarContext';
 import { useLocation } from 'react-router-dom';
 
 export const BACK = '__BACK__';
@@ -13,8 +14,9 @@ export const isBack = (backTo: string | undefined): boolean => backTo === BACK;
 
 const useBackTo = (): { url?: string, back: boolean } => {
     const location = useLocation<{ backLink?: string }>();
+    const { defaultBackTo } = useNavBarContext();
 
-    const url = location.state?.backLink;
+    const url = location.state?.backLink ?? defaultBackTo;
     return {
         url: url === BACK ? undefined : url,
         back: url === BACK,

From 235f2ecb22e180358ae28aca11e6fd53f7b516e9 Mon Sep 17 00:00:00 2001
From: Valter Martinek <martinek@freevision.sk>
Date: Sun, 20 Nov 2022 22:51:12 +0100
Subject: [PATCH 3/3] Cleanup

---
 src/components/MangaCard.tsx            | 2 +-
 src/components/navbar/DefaultNavBar.tsx | 2 +-
 src/util/useBackTo.ts                   | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index b5c22c8036..d02a89e7f3 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Avatar, CardContent, Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index e977087220..4b74c440fc 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -85,7 +85,7 @@ export default function DefaultNavBar() {
     const { darkTheme } = useContext(DarkTheme);
 
     const theme = useTheme();
-    const history = useHistory<{ backLink?: string }>();
+    const history = useHistory();
 
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
     const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
diff --git a/src/util/useBackTo.ts b/src/util/useBackTo.ts
index 6f212fa1da..6a382a5ba8 100644
--- a/src/util/useBackTo.ts
+++ b/src/util/useBackTo.ts
@@ -10,8 +10,6 @@ import { useLocation } from 'react-router-dom';
 
 export const BACK = '__BACK__';
 
-export const isBack = (backTo: string | undefined): boolean => backTo === BACK;
-
 const useBackTo = (): { url?: string, back: boolean } => {
     const location = useLocation<{ backLink?: string }>();
     const { defaultBackTo } = useNavBarContext();