Convert more callbacks to arrow functions

ui/js/component/auth.js

@@ -52,12 +52,12 @@ class SubmitEmailStage extends React.Component {
   render() {
     return (
       <section>
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={(event) => { this.handleSubmit(event) }}>
           <FormRow ref={(ref) => { this._emailRow = ref }} type="text" label="Email" placeholder="scrwvwls@lbry.io"
                      name="email" value={this.state.email}
-                     onChange={this.handleEmailChanged} />
+                     onChange={(event) => { this.handleEmailChanged(event) }} />
           <div className="form-row-submit">
-            <Link button="primary" label="Next" disabled={this.state.submitting} onClick={this.handleSubmit} />
+            <Link button="primary" label="Next" disabled={this.state.submitting} onClick={(event) => { this.handleSubmit(event) }} />
           </div>
         </form>
       </section>
@@ -108,12 +108,12 @@ class ConfirmEmailStage extends React.Component {
   render() {
     return (
       <section>
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={(event) => { this.handleSubmit(event) }}>
           <FormRow label="Verification Code" ref={(ref) => { this._codeRow = ref }} type="text"
-                     name="code" placeholder="a94bXXXXXXXXXXXXXX" value={this.state.code} onChange={this.handleCodeChanged}
+                     name="code" placeholder="a94bXXXXXXXXXXXXXX" value={this.state.code} onChange={(event) => { this.handleCodeChanged(event) }}
                      helper="A verification code is required to access this version."/>
           <div className="form-row-submit form-row-submit--with-footer">
-            <Link button="primary" label="Verify" disabled={this.state.submitting} onClick={this.handleSubmit} />
+            <Link button="primary" label="Verify" disabled={this.state.submitting} onClick={(event) => { this.handleSubmit(event)}} />
           </div>
           <div className="form-field__helper">
             No code? <Link onClick={() => { this.props.setStage("nocode")}} label="Click here" />.
@@ -152,7 +152,7 @@ class WelcomeStage extends React.Component {
             <p>Below, LBRY is controlled by users -- you -- via blockchain and decentralization.</p>
             <p>Thank you for making content freedom possible! Here's a nickel, kid.</p>
             <div style={{textAlign: "center", marginBottom: "12px"}}>
-              <RewardLink type="new_user" button="primary" onRewardClaim={this.onRewardClaim} onRewardFailure={() => this.props.setStage(null)} onConfirmed={() => { this.props.setStage(null) }} />
+              <RewardLink type="new_user" button="primary" onRewardClaim={(event) => { this.onRewardClaim(event) }} onRewardFailure={() => this.props.setStage(null)} onConfirmed={() => { this.props.setStage(null) }} />
             </div>
           </section>
          </Modal> :
@@ -319,9 +319,9 @@ export class AuthOverlay extends React.Component {
       this.state.stage != "welcome" ?
           <ModalPage className="modal-page--full" isOpen={true} contentLabel="Authentication" {...this.props}>
             <h1>LBRY Early Access</h1>
-            <StageContent {...this.state.stageProps}  setStage={this.setStage} />
+            <StageContent {...this.state.stageProps}  setStage={(stage, stageProps) => { this.setStage(stage, stageProps) }} />
           </ModalPage> :
-          <StageContent setStage={this.setStage} {...this.state.stageProps}  />
+          <StageContent setStage={(stage, stageProps) => { this.setStage(stage, stageProps) }} {...this.state.stageProps}  />
     );
   }
 }

ui/js/component/common.js

@@ -152,6 +152,6 @@ export class Thumbnail extends React.Component {
     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} />
+    return <img ref="img" onError={() => { this.handleError() }} {...otherProps} className={className} src={this.state.imageUri} />
   }
 }

ui/js/component/fileActions/view.jsx

@@ -121,7 +121,7 @@ class FileActions extends React.Component {
             <DropDownMenuItem key={1} onClick={() => openModal('confirmRemove')} label="Remove..." />
           </DropDownMenu> : '' }
         <Modal type="confirm" isOpen={modal == 'affirmPurchase'}
-               contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={closeModal}>
+               contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={this.closeModal.bind(this)}>
           This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
         </Modal>
         <Modal isOpen={modal == 'notEnoughCredits'} contentLabel="Not enough credits"

ui/js/component/link/view.js

@@ -92,7 +92,7 @@ export default Link
 
 //     return (
 //       <a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
-//          onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
+//          onClick={(event) => { this.handleClick() }} {... 'style' in this.props ? {style: this.props.style} : {}}>
 //         {content}
 //       </a>
 //     );

ui/js/component/menu.js

@@ -81,9 +81,9 @@ export class DropDownMenu extends React.Component {
     }
     return (
       <div className="menu-container">
-        <Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={this.handleMenuIconClick} />
+        <Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={(event) => { this.handleMenuIconClick(event) }} />
         {this.state.menuOpen
-          ? <div ref={(div) => this._menuDiv = div} className="menu" onClick={this.handleMenuClick}>
+          ? <div ref={(div) => this._menuDiv = div} className="menu" onClick={(event) => { this.handleMenuClick(event) }}>
               {this.props.children}
             </div>
           : null}

ui/js/component/modal.js

@@ -81,7 +81,7 @@ export class ExpandableModal extends React.Component {
         <div className="modal__buttons">
           <Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" onClick={this.props.onConfirmed} />
           <Link button="alt" label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
-                className="modal__button" onClick={this.toggleExpanded} />
+                className="modal__button" onClick={() => { this.toggleExpanded() }} />
         </div>
       </Modal>
     );

ui/js/component/reward-link.js

@@ -78,9 +78,9 @@ export class RewardLink extends React.Component {
         {this.props.claimed
           ? <span><Icon icon="icon-check" /> Reward claimed.</span>
           : <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable }
-                  label={ this.state.pending ? "Claiming..." : "Claim Reward"} onClick={this.claimReward} />}
+                  label={ this.state.pending ? "Claiming..." : "Claim Reward"} onClick={() => { this.claimReward() }} />}
         {this.state.errorMessage ?
-         <Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={this.clearError}>
+         <Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={() => { this.clearError() }}>
            {this.state.errorMessage}
          </Modal>
           : ''}

ui/js/component/splash.js

@@ -18,7 +18,7 @@ export class SplashScreen extends React.Component {
   }
 
   updateStatus() {
-    lbry.status().then(this._updateStatusCallback);
+    lbry.status().then((status) => { this._updateStatusCallback(status) });
   }
 
   _updateStatusCallback(status) {

ui/js/component/tooltip.js

@@ -29,11 +29,11 @@ export class ToolTip extends React.Component {
   render() {
     return (
       <span className={'tooltip ' + (this.props.className || '')}>
-        <a className="tooltip__link" onClick={this.handleClick}>
+        <a className="tooltip__link" onClick={() => { this.handleClick() }}>
           {this.props.label}
         </a>
         <div className={'tooltip__body ' + (this.state.showTooltip ? '' : ' hidden')}
-             onMouseOut={this.handleTooltipMouseOut}>
+             onMouseOut={() => { this.handleTooltipMouseOut() }}>
           {this.props.body}
         </div>
       </span>

ui/js/component/video/view.jsx

@@ -51,9 +51,9 @@ class VideoPlayButton extends React.Component {
             label={label ? label : ""}
             className="video__play-button"
             icon="icon-play"
-            onClick={this.onWatchClick} />
+            onClick={() => { this.onWatchClick() }} />
       {modal}
-      <Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={closeModal}>
+      <Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={() => { this.closeModal() }}>
         You don't have enough LBRY credits to pay for this stream.
       </Modal>
       <Modal
@@ -65,7 +65,7 @@ class VideoPlayButton extends React.Component {
         This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
       </Modal>
       <Modal
-        isOpen={modal == 'timedOut'} onConfirmed={closeModal} contentLabel="Timed Out">
+        isOpen={modal == 'timedOut'} onConfirmed={() => { this.closeModal() }} contentLabel="Timed Out">
         Sorry, your download timed out :(
       </Modal>
     </div>);

ui/js/page/developer.js

@@ -65,25 +65,25 @@ class DeveloperPage extends React.Component {
         <section className="card">
           <h3>Developer Settings</h3>
           <div className="form-row">
-            <label><FormField type="checkbox" onChange={this.handleShowDeveloperMenuChange} checked={this.state.showDeveloperMenu} /> Show developer menu</label>
+            <label><FormField type="checkbox" onChange={(event) => { this.handleShowDeveloperMenuChange() }} checked={this.state.showDeveloperMenu} /> Show developer menu</label>
           </div>
           <div className="form-row">
-            <label><FormField type="checkbox" onChange={this.handleUseCustomLighthouseServersChange} checked={this.state.useCustomLighthouseServers} /> Use custom search servers</label>
+            <label><FormField type="checkbox" onChange={(event) => { this.handleUseCustomLighthouseServersChange() }} checked={this.state.useCustomLighthouseServers} /> Use custom search servers</label>
           </div>
           {this.state.useCustomLighthouseServers
             ? <div className="form-row">
                 <label>
                   Custom search servers (one per line)
-                  <div><FormField type="textarea" className="developer-page__custom-lighthouse-servers" value={this.state.customLighthouseServers} onChange={this.handleCustomLighthouseServersChange} checked={this.state.debugMode} /></div>
+                  <div><FormField type="textarea" className="developer-page__custom-lighthouse-servers" value={this.state.customLighthouseServers} onChange={(event) => { this.handleCustomLighthouseServersChange() }} checked={this.state.debugMode} /></div>
                 </label>
               </div>
             : null}
         </section>
         <section className="card">
           <div className="form-row">
-            <FormField name="file" ref="file" type="file" onChange={this.handleUpgradeFileChange}/>
+            <FormField name="file" ref="file" type="file" onChange={(event) => { this.handleUpgradeFileChange() }}/>
             &nbsp;
-            <Link label="Force Upgrade" button="alt" onClick={this.handleForceUpgradeClick} />
+            <Link label="Force Upgrade" button="alt" onClick={(event) => { this.handleForceUpgradeClick() }} />
           </div>
         </section>
       </main>

ui/js/page/publish/view.jsx

@@ -409,7 +409,7 @@ class PublishPage extends React.Component {
 
     return (
       <main className="main--single-column">
-        <form onSubmit={this.handleSubmit}>
+        <form onSubmit={(event) => { this.handleSubmit(event) }}>
           <section className="card">
             <div className="card__title-primary">
               <h4>Content</h4>
@@ -418,7 +418,7 @@ class PublishPage extends React.Component {
               </div>
             </div>
             <div className="card__content">
-              <FormRow name="file" label="File" ref="file" type="file" onChange={this.onFileChange}
+              <FormRow name="file" label="File" ref="file" type="file" onChange={(event) => { this.onFileChange(event) }}
                        helper={this.state.myClaimExists ? "If you don't choose a file, the file from your existing claim will be used." : null}/>
             </div>
             { !this.state.hasFile ? '' :
@@ -468,7 +468,7 @@ class PublishPage extends React.Component {
               <FormField type="radio" name="isFree" label={!this.state.isFee ? 'Choose price...' : 'Price ' }
                          onChange={ () => { this.handleFeePrefChange(true) } } defaultChecked={this.state.isFee} />
              <span className={!this.state.isFee ? 'hidden' : ''}>
-               <FormField type="number" className="form-field__input--inline" step="0.01" placeholder="1.00" onChange={this.handleFeeAmountChange} /> <FormField type="select" onChange={this.handleFeeCurrencyChange}>
+               <FormField type="number" className="form-field__input--inline" step="0.01" placeholder="1.00" onChange={(event) => this.handleFeeAmountChange(event)} /> <FormField type="select" onChange={(event) => { this.handleFeeCurrencyChange(event) }}>
                <option value="USD">US Dollars</option>
                <option value="LBC">LBRY credits</option>
              </FormField>
@@ -477,7 +477,7 @@ class PublishPage extends React.Component {
                   <div className="form-field__helper">
                     If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
                   </div> : '' }
-              <FormRow label="License" type="select" ref="meta_license" name="license" onChange={this.handleLicenseChange}>
+              <FormRow label="License" type="select" ref="meta_license" name="license" onChange={(event) => { this.handleLicenseChange(event) }}>
                 <option></option>
                 <option>Public Domain</option>
                 <option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">Creative Commons Attribution 4.0 International</option>
@@ -492,13 +492,13 @@ class PublishPage extends React.Component {
               <FormField type="hidden" ref="meta_license_url" name="license_url" value={this.getLicenseUrl()} />
               {this.state.copyrightChosen
                 ?  <FormRow label="Copyright notice" type="text" name="copyright-notice"
-                            value={this.state.copyrightNotice} onChange={this.handleCopyrightNoticeChange} />
+                            value={this.state.copyrightNotice} onChange={(event) => { this.handleCopyrightNoticeChange(event) }} />
                 : null}
               {this.state.otherLicenseChosen ?
-               <FormRow label="License description" type="text" name="other-license-description" onChange={this.handleOtherLicenseDescriptionChange} />
+               <FormRow label="License description" type="text" name="other-license-description" onChange={(event) => { this.handleOtherLicenseDescriptionChange() }} />
                 : null}
               {this.state.otherLicenseChosen ?
-               <FormRow label="License URL" type="text" name="other-license-url" onChange={this.handleOtherLicenseUrlChange} />
+               <FormRow label="License URL" type="text" name="other-license-url" onChange={(event) => { this.handleOtherLicenseUrlChange(event) }} />
                 : null}
             </div>
           </section>
@@ -511,7 +511,7 @@ class PublishPage extends React.Component {
               </div>
             </div>
             <div className="card__content">
-              <FormRow type="select" tabIndex="1" onChange={this.handleChannelChange} value={this.state.channel}>
+              <FormRow type="select" tabIndex="1" onChange={(event) => { this.handleChannelChange(event) }} value={this.state.channel}>
                 <option key="anonymous" value="anonymous">Anonymous</option>
                 {this.state.channels.map(({name}) => <option key={name} value={name}>{name}</option>)}
                 <option key="new" value="new">New identity...</option>
@@ -519,17 +519,17 @@ class PublishPage extends React.Component {
             </div>
             {this.state.channel == 'new' ?
                <div className="card__content">
-                 <FormRow label="Name" type="text" onChange={this.handleNewChannelNameChange} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
+                 <FormRow label="Name" type="text" onChange={(event) => { this.handleNewChannelNameChange(event) }} ref={newChannelName => { this.refs.newChannelName = newChannelName }}
                           value={this.state.newChannelName} />
                  <FormRow label="Deposit"
                           postfix="LBC"
                           step="0.01"
                           type="number"
                           helper={lbcInputHelp}
-                          onChange={this.handleNewChannelBidChange}
+                          onChange={(event) => { this.handleNewChannelBidChange(event) }}
                           value={this.state.newChannelBid} />
                  <div className="form-row-submit">
-                    <Link button="primary" label={!this.state.creatingChannel ? 'Create identity' : 'Creating identity...'} onClick={this.handleCreateChannelClick} disabled={this.state.creatingChannel} />
+                    <Link button="primary" label={!this.state.creatingChannel ? 'Create identity' : 'Creating identity...'} onClick={(event) => { this.handleCreateChannelClick(event) }} disabled={this.state.creatingChannel} />
                  </div>
                 </div>
               : null}
@@ -542,7 +542,7 @@ class PublishPage extends React.Component {
               <div className="card__subtitle">Where should this content permanently reside? <Link label="Read more" href="https://lbry.io/faq/naming" />.</div>
             </div>
             <div className="card__content">
-              <FormRow prefix="lbry://" type="text" ref="name" placeholder="myname" value={this.state.rawName} onChange={this.handleNameChange}
+              <FormRow prefix="lbry://" type="text" ref="name" placeholder="myname" value={this.state.rawName} onChange={(event) => { this.handleNameChange(event) }}
                        helper={this.getNameBidHelpText()} />
             </div>
             { this.state.rawName ?
@@ -552,7 +552,7 @@ class PublishPage extends React.Component {
                              step="0.01"
                              label="Deposit"
                              postfix="LBC"
-                             onChange={this.handleBidChange}
+                             onChange={(event) => { this.handleBidChange(event) }}
                              value={this.state.bid}
                              placeholder={this.state.nameResolved ? this.state.topClaimValue + 10 : 100}
                              helper={lbcInputHelp} />
@@ -566,24 +566,24 @@ class PublishPage extends React.Component {
             <div className="card__content">
               <FormRow label={
                 <span>I agree to the <Link href="https://www.lbry.io/termsofservice" label="LBRY terms of service" checked={this.state.TOSAgreed} /></span>
-              } type="checkbox" name="tos_agree" ref={(field) => { this.refs.tos_agree = field }} onChange={this.handleTOSChange} />
+              } type="checkbox" name="tos_agree" ref={(field) => { this.refs.tos_agree = field }} onChange={(event) => { this.handleTOSChange(event)}} />
             </div>
           </section>
 
           <div className="card-series-submit">
-            <Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={this.handleSubmit} disabled={this.state.submitting} />
+            <Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={(event) => { this.handleSubmit(event) }} disabled={this.state.submitting} />
             <Link button="cancel" onClick={lbry.back} label="Cancel" />
             <input type="submit" className="hidden" />
           </div>
         </form>
 
         <Modal isOpen={this.state.modal == 'publishStarted'} contentLabel="File published"
-               onConfirmed={this.handlePublishStartedConfirmed}>
+               onConfirmed={(event) => { this.handlePublishStartedConfirmed(event) }}>
           <p>Your file has been published to LBRY at the address <code>lbry://{this.state.name}</code>!</p>
           <p>The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.</p>
         </Modal>
         <Modal isOpen={this.state.modal == 'error'} contentLabel="Error publishing file"
-               onConfirmed={this.closeModal}>
+               onConfirmed={(event) => { this.closeModal(event) }}>
           The following error occurred when attempting to publish your file: {this.state.errorMessage}
         </Modal>
       </main>

ui/js/page/report.js

@@ -44,7 +44,7 @@ class ReportPage extends React.Component {
             <textarea ref={(t) => this._messageArea = t} cols="80" rows="10" name="message" type="text"/>
           </div>
           <div className="form-row form-row-submit">
-            <button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button>
+            <button onClick={(event) => { this.submitMessage(event) }} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button>
           </div>
         </section>
         <section className="card">
@@ -52,7 +52,7 @@ class ReportPage extends React.Component {
           You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
         </section>
         <Modal isOpen={this.state.modal == 'submitted'} contentLabel="Bug report submitted"
-               onConfirmed={this.closeModal}>
+               onConfirmed={(event) => { this.closeModal(event) }}>
           Your bug report has been submitted! Thank you for your feedback.
         </Modal>
       </main>

ui/js/page/settings/view.jsx

@@ -9,7 +9,7 @@ class SettingsPage extends React.Component {
 
     const daemonSettings = this.props.daemonSettings
 
-    return {
+    this.state = {
       isMaxUpload: daemonSettings && daemonSettings.max_upload != 0,
       isMaxDownload: daemonSettings && daemonSettings.max_download != 0,
       showNsfw: lbry.getClientSetting('showNsfw'),