update react scripts dependency (#255)

* 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

.eslintrc.js

@@ -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": [
+        'react/no-unstable-nested-components': [
-            "error",
+            'error',
             {
-                rootDir: "src",
+                allowAsProps: true,
+            },
+        ],
+
+        'no-relative-import-paths/no-relative-import-paths': [
+            'error',
+            {
+                rootDir: 'src',
                 prefix: false,
             },
         ],

package.json

@@ -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/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "4.29.3",
+    "@typescript-eslint/parser": "^5.54.0",
-    "eslint": "^7.2.0",
+    "eslint": "^8.35.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "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": "^7.32.2",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.2",
     "typescript": "^4.8.4"
   }

src/App.tsx

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

src/components/MangaCard.tsx

@@ -169,17 +169,10 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                         placeItems: 'center',
                                     }}
                                 />
-                                {gridLayout === GridLayout.Comfortable ? (
+                                {gridLayout !== GridLayout.Comfortable && (
-                                    <></>
-                                ) : (
                                     <>
                                         <BottomGradient />
                                         <BottomGradientDoubledDown />
-                                    </>
-                                )}
-                                {gridLayout === GridLayout.Comfortable ? (
-                                    <></>
-                                ) : (
                                         <MangaTitle
                                             sx={{
                                                 color: 'white',
@@ -189,10 +182,11 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                         >
                                             {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>

src/components/atoms/SortRadioInput.tsx

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

src/components/library/LibraryOptionsProvider.tsx

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

src/components/navbar/DefaultNavBar.tsx

@@ -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')} />;

src/components/navbar/NavBarContextProvider.tsx

@@ -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,12 +22,17 @@ export default function NavBarProvider({ children }: IProps) {
         value: <div />,
     });
 
-    const updateTitle = (newTitle: string) => {
+    const updateTitle = useCallback(
+        (newTitle: string) => {
+            console.log('title:', newTitle);
             document.title = `${newTitle} - Tachidesk`;
             setTitle(newTitle);
-    };
+        },
+        [setTitle],
+    );
 
-    const value = {
+    const value = useMemo(
+        () => ({
             defaultBackTo,
             setDefaultBackTo,
             title,
@@ -36,6 +41,8 @@ export default function NavBarProvider({ children }: IProps) {
             setAction,
             override,
             setOverride,
-    };
+        }),
+        [defaultBackTo, setDefaultBackTo, title, updateTitle, action, setAction, override, setOverride],
+    );
     return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
 }

src/components/reader/ReaderSettingsOptions.tsx

@@ -25,7 +25,6 @@ export default function ReaderSettingsOptions({
     setSettingValue,
 }: IProps) {
     return (
-        <>
         <List>
             <ListItem>
                 <ListItemText primary="Static Navigation" />
@@ -79,6 +78,5 @@ export default function ReaderSettingsOptions({
                 </Select>
             </ListItem>
         </List>
-        </>
     );
 }

src/components/source/filters/TextFilter.tsx

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

src/components/source/filters/TriStateFilter.tsx

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

src/components/util/AppbarSearch.tsx

@@ -66,9 +66,8 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
         };
     }, [handleSearchShortcut]);
 
+    if (searchOpen) {
         return (
-        <>
-            {searchOpen ? (
             <Input
                 value={query || ''}
                 onChange={handleChange}
@@ -80,12 +79,13 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
                     </IconButton>
                 }
             />
-            ) : (
+        );
+    }
+
+    return (
         <IconButton onClick={openSearch}>
             <SearchIcon />
         </IconButton>
-            )}
-        </>
     );
 };
 

src/components/util/LoadingPlaceholder.tsx

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

src/screens/Library.tsx

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

src/screens/SearchAll.tsx

@@ -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(
+        setAction(<AppbarSearch />);
-            <>
-                <AppbarSearch />
-            </>,
-        );
     }, []);
 
     useEffect(() => {
@@ -222,7 +218,8 @@ const SearchAll: React.FC = () => {
             </>
         );
     }
-    return <></>;
+
+    return null;
 };
 
 export default SearchAll;

src/screens/Settings.tsx

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

src/screens/SourceConfigure.tsx

@@ -39,7 +39,7 @@ export default function SourceConfigure() {
 
     useEffect(() => {
         setTitle('Source Configuration');
-        setAction(<></>);
+        setAction(null);
     }, []);
 
     const { sourceId } = useParams<{ sourceId: string }>();
@@ -66,7 +66,6 @@ export default function SourceConfigure() {
     };
 
     return (
-        <>
         <List sx={{ padding: 0 }}>
             {sourcePreferences.map((it, index) => {
                 const props = cloneObject(it.props);
@@ -78,6 +77,5 @@ export default function SourceConfigure() {
                 return React.createElement(getPrefComponent(it.type), props);
             })}
         </List>
-        </>
     );
 }

src/screens/SourceMangas.tsx

@@ -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}/${

src/screens/Updates.tsx

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

src/screens/settings/About.tsx

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

src/screens/settings/Backup.tsx

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

src/screens/settings/Categories.tsx

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

src/screens/settings/DefaultReaderSettings.tsx

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