Skip to content

Commit

Permalink
Feature/update dependency react router dom to v6.x (#340)
Browse files Browse the repository at this point in the history 
* Update dependency "react-router-dom" to v6.x

Update to v6.11.2

* Update dependency "react-router-dom" to v6.x - Replace "Switch" with "Routes"

* Update dependency "react-router-dom" to v6.x - Relative paths

* Update dependency "react-router-dom" to v6.x - Nested routes

* Update dependency "react-router-dom" to v6.x - Prevent route warnings

 - Route without an element causes a warning message.
 - Routes with non-matching Route causes a warning message.

* Update dependency "react-router-dom" to v6.x - Replace "useHistory" with "useNavigate"

* Update dependency "react-router-dom" to v6.x - Fix "Link" usage

* Update dependency "react-router-dom" to v6.x - Overwrite "useParams" and "useLocations" typing

For both functions it's the users fault if they are getting used incorrectly.
It's inconvenient to always have to make sure the params exist (useParam) or to cast the return object to a specific type (useLocation)

 - "useParams": Make generic type non-optional
 - "useLocation": Add generic type

* Update dependency "react-router-dom" to v6.x - Fix use-query-params provider
  • Loading branch information
@schroda
schroda authored Jun 4, 2023
1 parent fd5a1e2 commit 4e8813b
Show file tree
Hide file tree
Showing 15 changed files with 117 additions and 227 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^17.0.2",
"react-i18next": "^12.3.1",
"react-router-dom": "^5.2.0",
"react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1",
"react-virtuoso": "^1.8.6",
"swr": "^2.1.5",
Expand All @@ -48,7 +48,6 @@
"@types/react": "^17.0.2",
"@types/react-beautiful-dnd": "^13.1.4",
"@types/react-dom": "^17.0.2",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"eslint": "^8.35.0",
Expand Down
90 changes: 30 additions & 60 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import CssBaseline from '@mui/material/CssBaseline';
import AppContext from 'components/context/AppContext';
import DefaultNavBar from 'components/navbar/DefaultNavBar';
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { Navigate, Route, Routes } from 'react-router-dom';
import Browse from 'screens/Browse';
import DownloadQueue from 'screens/DownloadQueue';
import Extensions from 'screens/Extensions';
Expand Down Expand Up @@ -47,71 +47,41 @@ const App: React.FC = () => (
overflow: 'auto',
}}
>
<Switch>
<Routes>
{/* General Routes */}
<Route exact path="/" render={() => <Redirect to="/library" />} />
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/defaultReaderSettings">
<DefaultReaderSettings />
</Route>
<Route path="/settings/librarySettings">
<LibrarySettings />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<Settings />
<Route path="/" element={<Navigate to="/library" />} />
<Route path="settings">
<Route index element={<Settings />} />
<Route path="about" element={<About />} />
<Route path="categories" element={<Categories />} />
<Route path="defaultReaderSettings" element={<DefaultReaderSettings />} />
<Route path="librarySettings" element={<LibrarySettings />} />
<Route path="backup" element={<Backup />} />
</Route>

{/* Manga Routes */}

<Route exact path="/sources/:sourceId">
<SourceMangas />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources/all/search/">
<SearchAll />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum" />
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
<Route path="sources">
<Route index element={<Sources />} />
<Route path=":sourceId" element={<SourceMangas />} />
<Route path=":sourceId/configure/" element={<SourceConfigure />} />
<Route path="all/search/" element={<SearchAll />} />
</Route>
<Route path="downloads" element={<DownloadQueue />} />
<Route path="manga/:id">
<Route path="chapter/:chapterNum" element={null} />
<Route index element={<Manga />} />
</Route>
<Route path="library" element={<Library />} />
<Route path="updates" element={<Updates />} />
<Route path="extensions" element={<Extensions />} />
<Route path="browse" element={<Browse />} />
</Routes>
</Container>
<Switch>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader
// when changing chapters
render={(props: any) => <Reader key={props.match.params.chapterIndex} />}
/>
</Switch>
<Routes>
<Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
<Route path="*" element={null} />
</Routes>
</AppContext>
);

Expand Down
20 changes: 7 additions & 13 deletions src/components/SourceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,7 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
margin: '10px',
}}
>
<CardActionArea
component={Link}
to={{ pathname: `/sources/${id}`, state: { contentType: SourceContentType.POPULAR } }}
>
<CardActionArea component={Link} to={`/sources/${id}`} state={{ contentType: SourceContentType.POPULAR }}>
<CardContent
sx={{
display: 'flex',
Expand Down Expand Up @@ -107,10 +104,8 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
<Button
variant="outlined"
component={Link}
to={{
pathname: `/sources/${id}`,
state: { contentType: SourceContentType.LATEST },
}}
to={`/sources/${id}`}
state={{ contentType: SourceContentType.LATEST }}
>
{t('global.button.latest')}
</Button>
Expand All @@ -121,18 +116,17 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
<Button
variant="outlined"
component={Link}
to={{
pathname: `/sources/${id}`,
state: { contentType: SourceContentType.LATEST },
}}
to={`/sources/${id}`}
state={{ contentType: SourceContentType.LATEST }}
>
{t('global.button.latest')}
</Button>
)}
<Button
variant="outlined"
component={Link}
to={{ pathname: `/sources/${id}`, state: { contentType: SourceContentType.POPULAR } }}
to={`/sources/${id}`}
state={{ contentType: SourceContentType.POPULAR }}
>
{t('global.button.popular')}
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/context/AppContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import createTheme from 'theme';
import { QueryParamProvider } from 'use-query-params';
import useLocalStorage from 'util/useLocalStorage';
import DarkTheme from 'components/context/DarkTheme';
import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';

