Navigate to previous page when canceling search

This makes the search the next page in the history stack instead of making it the previous one
Suwayomi · Nov 12, 2023 · 0b14f36 · 0b14f36
1 parent fd6d389
commit 0b14f36
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/components/util/AppbarSearch.tsx b/src/components/util/AppbarSearch.tsx
@@ -12,6 +12,7 @@ import { IconButton, Input, Tooltip } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
+import { useBackButton } from '@/util/useBackButton.ts';
 
 interface IProps {
     autoOpen?: boolean;
@@ -23,6 +24,7 @@ const defaultProps = {
 
 export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     const { t } = useTranslation();
+    const handleBack = useBackButton();
 
     const { autoOpen } = props;
     const [query, setQuery] = useQueryParam('query', StringParam);
@@ -38,6 +40,8 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     const cancelSearch = () => {
         setSearchString('');
         setSearchOpen(false);
+
+        handleBack();
     };
     const handleBlur = () => {
         if (!searchString) setSearchOpen(false);

diff --git a/src/screens/SearchAll.tsx b/src/screens/SearchAll.tsx
@@ -20,7 +20,7 @@ import { AppbarSearch } from '@/components/util/AppbarSearch';
 import { LangSelect } from '@/components/navbar/action/LangSelect';
 import { MangaGrid } from '@/components/MangaGrid';
 import { useDebounce } from '@/components/manga/hooks';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 
 type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
 type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -161,6 +161,8 @@ export const SearchAll: React.FC = () => {
 
     const { setTitle, setAction } = useContext(NavBarContext);
 
+    useSetDefaultBackTo('sources/all/search');
+
     const [query] = useQueryParam('query', StringParam);
     const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD);
 

diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx
@@ -33,7 +33,7 @@ import {
     GetSourceMangasFetchMutation,
     GetSourceMangasFetchMutationVariables,
 } from '@/lib/graphql/generated/graphql.ts';
-import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 
 const ContentTypeMenu = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -198,21 +198,26 @@ const useSourceManga = (
 export function SourceMangas() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
+
     const theme = useTheme();
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
 
     const { sourceId } = useParams<{ sourceId: string }>();
 
     const navigate = useNavigate();
+    const { pathname, state: locationState } =
+        useLocation<{
+            contentType: SourceContentType;
+            filtersToApply: IPos[];
+            clearCache: boolean;
+        }>() ?? {};
     const {
         contentType: currentLocationContentType = SourceContentType.POPULAR,
         filtersToApply: currentLocationFiltersToApply = [],
         clearCache = false,
-    } = useLocation<{
-        contentType: SourceContentType;
-        filtersToApply: IPos[];
-        clearCache: boolean;
-    }>().state ?? {};
+    } = locationState ?? {};
+
+    useSetDefaultBackTo(pathname);
 
     const { options } = useLibraryOptionsContext();
     const [query] = useQueryParam('query', StringParam);