Basics of conversion to ES6 classes

ui/js/component/auth.js

@@ -9,23 +9,28 @@ import {CreditAmount, Address} from "../component/common.js";
 import {getLocal, getSession, setSession, setLocal} from '../utils.js';
 
 
-const SubmitEmailStage = React.createClass({
+class SubmitEmailStage extends React.Component {
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       rewardType: null,
       email: '',
       submitting: false
     };
-  },
+  }
-  handleEmailChanged: function(event) {
+
+  handleEmailChanged(event) {
     this.setState({
       email: event.target.value,
     });
-  },
+  }
-  onEmailSaved: function(email) {
+
+  onEmailSaved(email) {
     this.props.setStage("confirm", { email: email })
-  },
+  }
-  handleSubmit: function(event) {
+
+  handleSubmit(event) {
     event.preventDefault();
 
     this.setState({
@@ -42,8 +47,9 @@ const SubmitEmailStage = React.createClass({
       }
       this.setState({ submitting: false });
     });
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <section>
         <form onSubmit={this.handleSubmit}>
@@ -57,23 +63,27 @@ const SubmitEmailStage = React.createClass({
       </section>
     );
   }
-});
+}
 
-const ConfirmEmailStage = React.createClass({
+class ConfirmEmailStage extends React.Component {
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       rewardType: null,
       code: '',
       submitting: false,
       errorMessage: null,
     };
-  },
+  }
-  handleCodeChanged: function(event) {
+
+  handleCodeChanged(event) {
     this.setState({
       code: event.target.value,
     });
-  },
+  }
-  handleSubmit: function(event) {
+
+  handleSubmit(event) {
     event.preventDefault();
     this.setState({
       submitting: true,
@@ -93,8 +103,9 @@ const ConfirmEmailStage = React.createClass({
         onSubmitError(new Error("Your email is still not verified.")) //shouldn't happen?
       }
     }, onSubmitError);
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <section>
         <form onSubmit={this.handleSubmit}>
@@ -111,25 +122,26 @@ const ConfirmEmailStage = React.createClass({
       </section>
     );
   }
-});
+}
 