interface Props {
children: React.ReactNode;
Expand All @@ -41,7 +41,7 @@ const AppContext: React.FC<Props> = ({ children }) => {
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<DarkTheme.Provider value={darkThemeContext}>
<QueryParamProvider adapter={ReactRouter5Adapter}>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<LibraryOptionsContextProvider>
<NavBarContextProvider>{children}</NavBarContextProvider>
</LibraryOptionsContextProvider>
Expand Down
6 changes: 2 additions & 4 deletions src/components/manga/ChapterCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,8 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
>
<CardActionArea
component={Link}
to={{
pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`,
state: { backLink: BACK },
}}
to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
state={{ backLink: BACK }}
style={{
color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
}}
Expand Down
6 changes: 2 additions & 4 deletions src/components/manga/ResumeFAB.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,8 @@ export default function ResumeFab(props: ResumeFABProps) {
component={Link}
variant="extended"
color="primary"
to={{
pathname: `/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`,
state: { backLink: BACK },
}}
to={`/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`}
state={{ backLink: BACK }}
>
<PlayArrow />
{index === 1 ? t('global.button.start') : t('global.button.resume')}
Expand Down
11 changes: 6 additions & 5 deletions src/components/navbar/DefaultNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import { useMediaQuery, Box } from '@mui/material';
import { Box, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
Expand All @@ -24,7 +24,7 @@ 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 { Link, useHistory } from 'react-router-dom';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import NavBarContext from 'components/context/NavbarContext';
import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
import { createPortal } from 'react-dom';
Expand Down Expand Up @@ -90,10 +90,11 @@ export default function DefaultNavBar() {
const backTo = useBackTo();

const theme = useTheme();
const history = useHistory();
const navigate = useNavigate();
const { pathname } = useLocation();

const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
const isMainRoute = navbarItems.some(({ path }) => path === pathname);

// Allow default navbar to be overrided
if (override.status) return override.value;
Expand All @@ -109,7 +110,7 @@ export default function DefaultNavBar() {

const handleBack = () => {
if (backTo.url != null) return;
history.goBack();
navigate(-1);
};

return (
Expand Down
22 changes: 11 additions & 11 deletions src/components/navbar/ReaderNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import React, { useEffect, useState } from 'react';
import Typography from '@mui/material/Typography';
import { useHistory, useLocation } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import Slide from '@mui/material/Slide';
import Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom';
Expand Down Expand Up @@ -125,7 +125,7 @@ interface IProps {

export default function ReaderNavBar(props: IProps) {
const { t } = useTranslation();
const history = useHistory();
const navigate = useNavigate();
const backTo = useBackTo();
const location = useLocation<{
prevDrawerOpen?: boolean;
Expand Down Expand Up @@ -188,9 +188,9 @@ 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}`);
if (backTo.back) navigate(-1);
else if (backTo.url) navigate(backTo.url);
else navigate(`/manga/${manga.id}`);
};

return (
Expand Down Expand Up @@ -300,8 +300,8 @@ export default function ReaderNavBar(props: IProps) {
disabled={disableChapterNavButtons || chapter.index <= 1}
onClick={() =>
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${prevChapterIndex}`,
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
Expand All @@ -322,8 +322,8 @@ export default function ReaderNavBar(props: IProps) {
value={chapter.index >= 1 ? chapter.index : ''}
displayEmpty
onChange={({ target: { value: selectedChapter } }) => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${selectedChapter}`,
navigate(`/manga/${manga.id}/chapter/${selectedChapter}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
Expand All @@ -350,8 +350,8 @@ export default function ReaderNavBar(props: IProps) {
}
onClick={() => {
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
history.replace({
pathname: `/manga/${manga.id}/chapter/${nextChapterIndex}`,
navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
replace: true,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
Expand Down
6 changes: 2 additions & 4 deletions src/screens/DownloadQueue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,8 @@ const DownloadQueue: React.FC = () => {
>
<CardActionArea
component={Link}
to={{
pathname: `/manga/${item.chapter.mangaId}`,
state: { backLink: BACK },
}}
to={`/manga/${item.chapter.mangaId}`}
state={{ backLink: BACK }}
sx={{
display: 'flex',
alignItems: 'center',
Expand Down
17 changes: 9 additions & 8 deletions src/screens/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import CircularProgress from '@mui/material/CircularProgress';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import HorizontalPager from 'components/reader/pager/HorizontalPager';
import PageNumber from 'components/reader/PageNumber';
import PagedPager from 'components/reader/pager/PagedPager';
Expand Down Expand Up @@ -89,7 +89,8 @@ const initialChapter = {

export default function Reader() {
const { t } = useTranslation();
const history = useHistory();
const navigate = useNavigate();
const location = useLocation();

const { chapterIndex, mangaId } = useParams<{ chapterIndex: string; mangaId: string }>();
const {
Expand Down Expand Up @@ -214,9 +215,9 @@ export default function Reader() {
});

openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
history.replace({
pathname: `/manga/${manga.id}/chapter/${nextChapterIndex}`,
state: history.location.state,
navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
replace: true,
state: location.state,
}),
);
}
Expand All @@ -225,9 +226,9 @@ export default function Reader() {
const prevChapter = useCallback(() => {
if (chapter.index > 1) {
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) =>
history.replace({
pathname: `/manga/${manga.id}/chapter/${prevChapterIndex}`,
state: history.location.state,
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true,
state: location.state,
}),
);
}
Expand Down
Loading

0 comments on commit 4e8813b

Please sign in to comment.