Remove "default back to" functionality
Caused an infinite loop, because in case the Reader was the initial opened page, got closed and the back button was pressed, the Reader just got opened again. This happened because in case it was the initial opened page, closing the Reader did not use the browser back navigation and instead opened the Manga page, resulting in it to be pushed in the history stack with the Reader being the previous page
This commit is contained in:
@@ -6,16 +6,12 @@
|
|||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useContext, useEffect } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import { INavbarOverride } from '@/typings';
|
import { INavbarOverride } from '@/typings';
|
||||||
|
|
||||||
type ContextType = {
|
type ContextType = {
|
||||||
history: string[];
|
history: string[];
|
||||||
|
|
||||||
// Default back button url
|
|
||||||
defaultBackTo: string | undefined;
|
|
||||||
setDefaultBackTo: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
|
|
||||||
// AppBar title
|
// AppBar title
|
||||||
title: string | React.ReactNode;
|
title: string | React.ReactNode;
|
||||||
setTitle: (title: ContextType['title'], browserTitle?: string) => void;
|
setTitle: (title: ContextType['title'], browserTitle?: string) => void;
|
||||||
@@ -31,8 +27,6 @@ type ContextType = {
|
|||||||
|
|
||||||
export const NavBarContext = React.createContext<ContextType>({
|
export const NavBarContext = React.createContext<ContextType>({
|
||||||
history: [],
|
history: [],
|
||||||
defaultBackTo: undefined,
|
|
||||||
setDefaultBackTo: (): void => {},
|
|
||||||
title: 'Suwayomi',
|
title: 'Suwayomi',
|
||||||
setTitle: (): void => {},
|
setTitle: (): void => {},
|
||||||
action: <div />,
|
action: <div />,
|
||||||
@@ -42,12 +36,3 @@ export const NavBarContext = React.createContext<ContextType>({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const useNavBarContext = () => useContext(NavBarContext);
|
export const useNavBarContext = () => useContext(NavBarContext);
|
||||||
|
|
||||||
export const useSetDefaultBackTo = (value: string) => {
|
|
||||||
const { setDefaultBackTo } = useNavBarContext();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setDefaultBackTo(value);
|
|
||||||
return () => setDefaultBackTo(undefined);
|
|
||||||
}, [value]);
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function NavBarContextProvider({ children }: IProps) {
|
export function NavBarContextProvider({ children }: IProps) {
|
||||||
const [defaultBackTo, setDefaultBackTo] = useState<string | undefined>();
|
|
||||||
const [title, setTitle] = useState<string | React.ReactNode>('Suwayomi');
|
const [title, setTitle] = useState<string | React.ReactNode>('Suwayomi');
|
||||||
const [action, setAction] = useState<any>(<div />);
|
const [action, setAction] = useState<any>(<div />);
|
||||||
const [override, setOverride] = useState<INavbarOverride>({
|
const [override, setOverride] = useState<INavbarOverride>({
|
||||||
@@ -37,8 +36,6 @@ export function NavBarContextProvider({ children }: IProps) {
|
|||||||
const value = useMemo(
|
const value = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
history,
|
history,
|
||||||
defaultBackTo,
|
|
||||||
setDefaultBackTo,
|
|
||||||
title,
|
title,
|
||||||
setTitle: updateTitle,
|
setTitle: updateTitle,
|
||||||
action,
|
action,
|
||||||
@@ -46,7 +43,7 @@ export function NavBarContextProvider({ children }: IProps) {
|
|||||||
override,
|
override,
|
||||||
setOverride,
|
setOverride,
|
||||||
}),
|
}),
|
||||||
[history, defaultBackTo, setDefaultBackTo, title, updateTitle, action, setAction, override, setOverride],
|
[history, title, updateTitle, action, setAction, override, setOverride],
|
||||||
);
|
);
|
||||||
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
|
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -30,7 +30,6 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
|
import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
|
||||||
import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
|
import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
|
||||||
import { useBackButton } from '@/util/useBackButton.ts';
|
import { useBackButton } from '@/util/useBackButton.ts';
|
||||||
import { useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
|
|
||||||
import { Select } from '@/components/atoms/Select.tsx';
|
import { Select } from '@/components/atoms/Select.tsx';
|
||||||
import { getOptionForDirection } from '@/theme.ts';
|
import { getOptionForDirection } from '@/theme.ts';
|
||||||
|
|
||||||
@@ -155,7 +154,6 @@ export function ReaderNavBar(props: IProps) {
|
|||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const handleBack = useBackButton();
|
const handleBack = useBackButton();
|
||||||
useSetDefaultBackTo(`/manga/${manga.id}`);
|
|
||||||
|
|
||||||
const hasMultipleScanlators = useMemo(() => !!new Set(chapters.map(({ scanlator }) => scanlator)).size, [chapters]);
|
const hasMultipleScanlators = useMemo(() => !!new Set(chapters.map(({ scanlator }) => scanlator)).size, [chapters]);
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
|
|||||||
export const useBackButton = () => {
|
export const useBackButton = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const { history, defaultBackTo: backToUrl } = useContext(NavBarContext);
|
const { history } = useContext(NavBarContext);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const isHistoryEmpty = !history.length;
|
const isHistoryEmpty = !history.length;
|
||||||
@@ -25,11 +25,6 @@ export const useBackButton = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (backToUrl) {
|
|
||||||
navigate(backToUrl);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
navigate('/library');
|
navigate('/library');
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user