add webapck support for arrow functions in class syntax

Author: ChrisCavs

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "transform-class-properties"
+  ]
+}

frontend/components/modal/modal.jsx

@@ -1,42 +1,50 @@
 import React from 'react'
 import ModalLoginForm from './modal_login_form'
 import ModalSignupForm from './modal_signup_form'
+import { withRouter } from 'react-router-dom'
 
-const Modal = ({
-  reveal, errors, login, signup, hide, revealModalSignup, revealModalLogin}) => {
+class Modal extends React.Component {
 
-  const classes = reveal ? 'modal' : 'modal hide'
-  let modal = <div></div>
+  handleHide = event => {
+    debugger
+    this.props.history.push('/')
+    this.props.hide()
+  }
 
-  if (reveal === 'login') {
-    modal = <ModalLoginForm
-              title="Log In"
-              errors={errors}
-              submitAction={login}
-              hide={hide}
-              revealModalSignup={revealModalSignup} />
+  render () {
+    const classes = this.props.reveal ? 'modal' : 'modal hide'
+    let modal = <div></div>
 
-  } else if (reveal) {
-    modal = <ModalSignupForm
-              title="Sign Up"
-              errors={errors}
-              submitAction={signup}
-              hide={hide}
-              revealModalLogin={revealModalLogin} />
-  }
+    if (this.props.reveal === 'login') {
+      modal = <ModalLoginForm
+        title="Log In"
+        errors={this.props.errors}
+        submitAction={this.props.login}
+        hide={this.props.hide}
+        revealModalSignup={this.props.revealModalSignup} />
 
-  return (
-    <div className={classes}>
-      <div className="modal-content">
-        <button
-          onClick={hide}
-          className="modal-close-button">
-          x
+    } else if (this.props.reveal) {
+      modal = <ModalSignupForm
+        title="Sign Up"
+        errors={this.props.errors}
+        submitAction={this.props.signup}
+        hide={this.props.hide}
+        revealModalLogin={this.props.revealModalLogin} />
+    }
+
+    return (
+      <div className={classes}>
+        <div className="modal-content">
+          <button
+            onClick={this.handleHide}
+            className="modal-close-button">
+            x
         </button>
 
-        {modal}
+          {modal}
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
-export default Modal
+export default withRouter(Modal)

package-lock.json

@@ -43,5 +43,8 @@
     "redux-thunk": "^2.3.0",
     "webpack": "^4.15.1",
     "webpack-cli": "^3.0.8"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-class-properties": "^6.24.1"
   }
 }

package.json

@@ -14,7 +14,8 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           query: {
-            presets: ['env', 'react']
+            presets: ['env', 'react'],
+            plugins: ["transform-class-properties"]
           }
         },
       }