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

update react scripts dependency (#255)

Browse Source 
* Move "dependencies" close to "devDependencies"

Makes it easier to have a quick overview

* Upgrade "react-scripts" to latest version

With new versions of node (> v16) the build scripts fails with the following error "error:0308010C:digital envelope routines::unsupported"

* Upgrade "react-scripts" to v5 - Fix import

* Upgrade "eslint" dependencies

The latest version of "react-scripts" uses eslint v8 causing the following error "... ERROR in Plugin "react" was conflicted between ".eslintrc.js" >> eslint-config-airbnb ..."

* Upgrade "eslint" dependencies - Allow nested components as props

* Upgrade "eslint" dependencies - Fix lint issues
This commit is contained in:
schroda
2023-03-11 18:05:58 +01:00
committed by GitHub
parent 91e7bd2b27
commit 23001a4298
24 changed files with 5248 additions and 6320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc.js
View File

@@ -13,11 +13,19 @@ module.exports = {
'react/jsx-no-bind': 'off',
'react/jsx-props-no-spreading': 'off',
'react/require-default-props': 'off',
'react/function-component-definition': 'off',
"no-relative-import-paths/no-relative-import-paths": [
"error",
'react/no-unstable-nested-components': [
'error',
{
rootDir: "src",
allowAsProps: true,
},
],
'no-relative-import-paths/no-relative-import-paths': [
'error',
{
rootDir: 'src',
prefix: false,
},
],

72
package.json
View File

@@ -2,33 +2,6 @@
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/roboto": "^4.3.0",
"@mui/icons-material": "^5.0.5",
"@mui/lab": "^5.0.0-alpha.53",
"@mui/material": "^5.0.6",
"@mui/styles": "^5.0.2",
"@mui/system": "^5.0.6",
"axios": "^0.21.1",
"file-selector": "^0.2.4",
"i18next": "^22.4.9",
"i18next-browser-languagedetector": "^7.0.1",
"p-queue": "^7.2.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^17.0.2",
"react-i18next": "^12.1.5",
"react-lazyload": "^3.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtuoso": "^1.8.6",
"swr": "^1.3.0",
"use-query-params": "^1.2.3",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
@@ -50,24 +23,51 @@
"last 1 safari version"
]
},
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/roboto": "^4.3.0",
"@mui/icons-material": "^5.0.5",
"@mui/lab": "^5.0.0-alpha.53",
"@mui/material": "^5.0.6",
"@mui/styles": "^5.0.2",
"@mui/system": "^5.0.6",
"axios": "^0.21.1",
"file-selector": "^0.2.4",
"i18next": "^22.4.9",
"i18next-browser-languagedetector": "^7.0.1",
"p-queue": "^7.2.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^17.0.2",
"react-i18next": "^12.1.5",
"react-lazyload": "^3.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-virtuoso": "^1.8.6",
"swr": "^1.3.0",
"use-query-params": "^1.2.3",
"web-vitals": "^2.1.0"
},
"devDependencies": {
"@types/react": "^17.0.2",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^17.0.2",
"@types/react-lazyload": "^3.1.0",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "4.29.3",
"@typescript-eslint/parser": "4.29.3",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^14.0.0",
"@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.54.0",
"eslint": "^8.35.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-no-relative-import-paths": "^1.5.2",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.8.2",
"typescript": "^4.8.4"
}

4
src/App.tsx
View File

