ui: Refactor lifecycle methods

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