Getting front end to run with fat arrow methods so that 'this' resolves.

(All file references are to `src/capstone/front`.)

1.  `app.js` was defining methods using function syntax:

        onEnd (end){
          this.setState({
            end: end
          })
        }

    but the browser would complain at runtime that `this` wasn't defined.

2.  Changed to fat arrow syntax in order to get `this` defined as per <https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function>:

        onEnd = (end) => {
          this.setState({
            end: end
          })
        }

    but Parcel complained about an unexpected token (it doesn't like fat arrow syntax).

3.  Discovered that we need to tell Babel to translate fat arrow syntax <https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods>, so added `.babelrc` with React defaults *and* the command to transform class properties:

        {
          "presets": [
            "react"
          ],
          "plugins": [
            "transform-class-properties"
          ]
        }

    Had to install a couple of packages to make this work:

        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.24.1",

4.  Commented out the calls to Chart.js stuff so that Parcel wouldn't "helpfully" try to install it along the way.

Author: gvwilson

.babelrc

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

package.json

@@ -31,6 +31,8 @@
     ]
   },
   "dependencies": {
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "cors": "^2.8.4",
     "express": "^4.16.3",
     "express-winston": "^3.0.0",

src/capstone/front/DataChart.js

@@ -1,8 +1,12 @@
 import React from 'react'
+/*
 import {Scatter} from 'react-chartjs-2';
+*/
 
 const DataChart = ({data}) => {
+  return <p>NO CHART</p>
 
+/*
   if (! data) {
     return (<p>no data</p>)
   }
@@ -30,6 +34,7 @@ const DataChart = ({data}) => {
   return (
     <Scatter data={data} options={options}/>
   )
+*/
 }
 
 export default DataChart

src/capstone/front/app.js

@@ -18,7 +18,7 @@ class App extends React.Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount = () => {
     const url = `${this.baseUrl}/survey/stats`
     fetch(url).then((response) => {
       return response.json()
@@ -29,19 +29,19 @@ class App extends React.Component {
     })
   }
 
-  onStart(start) {
+  onStart = (start) => {
     this.setState({
       start: start
     })
   }
 
-  onEnd(end) {
+  onEnd = (end) => {
     this.setState({
       end: end
     })
   }
 
-  onNewRange() {
+  onNewRange = () => {
     const params = {
       method: 'GET',
       headers: {
@@ -59,7 +59,7 @@ class App extends React.Component {
     })
   }
 
-  render() {
+  render = () => {
     const tableStyle = {overflow: 'scroll', height: '200px'}
     return (
       <div>
@@ -80,5 +80,5 @@ class App extends React.Component {
 
 ReactDOM.render(
   <App />,
-  document.getElementById("app")
+  document.getElementById('app')
 )