@@ -81,9 +81,7 @@ const App: React.FC = () => (
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum" />
<Route path="/manga/:id">
<Manga />
</Route>

30
src/components/MangaCard.tsx
View File

@@ -169,30 +169,24 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
placeItems: 'center',
}}
/>
{gridLayout === GridLayout.Comfortable ? (
<></>
) : (
{gridLayout !== GridLayout.Comfortable && (
<>
<BottomGradient />
<BottomGradientDoubledDown />
<MangaTitle
sx={{
color: 'white',
textShadow: '0px 0px 3px #000000',
}}
title={title}
>
{truncateText(title, 61)}
</MangaTitle>
</>
)}
{gridLayout === GridLayout.Comfortable ? (
<></>
) : (
<MangaTitle
sx={{
color: 'white',
textShadow: '0px 0px 3px #000000',
}}
title={title}
>
{truncateText(title, 61)}
</MangaTitle>
)}
</CardActionArea>
</Card>
{gridLayout === GridLayout.Comfortable ? (
{gridLayout === GridLayout.Comfortable && (
<MangaTitle
sx={{
position: 'relative',
@@ -202,8 +196,6 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
>
{truncateText(title, 61)}
</MangaTitle>
) : (
<></>
)}
</Box>
</Link>

4
src/components/atoms/SortRadioInput.tsx
View File

@@ -15,11 +15,11 @@ interface IProps extends RadioInputProps {
sortDescending?: boolean | null | undefined;
}
const SortRadioInput: React.FC<IProps> = ({ sortDescending, ...rest }) => (
const SortRadioInput = React.memo(({ sortDescending, ...rest }: IProps) => (
<RadioInput
checkedIcon={sortDescending ? <ArrowDownward color="primary" /> : <ArrowUpward color="primary" />}
{...rest}
/>
);
));
export default SortRadioInput;

6
src/components/library/LibraryOptionsProvider.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import LibraryOptionsContext, { DefaultLibraryOptions } from 'components/context/LibraryOptionsContext';
import React from 'react';
import React, { useMemo } from 'react';
import useLocalStorage from 'util/useLocalStorage';
import { LibraryOptions } from 'typings';
@@ -17,7 +17,9 @@ interface IProps {
const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DefaultLibraryOptions);
return <LibraryOptionsContext.Provider value={{ options, setOptions }}>{children}</LibraryOptionsContext.Provider>;
const value = useMemo(() => ({ options, setOptions }), [options, setOptions]);
return <LibraryOptionsContext.Provider value={value}>{children}</LibraryOptionsContext.Provider>;
};
export default LibraryOptionsContextProvider;

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

@@ -101,7 +101,7 @@ export default function DefaultNavBar() {
// Allow default navbar to be overrided
if (override.status) return override.value;
let navbar = <></>;
let navbar: JSX.Element | null = null;
if (isMobileWidth) {
if (isMainRoute) {
navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;

37
src/components/navbar/NavBarContextProvider.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import NavBarContext from 'components/context/NavbarContext';
import { INavbarOverride } from 'typings';
@@ -22,20 +22,27 @@ export default function NavBarProvider({ children }: IProps) {
value: <div />,
});
const updateTitle = (newTitle: string) => {
document.title = `${newTitle} - Tachidesk`;
setTitle(newTitle);
};
const updateTitle = useCallback(
(newTitle: string) => {
console.log('title:', newTitle);
document.title = `${newTitle} - Tachidesk`;
setTitle(newTitle);
},
[setTitle],
);
const value = {
defaultBackTo,
setDefaultBackTo,
title,
setTitle: updateTitle,
action,
setAction,
override,
setOverride,
};
const value = useMemo(
() => ({
defaultBackTo,
setDefaultBackTo,
title,
setTitle: updateTitle,
action,
setAction,
override,
setOverride,
}),
[defaultBackTo, setDefaultBackTo, title, updateTitle, action, setAction, override, setOverride],
);
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
}

104
src/components/reader/ReaderSettingsOptions.tsx
View File

@@ -25,60 +25,58 @@ export default function ReaderSettingsOptions({
setSettingValue,
}: IProps) {
return (
<>
<List>
<ListItem>
<ListItemText primary="Static Navigation" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={staticNav}
onChange={(e) => setSettingValue('staticNav', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Show page number" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={showPageNumber}
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Load next chapter at ending" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={loadNextOnEnding}
onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Reader Type" />
<Select
variant="standard"
value={readerType}
onChange={(e) => setSettingValue('readerType', e.target.value)}
sx={{ p: 0 }}
>
<MenuItem value="SingleLTR">Single Page (LTR)</MenuItem>
<MenuItem value="SingleRTL">Single Page (RTL)</MenuItem>
{/* <MenuItem value="SingleVertical">
<List>
<ListItem>
<ListItemText primary="Static Navigation" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={staticNav}
onChange={(e) => setSettingValue('staticNav', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Show page number" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={showPageNumber}
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Load next chapter at ending" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={loadNextOnEnding}
onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Reader Type" />
<Select
variant="standard"
value={readerType}
onChange={(e) => setSettingValue('readerType', e.target.value)}
sx={{ p: 0 }}
>
<MenuItem value="SingleLTR">Single Page (LTR)</MenuItem>
<MenuItem value="SingleRTL">Single Page (RTL)</MenuItem>
{/* <MenuItem value="SingleVertical">
Vertical(WIP)
</MenuItem> */}
<MenuItem value="DoubleLTR">Double Page (LTR)</MenuItem>
<MenuItem value="DoubleRTL">Double Page (RTL)</MenuItem>
<MenuItem value="Webtoon">Webtoon</MenuItem>
<MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
<MenuItem value="ContinuesHorizontalLTR">Horizontal (LTR)</MenuItem>
<MenuItem value="ContinuesHorizontalRTL">Horizontal (RTL)</MenuItem>
</Select>
</ListItem>
</List>
</>
<MenuItem value="DoubleLTR">Double Page (LTR)</MenuItem>
<MenuItem value="DoubleRTL">Double Page (RTL)</MenuItem>
<MenuItem value="Webtoon">Webtoon</MenuItem>
<MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
<MenuItem value="ContinuesHorizontalLTR">Horizontal (LTR)</MenuItem>
<MenuItem value="ContinuesHorizontalRTL">Horizontal (RTL)</MenuItem>
</Select>
</ListItem>
</List>
);
}

2
src/components/source/filters/TextFilter.tsx
View File

@@ -56,7 +56,7 @@ const TextFilter: React.FC<Props> = (props) => {
</FormControl>
);
}
return <></>;
return null;
};
export default TextFilter;

2
src/components/source/filters/TriStateFilter.tsx
View File

@@ -47,7 +47,7 @@ const TriStateFilter: React.FC<Props> = (props) => {
/>
);
}
return <></>;
return null;
};
export default TriStateFilter;

38
src/components/util/AppbarSearch.tsx
View File

@@ -66,26 +66,26 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
};
}, [handleSearchShortcut]);
if (searchOpen) {
return (
<Input
value={query || ''}
onChange={handleChange}
onBlur={handleBlur}
inputRef={inputRef}
endAdornment={
<IconButton onClick={cancelSearch}>
<CancelIcon />
</IconButton>
}
/>
);
}
return (
<>
{searchOpen ? (
<Input
value={query || ''}
onChange={handleChange}
onBlur={handleBlur}
inputRef={inputRef}
endAdornment={
<IconButton onClick={cancelSearch}>
<CancelIcon />
</IconButton>
}
/>
) : (
<IconButton onClick={openSearch}>
<SearchIcon />
</IconButton>
)}
</>
<IconButton onClick={openSearch}>
<SearchIcon />
</IconButton>
);
};

