upgrade client-side code for Preact 8.x

assets/src/js/components/LoginForm.js

@@ -3,6 +3,7 @@
 import { h, render, Component } from 'preact';
 import Client from '../lib/client.js';
 import Notification from '../components/Notification.js';
+import { bind, memoize, debounce } from 'decko';
 
 class LoginForm extends Component {
 
@@ -16,6 +17,7 @@ class LoginForm extends Component {
     }
   }
 
+  @bind
   handleSubmit(e) {
     e.preventDefault();
 
@@ -36,19 +38,29 @@ class LoginForm extends Component {
     })
   }
 
+  @bind
+  updatePassword(e) {
+    this.setState({ password: e.target.value });
+  }
+
+  @bind
+  updateEmail(e) {
+    this.setState({ email: e.target.value });
+  }
+
   render() {
     return (
       <div class="block">
         <h2>Login</h2>
-        <p>Please enter your credentials to access your Ana dashboard.</p>
+        <p>Please enter your login credentials to access your Ana dashboard.</p>
         <form method="POST" onSubmit={this.handleSubmit}>
           <div class="small-margin">
             <label>Email address</label>
-            <input type="email" name="email" placeholder="Email address" value={this.state.email} onChange={this.linkState('email')} required="required" />
+            <input type="email" name="email" placeholder="Email address" value={this.state.email} onInput={this.updateEmail} required="required" />
           </div>
           <div class="small-margin">
             <label>Password</label>
-            <input type="password" name="password" placeholder="**********" value={this.state.password} onChange={this.linkState('password')} required="required" />
+            <input type="password" name="password" placeholder="**********" value={this.state.password} onInput={this.updatePassword} required="required" />
           </div>
           <div class="small-margin">
             <input type="submit" value="Sign in" />

gulpfile.js

@@ -26,7 +26,10 @@ gulp.task('browserify', function () {
         })
         .transform("babelify", {
           presets: ["es2015"],
-          plugins: [ ["transform-react-jsx", { "pragma":"h" } ] ]
+          plugins: [ 
+            "transform-decorators-legacy", 
+            ["transform-react-jsx", { "pragma":"h" } ] 
+          ]
         })
         .bundle()
         .on('error', function(err){

package-lock.json

@@ -456,12 +456,29 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-syntax-decorators": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
+      "dev": true
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
       "dev": true
     },
+    "babel-plugin-transform-decorators-legacy": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz",
+      "integrity": "sha1-dBtY9sW86eYCfgiC2cmU8E82aSU=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-decorators": "6.13.0",
+        "babel-runtime": "6.26.0",
+        "babel-template": "6.26.0"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
@@ -1957,6 +1974,11 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "decko": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decko/-/decko-1.2.0.tgz",
+      "integrity": "sha1-/UPHNelnuAEzBohKVvvmZZlraBc="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",

package.json

@@ -1,6 +1,7 @@
 {
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-preset-es2015": "^6.18.0",
     "babelify": "^8.0.0",
@@ -15,6 +16,7 @@
   "dependencies": {
     "d3": "^5.1.0",
     "d3-tip": "^0.7.1",
+    "decko": "^1.2.0",
     "gulp-uglify": "^3.0.0",
     "preact": "^8.2.7",
     "pump": "^3.0.0"