Migrate to react 18 (#76)

* Bump dependencies and remove react-router * Fix components
spacemeshos · Jan 27, 2023 · 0c58722 · 0c58722
1 parent 57c6bfb
commit 0c58722
Show file tree

Hide file tree

Showing 30 changed files with 6,060 additions and 7,515 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,38 +1,71 @@
 {
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false
+  },
   "extends": [
+    "react-app",
     "airbnb",
+    "plugin:jsx-a11y/recommended",
     "plugin:flowtype/recommended"
   ],
   "env": {
     "browser": true
   },
   "plugins": [
-    "flowtype",
-    "react-hooks"
+    "jsx-a11y",
+    "flowtype"
+  ],
+  "ignorePatterns": [
+    ".netx/",
+    "node_modules/"
   ],
-  "ignorePatterns": [".netx/", "node_modules/"],
   "rules": {
     "react/jsx-props-no-spreading": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
     "react/require-default-props": 0,
     "react/default-props-match-prop-types": 0,
-    "object-curly-newline": ["error", {
-      "ImportDeclaration": { "multiline": true, "minProperties": 3 },
-      "ExportDeclaration": "never"
-    }],
-    "react/destructuring-assignment": [2, "always", { "ignoreClassFields": true }],
+    "object-curly-newline": [
+      "error",
+      {
+        "ImportDeclaration": {
+          "multiline": true,
+          "minProperties": 3
+        },
+        "ExportDeclaration": "never"
+      }
+    ],
+    "react/destructuring-assignment": [
+      2,
+      "always",
+      {
+        "ignoreClassFields": true
+      }
+    ],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "no-case-declarations": "off",
     "no-plusplus": "off",
-    "prefer-destructuring": ["error", {
-      "array": false,
-      "object": false
-    }, {
-      "enforceForRenamedProperties": false
-    }],
+    "prefer-destructuring": [
+      "error",
+      {
+        "array": false,
+        "object": false
+      },
+      {
+        "enforceForRenamedProperties": false
+      }
+    ],
     "no-restricted-syntax": "off",
     "func-names": "off",
     "no-underscore-dangle": "off",
@@ -47,11 +80,18 @@
     "import/prefer-default-export": "off",
     "no-return-assign": "off",
     "import/no-extraneous-dependencies": "off",
-    "max-len": ["error", { "code": 850 }],
+    "max-len": "off",
     "react/no-unused-prop-types": "off",
     "react/prop-types": 0,
     "consistent-return": "off",
     "no-param-reassign": "off",
-    "no-console": "off"
+    "no-console": "off",
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ]
   }
-}
+}
diff --git a/package.json b/package.json
@@ -11,35 +11,32 @@
     "eslint": "./node_modules/.bin/eslint 'src/**/*.js'"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
-    "bootstrap": "^4.5.3",
-    "is-mobile": "^2.2.2",
-    "mobx": "^6.0.4",
-    "mobx-react": "^7.0.5",
-    "moment": "^2.29.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.3",
+    "is-mobile": "^3.1.1",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.4",
     "moment-duration-format": "^2.3.2",
-    "nanoid": "^3.1.20",
+    "nanoid": "^4.0.0",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-dropdown": "^1.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
     "react-helmet": "^6.1.0",
