ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/search bar improvements (#455)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/navbar/DefaultNavBar.tsx
View File

@@ -24,14 +24,14 @@ 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 { useLocation, useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { createPortal } from 'react-dom';
import { NavbarItem } from '@/typings';
import { NavBarContext } from '@/components/context/NavbarContext';
import { ExtensionOutlinedIcon } from '@/components/util/CustomExtensionOutlinedIcon';
import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
import { useHistory } from '@/util/useHistory';
import { useBackButton } from '@/util/useBackButton.ts';
const navbarItems: Array<NavbarItem> = [
{
@@ -86,12 +86,11 @@ const navbarItems: Array<NavbarItem> = [
];
export function DefaultNavBar() {
const { title, action, override, defaultBackTo: backToUrl } = useContext(NavBarContext);
const { title, action, override } = useContext(NavBarContext);
const theme = useTheme();
const navigate = useNavigate();
const { pathname, ...location } = useLocation();
const history = useHistory();
const { pathname } = useLocation();
const handleBack = useBackButton();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
const isMainRoute = navbarItems.some(({ path }) => path === pathname);
@@ -108,18 +107,6 @@ export function DefaultNavBar() {
navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
}
const handleBack = () => {
const isLastPageInHistory = location.key === 'default';
const wasPreviousPageReader = history[history.length - 2]?.match(/\/manga\/[0-9]+\/chapter\/[0-9]+.*/g);
if (isLastPageInHistory || wasPreviousPageReader) {
navigate(backToUrl ?? '');
return;
}
navigate(-1);
};
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed" color="default">