ui: Refactor lifecycle methods (#409)

* ui: Update lifecycle methods, react-redux, react-router

React-router-redux is deprecated so its replaced by connected-react-router
Use constructor for init local state or binding event handler methods to an instance
Use componentdidMount for side effects after the DOM is build
Use componentdidUpdate for fetching data or side effects depending on an updated prop
add es-lint command to overwriting rules
add array-move package - react-sortable-hoc is deleting array-move dep in the next major version

frontend/.eslintrc

@@ -13,7 +13,6 @@
   "rules": {
     "no-var": 1,
     "no-console": 1,
-    "import/named": 2,
-    "no-extra-semi": 1
+    "import/named": 2
   }
 }

frontend/package.json

@@ -21,8 +21,10 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "accounting": "^0.4.1",
+    "array-move": "^2.2.0",
     "axios": "^0.19.0",
-    "chart.js": "^2.8.0",
+    "chart.js": "^2.9.3",
+    "connected-react-router": "^6.6.1",
     "dayjs": "^1.8.14",
     "downshift": "^2.0.16",
     "file-saver": "^1.3.8",
@@ -35,10 +37,9 @@
     "react-infinite-scroller": "^1.2.4",
     "react-localization": "^1.0.13",
     "react-number-format": "^4.0.7",
-    "react-redux": "^5.0.3",
-    "react-router": "^4.0.0",
-    "react-router-redux": "^5.0.0-alpha.4",
-    "react-sortable-hoc": "^0.6.3",
+    "react-redux": "^7.1.3",
+    "react-router": "^5.1.2",
+    "react-sortable-hoc": "^1.10.1",
     "react-transition-group": "^2.9.0",
     "redux": "^3.6.0",
     "redux-debounced": "^0.4.0",
@@ -58,7 +59,8 @@
     "test": "npm run check-translations",
     "eject": "react-app-rewired eject",
     "check-translations": "node scripts/check-translations.js",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "eslint-check": "eslint --print-config ./src/index.js | eslint-config-prettier-check"
   },
   "proxy": "http://localhost:8080",
   "browserslist": [

frontend/src/index.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
-import { ConnectedRouter } from "react-router-redux";
-import { Route, Switch } from "react-router";
+import { ConnectedRouter } from "connected-react-router/immutable";
+import { Route, Switch, withRouter } from "react-router";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import { createBrowserHistory } from "history";
 import dayjs from "dayjs";
@@ -26,8 +26,7 @@ dayjs.extend(relativeTime);
 
 const history = createBrowserHistory();
 
-const initialState = {};
-const store = configureStore(initialState, history);
+const store = configureStore(history);
 
 const muiTheme = createMuiTheme({
   palette: {
@@ -49,7 +48,7 @@ class Root extends Component {
         <ConnectedRouter history={history}>
           <MuiThemeProvider theme={muiTheme}>
             <Switch>
-              <Route key={1} exact path="/login" component={withInitialLoading(LoginPageContainer)} />
+              <Route key={1} exact path="/login" render={withRouter(withInitialLoading(LoginPageContainer))} />
               <PrivateRoute component={Main} />
             </Switch>
           </MuiThemeProvider>

frontend/src/pages/Dashboard/DashboardContainer.js

@@ -6,7 +6,7 @@ import Dashboard from "./Dashboard";
 import globalStyles from "../../styles.js";
 
 class DashboardContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.fetchNodeInformation();
   }
   render() {

frontend/src/pages/Login/LoginPageContainer.js

@@ -14,11 +14,8 @@ import {
 import LoginPage from "./LoginPage";
 
 class LoginPageContainer extends Component {
-  componentWillMount() {
-    this.props.initLanguage();
-  }
-
   componentDidMount() {
+    this.props.initLanguage();
     this.props.getEnvironment();
     this.checkIfRedirect();
   }
@@ -33,6 +30,7 @@ class LoginPageContainer extends Component {
 
     if (this.props.jwt) this.props.history.push(path);
   }
+
   render() {
     return <LoginPage {...this.props} />;
   }

frontend/src/pages/Main/Main.js

@@ -69,9 +69,10 @@ const Main = props => {
 };
 
 class MainContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.initLanguage();
   }
+
   render() {
     return <Main />;
   }

frontend/src/pages/Nodes/NodesContainer.js

@@ -10,10 +10,10 @@ import { showSnackbar, storeSnackbarMessage } from "../Notifications/actions";
 import Nodes from "./Nodes";
 
 class NodesContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.fetchNodes();
   }
-  componentWillUnmount() {}
+
   render() {
     if (canViewNodesDashboard(this.props.allowedIntents)) {
       return <Nodes {...this.props} />;

frontend/src/pages/Notifications/LiveNotificationContainer.js

@@ -10,7 +10,7 @@ import LiveUpdates from "../LiveUpdates/LiveUpdates";
 // Once notifications are compacted/snapshoted we can refresh every time the fly in saga was called.
 
 class LiveNotificationContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.fetchNotificationCounts();
   }