Convert more callbacks to arrow functions

This commit is contained in:
Alex Liebowitz 2017-05-17 21:37:39 -04:00
parent 3e35d44978
commit 09834941ab
14 changed files with 48 additions and 48 deletions

View file

@ -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} />
);
}
}

View file

@ -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} />
}
}

View file

@ -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"

View file

@ -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>
// );

View file

@ -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}

View file

@ -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>
);

View file

@ -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>
: ''}

View file

@ -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) {

View file

@ -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>

View file

@ -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>);

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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'),