2
src/components/util/LoadingPlaceholder.tsx
View File

@@ -30,7 +30,7 @@ export default function LoadingPlaceholder(props: IProps) {
}
if (children) {
return <>{children}</>;
return children as JSX.Element;
}
}

2
src/screens/Library.tsx
View File

@@ -51,7 +51,7 @@ export default function Library() {
);
return () => {
setTitle('');
setAction(<></>);
setAction(null);
};
}, []);

11
src/screens/SearchAll.tsx
View File

@@ -11,7 +11,7 @@ import NavbarContext from 'components/context/NavbarContext';
import MangaGrid from 'components/MangaGrid';
import LangSelect from 'components/navbar/action/LangSelect';
import AppbarSearch from 'components/util/AppbarSearch';
import PQueue from 'p-queue/dist/index';
import PQueue from 'p-queue';
import React, { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { StringParam, useQueryParam } from 'use-query-params';
@@ -54,11 +54,7 @@ const SearchAll: React.FC = () => {
useEffect(() => {
setTitle('Global Search');
setAction(
<>
<AppbarSearch />
</>,
);
setAction(<AppbarSearch />);
}, []);
useEffect(() => {
@@ -222,7 +218,8 @@ const SearchAll: React.FC = () => {
</>
);
}
return <></>;
return null;
};
export default SearchAll;

2
src/screens/Settings.tsx
View File

@@ -41,7 +41,7 @@ export default function Settings() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => {
setTitle('Settings');
setAction(<></>);
setAction(null);
}, []);
const { darkTheme, setDarkTheme } = useContext(DarkTheme);

24
src/screens/SourceConfigure.tsx
View File

@@ -39,7 +39,7 @@ export default function SourceConfigure() {
useEffect(() => {
setTitle('Source Configuration');
setAction(<></>);
setAction(null);
}, []);
const { sourceId } = useParams<{ sourceId: string }>();
@@ -66,18 +66,16 @@ export default function SourceConfigure() {
};
return (
<>
<List sx={{ padding: 0 }}>
{sourcePreferences.map((it, index) => {
const props = cloneObject(it.props);
props.updateValue = updateValue(index);
props.key = index;
<List sx={{ padding: 0 }}>
{sourcePreferences.map((it, index) => {
const props = cloneObject(it.props);
props.updateValue = updateValue(index);
props.key = index;
// TypeScript is dumb in detecting extra props
// @ts-ignore
return React.createElement(getPrefComponent(it.type), props);
})}
</List>
</>
// TypeScript is dumb in detecting extra props
// @ts-ignore
return React.createElement(getPrefComponent(it.type), props);
})}
</List>
);
}

6
src/screens/SourceMangas.tsx
View File

@@ -25,7 +25,7 @@ interface IPos {
group?: number;
}
export default function SourceMangas(props: { popular: boolean }) {
export default function SourceMangas({ popular }: { popular: boolean }) {
const { setTitle, setAction } = useContext(NavbarContext);
const history = useHistory();
@@ -153,7 +153,7 @@ export default function SourceMangas(props: { popular: boolean }) {
);
return () => {
setAction(<></>);
setAction(null);
};
}, [isConfigurable]);
@@ -183,7 +183,7 @@ export default function SourceMangas(props: { popular: boolean }) {
useEffect(() => {
if (lastPageNum !== 0) {
const sourceType = props.popular ? 'popular' : 'latest';
const sourceType = popular ? 'popular' : 'latest';
client
.get(
`/api/v1/source/${sourceId}/${

2
src/screens/Updates.tsx
View File

@@ -99,7 +99,7 @@ const Updates: React.FC = () => {
useEffect(() => {
setTitle('Updates');
setAction(<></>);
setAction(null);
}, []);
useEffect(() => {

2
src/screens/settings/About.tsx
View File

@@ -13,7 +13,7 @@ export default function About() {
useEffect(() => {
setTitle('About');
setAction(<></>);
setAction(null);
}, []);
const { data: about } = useQuery<IAbout>('/api/v1/settings/about');

2
src/screens/settings/Backup.tsx
View File

@@ -19,7 +19,7 @@ export default function Backup() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => {
setTitle('Backup');
setAction(<></>);
setAction(null);
}, []);
const { baseURL } = client.defaults;

2
src/screens/settings/Categories.tsx
View File

@@ -52,7 +52,7 @@ export default function Categories() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => {
setTitle('Categories');
setAction(<></>);
setAction(null);
}, []);
const { data, mutate } = useQuery<ICategory[]>('/api/v1/category/');

2
src/screens/settings/DefaultReaderSettings.tsx
View File

@@ -26,7 +26,7 @@ export default function DefaultReaderSettings() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => {
setTitle('Default Reader Settings');
setAction(<></>);
setAction(null);
}, []);
const { metadata, settings, loading } = useDefaultReaderSettings();

11196
yarn.lock
View File

File diff suppressed because it is too large Load Diff