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

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(
-            <>
-                <AppbarSearch />
-            </>,
-        );
+        setAction(<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,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>
     );
 }

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