Skip to content

Commit

Permalink
ui: Refactor lifecycle methods (#409)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Stezido authored Nov 29, 2019
1 parent dfb31fc commit 1535828
Show file tree
Hide file tree
Showing 20 changed files with 166 additions and 102 deletions.
3 changes: 1 addition & 2 deletions frontend/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
"rules": {
"no-var": 1,
"no-console": 1,
"import/named": 2,
"no-extra-semi": 1
"import/named": 2
}
}
144 changes: 88 additions & 56 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 8 additions & 6 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": [
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/index.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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: {
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Dashboard/DashboardContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Dashboard from "./Dashboard";
import globalStyles from "../../styles.js";

class DashboardContainer extends Component {
componentWillMount() {
componentDidMount() {
this.props.fetchNodeInformation();
}
render() {
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/pages/Login/LoginPageContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -33,6 +30,7 @@ class LoginPageContainer extends Component {

if (this.props.jwt) this.props.history.push(path);
}

render() {
return <LoginPage {...this.props} />;
}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/pages/Main/Main.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,10 @@ const Main = props => {
};

class MainContainer extends Component {
componentWillMount() {
componentDidMount() {
this.props.initLanguage();
}

render() {
return <Main />;
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/Nodes/NodesContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down
Loading

0 comments on commit 1535828

Please sign in to comment.