transform-class-properties

8 files changed, 36 insertions, 31 deletions

diff --git a/vnext/package.json b/vnext/package.json
index 845e6426..640283e7 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -14,6 +14,7 @@
     "babel-core": "^6.26.3",
     "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "connect-history-api-fallback": "^1.5.0",
@@ -38,6 +39,9 @@
     "whatwg-fetch": "^2.0.4"
   },
   "babel": {
+    "plugins": [
+      ["transform-class-properties", {"spec": true}]
+    ],
     "presets": [
       "env",
       "react"
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 79425c12..c4d9422f 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -11,13 +11,12 @@ export default class Chat extends React.Component {
         this.state = {
             chats: []
         };
-        this.loadChat = this.loadChat.bind(this);
     }
     componentWillMount() {
         this.loadChat(this.props.match.params.user);
     }
 
-    loadChat(uname) {
+    loadChat = (uname) => {
         const { hash } = this.props.visitor;
         this.setState({
             chats: []
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index 0f12575f..5e9c14d0 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -61,7 +61,6 @@ class Feed extends React.Component {
     this.state = {
       msgs: []
     };
-    this.loadMessages = this.loadMessages.bind(this);
   }
   componentDidMount() {
     this.loadMessages(this.props.visitor.hash, this.props.location.search);
@@ -72,7 +71,7 @@ class Feed extends React.Component {
       this.loadMessages(nextProps.visitor.hash, nextProps.location.search)
     }
   }
-  loadMessages(hash = '', filter = '') {
+  loadMessages = (hash = '', filter = '') => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
     this.setState({ msgs: [] })
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index 22ae2198..fb3c087e 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -11,25 +11,24 @@ export default class LoginButton extends React.Component {
       username: '',
       password: ''
     };
-    this.toggleModal = this.toggleModal.bind(this);
   }
-  toggleModal(event) {
+  toggleModal = (event) => {
     if (event) event.preventDefault()
     this.setState({
       isOpen: !this.state.isOpen
     });
   }
-  usernameChanged(event) {
+  usernameChanged = (event) => {
     this.setState({
       username: event.target.value
     })
   }
-  passwordChanged(event) {
+  passwordChanged = (event) => {
     this.setState({
       password: event.target.value
     })
   }
-  login(event) {
+  login = (event) => {
     event.preventDefault();
     let headers = new Headers();
     headers.append('Authorization', 'Basic ' + window.btoa(unescape(encodeURIComponent(this.state.username + ":" + this.state.password))));
@@ -67,16 +66,16 @@ export default class LoginButton extends React.Component {
             </a>
             </div>
             <p>Already registered?</p>
-            <form onSubmit={this.login.bind(this)}>
+            <form onSubmit={this.login}>
               <input className="signinput"
                 type="text"
                 name="username"
                 placeholder="Username..."
-                value={this.state.username} onChange={this.usernameChanged.bind(this)} /><br />
+                value={this.state.username} onChange={this.usernameChanged} /><br />
               <input className="signinput"
                 type="password" name="password"
                 placeholder="Password..."
-                value={this.state.password} onChange={this.passwordChanged.bind(this)} /><br />
+                value={this.state.password} onChange={this.passwordChanged} /><br />
               <input className="signsubmit" type="submit" value="OK" />
             </form>
           </div>
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 6e698c32..e30962a8 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -9,12 +9,6 @@ import Button from './Button';
 export default class MessageInput extends React.Component {
     constructor(props) {
         super(props)
-        this.textChanged = this.textChanged.bind(this);
-        this.attachmentChanged = this.attachmentChanged.bind(this);
-        this.openfile = this.openfile.bind(this);
-        this.handleCtrlEnter = this.handleCtrlEnter.bind(this);
-        this.onSubmit = this.onSubmit.bind(this);
-
         this.textarea = React.createRef();
         this.fileinput = React.createRef();
         this.state = {
@@ -26,13 +20,13 @@ export default class MessageInput extends React.Component {
         }
     }
 
-    handleCtrlEnter(event) {
+    handleCtrlEnter = (event) => {
         if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
             this.onSubmit({})
         }
     }
 
-    onSubmit(event) {
+    onSubmit = (event) => {
         if (event.preventDefault) event.preventDefault();
         const input = this.fileinput.current;
         this.props.onSend({
@@ -50,7 +44,7 @@ export default class MessageInput extends React.Component {
     componentDidMount() {
         this.textarea.current.focus()
     }
-    textChanged(event) {
+    textChanged = (event) => {
         this.setState({
             body: event.target.value
         })
@@ -59,12 +53,12 @@ export default class MessageInput extends React.Component {
         const height = el.scrollHeight + offset;
         el.style.height = `${height + offset}px`;
     }
-    attachmentChanged(event) {
+    attachmentChanged = (event) => {
         this.setState({
             attach: event.target.value
         })
     }
-    openfile() {
+    openfile = () => {
         const input = this.fileinput.current;
         if (this.state.attach) {
             this.setState({
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 5ff91346..17c5b55c 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -21,8 +21,6 @@ export default class Thread extends React.Component {
       replies: [],
       active: 0
     };
-    this.loaded = this.loaded.bind(this);
-    this.postComment = this.postComment.bind(this);
   }
   componentDidMount() {
     document.body.scrollTop = 0;
@@ -55,7 +53,7 @@ export default class Thread extends React.Component {
         console.log(ex);
       });
   }
-  loaded() {
+  loaded = () => {
     return (this.state.replies && this.state.replies.length > 0) || ('mid' in this.state.msg && !('replies' in this.state.msg));
   }
   setActive(msg, event) {
@@ -63,7 +61,7 @@ export default class Thread extends React.Component {
       active: msg.rid || 0
     })
   }
-  postComment(template) {
+  postComment = (template) => {
     const url = `https://api.juick.com/comment?hash=${this.props.visitor.hash}`;
     let form = new FormData();
     form.append('mid', template.mid);
@@ -150,7 +148,7 @@ export default class Thread extends React.Component {
                           {
                             this.props.visitor.uid > 0 ? (
                               <React.Fragment>
-                                {this.state.active === msg.rid || <Button onClick={this.setActive.bind(this, msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
+                                {this.state.active === msg.rid || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
                                 {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
                               </React.Fragment>
                             ) : (
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 556745ff..2caaf5bb 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -20,7 +20,6 @@ const elClassBackground = 'header--background';
 class App extends React.Component {
   constructor(props) {
     super(props);
-    this.auth = this.auth.bind(this);
     let params = qs.parse(window.location.search)
     if (params.hash) {
       window.localStorage.hash = params.hash
@@ -125,7 +124,7 @@ class App extends React.Component {
                     {user.uid > 0 ?
                       <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
                       :
-                      <LoginButton title="Login" onAuth={this.auth.bind(this)} />
+                      <LoginButton title="Login" onAuth={this.auth} />
                     }
                   </li>
                 </ul>
@@ -216,7 +215,7 @@ class App extends React.Component {
       </Router>
     )
   }
-  auth(data) {
+  auth = (data) => {
     if (data) {
       window.localStorage.hash = data;
       fetch(`https://api.juick.com/users?hash=${data}`)
diff --git a/vnext/yarn.lock b/vnext/yarn.lock
index fa1abae1..10c5cf09 100644
--- a/vnext/yarn.lock
+++ b/vnext/yarn.lock
@@ -654,6 +654,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
 
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -682,6 +686,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-class-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"