From cdfcc7f6c393a30c6e2ed8fc1e4a2fd2b63e6306 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 23 Sep 2019 15:46:01 +0300 Subject: [PATCH] npx react-codemod class legacy-js/components/ --- legacy-js/components/email.js | 4 +-- legacy-js/components/fader.js | 33 +++++++++--------- legacy-js/components/feed.js | 16 ++++----- legacy-js/components/inviteForm.js | 39 +++++++++++---------- legacy-js/components/members.js | 16 ++++----- legacy-js/components/membershipForm.js | 18 +++++----- legacy-js/components/membershipInfoForm.js | 40 +++++++++++----------- 7 files changed, 85 insertions(+), 81 deletions(-) diff --git a/legacy-js/components/email.js b/legacy-js/components/email.js index 98be36f..0281eb6 100644 --- a/legacy-js/components/email.js +++ b/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 info@koodiklinikka.fi; } -}); +}; diff --git a/legacy-js/components/fader.js b/legacy-js/components/fader.js index 0938ec5..080acf4 100644 --- a/legacy-js/components/fader.js +++ b/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({
) } -}); +}; diff --git a/legacy-js/components/feed.js b/legacy-js/components/feed.js index d4c0070..d6aa4e7 100644 --- a/legacy-js/components/feed.js +++ b/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({
{messages}
) } -}); +}; diff --git a/legacy-js/components/inviteForm.js b/legacy-js/components/inviteForm.js index ed3a892..218b863 100644 --- a/legacy-js/components/inviteForm.js +++ b/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({ ); } -}); +}; diff --git a/legacy-js/components/members.js b/legacy-js/components/members.js index a907016..76abe36 100644 --- a/legacy-js/components/members.js +++ b/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({ ) } -}); +}; diff --git a/legacy-js/components/membershipForm.js b/legacy-js/components/membershipForm.js index 9ca936e..4962048 100644 --- a/legacy-js/components/membershipForm.js +++ b/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({ ); } -}); +}; diff --git a/legacy-js/components/membershipInfoForm.js b/legacy-js/components/membershipInfoForm.js index 727a30c..365ef80 100644 --- a/legacy-js/components/membershipInfoForm.js +++ b/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({ ); } -}); +};