virtual-dom -> React

src/jade/index.jade

@@ -57,7 +57,7 @@ html
       a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
         i.fa.fa-github
 
-    .fader
+    #fade.fader
 
 
     script(src='js/bundle.js')

src/js/components/inviteForm.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var {h} = require('virtual-dom');
-var classList = require('../util/classList');
-
-function render(props, state) {
-  var formClasses = classList({
-    'invite-form': true,
-    'has-success': state.submitted,
-    'has-error': state.error
-  });
-
-  var inputClasses = classList({
-    'input': true,
-    'has-success': state.submitted,
-    'has-error': state.error
-  });
-
-  var feedbackMessage;
-
-  if(state.error || state.submitted) {
-    let messageText;
-
-    if(state.submitted) {
-      messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
-    } else if(state.error.status === 400) {
-      messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
-    } else {
-      messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
-    }
-
-    feedbackMessage = (
-      <div className='invite-form--message'>
-        {messageText}
-      </div>
-    );
-
-  }
-  return (
-    <form className={formClasses} onsubmit={props.onSubmit}>
-      <input
-        className={inputClasses}
-        type='text'
-        name='email'
-        placeholder='Email'
-        value={state.email}
-        onkeydown={props.onChange} />
-      <button
-        className='btn btn__submit'
-        type='submit'
-        title='Lähetä'
-        disabled={state.error || state.submitted}>
-        ⏎
-      </button>
-      {feedbackMessage}
-    </form>
-    )
-}
-
-module.exports = render;

src/js/components/inviteForm.jsx

@@ -0,0 +1,98 @@
+'use strict';
+
+var request = require('axios');
+var React = require('React/addons');
+var classSet = React.addons.classSet
+
+module.exports = React.createClass({
+  getInitialState() {
+    return {
+      email: '',
+      submitted: false,
+      error: null
+    };
+  },
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.setState({
+      submitted: false,
+      error: null
+    });
+
+    request.post('/api/invites', {
+      email: this.state.email
+    })
+    .then(this.handleSuccess)
+    .catch(this.handleError);
+  },
+  handleSuccess() {
+    this.setState({submitted: true});
+  },
+  handleError(err) {
+    this.setState({error: err});
+  },
+  onChange(e) {
+    if(e.target.value === this.state.email) {
+      return;
+    }
+    this.setState({
+      email: e.target.value,
+      error: null,
+      submitted: false
+    });
+  },
+  render() {
+    var formClasses = classSet({
+      'invite-form': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error
+    });
+
+    var inputClasses = classSet({
+      'input': true,
+      'has-success': this.state.submitted,
+      'has-error': this.state.error
+    });
+
+    var feedbackMessage;
+
+    if(this.state.error || this.state.submitted) {
+      let messageText;
+
+      if(this.state.submitted) {
+        messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
+      } else if(this.state.error.status === 400) {
+        messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
+      } else {
+        messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
+      }
+
+      feedbackMessage = (
+        <div className='invite-form--message'>
+          {messageText}
+        </div>
+      );
+    }
+
+    return (
+      <form className={formClasses} onSubmit={this.onSubmit}>
+        <input
+          className={inputClasses}
+          type='text'
+          name='email'
+          placeholder='Email'
+          value={this.state.email}
+          onChange={this.onChange} />
+        <button
+          className='btn btn__submit'
+          type='submit'
+          title='Lähetä'
+          disabled={this.state.error || this.state.submitted}>
+          ⏎
+        </button>
+        {feedbackMessage}
+      </form>
+      )
+  }
+});

src/js/main.js

@@ -1,66 +1,9 @@
 'use strict';
-
 require('./ga');
 
-var _ = require('lodash');
-var request = require('axios');
-
-var inviteForm = require('./components/inviteForm');
-var {diff, patch, create} = require('virtual-dom');
-
-var state = {
-  email: '',
-  submitted: false,
-  error: null
-};
-
-function setState(newState) {
-  state = _.extend({}, state, newState);
-  rerender(state);
-}
-
-var props = {
-  onSubmit: function(e) {
-    e.preventDefault();
-
-    setState({
-      submitted: false,
-      error: null
-    });
-
-    request.post('/api/invites', {
-      email: state.email
-    }).then(function() {
-      setState({submitted: true});
-    }).catch(function(err) {
-      setState({error: err});
-    });
-  },
-  onChange: function(e) {
-    if(e.target.value === state.email) {
-      return;
-    }
-
-    setState({
-      email: e.target.value,
-      error: null,
-      submitted: false
-    });
-  },
-};
-
-var tree = inviteForm(props, state);
-var rootNode = create(tree);
-
-document
-  .getElementById('invite-form')
-  .appendChild(rootNode);
-
-function rerender() {
-  var newTree = inviteForm(props, state);
-  var patches = diff(tree, newTree);
-  rootNode = patch(rootNode, patches);
-  tree = newTree;
-}
+var React = require('React');
 
+React.render(
+  require('./components/inviteForm')(),
+  document.getElementById('invite-form'));
 

src/js/util/classList.js

@@ -1,11 +0,0 @@
-'use strict';
-
-module.exports = function classList(classesObj) {
-  var classes = [];
-  for(var key in classesObj) {
-    if(!!classesObj[key]) {
-      classes.push(key);
-    }
-  }
-  return classes.join(' ');
-};