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/App.tsx

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

src/components/MangaCard.tsx

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

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,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>;
 }

src/components/reader/ReaderSettingsOptions.tsx

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

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,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>
     );
 };
 

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