npx react-codemod class legacy-js/components/

legacy-js/components/email.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 
-module.exports = React.createClass({
+module.exports = class extends React.Component {
   render() {
     return <a href="mailto:info@koodiklinikka.fi">info@koodiklinikka.fi</a>;
   }
-});
+};

legacy-js/components/fader.js

@@ -6,18 +6,16 @@ function clamp(min, max, value) {
   return Math.min(Math.max(value, min), max);
 }
 
-module.exports = React.createClass({
-  getDefaultProps() {
-    return {
-      threshold: 100
-    };
-  },
-  getInitialState() {
-    return {
-      opacity: 0
-    };
-  },
-  onScroll() {
+module.exports = class extends React.Component {
+  static defaultProps = {
+    threshold: 100
+  };
+
+  state = {
+    opacity: 0
+  };
+
+  onScroll = () => {
     var scrollableDistance = document.body.scrollHeight - window.innerHeight,
         scrollTop = window.pageYOffset || document.documentElement.scrollTop,
         distanceToBottom = scrollableDistance - scrollTop;
@@ -25,14 +23,17 @@ module.exports = React.createClass({
     this.setState({
       opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
     });
-  },
+  };
+
   componentDidMount() {
     window.addEventListener('scroll', this.onScroll);
     this.onScroll();
-  },
+  }
+
   componentWillUnmount() {
     window.removeEventListener('scroll', this.onScroll);
-  },
+  }
+
   render() {
     var style = {
       opacity: this.state.opacity
@@ -42,4 +43,4 @@ module.exports = React.createClass({
       <div className="fader" style={style}></div>
     )
   }
-});
+};

legacy-js/components/feed.js

@@ -14,12 +14,11 @@ function throwError(err) {
   });
 }
 
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      messages: []
-    };
-  },
+module.exports = class extends React.Component {
+  state = {
+    messages: []
+  };
+
   componentDidMount() {
     request.get(api('feeds'))
 
@@ -34,7 +33,8 @@ module.exports = React.createClass({
         messages: _(messages).sortBy('timestamp').reverse().value().slice(0, 40)
       });
     }).catch(throwError);
-  },
+  }
+
   render() {
     var messages = this.state.messages.map((message, i) => {
 
@@ -70,4 +70,4 @@ module.exports = React.createClass({
       <div className="feed">{messages}</div>
     )
   }
-});
+};

legacy-js/components/inviteForm.js

@@ -6,16 +6,15 @@ var classSet = require('classnames');
 
 var api = require('../api');
 var Loader = require('./loader');
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      email: '',
-      submitted: false,
-      sending: false,
-      error: null
-    };
-  },
-  onSubmit(e) {
+module.exports = class extends React.Component {
+  state = {
+    email: '',
+    submitted: false,
+    sending: false,
+    error: null
+  };
+
+  onSubmit = (e) => {
     e.preventDefault();
 
     this.setState({
@@ -29,14 +28,17 @@ module.exports = React.createClass({
     })
     .then(this.handleSuccess)
     .catch(this.handleError);
-  },
-  handleSuccess() {
+  };
+
+  handleSuccess = () => {
     this.setState({submitted: true, sending: false});
-  },
-  handleError(err) {
+  };
+
+  handleError = (err) => {
     this.setState({error: err, sending: false});
-  },
-  onChange(e) {
+  };
+
+  onChange = (e) => {
     if(e.target.value === this.state.email) {
       return;
     }
@@ -45,7 +47,8 @@ module.exports = React.createClass({
       error: null,
       submitted: false
     });
-  },
+  };
+
   render() {
     var formClasses = classSet({
       'form': true,
@@ -106,4 +109,4 @@ module.exports = React.createClass({
       </form>
     );
   }
-});
+};

legacy-js/components/members.js

@@ -6,19 +6,19 @@ var _ = require('lodash');
 
 var api = require('../api');
 
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      members: []
-    };
-  },
+module.exports = class extends React.Component {
+  state = {
+    members: []
+  };
+
   componentDidMount() {
     request.get(api('members')).then(function(res) {
       this.setState({
         members: _.shuffle(res.data)
       });
     }.bind(this));
-  },
+  }
+
   render() {
 
     var members = this.state.members.map(function(member, i) {
@@ -36,4 +36,4 @@ module.exports = React.createClass({
       </div>
     )
   }
-});
+};

legacy-js/components/membershipForm.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import MembershipInfoForm from './membershipInfoForm';
 
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      signupSuccess: false
-    };
-  },
-  handleSignupSuccess() {
+module.exports = class extends React.Component {
+  state = {
+    signupSuccess: false
+  };
+
+  handleSignupSuccess = () => {
     this.setState({ signupSuccess: true });
-  },
+  };
+
   render() {
     if (!this.state.signupSuccess) {
       return (
@@ -31,4 +31,4 @@ module.exports = React.createClass({
       </div>
     );
   }
-});
+};

legacy-js/components/membershipInfoForm.js

@@ -29,20 +29,19 @@ function getUserInfo(state) {
   return _.pick(state, fieldNames);
 }
 
-module.exports = React.createClass({
-  getInitialState() {
-    return {
-      address: "",
-      city: "",
-      email: "",
-      handle: "",
-      name: "",
-      postcode: "",
-      sending: false,
-      pristineFields: fieldNames
-    };
-  },
-  onSubmit() {
+module.exports = class extends React.Component {
+  state = {
+    address: "",
+    city: "",
+    email: "",
+    handle: "",
+    name: "",
+    postcode: "",
+    sending: false,
+    pristineFields: fieldNames
+  };
+
+  onSubmit = () => {
     this.setState({
       sending: true,
       error: null
@@ -59,8 +58,9 @@ module.exports = React.createClass({
       .catch(err => {
         this.setState({ error: err, sending: false });
       });
-  },
-  onChange(e) {
+  };
+
+  onChange = (e) => {
     var name = e.target.name;
     if (e.target.value === this.state[name]) {
       return;
@@ -73,9 +73,9 @@ module.exports = React.createClass({
       ),
       errors: []
     });
-  },
+  };
 
-  getDataErrors() {
+  getDataErrors = () => {
     var foundErrors = [];
 
     fieldNames.forEach(fieldName => {
@@ -89,7 +89,7 @@ module.exports = React.createClass({
     }
 
     return foundErrors;
-  },
+  };
 
   render() {
     const inputErrors = this.getDataErrors();
@@ -190,4 +190,4 @@ module.exports = React.createClass({
       </div>
     );
   }
-});
+};