refactor: Use ES6 classes instead of createClass

src/components/rounded_toggle.js

@@ -1,50 +1,46 @@
 import React from 'react';
-import PureRenderMixin from 'react-pure-render/mixin';
+import PropTypes from 'prop-types';
 
-var roundedToggleOptionType = React.PropTypes.shape({
-  title: React.PropTypes.string,
-  value: React.PropTypes.string
+var roundedToggleOptionType = PropTypes.shape({
+  title: PropTypes.string,
+  value: PropTypes.string
 });
 
-var RoundedToggle = React.createClass({
-  mixins: [PureRenderMixin],
-  propTypes: {
-    options: React.PropTypes.arrayOf(roundedToggleOptionType).isRequired,
+export default class RoundedToggle extends React.PureComponent {
+  static propTypes = {
+    options: PropTypes.arrayOf(roundedToggleOptionType).isRequired,
     active: roundedToggleOptionType,
-    short: React.PropTypes.bool,
-    onChange: React.PropTypes.func.isRequired
-  },
+    short: PropTypes.bool,
+    onChange: PropTypes.func.isRequired
+  }
   render() {
     let { options, active } = this.props;
     return (<div className='rounded-toggle inline short'>
       {options.map(option =>
-        <RoundedToggleOption
+        (<RoundedToggleOption
           key={option.value}
           option={option}
           short={this.props.short}
           onClick={this.props.onChange}
-          className={`strong ${option.value === active.value ? 'active': ''}`} />)}
+          className={`strong ${option.value === active.value ? 'active': ''}`} />))}
     </div>);
   }
-});
+}
 
-var RoundedToggleOption = React.createClass({
-  mixins: [PureRenderMixin],
-  propTypes: {
+class RoundedToggleOption extends React.PureComponent {
+  static propTypes = {
     option: roundedToggleOptionType,
-    className: React.PropTypes.string.isRequired,
-    short: React.PropTypes.bool,
-    onClick: React.PropTypes.func.isRequired
-  },
-  onClick() {
+    className: PropTypes.string.isRequired,
+    short: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+  onClick = () => {
     this.props.onClick(this.props.option);
-  },
+  }
   render() {
     let { className, option } = this.props;
     return (<a
       onClick={this.onClick}
       className={className}>{this.props.short ? option.short : option.title}</a>);
   }
-});
-
-module.exports = RoundedToggle;
+}