-const WelcomeStage = React.createClass({
+class WelcomeStage extends React.Component {
-  propTypes: {
+  constructor(props) {
-    endAuth: React.PropTypes.func,
+    super(props);
-  },
+
-  getInitialState: function() {
+    this.state = {
-    return {
       hasReward: false,
       rewardAmount: null,
+    };
   }
-  },
+
-  onRewardClaim: function(reward) {
+  onRewardClaim(reward) {
     this.setState({
       hasReward: true,
       rewardAmount: reward.amount
     })
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       !this.state.hasReward ?
         <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY" {...this.props}>
@@ -156,11 +168,13 @@ const WelcomeStage = React.createClass({
       </Modal>
     );
   }
-});
+}
+WelcomeStage.propTypes = {
+  endAuth: React.PropTypes.func,
+};
 
-
+class ErrorStage extends React.Component {
-const ErrorStage = React.createClass({
+  render() {
-  render: function() {
     return (
       <section>
         <p>An error was encountered that we cannot continue from.</p>
@@ -170,29 +184,32 @@ const ErrorStage = React.createClass({
       </section>
     );
   }
-});
+}
 
-const PendingStage = React.createClass({
+class PendingStage extends React.Component {
-  render: function() {
+  render() {
     return (
       <section>
         <p>Preparing for first access <span className="busy-indicator"></span></p>
       </section>
     );
   }
-});
+}
 
 
-const CodeRequiredStage = React.createClass({
+class CodeRequiredStage extends React.Component {
-  _balanceSubscribeId: null,
+  constructor(props) {
-  getInitialState: function() {
+    super(props);
-    return {
+
+    this._balanceSubscribeId = nullp
+
+    this.state = {
       balance: 0,
       address: getLocal('wallet_address')
+    };
   }
-  },
 
-  componentWillMount: function() {
+  componentWillMount() {
     this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
       this.setState({
         balance: balance
@@ -205,13 +222,15 @@ const CodeRequiredStage = React.createClass({
         this.setState({ address: address });
       });
     }
-  },
+  }
-  componentWillUnmount: function() {
+
+  componentWillUnmount() {
     if (this._balanceSubscribeId) {
       lbry.balanceUnsubscribe(this._balanceSubscribeId)
     }
-  },
+  }
-  render: function() {
+
+  render() {
     const disabled = this.state.balance < 1;
     return (
       <div>
@@ -234,31 +253,36 @@ const CodeRequiredStage = React.createClass({
       </div>
     );
   }
-});
+}
 
 
-export const AuthOverlay = React.createClass({
+export class AuthOverlay extends React.Component {
-  _stages: {
+  constructor(props) {
+    super(props);
+
+    this._stages = {
       pending: PendingStage,
       error: ErrorStage,
       nocode: CodeRequiredStage,
       email: SubmitEmailStage,
       confirm: ConfirmEmailStage,
       welcome: WelcomeStage
-  },
+    }
-  getInitialState: function() {
+
-    return {
+    this.state = {
       stage: "pending",
       stageProps: {}
     };
-  },
+  }
-  setStage: function(stage, stageProps = {}) {
+
+  setStage(stage, stageProps = {}) {
     this.setState({
       stage: stage,
       stageProps: stageProps
     })
-  },
+  }
-  componentWillMount: function() {
+
+  componentWillMount() {
     lbryio.authenticate().then((user) => {
       if (!user.HasVerifiedEmail) {
         if (getLocal('auth_bypassed')) {
@@ -284,8 +308,9 @@ export const AuthOverlay = React.createClass({
         }
       }));
     })
-  },
+  }
-  render: function() {
+
+  render() {
     if (!this.state.stage) {
         return null;
     }
@@ -299,4 +324,4 @@ export const AuthOverlay = React.createClass({
           <StageContent setStage={this.setStage} {...this.state.stageProps}  />
     );
   }
-});
+}

ui/js/component/common.js

@@ -2,65 +2,69 @@ import React from 'react';
 import lbry from '../lbry.js';
 
 //component/icon.js
-export let Icon = React.createClass({
+export class Icon extends React.Component {
-  propTypes: {
+  static propTypes = {
     icon: React.PropTypes.string.isRequired,
     className: React.PropTypes.string,
     fixed: React.PropTypes.bool,
-  },
+  }
-  render: function() {
+
+  static defaultProps = {
+    lines: null
+  }
+
+  render() {
     const {fixed, className, ...other} = this.props;
     const spanClassName = ('icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') +
                            this.props.icon + ' ' + (this.props.className || ''));
     return <span className={spanClassName} {... other}></span>
   }
-});
+}
 
-export let TruncatedText = React.createClass({
+export class TruncatedText extends React.Component {
-  propTypes: {
+  static propTypes = {
-    lines: React.PropTypes.number
+    lines: React.PropTypes.number,
-  },
-  getDefaultProps: function() {
-    return {
-      lines: null,
   }
-  },
+
-  render: function() {
+  render() {
     return <span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}>{this.props.children}</span>;
   }
-});
+}
 
-export let BusyMessage = React.createClass({
+export class BusyMessage extends React.Component {
-  propTypes: {
+  static propTypes = {
-    message: React.PropTypes.string
+    message: React.PropTypes.string,
-  },
+  }
-  render: function() {
+
+  render() {
     return <span>{this.props.message} <span className="busy-indicator"></span></span>
   }
-});
+}
 
-export let CurrencySymbol = React.createClass({
+export class CurrencySymbol extends React.Component {
-  render: function() { return <span>LBC</span>; }
+  render() {
-});
+    return <span>LBC</span>;
+  }
+}
 
-export let CreditAmount = React.createClass({
+export class CreditAmount extends React.Component {
-  propTypes: {
+  static propTypes = {
     amount: React.PropTypes.number.isRequired,
     precision: React.PropTypes.number,
     isEstimate: React.PropTypes.bool,
     label: React.PropTypes.bool,
     showFree: React.PropTypes.bool,
     look: React.PropTypes.oneOf(['indicator', 'plain']),
-  },
+  }
-  getDefaultProps: function() {
+
-    return {
+  static defaultProps = {
     precision: 1,
     label: true,
     showFree: false,
     look: 'indicator',
   }
-  },
+
-  render: function() {
+  render() {
     const formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
     let amountText;
     if (this.props.showFree && parseFloat(formattedAmount) == 0) {
@@ -80,45 +84,56 @@ export let CreditAmount = React.createClass({
       </span>
     );
   }
-});
+}
 
-var addressStyle = {
+let addressStyle = {
   fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
 };
-export let Address = React.createClass({
+export class Address extends React.Component {
-  _inputElem: null,
+  static propTypes = {
-  propTypes: {
     address: React.PropTypes.string,
-  },
+  }
-  render: function() {
+
+  constructor(props) {
+    super(props);
+
+    this._inputElem = null;
+  }
+
+  render() {
     return (
       <input className="input-copyable" type="text" ref={(input) => { this._inputElem = input; }}
              onFocus={() => { this._inputElem.select(); }} style={addressStyle} readOnly="readonly" value={this.props.address}></input>
     );
   }
-});
+}
 
-export let Thumbnail = React.createClass({
+export class Thumbnail extends React.Component {
-  _defaultImageUri: lbry.imagePath('default-thumb.svg'),
+  static propTypes = {
-  _maxLoadTime: 10000,
-  _isMounted: false,
-
-  propTypes: {
     src: React.PropTypes.string,
-  },
+  }
-  handleError: function() {
+
+  handleError() {
     if (this.state.imageUrl != this._defaultImageUri) {
       this.setState({
         imageUri: this._defaultImageUri,
       });
     }
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  constructor(props) {
+    super(props);
+
+    this._defaultImageUri = lbry.imagePath('default-thumb.svg')
+    this._maxLoadTime = 10000
+    this._isMounted = false
+
+    this.state = {
       imageUri: this.props.src || this._defaultImageUri,
     };
-  },
+  }
-  componentDidMount: function() {
+
+  componentDidMount() {
     this._isMounted = true;
     setTimeout(() => {
       if (this._isMounted && !this.refs.img.complete) {
@@ -127,14 +142,16 @@ export let Thumbnail = React.createClass({
         });
       }
     }, this._maxLoadTime);
-  },
+  }
-  componentWillUnmount: function() {
+
+  componentWillUnmount() {
     this._isMounted = false;
-  },
+  }
-  render: function() {
+
+  render() {
     const className = this.props.className ? this.props.className : '',
           otherProps = Object.assign({}, this.props)
     delete otherProps.className;
     return <img ref="img" onError={this.handleError} {...otherProps} className={className} src={this.state.imageUri} />
-  },
+  }
-});
+}

ui/js/component/form.js

@@ -8,24 +8,28 @@ function formFieldId() {
   return "form-field-" + (++formFieldCounter);
 }
 
-export let FormField = React.createClass({
+export class FormField extends React.Component {
-  _fieldRequiredText: 'This field is required',
+  static propTypes = {
-  _type: null,
-  _element: null,
-
-  propTypes: {
     type: React.PropTypes.string.isRequired,
     prefix: React.PropTypes.string,
     postfix: React.PropTypes.string,
     hasError: React.PropTypes.bool
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  constructor(props) {
+    super(props);
+
+    this._fieldRequiredText = 'This field is required';
+    this._type = null;
+    this._element = null;
+
+    this.state = {
       isError: null,
       errorMessage: null,
+    };
   }
-  },
+
-  componentWillMount: function() {
+  componentWillMount() {
     if (['text', 'number', 'radio', 'checkbox', 'file'].includes(this.props.type)) {
       this._element = 'input';
       this._type = this.props.type;
@@ -36,17 +40,20 @@ export let FormField = React.createClass({
       // Non <input> field, e.g. <select>, <textarea>
       this._element = this.props.type;
     }
-  },
+  }
-  showError: function(text) {
+
+  showError(text) {
     this.setState({
       isError: true,
       errorMessage: text,
     });
-  },
+  }
-  focus: function() {
+
+  focus() {
     this.refs.field.focus();
-  },
+  }
-  getValue: function() {
+
+  getValue() {
     if (this.props.type == 'checkbox') {
       return this.refs.field.checked;
     } else if (this.props.type == 'file') {
@@ -55,11 +62,13 @@ export let FormField = React.createClass({
     } else {
       return this.refs.field.value;
     }
-  },
+  }
-  getSelectedElement: function() {
+
+  getSelectedElement() {
     return this.refs.field.options[this.refs.field.selectedIndex];
-  },
+  }
-  render: function() {
+
+  render() {
     // Pass all unhandled props to the field element
     const otherProps = Object.assign({}, this.props),
           isError = this.state.isError !== null ? this.state.isError : this.props.hasError,
@@ -91,45 +100,56 @@ export let FormField = React.createClass({
       { isError && this.state.errorMessage ?  <div className="form-field__error">{this.state.errorMessage}</div> : '' }
     </div>
   }
-})
+}
 
-export let FormRow = React.createClass({
+export class FormRow extends React.Component {
-  _fieldRequiredText: 'This field is required',
+  static propTypes = {
-  propTypes: {
+    label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
-    label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element])
     // helper: React.PropTypes.html,
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  constructor(props) {
+    super(props);
+
+    this._fieldRequiredText = 'This field is required';
+
+    this.state = {
       isError: false,
       errorMessage: null,
+    };
   }
-  },
+
-  showError: function(text) {
+  showError(text) {
     this.setState({
       isError: true,
       errorMessage: text,
     });
-  },
+  }
-  showRequiredError: function() {
+
+  showRequiredError() {
     this.showError(this._fieldRequiredText);
-  },
+  }
-  clearError: function(text) {
+
+  clearError(text) {
     this.setState({
       isError: false,
       errorMessage: ''
     });
-  },
+  }
-  getValue: function() {
+
+  getValue() {
     return this.refs.field.getValue();
-  },
+  }
-  getSelectedElement: function() {
+
+  getSelectedElement() {
     return this.refs.field.getSelectedElement();
-  },
+  }
-  focus: function() {
+
+  focus() {
     this.refs.field.focus();
-  },
+  }
-  render: function() {
+
+  render() {
     const fieldProps = Object.assign({}, this.props),
           elementId = formFieldId(),
           renderLabelInFormField = formFieldNestedLabelTypes.includes(this.props.type);
@@ -151,4 +171,4 @@ export let FormRow = React.createClass({
       { this.state.isError ?  <div className="form-field__error">{this.state.errorMessage}</div> : '' }
     </div>
   }
-})
+}

ui/js/component/load_screen.js

@@ -3,25 +3,28 @@ import lbry from '../lbry.js';
 import {BusyMessage, Icon} from './common.js';
 import Link from 'component/link'
 
-var LoadScreen = React.createClass({
+class LoadScreen extends React.Component {
-  propTypes: {
+  static propTypes = {
     message: React.PropTypes.string.isRequired,
     details: React.PropTypes.string,
     isWarning: React.PropTypes.bool,
-  },
-  getDefaultProps: function() {
-    return {
-      isWarning: false,
   }
-  },
+
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       message: null,
       details: null,
       isLagging: false,
+    };
   }
-  },
+
-  render: function() {
+  static defaultProps = {
+    isWarning: false,
+  }
+
+  render() {
     const imgSrc = lbry.imagePath('lbry-white-485x160.png');
     return (
       <div className="load-screen">
@@ -35,7 +38,7 @@ var LoadScreen = React.createClass({
       </div>
     );
   }
-});
+}
 
 
 export default LoadScreen;

ui/js/component/menu.js

@@ -2,19 +2,19 @@ import React from 'react';
 import {Icon} from './common.js';
 import Link from 'component/link';
 
-export let DropDownMenuItem = React.createClass({
+export class DropDownMenuItem extends React.Component {
-  propTypes: {
+  static propTypes = {
     href: React.PropTypes.string,
     label: React.PropTypes.string,
     icon: React.PropTypes.string,
     onClick: React.PropTypes.func,
-  },
+  }
-  getDefaultProps: function() {
+
-    return {
+  static defaultProps = {
     iconPosition: 'left',
   }
-  },
+
-  render: function() {
+  render() {
     var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
 
     return (
@@ -26,23 +26,27 @@ export let DropDownMenuItem = React.createClass({
       </a>
     );
   }
-});
+}
 
-export let DropDownMenu = React.createClass({
+export class DropDownMenu extends React.Component {
-  _isWindowClickBound: false,
+  constructor(props) {
-  _menuDiv: null,
+    super(props);
 
-  getInitialState: function() {
+    this._isWindowClickBound = false;
-    return {
+    this._menuDiv = null;
+
+    this.state = {
       menuOpen: false,
     };
-  },
+  }
-  componentWillUnmount: function() {
+
+  componentWillUnmount() {
     if (this._isWindowClickBound) {
       window.removeEventListener('click', this.handleWindowClick, false);
     }
-  },
+  }
-  handleMenuIconClick: function(e) {
+
+  handleMenuIconClick(e) {
     this.setState({
       menuOpen: !this.state.menuOpen,
     });
@@ -52,22 +56,25 @@ export let DropDownMenu = React.createClass({
       e.stopPropagation();
     }
     return false;
-  },
+  }
-  handleMenuClick: function(e) {
+
+  handleMenuClick(e) {
     // Event bubbles up to the menu after a link is clicked
     this.setState({
       menuOpen: false,
     });
-  },
+  }
-  handleWindowClick: function(e) {
+
+  handleWindowClick(e) {
     if (this.state.menuOpen &&
           (!this._menuDiv || !this._menuDiv.contains(e.target))) {
       this.setState({
         menuOpen: false
       });
     }
-  },
+  }
-  render: function() {
+
+  render() {
     if (!this.state.menuOpen && this._isWindowClickBound) {
       this._isWindowClickBound = false;
       window.removeEventListener('click', this.handleWindowClick, false);
@@ -83,4 +90,4 @@ export let DropDownMenu = React.createClass({
       </div>
     );
   }
-});
+}

ui/js/component/modal-page.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactModal from 'react-modal';
 
-export const ModalPage = React.createClass({
+export class ModalPage extends React.Component {
-  render: function() {
+  render() {
     return (
       <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
                   className={(this.props.className || '') + ' modal-page'}
@@ -13,6 +13,4 @@ export const ModalPage = React.createClass({
       </ReactModal>
     );
   }
-});
+}
-
-export default ModalPage;

ui/js/component/modal.js

@@ -3,8 +3,8 @@ import ReactModal from 'react-modal';
 import Link from 'component/link';
 
 
-export const Modal = React.createClass({
+export class Modal extends React.Component {
-  propTypes: {
+  static propTypes = {
     type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
     overlay: React.PropTypes.bool,
     onConfirmed: React.PropTypes.func,
@@ -13,18 +13,18 @@ export const Modal = React.createClass({
     abortButtonLabel: React.PropTypes.string,
     confirmButtonDisabled: React.PropTypes.bool,
     abortButtonDisabled: React.PropTypes.bool,
-  },
+  }
-  getDefaultProps: function() {
+
-    return {
+  static defaultProps = {
     type: 'alert',
     overlay: true,
     confirmButtonLabel: 'OK',
     abortButtonLabel: 'Cancel',
     confirmButtonDisabled: false,
     abortButtonDisabled: false,
-    };
+  }
-  },
+
-  render: function() {
+  render() {
     return (
       <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
                   className={(this.props.className || '') + ' modal'}
@@ -43,31 +43,35 @@ export const Modal = React.createClass({
       </ReactModal>
     );
   }
-});
+}
 
-export const ExpandableModal = React.createClass({
+export class ExpandableModal extends React.Component {
-  propTypes: {
+  static propTypes = {
     expandButtonLabel: React.PropTypes.string,
     extraContent: React.PropTypes.element,
-  },
+  }
-  getDefaultProps: function() {
+
-    return {
+  static defaultProps = {
     confirmButtonLabel: 'OK',
     expandButtonLabel: 'Show More...',
     hideButtonLabel: 'Show Less',
   }
-  },
+
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       expanded: false,
     }
-  },
+  }
-  toggleExpanded: function() {
+
+  toggleExpanded() {
     this.setState({
       expanded: !this.state.expanded,
     });
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <Modal type="custom" {... this.props}>
         {this.props.children}
@@ -82,6 +86,6 @@ export const ExpandableModal = React.createClass({
       </Modal>
     );
   }
-});
+}
 
 export default Modal;

ui/js/component/notice.js

@@ -1,21 +1,21 @@
 import React from 'react';
 
-export const Notice = React.createClass({
+export class Notice extends React.Component {
-  propTypes: {
+  static propTypes = {
     isError: React.PropTypes.bool,
-  },
+  }
-  getDefaultProps: function() {
+
-    return {
+  static defaultProps = {
     isError: false,
-    };
+  }
-  },
+
-  render: function() {
+  render() {
     return (
       <section className={'notice ' + (this.props.isError ? 'notice--error ' : '') + (this.props.className || '')}>
         {this.props.children}
       </section>
     );
-  },
+  }
-});
+}
 
 export default Notice;

ui/js/component/reward-link.js

@@ -5,14 +5,25 @@ import Modal from 'component/modal';
 import rewards from 'rewards';
 import Link from 'component/link'
 
-export let RewardLink = React.createClass({
+export class RewardLink extends React.Component {
-  propTypes: {
+  static propTypes = {
     type: React.PropTypes.string.isRequired,
     claimed: React.PropTypes.bool,
     onRewardClaim: React.PropTypes.func,
     onRewardFailure: React.PropTypes.func
-  },
+  }
-  refreshClaimable: function() {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      claimable: true,
+      pending: false,
+      errorMessage: null
+    };
+  }
+
+  refreshClaimable() {
     switch(this.props.type) {
       case 'new_user':
         this.setState({ claimable: true });
@@ -26,18 +37,13 @@ export let RewardLink = React.createClass({
         }.bind(this));
         return;
     }
-  },
-  componentWillMount: function() {
-    this.refreshClaimable();
-  },
-  getInitialState: function() {
-    return {
-      claimable: true,
-      pending: false,
-      errorMessage: null
   }
-  },
+
-  claimReward: function() {
+  componentWillMount() {
+    this.refreshClaimable();
+  }
+
+  claimReward() {
     this.setState({
       pending: true
     })
@@ -55,16 +61,18 @@ export let RewardLink = React.createClass({
         pending: false
       })
     })
-  },
+  }
-  clearError: function() {
+
+  clearError() {
     if (this.props.onRewardFailure) {
       this.props.onRewardFailure()
     }
     this.setState({
       errorMessage: null
     })
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <div className="reward-link">
         {this.props.claimed
@@ -79,4 +87,4 @@ export let RewardLink = React.createClass({
       </div>
     );
   }
-});
+}

ui/js/component/snack-bar.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import lbry from '../lbry.js';
 
-export const SnackBar = React.createClass({
+export class SnackBar extends React.Component {
+  constructor(props) {
+    super(props);
 
-  _displayTime: 5, // in seconds
+    this._displayTime = 5; // in seconds
+    this._hideTimeout = null;
 
-  _hideTimeout: null,
+    this.state = {
-
-  getInitialState: function() {
-    return {
       snacks: []
+    };
   }
-  },
+
-  handleSnackReceived: function(event) {
+  handleSnackReceived(event) {
     // if (this._hideTimeout) {
     //   clearTimeout(this._hideTimeout);
     // }
@@ -20,14 +21,17 @@ export const SnackBar = React.createClass({
     let snacks = this.state.snacks;
     snacks.push(event.detail);
     this.setState({ snacks: snacks});
-  },
+  }
-  componentWillMount: function() {
+
+  componentWillMount() {
     document.addEventListener('globalNotice', this.handleSnackReceived);
-  },
+  }
-  componentWillUnmount: function() {
+
+  componentWillUnmount() {
     document.removeEventListener('globalNotice', this.handleSnackReceived);
-  },
+  }
-  render: function() {
+
+  render() {
     if (!this.state.snacks.length) {
       this._hideTimeout = null; //should be unmounting anyway, but be safe?
       return null;
@@ -51,7 +55,7 @@ export const SnackBar = React.createClass({
           <a className="snack-bar__action" href={snack.linkTarget}>{snack.linkText}</a> : ''}
       </div>
     );
-  },
+  }
-});
+}
 
 export default SnackBar;

ui/js/component/splash.js

@@ -2,21 +2,26 @@ import React from 'react';
 import lbry from '../lbry.js';
 import LoadScreen from './load_screen.js';
 
-var SplashScreen = React.createClass({
+export class SplashScreen extends React.Component {
-  propTypes: {
+  static propTypes = {
     message: React.PropTypes.string,
     onLoadDone: React.PropTypes.func,
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  constructor(props) {
+    super(props);
+
+    this.state = {
       details: 'Starting daemon',
       isLagging: false,
+    };
   }
-  },
+
-  updateStatus: function() {
+  updateStatus() {
     lbry.status().then(this._updateStatusCallback);
-  },
+  }
-  _updateStatusCallback: function(status) {
+
+  _updateStatusCallback(status) {
     const startupStatus = status.startup_status
     if (startupStatus.code == 'started') {
       // Wait until we are able to resolve a name before declaring
@@ -40,8 +45,9 @@ var SplashScreen = React.createClass({
     setTimeout(() => {
       this.updateStatus();
     }, 500);
-  },
+  }
-  componentDidMount: function() {
+
+  componentDidMount() {
     lbry.connect().then((isConnected) => {
       if (isConnected) {
         this.updateStatus();
@@ -53,10 +59,11 @@ var SplashScreen = React.createClass({
         })
       }
     })
-  },
+  }
-  render: function() {
+
+  render() {
     return <LoadScreen message={this.props.message} details={this.state.details} isWarning={this.state.isLagging} />
   }
-});
+}
 
 export default SplashScreen;

ui/js/component/tooltip.js

@@ -1,26 +1,32 @@
 import React from 'react';
 
-export let ToolTip = React.createClass({
+export class ToolTip extends React.Component {
-  propTypes: {
+  static propTypes = {
     body: React.PropTypes.string.isRequired,
     label: React.PropTypes.string.isRequired
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  constructor(props) {
+    super(props);
+
+    this.state = {
       showTooltip: false,
     };
-  },
+  }
-  handleClick: function() {
+
+  handleClick() {
     this.setState({
       showTooltip: !this.state.showTooltip,
     });
-  },
+  }
-  handleTooltipMouseOut: function() {
+
+  handleTooltipMouseOut() {
     this.setState({
       showTooltip: false,
     });
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <span className={'tooltip ' + (this.props.className || '')}>
         <a className="tooltip__link" onClick={this.handleClick}>
@@ -33,6 +39,6 @@ export let ToolTip = React.createClass({
       </span>
     );
   }
-});
+}
 
 export default ToolTip

ui/js/page/developer.js

@@ -6,34 +6,40 @@ import Link from '../component/link';
 const fs = require('fs');
 const {ipcRenderer} = require('electron');
 
-const DeveloperPage = React.createClass({
+class DeveloperPage extends React.Component {
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       showDeveloperMenu: lbry.getClientSetting('showDeveloperMenu'),
       useCustomLighthouseServers: lbry.getClientSetting('useCustomLighthouseServers'),
       customLighthouseServers: lbry.getClientSetting('customLighthouseServers').join('\n'),
       upgradePath: '',
     };
-  },
+  }
-  handleShowDeveloperMenuChange: function(event) {
+
+  handleShowDeveloperMenuChange(event) {
     lbry.setClientSetting('showDeveloperMenu', event.target.checked);
     lbry.showMenuIfNeeded();
     this.setState({
       showDeveloperMenu: event.target.checked,
     });
-  },
+  }
-  handleUseCustomLighthouseServersChange: function(event) {
+
+  handleUseCustomLighthouseServersChange(event) {
     lbry.setClientSetting('useCustomLighthouseServers', event.target.checked);
     this.setState({
       useCustomLighthouseServers: event.target.checked,
     });
-  },
+  }
-  handleUpgradeFileChange: function(event) {
+
+  handleUpgradeFileChange(event) {
     this.setState({
       upgradePath: event.target.files[0].path,
     });
-  },
+  }
-  handleForceUpgradeClick: function() {
+
+  handleForceUpgradeClick() {
     let upgradeSent = false;
     if (!this.state.upgradePath) {
       alert('Please select a file to upgrade from');
@@ -51,8 +57,9 @@ const DeveloperPage = React.createClass({
         alert('Failed to start upgrade. Is "' + this.state.upgradePath + '" a valid path to the upgrade?');
       }
     }
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <main>
         <section className="card">
@@ -82,6 +89,6 @@ const DeveloperPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default DeveloperPage;

ui/js/page/help/view.jsx

@@ -5,14 +5,17 @@ import Link from 'component/link';
 import SubHeader from 'component/subHeader'
 import {version as uiVersion} from 'json!../../../package.json';
 
-var HelpPage = React.createClass({
+class HelpPage extends React.Component {
-  getInitialState: function() {
+  constructor(props) {
-    return {
+    super(props);
+
+    this.state = {
       versionInfo: null,
       lbryId: null,
     };
-  },
+  }
-  componentWillMount: function() {
+
+  componentWillMount() {
     lbry.getVersionInfo((info) => {
       this.setState({
         versionInfo: info,
@@ -23,11 +26,13 @@ var HelpPage = React.createClass({
         lbryId: info.lbry_id,
       });
     });
-  },
+  }
-  componentDidMount: function() {
+
+  componentDidMount() {
     document.title = "Help";
-  },
+  }
-  render: function() {
+
+  render() {
     let ver, osName, platform, newVerLink;
     if (this.state.versionInfo) {
       ver = this.state.versionInfo;
@@ -119,6 +124,6 @@ var HelpPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default HelpPage;

ui/js/page/publish/view.jsx

@@ -5,10 +5,41 @@ import Link from 'component/link';
 import rewards from 'rewards';
 import Modal from 'component/modal';
 
-var PublishPage = React.createClass({
+class PublishPage extends React.Component {
-  _requiredFields: ['meta_title', 'name', 'bid', 'tos_agree'],
+  constructor(props) {
+    super(props);
 
-  _updateChannelList: function(channel) {
+    this._requiredFields = ['meta_title', 'name', 'bid', 'tos_agree'];
+
+    this.state = {
+      channels: null,
+      rawName: '',
+      name: '',
+      bid: 10,
+      hasFile: false,
+      feeAmount: '',
+      feeCurrency: 'USD',
+      channel: 'anonymous',
+      newChannelName: '@',
+      newChannelBid: 10,
+      nameResolved: null,
+      myClaimExists: null,
+      topClaimValue: 0.0,
+      myClaimValue: 0.0,
+      myClaimMetadata: null,
+      copyrightNotice: '',
+      otherLicenseDescription: '',
+      otherLicenseUrl: '',
+      uploadProgress: 0.0,
+      uploaded: false,
+      errorMessage: null,
+      submitting: false,
+      creatingChannel: false,
+      modal: null,
+    };
+  }
+
+  _updateChannelList(channel) {
     // Calls API to update displayed list of channels. If a channel name is provided, will select
     // that channel at the same time (used immediately after creating a channel)
     lbry.channel_list_mine().then((channels) => {
@@ -18,8 +49,9 @@ var PublishPage = React.createClass({
         ... channel ? {channel} : {}
       });
     });
-  },
+  }
-  handleSubmit: function(event) {
+
+  handleSubmit(event) {
     if (typeof event !== 'undefined') {
       event.preventDefault();
     }
@@ -112,51 +144,27 @@ var PublishPage = React.createClass({
     } else {
       doPublish();
     }
-  },
+  }
-  getInitialState: function() {
+
-    return {
+  handlePublishStarted() {
-      channels: null,
-      rawName: '',
-      name: '',
-      bid: 10,
-      hasFile: false,
-      feeAmount: '',
-      feeCurrency: 'USD',
-      channel: 'anonymous',
-      newChannelName: '@',
-      newChannelBid: 10,
-      nameResolved: null,
-      myClaimExists: null,
-      topClaimValue: 0.0,
-      myClaimValue: 0.0,
-      myClaimMetadata: null,
-      copyrightNotice: '',
-      otherLicenseDescription: '',
-      otherLicenseUrl: '',
-      uploadProgress: 0.0,
-      uploaded: false,
-      errorMessage: null,
-      submitting: false,
-      creatingChannel: false,
-      modal: null,
-    };
-  },
-  handlePublishStarted: function() {
     this.setState({
       modal: 'publishStarted',
     });
-  },
+  }
-  handlePublishStartedConfirmed: function() {
+
+  handlePublishStartedConfirmed() {
     this.props.navigate('/published')
-  },
+  }
-  handlePublishError: function(error) {
+
+  handlePublishError(error) {
     this.setState({
       submitting: false,
       modal: 'error',
       errorMessage: error.message,
     });
-  },
+  }
-  handleNameChange: function(event) {
+
+  handleNameChange(event) {
     var rawName = event.target.value;
 
     if (!rawName) {
@@ -228,28 +236,33 @@ var PublishPage = React.createClass({
         });
       });
     });
-  },
+  }
-  handleBidChange: function(event) {
+
+  handleBidChange(event) {
     this.setState({
       bid: event.target.value,
     });
-  },
+  }
-  handleFeeAmountChange: function(event) {
+
+  handleFeeAmountChange(event) {
     this.setState({
       feeAmount: event.target.value,
     });
-  },
+  }
-  handleFeeCurrencyChange: function(event) {
+
+  handleFeeCurrencyChange(event) {
     this.setState({
       feeCurrency: event.target.value,
     });
-  },
+  }
-  handleFeePrefChange: function(feeEnabled) {
+
+  handleFeePrefChange(feeEnabled) {
     this.setState({
       isFee: feeEnabled
     });
-  },
+  }
-  handleLicenseChange: function(event) {
+
+  handleLicenseChange(event) {
     var licenseType = event.target.options[event.target.selectedIndex].getAttribute('data-license-type');
     var newState = {
       copyrightChosen: licenseType == 'copyright',
@@ -261,30 +274,35 @@ var PublishPage = React.createClass({
     }
 
     this.setState(newState);
-  },
+  }
-  handleCopyrightNoticeChange: function(event) {
+
+  handleCopyrightNoticeChange(event) {
     this.setState({
       copyrightNotice: event.target.value,
     });
-  },
+  }
-  handleOtherLicenseDescriptionChange: function(event) {
+
+  handleOtherLicenseDescriptionChange(event) {
     this.setState({
       otherLicenseDescription: event.target.value,
     });
-  },
+  }
-  handleOtherLicenseUrlChange: function(event) {
+
+  handleOtherLicenseUrlChange(event) {
     this.setState({
       otherLicenseUrl: event.target.value,
     });
-  },
+  }
-  handleChannelChange: function (event) {
+
+  handleChannelChange(event) {
     const channel = event.target.value;
 
     this.setState({
       channel: channel,
     });
-  },
+  }
-  handleNewChannelNameChange: function (event) {
+
+  handleNewChannelNameChange(event) {
     const newChannelName = (event.target.value.startsWith('@') ? event.target.value : '@' + event.target.value);
 
     if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) {
@@ -297,18 +315,21 @@ var PublishPage = React.createClass({
     this.setState({
       newChannelName: newChannelName,
     });
-  },
+  }
-  handleNewChannelBidChange: function (event) {
+
+  handleNewChannelBidChange(event) {
     this.setState({
       newChannelBid: event.target.value,
     });
-  },
+  }
-  handleTOSChange: function(event) {
+
+  handleTOSChange(event) {
     this.setState({
       TOSAgreed: event.target.checked,
     });
-  },
+  }
-  handleCreateChannelClick: function (event) {
+
+  handleCreateChannelClick(event) {
     if (this.state.newChannelName.length < 5) {
       this.refs.newChannelName.showError('LBRY channel names must be at least 4 characters in length.');
       return;
@@ -334,8 +355,9 @@ var PublishPage = React.createClass({
         creatingChannel: false,
       });
     });
-  },
+  }
-  getLicenseUrl: function() {
+
+  getLicenseUrl() {
     if (!this.refs.meta_license) {
       return '';
     } else if (this.state.otherLicenseChosen) {
@@ -343,20 +365,21 @@ var PublishPage = React.createClass({
     } else {
       return this.refs.meta_license.getSelectedElement().getAttribute('data-url') || '' ;
     }
-  },
+  }
-  componentWillMount: function() {
+
+  componentWillMount() {
     this._updateChannelList();
-  },
+  }
-  componentDidUpdate: function() {
+
-  },
+  onFileChange() {
-  onFileChange: function() {
     if (this.refs.file.getValue()) {
       this.setState({ hasFile: true })
     } else {
       this.setState({ hasFile: false })
     }
-  },
+  }
-  getNameBidHelpText: function() {
+
+  getNameBidHelpText() {
     if (!this.state.name) {
       return "Select a URL for this publish.";
     } else if (this.state.nameResolved === false) {
@@ -369,13 +392,15 @@ var PublishPage = React.createClass({
     } else {
       return '';
     }
-  },
+  }
-  closeModal: function() {
+
+  closeModal() {
     this.setState({
       modal: null,
     });
-  },
+  }
-  render: function() {
+
+  render() {
     if (this.state.channels === null) {
       return null;
     }
@@ -564,6 +589,6 @@ var PublishPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default PublishPage;

ui/js/page/report.js

@@ -3,8 +3,17 @@ import Link from 'component/link';
 import Modal from '../component/modal.js';
 import lbry from '../lbry.js';
 
-var ReportPage = React.createClass({
+class ReportPage extends React.Component {
-  submitMessage: function() {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      submitting: false,
+      modal: null,
+    };
+  }
+
+  submitMessage() {
     if (this._messageArea.value) {
       this.setState({
         submitting: true
@@ -17,19 +26,15 @@ var ReportPage = React.createClass({
       });
       this._messageArea.value = '';
     }
-  },
+  }
-  closeModal: function() {
+
+  closeModal() {
     this.setState({
       modal: null,
     })
-  },
-  getInitialState: function() {
-    return {
-      submitting: false,
-      modal: null,
   }
-  },
+
-  render: function() {
+  render() {
     return (
       <main className="main--single-column">
         <section className="card">
@@ -53,6 +58,6 @@ var ReportPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default ReportPage;

ui/js/page/rewards.js

@@ -4,16 +4,17 @@ import {CreditAmount, Icon} from 'component/common.js';
 import SubHeader from 'component/subHeader'
 import {RewardLink} from 'component/reward-link';
 
-const RewardTile = React.createClass({
+export class RewardTile extends React.Component {
-  propTypes: {
+  static propTypes = {
     type: React.PropTypes.string.isRequired,
     title: React.PropTypes.string.isRequired,
     description: React.PropTypes.string.isRequired,
     claimed: React.PropTypes.bool.isRequired,
     value: React.PropTypes.number.isRequired,
     onRewardClaim: React.PropTypes.func
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <section className="card">
         <div className="card__inner">
@@ -31,19 +32,23 @@ const RewardTile = React.createClass({
       </section>
     );
   }
-});
+}
 
-export let RewardsPage = React.createClass({
+export class RewardsPage extends React.Component {
-  componentWillMount: function() {
+  constructor(props) {
-    this.loadRewards()
+    super(props);
-  },
+
-  getInitialState: function() {
+    this.state = {
-    return {
       userRewards: null,
-      failed: null
+      failed: null,
     };
-  },
+  }
-  loadRewards: function() {
+
+  componentWillMount() {
+    this.loadRewards()
+  }
+
+  loadRewards() {
     lbryio.call('reward', 'list', {}).then((userRewards) => {
       this.setState({
         userRewards: userRewards,
@@ -51,8 +56,9 @@ export let RewardsPage = React.createClass({
     }, () => {
       this.setState({failed: true })
     });
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <main className="main--single-column">
         <SubHeader />
@@ -66,6 +72,6 @@ export let RewardsPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default RewardsPage;

ui/js/page/settings/view.jsx

@@ -3,46 +3,10 @@ import {FormField, FormRow} from 'component/form.js';
 import SubHeader from 'component/subHeader'
 import lbry from 'lbry.js';
 
-var SettingsPage = React.createClass({
+class SettingsPage extends React.Component {
-  setDaemonSetting: function(name, value) {
+  constructor(props) {
-    this.props.setDaemonSetting(name, value)
+    super(props);
-  },
+
-  setClientSetting: function(name, value) {
-    lbry.setClientSetting(name, value)
-    this._onSettingSaveSuccess()
-    },
-  onRunOnStartChange: function (event) {
-    this.setDaemonSetting('run_on_startup', event.target.checked);
-  },
-  onShareDataChange: function (event) {
-    this.setDaemonSetting('share_usage_data', event.target.checked);
-  },
-  onDownloadDirChange: function(event) {
-    this.setDaemonSetting('download_directory', event.target.value);
-  },
-  onMaxUploadPrefChange: function(isLimited) {
-    if (!isLimited) {
-      this.setDaemonSetting('max_upload', 0.0);
-    }
-    this.setState({
-      isMaxUpload: isLimited
-    });
-  },
-  onMaxUploadFieldChange: function(event) {
-    this.setDaemonSetting('max_upload', Number(event.target.value));
-  },
-  onMaxDownloadPrefChange: function(isLimited) {
-    if (!isLimited) {
-      this.setDaemonSetting('max_download', 0.0);
-    }
-    this.setState({
-      isMaxDownload: isLimited
-    });
-  },
-  onMaxDownloadFieldChange: function(event) {
-    this.setDaemonSetting('max_download', Number(event.target.value));
-  },
-  getInitialState: function() {
     const daemonSettings = this.props.daemonSettings
 
     return {
@@ -51,14 +15,64 @@ var SettingsPage = React.createClass({
       showNsfw: lbry.getClientSetting('showNsfw'),
       showUnavailable: lbry.getClientSetting('showUnavailable'),
     }
-  },
+  }
-  onShowNsfwChange: function(event) {
-    lbry.setClientSetting('showNsfw', event.target.checked);
-  },
-  onShowUnavailableChange: function(event) {
 
-  },
+  setDaemonSetting(name, value) {
-  render: function() {
+    this.props.setDaemonSetting(name, value)
+  }
+
+  setClientSetting(name, value) {
+    lbry.setClientSetting(name, value)
+    this._onSettingSaveSuccess()
+  }
+
+  onRunOnStartChange(event) {
+    this.setDaemonSetting('run_on_startup', event.target.checked);
+  }
+
+  onShareDataChange(event) {
+    this.setDaemonSetting('share_usage_data', event.target.checked);
+  }
+
+  onDownloadDirChange(event) {
+    this.setDaemonSetting('download_directory', event.target.value);
+  }
+
+  onMaxUploadPrefChange(isLimited) {
+    if (!isLimited) {
+      this.setDaemonSetting('max_upload', 0.0);
+    }
+    this.setState({
+      isMaxUpload: isLimited
+    });
+  }
+
+  onMaxUploadFieldChange(event) {
+    this.setDaemonSetting('max_upload', Number(event.target.value));
+  }
+
+  onMaxDownloadPrefChange(isLimited) {
+    if (!isLimited) {
+      this.setDaemonSetting('max_download', 0.0);
+    }
+    this.setState({
+      isMaxDownload: isLimited
+    });
+  }
+
+  onMaxDownloadFieldChange(event) {
+    this.setDaemonSetting('max_download', Number(event.target.value));
+  }
+
+  onShowNsfwChange(event) {
+    lbry.setClientSetting('showNsfw', event.target.checked);
+  }
+
+  onShowUnavailableChange(event) {
+
+  }
+
+  render() {
     const {
       daemonSettings
     } = this.props
@@ -185,6 +199,6 @@ var SettingsPage = React.createClass({
        </main>
     );
   }
-});
+}
 
 export default SettingsPage;

ui/js/page/start.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import lbry from '../lbry.js';
 
-var StartPage = React.createClass({
+class StartPage extends React.Component {
-  componentWillMount: function() {
+  componentWillMount() {
     lbry.stop();
-  },
+  }
-  render: function() {
+
+  render() {
     return (
       <main className="main--single-column">
         <h3>LBRY is Closed</h3>
@@ -13,6 +14,6 @@ var StartPage = React.createClass({
       </main>
     );
   }
-});
+}
 
 export default StartPage;