From 04396db9489f6965e433023af9bf146ffc24fa1b Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 13 Aug 2016 17:23:40 -0300 Subject: [PATCH] Ivan - Use ES6 Classes in app components and fix session issues [skip ci] --- client/src/actions/session-actions.js | 6 ++- client/src/app/App.js | 51 +++++++++---------- client/src/app/Routes.js | 30 +++++------ client/src/app/index.js | 2 +- .../dashboard-article-page.js | 4 +- .../dashboard-create-ticket-page.js | 4 +- .../dashboard-edit-profile-page.js | 4 +- .../app/main/dashboard/dashboard-layout.js | 4 +- .../dashboard-list-articles-page.js | 4 +- .../dashboard-list-tickets-page.js | 4 +- .../src/app/main/dashboard/dashboard-menu.js | 28 +++++----- .../dashboard-ticket/dashboard-ticket-page.js | 4 +- .../main/main-home/main-home-page-portal.js | 10 ++-- .../src/app/main/main-home/main-home-page.js | 4 +- client/src/app/main/main-layout-footer.js | 4 +- client/src/app/main/main-layout-header.js | 2 +- client/src/app/main/main-layout.js | 7 +-- client/src/core-components/checkbox.js | 2 +- client/src/data/fixtures/user-fixtures.js | 6 +-- client/src/reducers/session-reducer.js | 42 +++++++++------ 20 files changed, 114 insertions(+), 108 deletions(-) diff --git a/client/src/actions/session-actions.js b/client/src/actions/session-actions.js index 64fe6ef1..f4ca14fc 100644 --- a/client/src/actions/session-actions.js +++ b/client/src/actions/session-actions.js @@ -31,7 +31,7 @@ export default { logout() { return { - type: 'LOG_OUT', + type: 'LOGOUT', payload: API.call({ path: '/user/logout', data: {} @@ -48,7 +48,9 @@ export default { }).then((result) => { if (!result.data.sessionActive) { if (sessionStore.isRememberDataExpired()) { - store.dispatch(this.logout()); + store.dispatch({ + type: 'LOGOUT_FULFILLED' + }); } else { store.dispatch(this.autoLogin()); } diff --git a/client/src/app/App.js b/client/src/app/App.js index a6924e90..4aca0e3c 100644 --- a/client/src/app/App.js +++ b/client/src/app/App.js @@ -1,6 +1,7 @@ import React from 'react'; import _ from 'lodash'; import { connect } from 'react-redux' +import { browserHistory } from 'react-router'; class App extends React.Component { static contextTypes = { @@ -8,36 +9,12 @@ class App extends React.Component { location: React.PropTypes.object }; - constructor(props, context) { - super(props, context); - - if (_.includes(props.location.pathname, '/app/dashboard') && !props.config.logged) { - context.router.push('/app'); - } - - if (!_.includes(props.location.pathname, '/app/dashboard') && props.config.logged) { - context.router.push('/app/dashboard'); - } + componentWillMount() { + this.redirectIfPathIsNotValid(this.props); } componentWillReceiveProps(nextProps) { - const validations = { - languageChanged: nextProps.config.language !== this.props.config.language, - loggedIn: nextProps.session.logged && !this.props.session.logged, - loggedOut: !nextProps.session.logged && this.props.session.logged - }; - - if (validations.languageChanged) { - this.context.router.push(this.props.location.pathname); - } - - if (validations.loggedIn) { - this.context.router.push('/app/dashboard'); - } - - if (validations.loggedOut) { - this.context.router.push('/app'); - } + this.redirectIfPathIsNotValid(nextProps); } render() { @@ -47,6 +24,26 @@ class App extends React.Component { ); } + + redirectIfPathIsNotValid(props) { + const validations = { + languageChanged: props.config.language !== this.props.config.language, + loggedIn: !_.includes(props.location.pathname, '/app/dashboard') && props.session.logged, + loggedOut: _.includes(props.location.pathname, '/app/dashboard') && !props.session.logged + }; + + if (validations.languageChanged) { + browserHistory.push(props.location.pathname); + } + + if (validations.loggedOut) { + browserHistory.push('/app'); + } + + if (validations.loggedIn) { + browserHistory.push('/app/dashboard'); + } + } } export default connect((store) => { diff --git a/client/src/app/Routes.js b/client/src/app/Routes.js index ca77c038..1d71b369 100644 --- a/client/src/app/Routes.js +++ b/client/src/app/Routes.js @@ -1,27 +1,27 @@ -const React = require('react'); -const {Router, Route, IndexRoute, browserHistory} = require('react-router'); +import React from 'react'; +import {Router, Route, IndexRoute, browserHistory} from 'react-router'; import { syncHistoryWithStore } from 'react-router-redux'; import store from 'app/store'; -const App = require('app/App'); -const DemoPage = require('app/demo/components-demo-page'); +import App from 'app/App'; +import DemoPage from 'app/demo/components-demo-page'; -const MainLayout = require('app/main/main-layout'); -const MainHomePage = require('app/main/main-home/main-home-page'); -const MainSignUpPage = require('app/main/main-signup/main-signup-page'); -const MainRecoverPasswordPage = require('app/main/main-recover-password/main-recover-password-page'); +import MainLayout from 'app/main/main-layout'; +import MainHomePage from 'app/main/main-home/main-home-page'; +import MainSignUpPage from 'app/main/main-signup/main-signup-page'; +import MainRecoverPasswordPage from 'app/main/main-recover-password/main-recover-password-page'; -const DashboardLayout = require('app/main/dashboard/dashboard-layout'); +import DashboardLayout from 'app/main/dashboard/dashboard-layout'; -const DashboardListTicketsPage = require('app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page'); -const DashboardListArticlesPage = require('app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page'); +import DashboardListTicketsPage from 'app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page'; +import DashboardListArticlesPage from 'app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page'; -const DashboardCreateTicketPage = require('app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page'); -const DashboardEditProfilePage = require('app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page'); +import DashboardCreateTicketPage from 'app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page'; +import DashboardEditProfilePage from 'app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page'; -const DashboardArticlePage = require('app/main/dashboard/dashboard-article/dashboard-article-page'); -const DashboardTicketPage = require('app/main/dashboard/dashboard-ticket/dashboard-ticket-page'); +import DashboardArticlePage from 'app/main/dashboard/dashboard-article/dashboard-article-page'; +import DashboardTicketPage from 'app/main/dashboard/dashboard-ticket/dashboard-ticket-page'; const history = syncHistoryWithStore(browserHistory, store); diff --git a/client/src/app/index.js b/client/src/app/index.js index 440272bc..ace1beec 100644 --- a/client/src/app/index.js +++ b/client/src/app/index.js @@ -18,7 +18,7 @@ if (noFixtures === 'disabled') { let renderApplication = function () { render({routes}, document.getElementById('app')); }; - +window.store = store; store.dispatch(SessionActions.initSession()); let unsubscribe = store.subscribe(() => { diff --git a/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js index cdfbf4d2..15d5a134 100644 --- a/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js +++ b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardArticlePage = React.createClass({ +class DashboardArticlePage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardArticlePage = React.createClass({ ); } -}); +} export default DashboardArticlePage; diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js index aff1aaa2..9914bc12 100644 --- a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js +++ b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardCreateTicketPage = React.createClass({ +class DashboardCreateTicketPage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardCreateTicketPage = React.createClass({ ); } -}); +} export default DashboardCreateTicketPage; diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js index 9073edb0..3cfb7621 100644 --- a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js +++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardEditProfilePage = React.createClass({ +class DashboardEditProfilePage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardEditProfilePage = React.createClass({ ); } -}); +} export default DashboardEditProfilePage; diff --git a/client/src/app/main/dashboard/dashboard-layout.js b/client/src/app/main/dashboard/dashboard-layout.js index 6f01f770..89f9c0a7 100644 --- a/client/src/app/main/dashboard/dashboard-layout.js +++ b/client/src/app/main/dashboard/dashboard-layout.js @@ -3,7 +3,7 @@ import {connect} from 'react-redux'; import DashboardMenu from 'app/main/dashboard/dashboard-menu'; -const DashboardLayout = React.createClass({ +class DashboardLayout extends React.Component { render() { return (this.props.session.logged) ? ( @@ -13,7 +13,7 @@ const DashboardLayout = React.createClass({ ) : null; } -}); +} export default connect((store) => { return { diff --git a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js index 1488cd58..552b8198 100644 --- a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js +++ b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardListArticlesPage = React.createClass({ +class DashboardListArticlesPage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardListArticlesPage = React.createClass({ ); } -}); +} export default DashboardListArticlesPage; diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js index e3b9201e..8374828e 100644 --- a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js +++ b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardListTicketsPage = React.createClass({ +class DashboardListTicketsPage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardListTicketsPage = React.createClass({ ); } -}); +} export default DashboardListTicketsPage; diff --git a/client/src/app/main/dashboard/dashboard-menu.js b/client/src/app/main/dashboard/dashboard-menu.js index 2f64001b..5066647f 100644 --- a/client/src/app/main/dashboard/dashboard-menu.js +++ b/client/src/app/main/dashboard/dashboard-menu.js @@ -10,48 +10,48 @@ let dashboardRoutes = [ { path: '/app/dashboard/edit-profile', text: 'Edit Profile' } ]; -const DashboardMenu = React.createClass({ - contextTypes: { +class DashboardMenu extends React.Component { + static contextTypes = { router: React.PropTypes.object - }, + }; - propTypes: { + static propTypes = { location: React.PropTypes.object - }, + }; render() { return ( ); - }, + } getProps() { return { items: this.getMenuItems(), selectedIndex: this.getSelectedIndex(), - onItemClick: this.goToPathByIndex + onItemClick: this.goToPathByIndex.bind(this) }; - }, + } - getMenuItems: function () { - return dashboardRoutes.map(this.getMenuItem); - }, + getMenuItems() { + return dashboardRoutes.map(this.getMenuItem.bind(this)); + } getMenuItem(item) { return { content: item.text }; - }, + } getSelectedIndex() { let pathname = this.props.location.pathname; return _.findIndex(dashboardRoutes, {path: pathname}); - }, + } goToPathByIndex(itemIndex) { this.context.router.push(dashboardRoutes[itemIndex].path); } -}); +} export default DashboardMenu; diff --git a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js index f0c30458..1235aeb9 100644 --- a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js +++ b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js @@ -1,6 +1,6 @@ import React from 'react'; -const DashboardTicketPage = React.createClass({ +class DashboardTicketPage extends React.Component { render() { return ( @@ -9,6 +9,6 @@ const DashboardTicketPage = React.createClass({ ); } -}); +} export default DashboardTicketPage; diff --git a/client/src/app/main/main-home/main-home-page-portal.js b/client/src/app/main/main-home/main-home-page-portal.js index 46e80815..311c5c8f 100644 --- a/client/src/app/main/main-home/main-home-page-portal.js +++ b/client/src/app/main/main-home/main-home-page-portal.js @@ -1,9 +1,9 @@ -const React = require('react'); -const classNames = require('classnames'); +import React from 'react'; +import classNames from 'classnames'; -const Widget = require('core-components/widget'); +import Widget from 'core-components/widget'; -const MainHomePagePortal = React.createClass({ +class MainHomePagePortal extends React.Component { render() { return ( @@ -11,6 +11,6 @@ const MainHomePagePortal = React.createClass({ ); } -}); +} export default MainHomePagePortal; \ No newline at end of file diff --git a/client/src/app/main/main-home/main-home-page.js b/client/src/app/main/main-home/main-home-page.js index c8d3f7f7..f8a512a2 100644 --- a/client/src/app/main/main-home/main-home-page.js +++ b/client/src/app/main/main-home/main-home-page.js @@ -3,7 +3,7 @@ import React from 'react'; import MainHomePageLoginWidget from 'app/main/main-home/main-home-page-login-widget'; import MainHomePagePortal from 'app/main/main-home/main-home-page-portal'; -const MainHomePage = React.createClass({ +class MainHomePage extends React.Component { render() { return ( @@ -13,6 +13,6 @@ const MainHomePage = React.createClass({ ); } -}); +} export default MainHomePage; \ No newline at end of file diff --git a/client/src/app/main/main-layout-footer.js b/client/src/app/main/main-layout-footer.js index 89de858a..8c9e6edd 100644 --- a/client/src/app/main/main-layout-footer.js +++ b/client/src/app/main/main-layout-footer.js @@ -1,6 +1,6 @@ import React from 'react'; -let MainLayoutFooter = React.createClass({ +class MainLayoutFooter extends React.Component { render() { return ( @@ -11,6 +11,6 @@ let MainLayoutFooter = React.createClass({ ); } -}); +} export default MainLayoutFooter; \ No newline at end of file diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js index d082cb22..06879a3b 100644 --- a/client/src/app/main/main-layout-header.js +++ b/client/src/app/main/main-layout-header.js @@ -36,7 +36,7 @@ class MainLayoutHeader extends React.Component { result = (
Welcome, John - +
); } else { diff --git a/client/src/app/main/main-layout.js b/client/src/app/main/main-layout.js index 89e4ff50..74be940d 100644 --- a/client/src/app/main/main-layout.js +++ b/client/src/app/main/main-layout.js @@ -3,22 +3,19 @@ import React from 'react'; import MainHeader from 'app/main/main-layout-header'; import MainFooter from 'app/main/main-layout-footer'; -let MainLayout = React.createClass({ +class MainLayout extends React.Component { render() { return (
- -
{this.props.children}
-
); } -}); +} export default MainLayout; diff --git a/client/src/core-components/checkbox.js b/client/src/core-components/checkbox.js index 2a02ea11..f5261aa7 100644 --- a/client/src/core-components/checkbox.js +++ b/client/src/core-components/checkbox.js @@ -90,7 +90,7 @@ class CheckBox extends React.Component { if (event.keyCode == 32) { event.preventDefault(); - callback(this.handleChange, this.props.onChange)({ + callback(this.handleChange.bind(this), this.props.onChange)({ target: { checked: !this.state.checked } diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js index 59a49753..d84f061a 100644 --- a/client/src/data/fixtures/user-fixtures.js +++ b/client/src/data/fixtures/user-fixtures.js @@ -5,14 +5,14 @@ module.exports = [ response: function (data) { let response; - if (data.password === 'valid' || (data.rememberToken === 'aa41efe0a1b3eeb9bf303e4561ff8392' && data.userId === 12)) { + if (data.password === 'valid' || (data.rememberToken === 'aa41efe0a1b3eeb9bf303e4561ff8392' && data.userId == 12)) { response = { status: 'success', data: { 'userId': 12, 'token': 'cc6b4921e6733d6aafe284ec0d7be57e', 'rememberToken': (data.remember) ? 'aa41efe0a1b3eeb9bf303e4561ff8392' : null, - 'rememberExpiration': (data.remember) ? 2018 : 0 + 'rememberExpiration': (data.remember) ? 20180806 : 0 } }; } else { @@ -42,7 +42,7 @@ module.exports = [ return { status: 'success', data: { - sessionActive: true + sessionActive: false } }; } diff --git a/client/src/reducers/session-reducer.js b/client/src/reducers/session-reducer.js index 428331a9..daa59f6a 100644 --- a/client/src/reducers/session-reducer.js +++ b/client/src/reducers/session-reducer.js @@ -16,12 +16,12 @@ class SessionReducer extends Reducer { getTypeHandlers() { return { 'LOGIN_PENDING': this.onLoginPending, - 'LOGIN_FULFILLED': this.onLoginCompleted, + 'LOGIN_FULFILLED': this.onLoginCompleted.bind(this), 'LOGIN_REJECTED': this.onLoginFailed, 'LOGOUT_FULFILLED': this.onLogout, 'CHECK_SESSION_REJECTED': (state) => { return _.extend({}, state, {initDone: true})}, - 'SESSION_CHECKED': (state) => { return _.extend({}, state, {initDone: true})}, - 'LOGIN_AUTO_FULFILLED': this.onAutoLogin, + 'SESSION_CHECKED': (state) => { return _.extend({}, state, {initDone: true, logged: true})}, + 'LOGIN_AUTO_FULFILLED': this.onAutoLogin.bind(this), 'LOGIN_AUTO_REJECTED': this.onAutoLoginFail }; } @@ -35,16 +35,8 @@ class SessionReducer extends Reducer { } onLoginCompleted(state, payload) { - if (payload.data.rememberToken) { - sessionStore.storeRememberData({ - token: payload.data.rememberToken, - userId: payload.data.userId, - expiration: payload.data.rememberExpiration - }); - } else { - sessionStore.createSession(payload.data.userId, payload.data.token); - } - + this.storeLoginResultData(payload.data); + return _.extend({}, state, { logged: true, pending: false, @@ -65,19 +57,25 @@ class SessionReducer extends Reducer { sessionStore.clearRememberData(); return _.extend({}, state, { + initDone: true, logged: false, pending: false, failed: false }); } - onAutoLogin() { + onAutoLogin(state, payload) { + this.storeLoginResultData(payload.data); + return _.extend({}, state, { - initDone: true + initDone: true, + logged: true, + pending: false, + failed: false }); } - onAutoLoginFail() { + onAutoLoginFail(state) { sessionStore.closeSession(); sessionStore.clearRememberData(); @@ -85,6 +83,18 @@ class SessionReducer extends Reducer { initDone: true }); } + + storeLoginResultData(resultData) { + if (resultData.rememberToken) { + sessionStore.storeRememberData({ + token: resultData.rememberToken, + userId: resultData.userId, + expiration: resultData.rememberExpiration + }); + } else { + sessionStore.createSession(resultData.userId, resultData.token); + } + } } export default SessionReducer.getInstance(); \ No newline at end of file