From eeb7d1c549a62954793e3e8b1dcfce19351a3ea4 Mon Sep 17 00:00:00 2001 From: Marc Bouchard Date: Sat, 11 Nov 2017 17:03:30 -0500 Subject: [PATCH 01/26] Use arrow functions as event handlers for Login and RoutingWrapper Arrow functions are used as the event handler methods of the Login and RoutingWrapper components to preserve the wrapping parent context. This removes the need for the .bind(this) method call on the parent class methods when they are passed as the children's event handler props. --- src/common/components/addons/RoutingWrapper/index.jsx | 4 ++-- src/common/containers/Login/components/index.jsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/common/components/addons/RoutingWrapper/index.jsx b/src/common/components/addons/RoutingWrapper/index.jsx index e1946a46..06c7ab82 100644 --- a/src/common/components/addons/RoutingWrapper/index.jsx +++ b/src/common/components/addons/RoutingWrapper/index.jsx @@ -26,7 +26,7 @@ export default class RoutingWrapper extends Component { * Maybe, It'd be even better to store this logic in a plain function rather than in a method. * {@link - src/common/components/addons/RouteAuth/index.jsx} */ - authCheck (path: string): boolean { + authCheck = (path: string): boolean => { const {store} = this.props const {isLoggedIn} = getAuthState(store.getState()) const authPath = '/auth' @@ -48,7 +48,7 @@ export default class RoutingWrapper extends Component { // Is it "RouteAuth" (e.g. `protected route`) or "Route"? const Tag = a.tag // Determinates is user allowed to visit certain route - const canAccess = this.authCheck.bind(this) + const canAccess = this.authCheck // Select only props that we need const b = {canAccess, ...a} diff --git a/src/common/containers/Login/components/index.jsx b/src/common/containers/Login/components/index.jsx index 6b56e9c5..2bd342fb 100644 --- a/src/common/containers/Login/components/index.jsx +++ b/src/common/containers/Login/components/index.jsx @@ -21,13 +21,13 @@ class LoginComponent extends Component { password: '' } - handleSubmit (e: Event) { + handleSubmit = (e: Event) => { e.preventDefault() const {username, password} = this.state this.props.login({username, password}) } - handleChange (e: Event, {name, value}) { + handleChange = (e: Event, {name, value}) => { this.setState({ [name]: value }) @@ -55,7 +55,7 @@ class LoginComponent extends Component { {/* Consider using Redux-Form */} -
+ {errors && (