Feature/search bar improvements (#455)

* Require search to be committed with enter

* Extract back navigation logic into hook

* 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

* Close and open search depending on the location and available query

* Navigate to previous page in case new query is empty
This commit is contained in:
schroda
2023-11-12 03:21:26 +01:00
committed by GitHub
parent 0c7498dba6
commit 35c34b6d1b
5 changed files with 90 additions and 35 deletions

View File

@@ -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);