-    "react-range": "^1.8.3",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.1",
-    "react-simple-maps": "^2.3.0",
-    "react-spinners": "^0.9.0",
-    "react-tooltip": "^4.2.11",
-    "recharts": "^1.8.5",
-    "sass": "^1.30.0",
-    "timeago-react": "^3.0.1",
-    "web-vitals": "^1.0.1",
-    "websocket": "^1.0.33"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "react-range": "^1.8.14",
+    "react-router-dom": "^6.7.0",
+    "react-scripts": "^5.0.1",
+    "react-simple-maps": "^3.0.0",
+    "react-spinners": "^0.13.8",
+    "react-tooltip": "^4.5.1",
+    "recharts": "^2.3.2",
+    "sass": "^1.57.1",
+    "timeago-react": "^3.0.5",
+    "web-vitals": "^2.1.4",
+    "websocket": "^1.0.34"
   },
   "browserslist": {
     "production": [
@@ -54,11 +51,12 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^7.15.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-react": "^7.21.5",
-    "flow": "^0.2.3",
-    "flow-bin": "^0.140.0"
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "babel-preset-flow": "^6.23.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-flow": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "flow-bin": "^0.198.1"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,40 +1,20 @@
 // @flow
 import * as React from 'react';
-import {
-  Route,
-  Switch,
-  Redirect,
-} from 'react-router-dom';
 
 // Styles
 import 'normalize.css';
 import './styles/Main.scss';
 
 // Components
-import Layout from './components/Layout';
 import Home from './pages/Home';
-import NotFound from './pages/NotFound';
-
-type Props = {
-  viewStore: Object,
-  uiStore: Object,
-}
-
-const App = (props: Props) => {
-  const { viewStore, uiStore } = props;
+import Layout from './components/Layout';
 
+const App = () => {
   window.name = '_dash';
-
   return (
-    <>
-      <Layout viewStore={viewStore} uiStore={uiStore}>
-        <Switch>
-          <Route exact path="/" component={() => <Home viewStore={viewStore} uiStore={uiStore} />} />
-          <Route exact path="/not-found" component={NotFound} status={404} />
-          <Redirect to="/not-found" />
-        </Switch>
-      </Layout>
-    </>
+    <Layout>
+      <Home />
+    </Layout>
   );
 };
 

diff --git a/src/components/Layout/Header/index.js b/src/components/Layout/Header/index.js
@@ -6,15 +6,15 @@ import Switcher from '../../atoms/Switcher';
 import Logo from '../../atoms/Logo';
 import NavBar from '../../atoms/NavBar';
 import DropDown from '../../atoms/DropDown';
+import { useViewStore } from '../../../store/ViewStore';
 
 type Props = {
   checkedTheme: string,
   switchTheme: Function,
-  viewStore: Object,
 }
 
-const Header = (props: Props) => {
-  const { checkedTheme, switchTheme, viewStore } = props;
+const Header = ({ checkedTheme, switchTheme }: Props) => {
+  const viewStore = useViewStore();
 
   const links = [
     {
@@ -26,13 +26,12 @@ const Header = (props: Props) => {
       title: 'explore testnet',
     },
   ];
-  console.log('viewStore.network.value', toJS(viewStore.network.explorer));
 
   return (
     <div className="header">
       <Logo />
       <NavBar links={links} />
-      <DropDown viewStore={viewStore} />
+      <DropDown />
       <Switcher id="switch" onChange={switchTheme} checked={checkedTheme === 'dark'} />
     </div>
   );

diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react';
 import Header from './Header';
 import darkLine from '../../assets/right_decoration.svg';
 import whiteLine from '../../assets/darkTheme/right_decoration_dark.svg';
-// ContextProviders
-import { LayoutContext } from '../../contextProviders/layoutContext';
+import { useViewStore } from '../../store/ViewStore';
 
 const Layout = (props) => {
-  const { children, viewStore } = props;
+  const viewStore = useViewStore();
+  const { children } = props;
   const [checkedTheme, setCheckedTheme] = useState(localStorage.getItem('theme') || 'light');
 
   const setColor = (color: string) => {
@@ -30,12 +30,12 @@ const Layout = (props) => {
   }, [darkMode]);
 
   return (
-    <LayoutContext.Provider value={{ checkedTheme }}>
+    <>
       <div className="site-wrapper">
         {hideLine && (<Header switchTheme={switchTheme} checkedTheme={checkedTheme} viewStore={viewStore} />)}
         <main>
           <div className="corner-box">
-            { children }
+            {children}
           </div>
         </main>
       </div>
@@ -44,7 +44,7 @@ const Layout = (props) => {
           <img src={checkedTheme === 'light' ? darkLine : whiteLine} alt="" />
         </div>
       )}
-    </LayoutContext.Provider>
+    </>
   );
 };
 

diff --git a/src/components/atoms/BarChartCustom/index.js b/src/components/atoms/BarChartCustom/index.js
@@ -10,50 +10,45 @@ import {
 import CustomTimeAgo from '../CustomTimeAgo';
 
 type Props = {
-  data: Array;
-  dataMeasure?: string,
-  tooltipFilter?: Function,
+    data: Array;
+    dataMeasure?: string,
+    tooltipFilter?: Function,
 }
 
-const BarChartCustom = (props: Props) => {
-  const { data, dataMeasure, tooltipFilter } = props;
+const CustomizedTooltip = ({ active, payload, tooltipFilter, dataMeasure }) => {
+  if (active) {
+    const { epoch, age } = payload[0].payload;
+    const dataValue = tooltipFilter ? tooltipFilter(payload[0].value) : payload[0].value;
 
-  const CustomizedTooltip = (graphProps) => {
-    const { active } = graphProps;
-    if (active) {
-      const { payload } = graphProps;
-      const { epoch, age } = payload[0].payload;
-      const dataValue = tooltipFilter ? tooltipFilter(payload[0].value) : payload[0].value;
-      return (
-        <div className="custom-tooltip">
-          <p className="custom-tooltip_label">{`${dataValue} ${dataMeasure}`}</p>
-          <p className="custom-tooltip_label">
-            <CustomTimeAgo live={false} time={age} />
-          </p>
-          <p className="custom-tooltip_label">
-            Epoch&nbsp;
-            { epoch }
-          </p>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <ResponsiveContainer width="100%" height={124}>
-      {data.length > 0
-        ? (
-          <BarChart data={data}>
-            <Bar dataKey="amt" barSize={2} />
-            <Tooltip content={<CustomizedTooltip />} />
-          </BarChart>
-        ) : (
-          <div />
-        )}
-    </ResponsiveContainer>
-  );
+    return (
+      active && (
+      <div className="custom-tooltip">
+        <p className="custom-tooltip_label">{`${dataValue} ${dataMeasure}`}</p>
+        <p className="custom-tooltip_label">
+          <CustomTimeAgo live={false} time={age} />
+        </p>
+        <p className="custom-tooltip_label">
+          Epoch&nbsp;
+          {epoch}
+        </p>
+      </div>
+      )
+    );
+  }
 };
 
+const BarChartCustom = ({ data, dataMeasure, tooltipFilter }: Props) => (
+  <ResponsiveContainer width="100%" height={124}>
+    {data.length > 0
+      ? (
+        <BarChart data={data}>
+          <Bar dataKey="amt" barSize={2} />
+          <Tooltip content={<CustomizedTooltip tooltipFilter={tooltipFilter} dataMeasure={dataMeasure} />} />
+        </BarChart>
+      ) : (
+        <div />
+      )}
+  </ResponsiveContainer>
+);
+
 export default BarChartCustom;