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