From e103778b8a7b6d6cebc34a52b43d514cb1f51260 Mon Sep 17 00:00:00 2001 From: Igor Gassmann <igor@lbry.io> Date: Thu, 21 Dec 2017 18:08:54 -0300 Subject: [PATCH] Prettyprint and autolint component files --- src/renderer/component/address/index.js | 6 +- src/renderer/component/address/view.jsx | 18 +- src/renderer/component/app/index.js | 14 +- src/renderer/component/app/view.jsx | 26 +- src/renderer/component/cardMedia/index.js | 6 +- src/renderer/component/cardMedia/view.jsx | 35 +- src/renderer/component/cardVerify/index.js | 8 +- src/renderer/component/cardVerify/view.jsx | 38 +- src/renderer/component/channelTile/index.js | 16 +- src/renderer/component/channelTile/view.jsx | 22 +- src/renderer/component/common.js | 40 +- src/renderer/component/common/spinner.jsx | 28 +- src/renderer/component/dateTime/index.js | 15 +- src/renderer/component/dateTime/view.jsx | 20 +- src/renderer/component/file-selector.js | 23 +- src/renderer/component/fileActions/index.js | 14 +- src/renderer/component/fileActions/view.jsx | 18 +- src/renderer/component/fileCard/index.js | 24 +- src/renderer/component/fileCard/view.jsx | 47 +-- src/renderer/component/fileDetails/index.js | 12 +- src/renderer/component/fileDetails/view.jsx | 47 +-- .../component/fileDownloadLink/index.js | 16 +- .../component/fileDownloadLink/view.jsx | 49 +-- src/renderer/component/fileList/index.js | 6 +- src/renderer/component/fileList/view.jsx | 59 ++- .../component/fileListSearch/index.js | 13 +- .../component/fileListSearch/view.jsx | 26 +- src/renderer/component/filePrice/index.js | 12 +- src/renderer/component/filePrice/view.jsx | 12 +- src/renderer/component/fileTile/index.js | 24 +- src/renderer/component/fileTile/view.jsx | 70 ++-- src/renderer/component/form.js | 54 +-- src/renderer/component/formField/index.js | 6 +- src/renderer/component/formField/view.jsx | 92 ++--- .../component/formFieldPrice/index.js | 6 +- .../component/formFieldPrice/view.jsx | 27 +- src/renderer/component/header/index.js | 25 +- src/renderer/component/header/view.jsx | 38 +- src/renderer/component/icon/index.js | 6 +- src/renderer/component/icon/view.jsx | 17 +- src/renderer/component/inviteList/index.js | 11 +- src/renderer/component/inviteList/view.jsx | 65 ++- src/renderer/component/inviteNew/index.js | 14 +- src/renderer/component/inviteNew/view.jsx | 24 +- src/renderer/component/link/index.js | 8 +- src/renderer/component/link/view.jsx | 22 +- .../component/linkTransaction/index.js | 6 +- .../component/linkTransaction/view.jsx | 6 +- src/renderer/component/load_screen.js | 14 +- src/renderer/component/menu.js | 27 +- src/renderer/component/nsfwOverlay/index.js | 10 +- src/renderer/component/nsfwOverlay/view.jsx | 32 +- src/renderer/component/publishForm/index.js | 8 +- .../publishForm/internal/channelSection.jsx | 60 ++- src/renderer/component/publishForm/view.jsx | 377 ++++++++---------- src/renderer/component/rewardLink/index.js | 15 +- src/renderer/component/rewardLink/view.jsx | 24 +- .../component/rewardListClaimed/index.js | 8 +- .../component/rewardListClaimed/view.jsx | 36 +- src/renderer/component/rewardSummary/index.js | 8 +- src/renderer/component/rewardSummary/view.jsx | 25 +- src/renderer/component/rewardTile/index.js | 6 +- src/renderer/component/rewardTile/view.jsx | 14 +- src/renderer/component/router/index.js | 11 +- src/renderer/component/router/view.jsx | 40 +- src/renderer/component/shapeShift/index.js | 12 +- .../shapeShift/internal/active-shift.jsx | 47 +-- .../component/shapeShift/internal/form.jsx | 23 +- .../shapeShift/internal/market_info.jsx | 12 +- src/renderer/component/shapeShift/view.jsx | 49 +-- src/renderer/component/snackBar/index.js | 10 +- src/renderer/component/snackBar/view.jsx | 12 +- src/renderer/component/splash/index.js | 13 +- src/renderer/component/splash/view.jsx | 60 ++- src/renderer/component/subHeader/index.js | 13 +- src/renderer/component/subHeader/view.jsx | 18 +- .../component/subscribeButton/index.js | 11 +- .../component/subscribeButton/view.jsx | 39 +- src/renderer/component/theme/index.js | 8 +- src/renderer/component/theme/view.jsx | 11 +- src/renderer/component/tooltip.js | 8 +- .../component/transactionList/index.js | 14 +- .../internal/TransactionListItem.jsx | 61 +-- .../component/transactionList/view.jsx | 60 ++- .../component/transactionListRecent/index.js | 10 +- .../component/transactionListRecent/view.jsx | 20 +- .../component/truncatedMarkdown/index.js | 6 +- .../component/truncatedMarkdown/view.jsx | 23 +- src/renderer/component/uriIndicator/index.js | 14 +- src/renderer/component/uriIndicator/view.jsx | 44 +- src/renderer/component/userEmailNew/index.js | 17 +- src/renderer/component/userEmailNew/view.jsx | 17 +- .../component/userEmailVerify/index.js | 14 +- .../component/userEmailVerify/view.jsx | 29 +- src/renderer/component/userVerify/index.js | 16 +- src/renderer/component/userVerify/view.jsx | 74 ++-- src/renderer/component/video/index.js | 25 +- .../video/internal/loading-screen.jsx | 4 +- .../component/video/internal/play-button.jsx | 22 +- .../component/video/internal/player.jsx | 74 ++-- src/renderer/component/video/view.jsx | 56 +-- src/renderer/component/walletAddress/index.js | 13 +- src/renderer/component/walletAddress/view.jsx | 16 +- src/renderer/component/walletBalance/index.js | 8 +- src/renderer/component/walletBalance/view.jsx | 16 +- src/renderer/component/walletSend/index.js | 13 +- src/renderer/component/walletSend/view.jsx | 31 +- src/renderer/component/walletSendTip/index.js | 15 +- src/renderer/component/walletSendTip/view.jsx | 36 +- src/renderer/component/wunderbar/index.js | 21 +- src/renderer/component/wunderbar/view.jsx | 51 +-- src/renderer/modal/modal.js | 40 +- .../modal/modalAffirmPurchase/index.js | 12 +- .../modal/modalAffirmPurchase/view.jsx | 18 +- src/renderer/modal/modalAuthFailure/index.js | 8 +- src/renderer/modal/modalAuthFailure/view.jsx | 16 +- src/renderer/modal/modalCreditIntro/index.js | 22 +- src/renderer/modal/modalCreditIntro/view.jsx | 39 +- src/renderer/modal/modalDownloading/index.js | 13 +- src/renderer/modal/modalDownloading/view.jsx | 36 +- .../modal/modalEmailCollection/index.js | 14 +- .../modal/modalEmailCollection/view.jsx | 25 +- src/renderer/modal/modalError/index.js | 8 +- src/renderer/modal/modalError/view.jsx | 44 +- src/renderer/modal/modalFileTimeout/index.js | 10 +- src/renderer/modal/modalFileTimeout/view.jsx | 12 +- src/renderer/modal/modalFirstReward/index.js | 12 +- src/renderer/modal/modalFirstReward/view.jsx | 18 +- .../modal/modalIncompatibleDaemon/index.js | 8 +- .../modal/modalIncompatibleDaemon/view.jsx | 19 +- src/renderer/modal/modalRemoveFile/index.js | 17 +- src/renderer/modal/modalRemoveFile/view.jsx | 31 +- src/renderer/modal/modalRevokeClaim/index.js | 12 +- src/renderer/modal/modalRevokeClaim/view.jsx | 60 ++- .../modalRewardApprovalRequired/index.js | 10 +- .../modalRewardApprovalRequired/view.jsx | 14 +- src/renderer/modal/modalRouter/index.js | 39 +- src/renderer/modal/modalRouter/view.jsx | 56 +-- .../modal/modalTransactionFailed/index.js | 8 +- .../modal/modalTransactionFailed/view.jsx | 12 +- src/renderer/modal/modalUpgrade/index.js | 8 +- src/renderer/modal/modalUpgrade/view.jsx | 27 +- src/renderer/modal/modalWelcome/index.js | 14 +- src/renderer/modal/modalWelcome/view.jsx | 28 +- src/renderer/page/auth/index.js | 12 +- src/renderer/page/auth/view.jsx | 37 +- src/renderer/page/backup/index.js | 8 +- src/renderer/page/backup/view.jsx | 22 +- src/renderer/page/channel/index.js | 24 +- src/renderer/page/channel/view.jsx | 31 +- src/renderer/page/discover/index.js | 13 +- src/renderer/page/discover/view.jsx | 102 ++--- src/renderer/page/file/index.js | 25 +- src/renderer/page/file/view.jsx | 67 ++-- src/renderer/page/fileListDownloaded/index.js | 19 +- src/renderer/page/fileListDownloaded/view.jsx | 36 +- src/renderer/page/fileListPublished/index.js | 19 +- src/renderer/page/fileListPublished/view.jsx | 36 +- src/renderer/page/getCredits/index.js | 6 +- src/renderer/page/getCredits/view.jsx | 81 ++-- src/renderer/page/help/index.js | 14 +- src/renderer/page/help/view.jsx | 105 +++-- src/renderer/page/invite/index.js | 10 +- src/renderer/page/invite/view.jsx | 20 +- src/renderer/page/publish/index.js | 23 +- src/renderer/page/publish/view.jsx | 8 +- src/renderer/page/report.js | 36 +- src/renderer/page/rewards/index.js | 19 +- src/renderer/page/rewards/view.jsx | 106 ++--- src/renderer/page/search/index.js | 10 +- src/renderer/page/search/view.jsx | 27 +- src/renderer/page/sendCredits/index.js | 6 +- src/renderer/page/sendCredits/view.jsx | 24 +- src/renderer/page/settings/index.js | 24 +- src/renderer/page/settings/view.jsx | 96 ++--- src/renderer/page/show/index.js | 12 +- src/renderer/page/show/view.jsx | 24 +- src/renderer/page/subscriptions/index.js | 20 +- src/renderer/page/subscriptions/view.jsx | 27 +- src/renderer/page/transactionHistory/index.js | 13 +- src/renderer/page/transactionHistory/view.jsx | 23 +- src/renderer/page/wallet/index.js | 6 +- src/renderer/page/wallet/view.jsx | 32 +- 183 files changed, 2122 insertions(+), 2883 deletions(-) diff --git a/src/renderer/component/address/index.js b/src/renderer/component/address/index.js index 00bec962e..b861b75c5 100644 --- a/src/renderer/component/address/index.js +++ b/src/renderer/component/address/index.js @@ -1,6 +1,6 @@ -import { connect } from "react-redux"; -import { doShowSnackBar } from "redux/actions/app"; -import Address from "./view"; +import { connect } from 'react-redux'; +import { doShowSnackBar } from 'redux/actions/app'; +import Address from './view'; export default connect(null, { doShowSnackBar, diff --git a/src/renderer/component/address/view.jsx b/src/renderer/component/address/view.jsx index 96049eb35..65ea563c0 100644 --- a/src/renderer/component/address/view.jsx +++ b/src/renderer/component/address/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { clipboard } from "electron"; -import Link from "component/link"; -import classnames from "classnames"; +import React from 'react'; +import PropTypes from 'prop-types'; +import { clipboard } from 'electron'; +import Link from 'component/link'; +import classnames from 'classnames'; export default class Address extends React.PureComponent { static propTypes = { @@ -21,8 +21,8 @@ export default class Address extends React.PureComponent { return ( <div className="form-field form-field--address"> <input - className={classnames("input-copyable", { - "input-copyable--with-copy-btn": showCopyButton, + className={classnames('input-copyable', { + 'input-copyable--with-copy-btn': showCopyButton, })} type="text" ref={input => { @@ -32,7 +32,7 @@ export default class Address extends React.PureComponent { this._inputElem.select(); }} readOnly="readonly" - value={address || ""} + value={address || ''} /> {showCopyButton && ( <span className="header__item"> @@ -41,7 +41,7 @@ export default class Address extends React.PureComponent { icon="clipboard" onClick={() => { clipboard.writeText(address); - doShowSnackBar({ message: __("Address copied") }); + doShowSnackBar({ message: __('Address copied') }); }} /> </span> diff --git a/src/renderer/component/app/index.js b/src/renderer/component/app/index.js index 66b50bb71..c7173f606 100644 --- a/src/renderer/component/app/index.js +++ b/src/renderer/component/app/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry, -} from "redux/selectors/navigation"; -import { selectUser } from "redux/selectors/user"; -import { doAlertError } from "redux/actions/app"; -import { doRecordScroll } from "redux/actions/navigation"; -import App from "./view"; +} from 'redux/selectors/navigation'; +import { selectUser } from 'redux/selectors/user'; +import { doAlertError } from 'redux/actions/app'; +import { doRecordScroll } from 'redux/actions/navigation'; +import App from './view'; const select = (state, props) => ({ pageTitle: selectPageTitle(state), diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx index 11e66e252..fb43b6574 100644 --- a/src/renderer/component/app/view.jsx +++ b/src/renderer/component/app/view.jsx @@ -1,10 +1,10 @@ -import React from "react"; -import Router from "component/router/index"; -import Header from "component/header"; -import Theme from "component/theme"; -import ModalRouter from "modal/modalRouter"; -import ReactModal from "react-modal"; -import throttle from "util/throttle"; +import React from 'react'; +import Router from 'component/router/index'; +import Header from 'component/header'; +import Theme from 'component/theme'; +import ModalRouter from 'modal/modalRouter'; +import ReactModal from 'react-modal'; +import throttle from 'util/throttle'; class App extends React.PureComponent { constructor() { @@ -15,25 +15,25 @@ class App extends React.PureComponent { componentWillMount() { const { alertError } = this.props; - document.addEventListener("unhandledError", event => { + document.addEventListener('unhandledError', event => { alertError(event.detail); }); } componentDidMount() { const { recordScroll } = this.props; - const mainContent = document.getElementById("main-content"); + const mainContent = document.getElementById('main-content'); this.mainContent = mainContent; const scrollListener = () => recordScroll(this.mainContent.scrollTop); - this.mainContent.addEventListener("scroll", throttle(scrollListener, 750)); + this.mainContent.addEventListener('scroll', throttle(scrollListener, 750)); - ReactModal.setAppElement("#window"); //fuck this + ReactModal.setAppElement('#window'); // fuck this } componentWillUnmount() { - this.mainContent.removeEventListener("scroll", this.scrollListener); + this.mainContent.removeEventListener('scroll', this.scrollListener); } componentWillReceiveProps(props) { @@ -50,7 +50,7 @@ class App extends React.PureComponent { } setTitleFromProps(props) { - window.document.title = props.pageTitle || "LBRY"; + window.document.title = props.pageTitle || 'LBRY'; } render() { diff --git a/src/renderer/component/cardMedia/index.js b/src/renderer/component/cardMedia/index.js index 3616b0331..1f7988712 100644 --- a/src/renderer/component/cardMedia/index.js +++ b/src/renderer/component/cardMedia/index.js @@ -1,6 +1,6 @@ -import React from "react"; -import { connect } from "react-redux"; -import CardMedia from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import CardMedia from './view'; const select = state => ({}); const perform = dispatch => ({}); diff --git a/src/renderer/component/cardMedia/view.jsx b/src/renderer/component/cardMedia/view.jsx index d0f45f4ac..06f80f1d7 100644 --- a/src/renderer/component/cardMedia/view.jsx +++ b/src/renderer/component/cardMedia/view.jsx @@ -1,18 +1,18 @@ -import React from "react"; +import React from 'react'; class CardMedia extends React.PureComponent { static AUTO_THUMB_CLASSES = [ - "purple", - "red", - "pink", - "indigo", - "blue", - "light-blue", - "cyan", - "teal", - "green", - "yellow", - "orange", + 'purple', + 'red', + 'pink', + 'indigo', + 'blue', + 'light-blue', + 'cyan', + 'teal', + 'green', + 'yellow', + 'orange', ]; componentWillMount() { @@ -29,12 +29,7 @@ class CardMedia extends React.PureComponent { const atClass = this.state.autoThumbClass; if (thumbnail) { - return ( - <div - className="card__media" - style={{ backgroundImage: "url('" + thumbnail + "')" }} - /> - ); + return <div className="card__media" style={{ backgroundImage: `url('${thumbnail}')` }} />; } return ( @@ -42,8 +37,8 @@ class CardMedia extends React.PureComponent { <div className="card__autothumb__text"> {title && title - .replace(/\s+/g, "") - .substring(0, Math.min(title.replace(" ", "").length, 5)) + .replace(/\s+/g, '') + .substring(0, Math.min(title.replace(' ', '').length, 5)) .toUpperCase()} </div> </div> diff --git a/src/renderer/component/cardVerify/index.js b/src/renderer/component/cardVerify/index.js index 53bdf05b9..390622f3d 100644 --- a/src/renderer/component/cardVerify/index.js +++ b/src/renderer/component/cardVerify/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectUserEmail } from "redux/selectors/user"; -import CardVerify from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectUserEmail } from 'redux/selectors/user'; +import CardVerify from './view'; const select = state => ({ email: selectUserEmail(state), diff --git a/src/renderer/component/cardVerify/view.jsx b/src/renderer/component/cardVerify/view.jsx index 4494cbf6c..4690b61d2 100644 --- a/src/renderer/component/cardVerify/view.jsx +++ b/src/renderer/component/cardVerify/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import PropTypes from "prop-types"; -import Link from "component/link"; +import React from 'react'; +import PropTypes from 'prop-types'; +import Link from 'component/link'; let scriptLoading = false; let scriptLoaded = false; @@ -48,8 +48,8 @@ class CardVerify extends React.Component { scriptLoading = true; - const script = document.createElement("script"); - script.src = "https://checkout.stripe.com/checkout.js"; + const script = document.createElement('script'); + script.src = 'https://checkout.stripe.com/checkout.js'; script.async = 1; this.loadPromise = (() => { @@ -69,12 +69,8 @@ class CardVerify extends React.Component { }; }); const wrappedPromise = new Promise((accept, cancel) => { - promise.then( - () => (canceled ? cancel({ isCanceled: true }) : accept()) - ); - promise.catch( - error => (canceled ? cancel({ isCanceled: true }) : cancel(error)) - ); + promise.then(() => (canceled ? cancel({ isCanceled: true }) : accept())); + promise.catch(error => (canceled ? cancel({ isCanceled: true }) : cancel(error))); }); return { @@ -85,9 +81,7 @@ class CardVerify extends React.Component { }; })(); - this.loadPromise.promise - .then(this.onScriptLoaded) - .catch(this.onScriptError); + this.loadPromise.promise.then(this.onScriptLoaded).catch(this.onScriptError); document.body.appendChild(script); } @@ -119,7 +113,7 @@ class CardVerify extends React.Component { }; onScriptError = (...args) => { - throw new Error("Unable to load credit validation script."); + throw new Error('Unable to load credit validation script.'); }; onClosed = () => { @@ -139,10 +133,10 @@ class CardVerify extends React.Component { CardVerify.stripeHandler.open({ allowRememberMe: false, closed: this.onClosed, - description: __("Confirm Identity"), + description: __('Confirm Identity'), email: this.props.email, - locale: "auto", - panelLabel: "Verify", + locale: 'auto', + panelLabel: 'Verify', token: this.props.token, zipCode: true, }); @@ -151,9 +145,7 @@ class CardVerify extends React.Component { onClick = () => { if (scriptDidError) { try { - throw new Error( - "Tried to call onClick, but StripeCheckout failed to load" - ); + throw new Error('Tried to call onClick, but StripeCheckout failed to load'); } catch (x) {} } else if (CardVerify.stripeHandler) { this.showStripeDialog(); @@ -168,9 +160,7 @@ class CardVerify extends React.Component { button="alt" label={this.props.label} icon="icon-lock" - disabled={ - this.props.disabled || this.state.open || this.hasPendingClick - } + disabled={this.props.disabled || this.state.open || this.hasPendingClick} onClick={this.onClick.bind(this)} /> ); diff --git a/src/renderer/component/channelTile/index.js b/src/renderer/component/channelTile/index.js index 4c86e8b14..51a4835f6 100644 --- a/src/renderer/component/channelTile/index.js +++ b/src/renderer/component/channelTile/index.js @@ -1,11 +1,11 @@ -import React from "react"; -import { connect } from "react-redux"; -import { makeSelectClaimForUri } from "redux/selectors/claims"; -import { doNavigate } from "redux/actions/navigation"; -import { doResolveUri } from "redux/actions/content"; -import { makeSelectTotalItemsForChannel } from "redux/selectors/content"; -import { makeSelectIsUriResolving } from "redux/selectors/content"; -import ChannelTile from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { makeSelectClaimForUri } from 'redux/selectors/claims'; +import { doNavigate } from 'redux/actions/navigation'; +import { doResolveUri } from 'redux/actions/content'; +import { makeSelectTotalItemsForChannel } from 'redux/selectors/content'; +import { makeSelectIsUriResolving } from 'redux/selectors/content'; +import ChannelTile from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index e4a4ed8be..73efed63a 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import CardMedia from "component/cardMedia"; -import { TruncatedText, BusyMessage } from "component/common.js"; +import React from 'react'; +import CardMedia from 'component/cardMedia'; +import { TruncatedText, BusyMessage } from 'component/common.js'; class ChannelTile extends React.PureComponent { componentDidMount() { @@ -26,12 +26,12 @@ class ChannelTile extends React.PureComponent { channelId = claim.claim_id; } - let onClick = () => navigate("/show", { uri }); + const onClick = () => navigate('/show', { uri }); return ( <section className="file-tile card"> <div onClick={onClick} className="card__link"> - <div className={"card__inner file-tile__row"}> + <div className="card__inner file-tile__row"> {channelName && <CardMedia title={channelName} thumbnail={null} />} <div className="file-tile__content"> <div className="card__title-primary"> @@ -40,19 +40,15 @@ class ChannelTile extends React.PureComponent { </h3> </div> <div className="card__content card__subtext"> - {isResolvingUri && ( - <BusyMessage message={__("Resolving channel")} /> - )} + {isResolvingUri && <BusyMessage message={__('Resolving channel')} />} {totalItems > 0 && ( <span> - This is a channel with {totalItems}{" "} - {totalItems === 1 ? " item" : " items"} inside of it. + This is a channel with {totalItems} {totalItems === 1 ? ' item' : ' items'}{' '} + inside of it. </span> )} {!isResolvingUri && - !totalItems && ( - <span className="empty">This is an empty channel.</span> - )} + !totalItems && <span className="empty">This is an empty channel.</span>} </div> </div> </div> diff --git a/src/renderer/component/common.js b/src/renderer/component/common.js index 681fc8ab1..bf4a4d8ce 100644 --- a/src/renderer/component/common.js +++ b/src/renderer/component/common.js @@ -1,7 +1,7 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { formatCredits, formatFullPrice } from "util/formatCredits"; -import lbry from "../lbry.js"; +import React from 'react'; +import PropTypes from 'prop-types'; +import { formatCredits, formatFullPrice } from 'util/formatCredits'; +import lbry from '../lbry.js'; // component/icon.js export class Icon extends React.PureComponent { @@ -13,9 +13,9 @@ export class Icon extends React.PureComponent { render() { const { fixed, className } = this.props; - const spanClassName = `icon ${ - "fixed" in this.props ? "icon-fixed-width " : "" - }${this.props.icon} ${this.props.className || ""}`; + const spanClassName = `icon ${'fixed' in this.props ? 'icon-fixed-width ' : ''}${ + this.props.icon + } ${this.props.className || ''}`; return <span className={spanClassName} />; } } @@ -31,10 +31,7 @@ export class TruncatedText extends React.PureComponent { render() { return ( - <span - className="truncated-text" - style={{ WebkitLineClamp: this.props.lines }} - > + <span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}> {this.props.children} </span> ); @@ -70,14 +67,14 @@ export class CreditAmount extends React.PureComponent { showFree: PropTypes.bool, showFullPrice: PropTypes.bool, showPlus: PropTypes.bool, - look: PropTypes.oneOf(["indicator", "plain", "fee"]), + look: PropTypes.oneOf(['indicator', 'plain', 'fee']), }; static defaultProps = { precision: 2, label: true, showFree: false, - look: "indicator", + look: 'indicator', showFullPrice: false, showPlus: false, }; @@ -100,13 +97,13 @@ export class CreditAmount extends React.PureComponent { let amountText; if (this.props.showFree && parseFloat(this.props.amount) === 0) { - amountText = __("free"); + amountText = __('free'); } else { if (this.props.label) { const label = - typeof this.props.label === "string" + typeof this.props.label === 'string' ? this.props.label - : parseFloat(amount) == 1 ? __("credit") : __("credits"); + : parseFloat(amount) == 1 ? __('credit') : __('credits'); amountText = `${formattedAmount} ${label}`; } else { @@ -118,15 +115,12 @@ export class CreditAmount extends React.PureComponent { } return ( - <span - className={`credit-amount credit-amount--${this.props.look}`} - title={fullPrice} - > + <span className={`credit-amount credit-amount--${this.props.look}`} title={fullPrice}> <span>{amountText}</span> {this.props.isEstimate ? ( <span className="credit-amount__estimate" - title={__("This is an estimate and does not include data fees")} + title={__('This is an estimate and does not include data fees')} > * </span> @@ -152,7 +146,7 @@ export class Thumbnail extends React.PureComponent { constructor(props) { super(props); - this._defaultImageUri = lbry.imagePath("default-thumb.svg"); + this._defaultImageUri = lbry.imagePath('default-thumb.svg'); this._maxLoadTime = 10000; this._isMounted = false; @@ -177,7 +171,7 @@ export class Thumbnail extends React.PureComponent { } render() { - const className = this.props.className ? this.props.className : "", + const className = this.props.className ? this.props.className : '', otherProps = Object.assign({}, this.props); delete otherProps.className; return ( diff --git a/src/renderer/component/common/spinner.jsx b/src/renderer/component/common/spinner.jsx index 8863459c8..14938f9b9 100644 --- a/src/renderer/component/common/spinner.jsx +++ b/src/renderer/component/common/spinner.jsx @@ -1,16 +1,14 @@ -import React from "react"; -import classnames from "classnames"; +import React from 'react'; +import classnames from 'classnames'; -export default ({ dark, className }) => { - return ( - <div - className={classnames( - "spinner", - { - "spinner--dark": dark, - }, - className - )} - /> - ); -}; +export default ({ dark, className }) => ( + <div + className={classnames( + 'spinner', + { + 'spinner--dark': dark, + }, + className + )} + /> +); diff --git a/src/renderer/component/dateTime/index.js b/src/renderer/component/dateTime/index.js index dbef1e030..06009a4ca 100644 --- a/src/renderer/component/dateTime/index.js +++ b/src/renderer/component/dateTime/index.js @@ -1,14 +1,11 @@ -import React from "react"; -import { connect } from "react-redux"; -import { makeSelectBlockDate } from "redux/selectors/wallet"; -import { doFetchBlock } from "redux/actions/wallet"; -import DateTime from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { makeSelectBlockDate } from 'redux/selectors/wallet'; +import { doFetchBlock } from 'redux/actions/wallet'; +import DateTime from './view'; const select = (state, props) => ({ - date: - !props.date && props.block - ? makeSelectBlockDate(props.block)(state) - : props.date, + date: !props.date && props.block ? makeSelectBlockDate(props.block)(state) : props.date, }); const perform = dispatch => ({ diff --git a/src/renderer/component/dateTime/view.jsx b/src/renderer/component/dateTime/view.jsx index b5dff1239..83f7fa755 100644 --- a/src/renderer/component/dateTime/view.jsx +++ b/src/renderer/component/dateTime/view.jsx @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react'; class DateTime extends React.PureComponent { - static SHOW_DATE = "date"; - static SHOW_TIME = "time"; - static SHOW_BOTH = "both"; + static SHOW_DATE = 'date'; + static SHOW_TIME = 'time'; + static SHOW_BOTH = 'both'; static defaultProps = { formatOptions: { - month: "long", - day: "numeric", - year: "numeric", + month: 'long', + day: 'numeric', + year: 'numeric', }, }; @@ -37,12 +37,12 @@ class DateTime extends React.PureComponent { <span> {date && (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) && - date.toLocaleDateString([locale, "en-US"], formatOptions)} - {show == DateTime.SHOW_BOTH && " "} + date.toLocaleDateString([locale, 'en-US'], formatOptions)} + {show == DateTime.SHOW_BOTH && ' '} {date && (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) && date.toLocaleTimeString()} - {!date && "..."} + {!date && '...'} </span> ); } diff --git a/src/renderer/component/file-selector.js b/src/renderer/component/file-selector.js index 5b5f06cf6..18284268b 100644 --- a/src/renderer/component/file-selector.js +++ b/src/renderer/component/file-selector.js @@ -1,17 +1,17 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react'; +import PropTypes from 'prop-types'; -const { remote } = require("electron"); +const { remote } = require('electron'); class FileSelector extends React.PureComponent { static propTypes = { - type: PropTypes.oneOf(["file", "directory"]), + type: PropTypes.oneOf(['file', 'directory']), initPath: PropTypes.string, onFileChosen: PropTypes.func, }; static defaultProps = { - type: "file", + type: 'file', }; constructor(props) { @@ -28,10 +28,7 @@ class FileSelector extends React.PureComponent { handleButtonClick() { remote.dialog.showOpenDialog( { - properties: - this.props.type == "file" - ? ["openFile"] - : ["openDirectory", "createDirectory"], + properties: this.props.type == 'file' ? ['openFile'] : ['openDirectory', 'createDirectory'], }, paths => { if (!paths) { @@ -60,12 +57,10 @@ class FileSelector extends React.PureComponent { > <span className="button__content"> <span className="button-label"> - {this.props.type == "file" - ? __("Choose File") - : __("Choose Directory")} + {this.props.type == 'file' ? __('Choose File') : __('Choose Directory')} </span> </span> - </button>{" "} + </button>{' '} <span className="file-selector__path"> <input className="input-copyable" @@ -77,7 +72,7 @@ class FileSelector extends React.PureComponent { this._inputElem.select(); }} readOnly="readonly" - value={this.state.path || __("No File Chosen")} + value={this.state.path || __('No File Chosen')} /> </span> </div> diff --git a/src/renderer/component/fileActions/index.js b/src/renderer/component/fileActions/index.js index 71589679b..b848342c0 100644 --- a/src/renderer/component/fileActions/index.js +++ b/src/renderer/component/fileActions/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; -import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; -import { doOpenModal } from "redux/actions/app"; -import { makeSelectClaimIsMine } from "redux/selectors/claims"; -import FileActions from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; +import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info'; +import { doOpenModal } from 'redux/actions/app'; +import { makeSelectClaimIsMine } from 'redux/selectors/claims'; +import FileActions from './view'; const select = (state, props) => ({ fileInfo: makeSelectFileInfoForUri(props.uri)(state), diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx index a382191ee..b2d83f3b9 100644 --- a/src/renderer/component/fileActions/view.jsx +++ b/src/renderer/component/fileActions/view.jsx @@ -1,7 +1,7 @@ -import React from "react"; -import Link from "component/link"; -import FileDownloadLink from "component/fileDownloadLink"; -import * as modals from "constants/modal_types"; +import React from 'react'; +import Link from 'component/link'; +import FileDownloadLink from 'component/fileDownloadLink'; +import * as modals from 'constants/modal_types'; class FileActions extends React.PureComponent { render() { @@ -17,7 +17,7 @@ class FileActions extends React.PureComponent { <Link button="text" icon="icon-trash" - label={__("Remove")} + label={__('Remove')} className="no-underline" onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })} /> @@ -28,22 +28,22 @@ class FileActions extends React.PureComponent { icon="icon-flag" href={`https://lbry.io/dmca?claim_id=${claimId}`} className="no-underline" - label={__("report")} + label={__('report')} /> )} <Link button="primary" icon="icon-gift" - label={__("Support")} + label={__('Support')} navigate="/show" className="card__action--right" - navigateParams={{ uri, tab: "tip" }} + navigateParams={{ uri, tab: 'tip' }} /> {claimIsMine && ( <Link button="alt" icon="icon-edit" - label={__("Edit")} + label={__('Edit')} navigate="/publish" className="card__action--right" navigateParams={{ id: claimId }} diff --git a/src/renderer/component/fileCard/index.js b/src/renderer/component/fileCard/index.js index 49edc94d8..f324e93a3 100644 --- a/src/renderer/component/fileCard/index.js +++ b/src/renderer/component/fileCard/index.js @@ -1,18 +1,12 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import { doResolveUri } from "redux/actions/content"; -import { selectShowNsfw } from "redux/selectors/settings"; -import { - makeSelectClaimForUri, - makeSelectMetadataForUri, -} from "redux/selectors/claims"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; -import { - makeSelectIsUriResolving, - selectRewardContentClaimIds, -} from "redux/selectors/content"; -import FileCard from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import { doResolveUri } from 'redux/actions/content'; +import { selectShowNsfw } from 'redux/selectors/settings'; +import { makeSelectClaimForUri, makeSelectMetadataForUri } from 'redux/selectors/claims'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; +import { makeSelectIsUriResolving, selectRewardContentClaimIds } from 'redux/selectors/content'; +import FileCard from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx index 00a42eb29..e741589d8 100644 --- a/src/renderer/component/fileCard/view.jsx +++ b/src/renderer/component/fileCard/view.jsx @@ -1,14 +1,14 @@ -import React from "react"; -import lbryuri from "lbryuri.js"; -import CardMedia from "component/cardMedia"; -import Link from "component/link"; -import { TruncatedText } from "component/common"; -import Icon from "component/icon"; -import FilePrice from "component/filePrice"; -import UriIndicator from "component/uriIndicator"; -import NsfwOverlay from "component/nsfwOverlay"; -import TruncatedMarkdown from "component/truncatedMarkdown"; -import * as icons from "constants/icons"; +import React from 'react'; +import lbryuri from 'lbryuri.js'; +import CardMedia from 'component/cardMedia'; +import Link from 'component/link'; +import { TruncatedText } from 'component/common'; +import Icon from 'component/icon'; +import FilePrice from 'component/filePrice'; +import UriIndicator from 'component/uriIndicator'; +import NsfwOverlay from 'component/nsfwOverlay'; +import TruncatedMarkdown from 'component/truncatedMarkdown'; +import * as icons from 'constants/icons'; class FileCard extends React.PureComponent { constructor(props) { @@ -59,35 +59,27 @@ class FileCard extends React.PureComponent { const uri = lbryuri.normalize(this.props.uri); const title = metadata && metadata.title ? metadata.title : uri; - const thumbnail = - metadata && metadata.thumbnail ? metadata.thumbnail : null; + const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - const isRewardContent = - claim && rewardedContentClaimIds.includes(claim.claim_id); + const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id); - let description = ""; + let description = ''; if (isResolvingUri && !claim) { - description = __("Loading..."); + description = __('Loading...'); } else if (metadata && metadata.description) { description = metadata.description; } else if (claim === null) { - description = __("This address contains no content."); + description = __('This address contains no content.'); } return ( <section - className={ - "card card--small card--link " + - (obscureNsfw ? "card--obscured " : "") - } + className={`card card--small card--link ${obscureNsfw ? 'card--obscured ' : ''}`} onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)} > <div className="card__inner"> - <Link - onClick={() => navigate("/show", { uri })} - className="card__link" - > + <Link onClick={() => navigate('/show', { uri })} className="card__link"> <CardMedia title={title} thumbnail={thumbnail} /> <div className="card__title-identity"> <div className="card__title" title={title}> @@ -95,8 +87,7 @@ class FileCard extends React.PureComponent { </div> <div className="card__subtitle"> <span className="card__indicators"> - <FilePrice uri={uri} />{" "} - {isRewardContent && <Icon icon={icons.FEATURED} />}{" "} + <FilePrice uri={uri} /> {isRewardContent && <Icon icon={icons.FEATURED} />}{' '} {fileInfo && <Icon icon={icons.LOCAL} />} </span> <UriIndicator uri={uri} smallCard /> diff --git a/src/renderer/component/fileDetails/index.js b/src/renderer/component/fileDetails/index.js index fb29fe042..9b877dec9 100644 --- a/src/renderer/component/fileDetails/index.js +++ b/src/renderer/component/fileDetails/index.js @@ -1,13 +1,13 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { makeSelectClaimForUri, makeSelectContentTypeForUri, makeSelectMetadataForUri, -} from "redux/selectors/claims"; -import FileDetails from "./view"; -import { doOpenFileInFolder } from "redux/actions/file_info"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; +} from 'redux/selectors/claims'; +import FileDetails from './view'; +import { doOpenFileInFolder } from 'redux/actions/file_info'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/component/fileDetails/view.jsx b/src/renderer/component/fileDetails/view.jsx index 55afed97d..9b6753484 100644 --- a/src/renderer/component/fileDetails/view.jsx +++ b/src/renderer/component/fileDetails/view.jsx @@ -1,27 +1,20 @@ -import React from "react"; -import ReactMarkdown from "react-markdown"; -import lbry from "lbry.js"; -import FileActions from "component/fileActions"; -import Link from "component/link"; -import DateTime from "component/dateTime"; +import React from 'react'; +import ReactMarkdown from 'react-markdown'; +import lbry from 'lbry.js'; +import FileActions from 'component/fileActions'; +import Link from 'component/link'; +import DateTime from 'component/dateTime'; -const path = require("path"); +const path = require('path'); class FileDetails extends React.PureComponent { render() { - const { - claim, - contentType, - fileInfo, - metadata, - openFolder, - uri, - } = this.props; + const { claim, contentType, fileInfo, metadata, openFolder, uri } = this.props; if (!claim || !metadata) { return ( <div className="card__content"> - <span className="empty">{__("Empty claim or metadata info.")}</span> + <span className="empty">{__('Empty claim or metadata info.')}</span> </div> ); } @@ -29,9 +22,7 @@ class FileDetails extends React.PureComponent { const { description, language, license } = metadata; const mediaType = lbry.getMediaType(contentType); - const downloadPath = fileInfo - ? path.normalize(fileInfo.download_path) - : null; + const downloadPath = fileInfo ? path.normalize(fileInfo.download_path) : null; return ( <div> @@ -40,33 +31,31 @@ class FileDetails extends React.PureComponent { <div className="divider__horizontal" /> <div className="card__content card__subtext card__subtext--allow-newlines"> <ReactMarkdown - source={description || ""} - escapeHtml={true} - disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]} + source={description || ''} + escapeHtml + disallowedTypes={['Heading', 'HtmlInline', 'HtmlBlock']} /> </div> <div className="card__content"> <table className="table-standard table-stretch"> <tbody> <tr> - <td>{__("Content-Type")}</td> + <td>{__('Content-Type')}</td> <td>{mediaType}</td> </tr> <tr> - <td>{__("Language")}</td> + <td>{__('Language')}</td> <td>{language}</td> </tr> <tr> - <td>{__("License")}</td> + <td>{__('License')}</td> <td>{license}</td> </tr> {downloadPath && ( <tr> - <td>{__("Downloaded to")}</td> + <td>{__('Downloaded to')}</td> <td> - <Link onClick={() => openFolder(downloadPath)}> - {downloadPath} - </Link> + <Link onClick={() => openFolder(downloadPath)}>{downloadPath}</Link> </td> </tr> )} diff --git a/src/renderer/component/fileDownloadLink/index.js b/src/renderer/component/fileDownloadLink/index.js index 9ac3982a4..40f578ca4 100644 --- a/src/renderer/component/fileDownloadLink/index.js +++ b/src/renderer/component/fileDownloadLink/index.js @@ -1,15 +1,15 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { makeSelectFileInfoForUri, makeSelectDownloadingForUri, makeSelectLoadingForUri, -} from "redux/selectors/file_info"; -import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; -import { doFetchAvailability } from "redux/actions/availability"; -import { doOpenFileInShell } from "redux/actions/file_info"; -import { doPurchaseUri, doStartDownload } from "redux/actions/content"; -import FileDownloadLink from "./view"; +} from 'redux/selectors/file_info'; +import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info'; +import { doFetchAvailability } from 'redux/actions/availability'; +import { doOpenFileInShell } from 'redux/actions/file_info'; +import { doPurchaseUri, doStartDownload } from 'redux/actions/content'; +import FileDownloadLink from './view'; const select = (state, props) => ({ fileInfo: makeSelectFileInfoForUri(props.uri)(state), diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx index 32d0fe3c4..0c23db718 100644 --- a/src/renderer/component/fileDownloadLink/view.jsx +++ b/src/renderer/component/fileDownloadLink/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Icon, BusyMessage } from "component/common"; -import Link from "component/link"; +import React from 'react'; +import { Icon, BusyMessage } from 'component/common'; +import Link from 'component/link'; class FileDownloadLink extends React.PureComponent { componentWillMount() { @@ -34,24 +34,14 @@ class FileDownloadLink extends React.PureComponent { } render() { - const { - fileInfo, - downloading, - uri, - openInShell, - purchaseUri, - costInfo, - loading, - } = this.props; + const { fileInfo, downloading, uri, openInShell, purchaseUri, costInfo, loading } = this.props; if (loading || downloading) { const progress = fileInfo && fileInfo.written_bytes ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0, - label = fileInfo - ? progress.toFixed(0) + __("% complete") - : __("Connecting..."), + label = fileInfo ? progress.toFixed(0) + __('% complete') : __('Connecting...'), labelWithIcon = ( <span className="button__content"> <Icon icon="icon-download" /> @@ -63,7 +53,7 @@ class FileDownloadLink extends React.PureComponent { <div className="faux-button-block file-download button-set-item"> <div className="faux-button-block file-download__overlay" - style={{ width: progress + "%" }} + style={{ width: `${progress}%` }} > {labelWithIcon} </div> @@ -72,24 +62,23 @@ class FileDownloadLink extends React.PureComponent { ); } else if (fileInfo === null && !downloading) { if (!costInfo) { - return <BusyMessage message={__("Fetching cost info")} />; - } else { - return ( - <Link - button="text" - label={__("Download")} - icon="icon-download" - className="no-underline" - onClick={() => { - purchaseUri(uri); - }} - /> - ); + return <BusyMessage message={__('Fetching cost info')} />; } + return ( + <Link + button="text" + label={__('Download')} + icon="icon-download" + className="no-underline" + onClick={() => { + purchaseUri(uri); + }} + /> + ); } else if (fileInfo && fileInfo.download_path) { return ( <Link - label={__("Open")} + label={__('Open')} button="text" icon="icon-external-link-square" className="no-underline" diff --git a/src/renderer/component/fileList/index.js b/src/renderer/component/fileList/index.js index 966481a30..3b6ced934 100644 --- a/src/renderer/component/fileList/index.js +++ b/src/renderer/component/fileList/index.js @@ -1,6 +1,6 @@ -import React from "react"; -import { connect } from "react-redux"; -import FileList from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import FileList from './view'; const select = state => ({}); diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx index 10dd2d2d7..ba1ba296c 100644 --- a/src/renderer/component/fileList/view.jsx +++ b/src/renderer/component/fileList/view.jsx @@ -1,23 +1,23 @@ -import React from "react"; -import lbryuri from "lbryuri.js"; -import FormField from "component/formField"; -import FileTile from "component/fileTile"; -import { BusyMessage } from "component/common.js"; +import React from 'react'; +import lbryuri from 'lbryuri.js'; +import FormField from 'component/formField'; +import FileTile from 'component/fileTile'; +import { BusyMessage } from 'component/common.js'; class FileList extends React.PureComponent { constructor(props) { super(props); this.state = { - sortBy: "date", + sortBy: 'date', }; this._sortFunctions = { - date: function(fileInfos) { + date(fileInfos) { return fileInfos.slice().reverse(); }, - title: function(fileInfos) { - return fileInfos.slice().sort(function(fileInfo1, fileInfo2) { + title(fileInfos) { + return fileInfos.slice().sort((fileInfo1, fileInfo2) => { const title1 = fileInfo1.value ? fileInfo1.value.stream.metadata.title.toLowerCase() : fileInfo1.name; @@ -28,25 +28,21 @@ class FileList extends React.PureComponent { return -1; } else if (title1 > title2) { return 1; - } else { - return 0; } + return 0; }); }, - filename: function(fileInfos) { - return fileInfos - .slice() - .sort(function({ file_name: fileName1 }, { file_name: fileName2 }) { - const fileName1Lower = fileName1.toLowerCase(); - const fileName2Lower = fileName2.toLowerCase(); - if (fileName1Lower < fileName2Lower) { - return -1; - } else if (fileName2Lower > fileName1Lower) { - return 1; - } else { - return 0; - } - }); + filename(fileInfos) { + return fileInfos.slice().sort(({ file_name: fileName1 }, { file_name: fileName2 }) => { + const fileName1Lower = fileName1.toLowerCase(); + const fileName2Lower = fileName2.toLowerCase(); + if (fileName1Lower < fileName2Lower) { + return -1; + } else if (fileName2Lower > fileName1Lower) { + return 1; + } + return 0; + }); }, }; } @@ -54,9 +50,8 @@ class FileList extends React.PureComponent { getChannelSignature(fileInfo) { if (fileInfo.value) { return fileInfo.value.publisherSignature.certificateId; - } else { - return fileInfo.metadata.publisherSignature.certificateId; } + return fileInfo.metadata.publisherSignature.certificateId; } handleSortChanged(event) { @@ -71,7 +66,7 @@ class FileList extends React.PureComponent { const content = []; this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => { - let uriParams = {}; + const uriParams = {}; if (fileInfo.channel_name) { uriParams.channelName = fileInfo.channel_name; @@ -89,7 +84,7 @@ class FileList extends React.PureComponent { uri={uri} showPrice={false} showLocal={false} - showActions={true} + showActions showEmpty={this.props.fileTileShowEmpty} /> ); @@ -98,10 +93,10 @@ class FileList extends React.PureComponent { <section className="file-list__header"> {fetching && <BusyMessage />} <span className="sort-section"> - {__("Sort by")}{" "} + {__('Sort by')}{' '} <FormField type="select" onChange={this.handleSortChanged.bind(this)}> - <option value="date">{__("Date")}</option> - <option value="title">{__("Title")}</option> + <option value="date">{__('Date')}</option> + <option value="title">{__('Title')}</option> </FormField> </span> {content} diff --git a/src/renderer/component/fileListSearch/index.js b/src/renderer/component/fileListSearch/index.js index cd6e087f6..ec06231af 100644 --- a/src/renderer/component/fileListSearch/index.js +++ b/src/renderer/component/fileListSearch/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doSearch } from "redux/actions/search"; -import { - selectIsSearching, - makeSelectSearchUris, -} from "redux/selectors/search"; -import FileListSearch from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doSearch } from 'redux/actions/search'; +import { selectIsSearching, makeSelectSearchUris } from 'redux/selectors/search'; +import FileListSearch from './view'; const select = (state, props) => ({ isSearching: selectIsSearching(state), diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx index 00a759d5e..afe5d4f36 100644 --- a/src/renderer/component/fileListSearch/view.jsx +++ b/src/renderer/component/fileListSearch/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import FileTile from "component/fileTile"; -import ChannelTile from "component/channelTile"; -import Link from "component/link"; -import { BusyMessage } from "component/common.js"; -import lbryuri from "lbryuri"; +import React from 'react'; +import FileTile from 'component/fileTile'; +import ChannelTile from 'component/channelTile'; +import Link from 'component/link'; +import { BusyMessage } from 'component/common.js'; +import lbryuri from 'lbryuri'; const SearchNoResults = props => { const { query } = props; @@ -11,8 +11,8 @@ const SearchNoResults = props => { return ( <section> <span className="empty"> - {(__("No one has checked anything in for %s yet."), query)}{" "} - <Link label={__("Be the first")} navigate="/publish" /> + {(__('No one has checked anything in for %s yet.'), query)}{' '} + <Link label={__('Be the first')} navigate="/publish" /> </span> </section> ); @@ -38,18 +38,14 @@ class FileListSearch extends React.PureComponent { return ( <div> - {isSearching && - !uris && ( - <BusyMessage message={__("Looking up the Dewey Decimals")} /> - )} + {isSearching && !uris && <BusyMessage message={__('Looking up the Dewey Decimals')} />} - {isSearching && - uris && <BusyMessage message={__("Refreshing the Dewey Decimals")} />} + {isSearching && uris && <BusyMessage message={__('Refreshing the Dewey Decimals')} />} {uris && uris.length ? uris.map( uri => - lbryuri.parse(uri).name[0] === "@" ? ( + lbryuri.parse(uri).name[0] === '@' ? ( <ChannelTile key={uri} uri={uri} /> ) : ( <FileTile key={uri} uri={uri} /> diff --git a/src/renderer/component/filePrice/index.js b/src/renderer/component/filePrice/index.js index 7460b0a4e..93eaee79d 100644 --- a/src/renderer/component/filePrice/index.js +++ b/src/renderer/component/filePrice/index.js @@ -1,12 +1,12 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doFetchCostInfoForUri } from "redux/actions/cost_info"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchCostInfoForUri } from 'redux/actions/cost_info'; import { makeSelectCostInfoForUri, makeSelectFetchingCostInfoForUri, -} from "redux/selectors/cost_info"; -import { makeSelectClaimForUri } from "redux/selectors/claims"; -import FilePrice from "./view"; +} from 'redux/selectors/cost_info'; +import { makeSelectClaimForUri } from 'redux/selectors/claims'; +import FilePrice from './view'; const select = (state, props) => ({ costInfo: makeSelectCostInfoForUri(props.uri)(state), diff --git a/src/renderer/component/filePrice/view.jsx b/src/renderer/component/filePrice/view.jsx index a2b5067df..5a5947f14 100644 --- a/src/renderer/component/filePrice/view.jsx +++ b/src/renderer/component/filePrice/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import { CreditAmount } from "component/common"; +import React from 'react'; +import { CreditAmount } from 'component/common'; class FilePrice extends React.PureComponent { componentWillMount() { @@ -19,14 +19,12 @@ class FilePrice extends React.PureComponent { } render() { - const { costInfo, look = "indicator", showFullPrice = false } = this.props; + const { costInfo, look = 'indicator', showFullPrice = false } = this.props; const isEstimate = costInfo ? !costInfo.includesData : null; if (!costInfo) { - return ( - <span className={`credit-amount credit-amount--${look}`}>???</span> - ); + return <span className={`credit-amount credit-amount--${look}`}>???</span>; } return ( @@ -34,7 +32,7 @@ class FilePrice extends React.PureComponent { label={false} amount={costInfo.cost} isEstimate={isEstimate} - showFree={true} + showFree showFullPrice={showFullPrice} /> ); diff --git a/src/renderer/component/fileTile/index.js b/src/renderer/component/fileTile/index.js index f352b1633..601a94a7e 100644 --- a/src/renderer/component/fileTile/index.js +++ b/src/renderer/component/fileTile/index.js @@ -1,18 +1,12 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import { doResolveUri } from "redux/actions/content"; -import { - makeSelectClaimForUri, - makeSelectMetadataForUri, -} from "redux/selectors/claims"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; -import { selectShowNsfw } from "redux/selectors/settings"; -import { - makeSelectIsUriResolving, - selectRewardContentClaimIds, -} from "redux/selectors/content"; -import FileTile from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import { doResolveUri } from 'redux/actions/content'; +import { makeSelectClaimForUri, makeSelectMetadataForUri } from 'redux/selectors/claims'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; +import { selectShowNsfw } from 'redux/selectors/settings'; +import { makeSelectIsUriResolving, selectRewardContentClaimIds } from 'redux/selectors/content'; +import FileTile from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx index fbf3c9110..231cfc293 100644 --- a/src/renderer/component/fileTile/view.jsx +++ b/src/renderer/component/fileTile/view.jsx @@ -1,15 +1,15 @@ -import React from "react"; -import * as icons from "constants/icons"; -import lbryuri from "lbryuri.js"; -import CardMedia from "component/cardMedia"; -import { TruncatedText } from "component/common.js"; -import FilePrice from "component/filePrice"; -import NsfwOverlay from "component/nsfwOverlay"; -import Icon from "component/icon"; +import React from 'react'; +import * as icons from 'constants/icons'; +import lbryuri from 'lbryuri.js'; +import CardMedia from 'component/cardMedia'; +import { TruncatedText } from 'component/common.js'; +import FilePrice from 'component/filePrice'; +import NsfwOverlay from 'component/nsfwOverlay'; +import Icon from 'component/icon'; class FileTile extends React.PureComponent { - static SHOW_EMPTY_PUBLISH = "publish"; - static SHOW_EMPTY_PENDING = "pending"; + static SHOW_EMPTY_PUBLISH = 'publish'; + static SHOW_EMPTY_PENDING = 'pending'; static defaultProps = { showPrice: true, @@ -36,11 +36,7 @@ class FileTile extends React.PureComponent { } handleMouseOver() { - if ( - this.props.obscureNsfw && - this.props.metadata && - this.props.metadata.nsfw - ) { + if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { this.setState({ showNsfwHelp: true, }); @@ -73,59 +69,49 @@ class FileTile extends React.PureComponent { const isClaimed = !!claim; const isClaimable = lbryuri.isClaimable(uri); const title = - isClaimed && metadata && metadata.title - ? metadata.title - : lbryuri.parse(uri).contentName; - const thumbnail = - metadata && metadata.thumbnail ? metadata.thumbnail : null; + isClaimed && metadata && metadata.title ? metadata.title : lbryuri.parse(uri).contentName; + const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - const isRewardContent = - claim && rewardedContentClaimIds.includes(claim.claim_id); + const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id); - let onClick = () => navigate("/show", { uri }); + let onClick = () => navigate('/show', { uri }); - let name = ""; + let name = ''; if (claim) { name = claim.name; } - let description = ""; + let description = ''; if (isClaimed) { description = metadata && metadata.description; } else if (isResolvingUri) { - description = __("Loading..."); + description = __('Loading...'); } else if (showEmpty === FileTile.SHOW_EMPTY_PUBLISH) { - onClick = () => navigate("/publish", {}); + onClick = () => navigate('/publish', {}); description = ( <span className="empty"> - {__("This location is unused.")}{" "} - {isClaimable && ( - <span className="button-text">{__("Put something here!")}</span> - )} + {__('This location is unused.')}{' '} + {isClaimable && <span className="button-text">{__('Put something here!')}</span>} </span> ); } else if (showEmpty === FileTile.SHOW_EMPTY_PENDING) { - description = ( - <span className="empty"> - {__("This file is pending confirmation.")} - </span> - ); + description = <span className="empty">{__('This file is pending confirmation.')}</span>; } return ( <section - className={"file-tile card " + (obscureNsfw ? "card--obscured " : "")} + className={`file-tile card ${obscureNsfw ? 'card--obscured ' : ''}`} onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)} > <div onClick={onClick} className="card__link"> - <div className={"card__inner file-tile__row"}> + <div className="card__inner file-tile__row"> <CardMedia title={title || name} thumbnail={thumbnail} /> <div className="file-tile__content"> <div className="card__title-primary"> <span className="card__indicators"> - {showPrice && <FilePrice uri={this.props.uri} />}{" "} - {isRewardContent && <Icon icon={icons.FEATURED} />}{" "} + {showPrice && <FilePrice uri={this.props.uri} />}{' '} + {isRewardContent && <Icon icon={icons.FEATURED} />}{' '} {showLocal && fileInfo && <Icon icon={icons.LOCAL} />} </span> <h3> @@ -134,9 +120,7 @@ class FileTile extends React.PureComponent { </div> {description && ( <div className="card__content card__subtext"> - <TruncatedText lines={!showActions ? 3 : 2}> - {description} - </TruncatedText> + <TruncatedText lines={!showActions ? 3 : 2}>{description}</TruncatedText> </div> )} </div> diff --git a/src/renderer/component/form.js b/src/renderer/component/form.js index 229668ffe..135df952d 100644 --- a/src/renderer/component/form.js +++ b/src/renderer/component/form.js @@ -1,11 +1,11 @@ -import React from "react"; -import PropTypes from "prop-types"; -import FormField from "component/formField"; -import { Icon } from "component/common.js"; +import React from 'react'; +import PropTypes from 'prop-types'; +import FormField from 'component/formField'; +import { Icon } from 'component/common.js'; let formFieldCounter = 0; -export const formFieldNestedLabelTypes = ["radio", "checkbox"]; +export const formFieldNestedLabelTypes = ['radio', 'checkbox']; export function formFieldId() { return `form-field-${++formFieldCounter}`; @@ -26,11 +26,7 @@ export class Form extends React.PureComponent { } render() { - return ( - <form onSubmit={event => this.handleSubmit(event)}> - {this.props.children} - </form> - ); + return <form onSubmit={event => this.handleSubmit(event)}>{this.props.children}</form>; } } @@ -50,7 +46,7 @@ export class FormRow extends React.PureComponent { this._field = null; - this._fieldRequiredText = __("This field is required"); + this._fieldRequiredText = __('This field is required'); this.state = this.getStateFromProps(props); } @@ -63,11 +59,9 @@ export class FormRow extends React.PureComponent { return { isError: !!props.errorMessage, errorMessage: - typeof props.errorMessage === "string" + typeof props.errorMessage === 'string' ? props.errorMessage - : props.errorMessage instanceof Error - ? props.errorMessage.toString() - : "", + : props.errorMessage instanceof Error ? props.errorMessage.toString() : '', }; } @@ -85,7 +79,7 @@ export class FormRow extends React.PureComponent { clearError(text) { this.setState({ isError: false, - errorMessage: "", + errorMessage: '', }); } @@ -116,9 +110,7 @@ export class FormRow extends React.PureComponent { render() { const fieldProps = Object.assign({}, this.props), elementId = formFieldId(), - renderLabelInFormField = formFieldNestedLabelTypes.includes( - this.props.type - ); + renderLabelInFormField = formFieldNestedLabelTypes.includes(this.props.type); if (!renderLabelInFormField) { delete fieldProps.label; @@ -128,26 +120,24 @@ export class FormRow extends React.PureComponent { delete fieldProps.isFocus; return ( - <div - className={`form-row${this.state.isFocus ? " form-row--focus" : ""}`} - > + <div className={`form-row${this.state.isFocus ? ' form-row--focus' : ''}`}> {this.props.label && !renderLabelInFormField ? ( <div className={`form-row__label-row ${ - this.props.labelPrefix ? "form-row__label-row--prefix" : "" + this.props.labelPrefix ? 'form-row__label-row--prefix' : '' }`} > <label htmlFor={elementId} className={`form-field__label ${ - this.state.isError ? "form-field__label--error" : " " + this.state.isError ? 'form-field__label--error' : ' ' }`} > {this.props.label} </label> </div> ) : ( - "" + '' )} <FormField ref={ref => { @@ -161,12 +151,12 @@ export class FormRow extends React.PureComponent { {!this.state.isError && this.props.helper ? ( <div className="form-field__helper">{this.props.helper}</div> ) : ( - "" + '' )} {this.state.isError ? ( <div className="form-field__error">{this.state.errorMessage}</div> ) : ( - "" + '' )} </div> ); @@ -176,14 +166,14 @@ export class FormRow extends React.PureComponent { export const Submit = props => { const { title, label, icon, disabled } = props; - const className = `${"button-block" + - " button-primary" + - " button-set-item" + - " button--submit"}${disabled ? " disabled" : ""}`; + const className = `${'button-block' + + ' button-primary' + + ' button-set-item' + + ' button--submit'}${disabled ? ' disabled' : ''}`; const content = ( <span className="button__content"> - {"icon" in props ? <Icon icon={icon} fixed /> : null} + {'icon' in props ? <Icon icon={icon} fixed /> : null} {label ? <span className="button-label">{label}</span> : null} </span> ); diff --git a/src/renderer/component/formField/index.js b/src/renderer/component/formField/index.js index ca01b3e99..5977b6b2c 100644 --- a/src/renderer/component/formField/index.js +++ b/src/renderer/component/formField/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import FormField from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import FormField from './view'; export default connect(null, null, null, { withRef: true })(FormField); diff --git a/src/renderer/component/formField/view.jsx b/src/renderer/component/formField/view.jsx index bb8cc5024..960b08c17 100644 --- a/src/renderer/component/formField/view.jsx +++ b/src/renderer/component/formField/view.jsx @@ -1,11 +1,11 @@ -import React from "react"; -import PropTypes from "prop-types"; -import FileSelector from "component/file-selector.js"; -import SimpleMDE from "react-simplemde-editor"; -import { formFieldNestedLabelTypes, formFieldId } from "../form"; -import style from "react-simplemde-editor/dist/simplemde.min.css"; +import React from 'react'; +import PropTypes from 'prop-types'; +import FileSelector from 'component/file-selector.js'; +import SimpleMDE from 'react-simplemde-editor'; +import { formFieldNestedLabelTypes, formFieldId } from '../form'; +import style from 'react-simplemde-editor/dist/simplemde.min.css'; -const formFieldFileSelectorTypes = ["file", "directory"]; +const formFieldFileSelectorTypes = ['file', 'directory']; class FormField extends React.PureComponent { static propTypes = { @@ -14,10 +14,7 @@ class FormField extends React.PureComponent { postfix: PropTypes.string, hasError: PropTypes.bool, trim: PropTypes.bool, - regexp: PropTypes.oneOfType([ - PropTypes.instanceOf(RegExp), - PropTypes.string, - ]), + regexp: PropTypes.oneOfType([PropTypes.instanceOf(RegExp), PropTypes.string]), }; static defaultProps = { @@ -27,7 +24,7 @@ class FormField extends React.PureComponent { constructor(props) { super(props); - this._fieldRequiredText = __("This field is required"); + this._fieldRequiredText = __('This field is required'); this._type = null; this._element = null; this._extraElementProps = {}; @@ -39,22 +36,22 @@ class FormField extends React.PureComponent { } componentWillMount() { - if (["text", "number", "radio", "checkbox"].includes(this.props.type)) { - this._element = "input"; + if (['text', 'number', 'radio', 'checkbox'].includes(this.props.type)) { + this._element = 'input'; this._type = this.props.type; - } else if (this.props.type == "text-number") { - this._element = "input"; - this._type = "text"; - } else if (this.props.type == "SimpleMDE") { + } else if (this.props.type == 'text-number') { + this._element = 'input'; + this._type = 'text'; + } else if (this.props.type == 'SimpleMDE') { this._element = SimpleMDE; - this._type = "textarea"; + this._type = 'textarea'; this._extraElementProps.options = { placeholder: this.props.placeholder, - hideIcons: ["heading", "image", "fullscreen", "side-by-side"], + hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'], }; } else if (formFieldFileSelectorTypes.includes(this.props.type)) { - this._element = "input"; - this._type = "hidden"; + this._element = 'input'; + this._type = 'hidden'; } else { // Non <input> field, e.g. <select>, <textarea> this._element = this.props.type; @@ -66,7 +63,7 @@ class FormField extends React.PureComponent { * We have to add the webkitdirectory attribute here because React doesn't allow it in JSX * https://github.com/facebook/react/issues/3468 */ - if (this.props.type == "directory") { + if (this.props.type == 'directory') { this.refs.field.webkitdirectory = true; } } @@ -75,7 +72,7 @@ class FormField extends React.PureComponent { this.refs.field.value = path; if (this.props.onChange) { // Updating inputs programmatically doesn't generate an event, so we have to make our own - const event = new Event("change", { bubbles: true }); + const event = new Event('change', { bubbles: true }); this.refs.field.dispatchEvent(event); // This alone won't generate a React event, but we use it to attach the field as a target this.props.onChange(event); } @@ -91,20 +88,17 @@ class FormField extends React.PureComponent { clearError() { this.setState({ isError: false, - errorMessage: "", + errorMessage: '', }); } getValue() { - if (this.props.type == "checkbox") { + if (this.props.type == 'checkbox') { return this.refs.field.checked; - } else if (this.props.type == "SimpleMDE") { + } else if (this.props.type == 'SimpleMDE') { return this.refs.field.simplemde.value(); - } else { - return this.props.trim - ? this.refs.field.value.trim() - : this.refs.field.value; } + return this.props.trim ? this.refs.field.value.trim() : this.refs.field.value; } getSelectedElement() { @@ -116,9 +110,9 @@ class FormField extends React.PureComponent { } validate() { - if ("regexp" in this.props) { + if ('regexp' in this.props) { if (!this.getValue().match(this.props.regexp)) { - this.showError(__("Invalid format.")); + this.showError(__('Invalid format.')); } else { this.clearError(); } @@ -133,8 +127,7 @@ class FormField extends React.PureComponent { 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, + isError = this.state.isError !== null ? this.state.isError : this.props.hasError, elementId = this.props.elementId ? this.props.elementId : formFieldId(), renderElementInsideLabel = this.props.label && formFieldNestedLabelTypes.includes(this.props.type); @@ -158,13 +151,8 @@ class FormField extends React.PureComponent { placeholder={this.props.placeholder} onBlur={() => this.validate()} onFocus={() => this.props.onFocus && this.props.onFocus()} - className={ - "form-field__input form-field__input-" + - this.props.type + - " " + - (this.props.className || "") + - (isError ? "form-field__input--error" : "") - } + className={`form-field__input form-field__input-${this.props.type} ${this.props.className || + ''}${isError ? 'form-field__input--error' : ''}`} {...otherProps} {...this._extraElementProps} > @@ -173,19 +161,13 @@ class FormField extends React.PureComponent { ); return ( - <div className={"form-field form-field--" + this.props.type}> - {this.props.prefix ? ( - <span className="form-field__prefix">{this.props.prefix}</span> - ) : ( - "" - )} + <div className={`form-field form-field--${this.props.type}`}> + {this.props.prefix ? <span className="form-field__prefix">{this.props.prefix}</span> : ''} {element} {renderElementInsideLabel && ( <label htmlFor={elementId} - className={ - "form-field__label " + (isError ? "form-field__label--error" : "") - } + className={`form-field__label ${isError ? 'form-field__label--error' : ''}`} > {this.props.label} </label> @@ -194,20 +176,18 @@ class FormField extends React.PureComponent { <FileSelector type={this.props.type} onFileChosen={this.handleFileChosen.bind(this)} - {...(this.props.defaultValue - ? { initPath: this.props.defaultValue } - : {})} + {...(this.props.defaultValue ? { initPath: this.props.defaultValue } : {})} /> ) : null} {this.props.postfix ? ( <span className="form-field__postfix">{this.props.postfix}</span> ) : ( - "" + '' )} {isError && this.state.errorMessage ? ( <div className="form-field__error">{this.state.errorMessage}</div> ) : ( - "" + '' )} </div> ); diff --git a/src/renderer/component/formFieldPrice/index.js b/src/renderer/component/formFieldPrice/index.js index f56521afe..c3dea1781 100644 --- a/src/renderer/component/formFieldPrice/index.js +++ b/src/renderer/component/formFieldPrice/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import FormFieldPrice from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import FormFieldPrice from './view'; export default connect(null, null)(FormFieldPrice); diff --git a/src/renderer/component/formFieldPrice/view.jsx b/src/renderer/component/formFieldPrice/view.jsx index 6d9925960..71382bb47 100644 --- a/src/renderer/component/formFieldPrice/view.jsx +++ b/src/renderer/component/formFieldPrice/view.jsx @@ -1,18 +1,13 @@ -import React from "react"; -import FormField from "component/formField"; +import React from 'react'; +import FormField from 'component/formField'; class FormFieldPrice extends React.PureComponent { constructor(props) { super(props); this.state = { - amount: - props.defaultValue && props.defaultValue.amount - ? props.defaultValue.amount - : "", + amount: props.defaultValue && props.defaultValue.amount ? props.defaultValue.amount : '', currency: - props.defaultValue && props.defaultValue.currency - ? props.defaultValue.currency - : "LBC", + props.defaultValue && props.defaultValue.currency ? props.defaultValue.currency : 'LBC', }; } @@ -45,24 +40,20 @@ class FormFieldPrice extends React.PureComponent { name="amount" min={min} placeholder={placeholder || null} - step="any" //Unfortunately, you cannot set a step without triggering validation that enforces a multiple of the step + step="any" // Unfortunately, you cannot set a step without triggering validation that enforces a multiple of the step onChange={event => this.handleFeeAmountChange(event)} - defaultValue={ - defaultValue && defaultValue.amount ? defaultValue.amount : "" - } + defaultValue={defaultValue && defaultValue.amount ? defaultValue.amount : ''} className="form-field__input--inline" /> <FormField type="select" name="currency" onChange={event => this.handleFeeCurrencyChange(event)} - defaultValue={ - defaultValue && defaultValue.currency ? defaultValue.currency : "" - } + defaultValue={defaultValue && defaultValue.currency ? defaultValue.currency : ''} className="form-field__input--inline" > - <option value="LBC">{__("LBRY Credits (LBC)")}</option> - <option value="USD">{__("US Dollars")}</option> + <option value="LBC">{__('LBRY Credits (LBC)')}</option> + <option value="USD">{__('US Dollars')}</option> </FormField> </span> ); diff --git a/src/renderer/component/header/index.js b/src/renderer/component/header/index.js index 2491a1bc5..f25257214 100644 --- a/src/renderer/component/header/index.js +++ b/src/renderer/component/header/index.js @@ -1,19 +1,12 @@ -import React from "react"; -import { formatCredits } from "util/formatCredits"; -import { connect } from "react-redux"; -import { - selectIsBackDisabled, - selectIsForwardDisabled, -} from "redux/selectors/navigation"; -import { selectBalance } from "redux/selectors/wallet"; -import { - doNavigate, - doHistoryBack, - doHistoryForward, -} from "redux/actions/navigation"; -import Header from "./view"; -import { selectIsUpgradeAvailable } from "redux/selectors/app"; -import { doDownloadUpgrade } from "redux/actions/app"; +import React from 'react'; +import { formatCredits } from 'util/formatCredits'; +import { connect } from 'react-redux'; +import { selectIsBackDisabled, selectIsForwardDisabled } from 'redux/selectors/navigation'; +import { selectBalance } from 'redux/selectors/wallet'; +import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation'; +import Header from './view'; +import { selectIsUpgradeAvailable } from 'redux/selectors/app'; +import { doDownloadUpgrade } from 'redux/actions/app'; const select = state => ({ isBackDisabled: selectIsBackDisabled(state), diff --git a/src/renderer/component/header/view.jsx b/src/renderer/component/header/view.jsx index 1e83abbe7..f67cd9902 100644 --- a/src/renderer/component/header/view.jsx +++ b/src/renderer/component/header/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import Link from "component/link"; -import WunderBar from "component/wunderbar"; +import React from 'react'; +import Link from 'component/link'; +import WunderBar from 'component/wunderbar'; export const Header = props => { const { @@ -21,7 +21,7 @@ export const Header = props => { disabled={isBackDisabled} button="alt button--flat" icon="icon-arrow-left" - title={__("Back")} + title={__('Back')} /> </div> <div className="header__item"> @@ -30,59 +30,55 @@ export const Header = props => { disabled={isForwardDisabled} button="alt button--flat" icon="icon-arrow-right" - title={__("Forward")} + title={__('Forward')} /> </div> <div className="header__item"> <Link - onClick={() => navigate("/discover")} + onClick={() => navigate('/discover')} button="alt button--flat" icon="icon-home" - title={__("Discover Content")} + title={__('Discover Content')} /> </div> <div className="header__item"> - <Link - onClick={() => navigate("/subscriptions")} - button="alt button--flat" - icon="icon-at" - /> + <Link onClick={() => navigate('/subscriptions')} button="alt button--flat" icon="icon-at" /> </div> <div className="header__item header__item--wunderbar"> <WunderBar /> </div> <div className="header__item"> <Link - onClick={() => navigate("/wallet")} + onClick={() => navigate('/wallet')} button="text" className="no-underline" icon="icon-bank" label={balance} - title={__("Wallet")} + title={__('Wallet')} /> </div> <div className="header__item"> <Link - onClick={() => navigate("/publish")} + onClick={() => navigate('/publish')} button="primary button--flat" icon="icon-upload" - label={__("Publish")} + label={__('Publish')} /> </div> <div className="header__item"> <Link - onClick={() => navigate("/downloaded")} + onClick={() => navigate('/downloaded')} button="alt button--flat" icon="icon-folder" - title={__("Downloads and Publishes")} + title={__('Downloads and Publishes')} /> </div> <div className="header__item"> <Link - onClick={() => navigate("/settings")} + onClick={() => navigate('/settings')} button="alt button--flat" icon="icon-gear" - title={__("Settings")} + title={__('Settings')} /> </div> {isUpgradeAvailable && ( @@ -90,7 +86,7 @@ export const Header = props => { onClick={() => downloadUpgrade()} button="primary button--flat" icon="icon-arrow-up" - label={__("Upgrade App")} + label={__('Upgrade App')} /> )} </header> diff --git a/src/renderer/component/icon/index.js b/src/renderer/component/icon/index.js index 72b01f640..81d61e58b 100644 --- a/src/renderer/component/icon/index.js +++ b/src/renderer/component/icon/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import Icon from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import Icon from './view'; export default connect(null, null)(Icon); diff --git a/src/renderer/component/icon/view.jsx b/src/renderer/component/icon/view.jsx index ff772c467..d017bf5b5 100644 --- a/src/renderer/component/icon/view.jsx +++ b/src/renderer/component/icon/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import PropTypes from "prop-types"; -import * as icons from "constants/icons"; +import React from 'react'; +import PropTypes from 'prop-types'; +import * as icons from 'constants/icons'; export default class Icon extends React.PureComponent { static propTypes = { @@ -15,17 +15,17 @@ export default class Icon extends React.PureComponent { getIconClass() { const { icon } = this.props; - return icon.startsWith("icon-") ? icon : "icon-" + icon; + return icon.startsWith('icon-') ? icon : `icon-${icon}`; } getIconTitle() { switch (this.props.icon) { case icons.FEATURED: - return __("Watch this and earn rewards."); + return __('Watch this and earn rewards.'); case icons.LOCAL: - return __("You have a copy of this file."); + return __('You have a copy of this file.'); default: - return ""; + return ''; } } @@ -33,8 +33,7 @@ export default class Icon extends React.PureComponent { const className = this.getIconClass(), title = this.getIconTitle(); - const spanClassName = - "icon " + className + (this.props.fixed ? " icon-fixed-width " : ""); + const spanClassName = `icon ${className}${this.props.fixed ? ' icon-fixed-width ' : ''}`; return <span className={spanClassName} title={title} />; } diff --git a/src/renderer/component/inviteList/index.js b/src/renderer/component/inviteList/index.js index 638ce63f5..7dca63af5 100644 --- a/src/renderer/component/inviteList/index.js +++ b/src/renderer/component/inviteList/index.js @@ -1,10 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { - selectUserInvitees, - selectUserInviteStatusIsPending, -} from "redux/selectors/user"; -import InviteList from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectUserInvitees, selectUserInviteStatusIsPending } from 'redux/selectors/user'; +import InviteList from './view'; const select = state => ({ invitees: selectUserInvitees(state), diff --git a/src/renderer/component/inviteList/view.jsx b/src/renderer/component/inviteList/view.jsx index b02de3278..7cd5bfcb8 100644 --- a/src/renderer/component/inviteList/view.jsx +++ b/src/renderer/component/inviteList/view.jsx @@ -1,7 +1,7 @@ -import React from "react"; -import { Icon } from "component/common"; -import RewardLink from "component/rewardLink"; -import rewards from "rewards.js"; +import React from 'react'; +import { Icon } from 'component/common'; +import RewardLink from 'component/rewardLink'; +import rewards from 'rewards.js'; class InviteList extends React.PureComponent { render() { @@ -14,7 +14,7 @@ class InviteList extends React.PureComponent { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Invite History")}</h3> + <h3>{__('Invite History')}</h3> </div> <div className="card__content"> {invitees.length === 0 && ( @@ -24,38 +24,33 @@ class InviteList extends React.PureComponent { <table className="table-standard table-stretch"> <thead> <tr> - <th>{__("Invitee Email")}</th> - <th className="text-center">{__("Invite Status")}</th> - <th className="text-center">{__("Reward")}</th> + <th>{__('Invitee Email')}</th> + <th className="text-center">{__('Invite Status')}</th> + <th className="text-center">{__('Reward')}</th> </tr> </thead> <tbody> - {invitees.map((invitee, index) => { - return ( - <tr key={index}> - <td>{invitee.email}</td> - <td className="text-center"> - {invitee.invite_accepted ? ( - <Icon icon="icon-check" /> - ) : ( - <span className="empty">{__("unused")}</span> - )} - </td> - <td className="text-center"> - {invitee.invite_reward_claimed ? ( - <Icon icon="icon-check" /> - ) : invitee.invite_reward_claimable ? ( - <RewardLink - label={__("claim")} - reward_type={rewards.TYPE_REFERRAL} - /> - ) : ( - <span className="empty">{__("unclaimable")}</span> - )} - </td> - </tr> - ); - })} + {invitees.map((invitee, index) => ( + <tr key={index}> + <td>{invitee.email}</td> + <td className="text-center"> + {invitee.invite_accepted ? ( + <Icon icon="icon-check" /> + ) : ( + <span className="empty">{__('unused')}</span> + )} + </td> + <td className="text-center"> + {invitee.invite_reward_claimed ? ( + <Icon icon="icon-check" /> + ) : invitee.invite_reward_claimable ? ( + <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} /> + ) : ( + <span className="empty">{__('unclaimable')}</span> + )} + </td> + </tr> + ))} </tbody> </table> )} @@ -63,7 +58,7 @@ class InviteList extends React.PureComponent { <div className="card__content"> <div className="help"> {__( - "The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test." + 'The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test.' )} </div> </div> diff --git a/src/renderer/component/inviteNew/index.js b/src/renderer/component/inviteNew/index.js index c2d4e66ec..b0e00c8db 100644 --- a/src/renderer/component/inviteNew/index.js +++ b/src/renderer/component/inviteNew/index.js @@ -1,15 +1,15 @@ -import React from "react"; -import { connect } from "react-redux"; -import InviteNew from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import InviteNew from './view'; import { selectUserInvitesRemaining, selectUserInviteNewIsPending, selectUserInviteNewErrorMessage, -} from "redux/selectors/user"; -import rewards from "rewards"; -import { makeSelectRewardAmountByType } from "redux/selectors/rewards"; +} from 'redux/selectors/user'; +import rewards from 'rewards'; +import { makeSelectRewardAmountByType } from 'redux/selectors/rewards'; -import { doUserInviteNew } from "redux/actions/user"; +import { doUserInviteNew } from 'redux/actions/user'; const select = state => { const selectReward = makeSelectRewardAmountByType(); diff --git a/src/renderer/component/inviteNew/view.jsx b/src/renderer/component/inviteNew/view.jsx index 7eccf1cec..b7a76709f 100644 --- a/src/renderer/component/inviteNew/view.jsx +++ b/src/renderer/component/inviteNew/view.jsx @@ -1,13 +1,13 @@ -import React from "react"; -import { BusyMessage, CreditAmount } from "component/common"; -import { Form, FormRow, Submit } from "component/form.js"; +import React from 'react'; +import { BusyMessage, CreditAmount } from 'component/common'; +import { Form, FormRow, Submit } from 'component/form.js'; class FormInviteNew extends React.PureComponent { constructor(props) { super(props); this.state = { - email: "", + email: '', }; } @@ -39,7 +39,7 @@ class FormInviteNew extends React.PureComponent { }} /> <div className="form-row-submit"> - <Submit label={__("Send Invite")} disabled={isPending} /> + <Submit label={__('Send Invite')} disabled={isPending} /> </div> </Form> ); @@ -61,7 +61,7 @@ class InviteNew extends React.PureComponent { <section className="card"> <div className="card__title-primary"> <CreditAmount amount={rewardAmount} /> - <h3>{__("Invite a Friend")}</h3> + <h3>{__('Invite a Friend')}</h3> </div> {/* <div className="card__content"> @@ -71,16 +71,8 @@ class InviteNew extends React.PureComponent { <p className="empty">{__("You have no invites.")}</p>} </div> */} <div className="card__content"> - <p> - {__( - "Or an enemy. Or your cousin Jerry, who you're kind of unsure about." - )} - </p> - <FormInviteNew - errorMessage={errorMessage} - inviteNew={inviteNew} - isPending={isPending} - /> + <p>{__("Or an enemy. Or your cousin Jerry, who you're kind of unsure about.")}</p> + <FormInviteNew errorMessage={errorMessage} inviteNew={inviteNew} isPending={isPending} /> </div> </section> ); diff --git a/src/renderer/component/link/index.js b/src/renderer/component/link/index.js index d7c8b6a18..bfbd2cd77 100644 --- a/src/renderer/component/link/index.js +++ b/src/renderer/component/link/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import Link from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import Link from './view'; const perform = dispatch => ({ doNavigate: (path, params) => dispatch(doNavigate(path, params)), diff --git a/src/renderer/component/link/view.jsx b/src/renderer/component/link/view.jsx index cfb2a731b..93117e4b7 100644 --- a/src/renderer/component/link/view.jsx +++ b/src/renderer/component/link/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import Icon from "component/icon"; +import React from 'react'; +import Icon from 'component/icon'; const Link = props => { const { @@ -19,10 +19,10 @@ const Link = props => { } = props; const combinedClassName = - (className || "") + - (!className && !button ? "button-text" : "") + // Non-button links get the same look as text buttons - (button ? " button-block button-" + button + " button-set-item" : "") + - (disabled ? " disabled" : ""); + (className || '') + + (!className && !button ? 'button-text' : '') + // Non-button links get the same look as text buttons + (button ? ` button-block button-${button} button-set-item` : '') + + (disabled ? ' disabled' : ''); const onClick = !props.onClick && navigate @@ -36,10 +36,10 @@ const Link = props => { content = children; } else { content = ( - <span {...("button" in props ? { className: "button__content" } : {})}> - {icon ? <Icon icon={icon} fixed={true} /> : null} + <span {...('button' in props ? { className: 'button__content' } : {})}> + {icon ? <Icon icon={icon} fixed /> : null} {label ? <span className="link-label">{label}</span> : null} - {iconRight ? <Icon icon={iconRight} fixed={true} /> : null} + {iconRight ? <Icon icon={iconRight} fixed /> : null} </span> ); } @@ -47,10 +47,10 @@ const Link = props => { return ( <a className={combinedClassName} - href={href || "javascript:;"} + href={href || 'javascript:;'} title={title} onClick={onClick} - {...("style" in props ? { style: style } : {})} + {...('style' in props ? { style } : {})} > {content} </a> diff --git a/src/renderer/component/linkTransaction/index.js b/src/renderer/component/linkTransaction/index.js index 9983f1bfc..4f4aa23b7 100644 --- a/src/renderer/component/linkTransaction/index.js +++ b/src/renderer/component/linkTransaction/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import LinkTransaction from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import LinkTransaction from './view'; export default connect(null, null)(LinkTransaction); diff --git a/src/renderer/component/linkTransaction/view.jsx b/src/renderer/component/linkTransaction/view.jsx index e1fe32159..44e81c321 100644 --- a/src/renderer/component/linkTransaction/view.jsx +++ b/src/renderer/component/linkTransaction/view.jsx @@ -1,11 +1,11 @@ -import React from "react"; -import Link from "component/link"; +import React from 'react'; +import Link from 'component/link'; const LinkTransaction = props => { const { id } = props; const linkProps = Object.assign({}, props); - linkProps.href = "https://explorer.lbry.io/#!/transaction/" + id; + linkProps.href = `https://explorer.lbry.io/#!/transaction/${id}`; linkProps.label = id.substr(0, 7); return <Link {...linkProps} />; diff --git a/src/renderer/component/load_screen.js b/src/renderer/component/load_screen.js index c730954d7..5c990d37d 100644 --- a/src/renderer/component/load_screen.js +++ b/src/renderer/component/load_screen.js @@ -1,8 +1,8 @@ -import React from "react"; -import PropTypes from "prop-types"; -import lbry from "../lbry.js"; -import { BusyMessage, Icon } from "./common.js"; -import Link from "component/link"; +import React from 'react'; +import PropTypes from 'prop-types'; +import lbry from '../lbry.js'; +import { BusyMessage, Icon } from './common.js'; +import Link from 'component/link'; class LoadScreen extends React.PureComponent { static propTypes = { @@ -26,7 +26,7 @@ class LoadScreen extends React.PureComponent { }; render() { - const imgSrc = lbry.imagePath("lbry-white-485x160.png"); + const imgSrc = lbry.imagePath('lbry-white-485x160.png'); return ( <div className="load-screen"> <img src={imgSrc} alt="LBRY" /> @@ -43,7 +43,7 @@ class LoadScreen extends React.PureComponent { </h3> <span className={`load-screen__details ${ - this.props.isWarning ? "load-screen__details--warning" : "" + this.props.isWarning ? 'load-screen__details--warning' : '' }`} > {this.props.details} diff --git a/src/renderer/component/menu.js b/src/renderer/component/menu.js index 7ce07897c..c7c2e38de 100644 --- a/src/renderer/component/menu.js +++ b/src/renderer/component/menu.js @@ -1,7 +1,7 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { Icon } from "./common.js"; -import Link from "component/link"; +import React from 'react'; +import PropTypes from 'prop-types'; +import { Icon } from './common.js'; +import Link from 'component/link'; export class DropDownMenuItem extends React.PureComponent { static propTypes = { @@ -12,7 +12,7 @@ export class DropDownMenuItem extends React.PureComponent { }; static defaultProps = { - iconPosition: "left", + iconPosition: 'left', }; render() { @@ -22,12 +22,12 @@ export class DropDownMenuItem extends React.PureComponent { <a className="menu__menu-item" onClick={this.props.onClick} - href={this.props.href || "javascript:"} + href={this.props.href || 'javascript:'} label={this.props.label} > - {this.props.iconPosition == "left" ? icon : null} + {this.props.iconPosition == 'left' ? icon : null} {this.props.label} - {this.props.iconPosition == "left" ? null : icon} + {this.props.iconPosition == 'left' ? null : icon} </a> ); } @@ -47,7 +47,7 @@ export class DropDownMenu extends React.PureComponent { componentWillUnmount() { if (this._isWindowClickBound) { - window.removeEventListener("click", this.handleWindowClick, false); + window.removeEventListener('click', this.handleWindowClick, false); } } @@ -57,7 +57,7 @@ export class DropDownMenu extends React.PureComponent { }); if (!this.state.menuOpen && !this._isWindowClickBound) { this._isWindowClickBound = true; - window.addEventListener("click", this.handleWindowClick, false); + window.addEventListener('click', this.handleWindowClick, false); e.stopPropagation(); } return false; @@ -72,10 +72,7 @@ export class DropDownMenu extends React.PureComponent { /* this will force "this" to always be the class, even when passed to an event listener */ handleWindowClick = e => { - if ( - this.state.menuOpen && - (!this._menuDiv || !this._menuDiv.contains(e.target)) - ) { + if (this.state.menuOpen && (!this._menuDiv || !this._menuDiv.contains(e.target))) { this.setState({ menuOpen: false, }); @@ -85,7 +82,7 @@ export class DropDownMenu extends React.PureComponent { render() { if (!this.state.menuOpen && this._isWindowClickBound) { this._isWindowClickBound = false; - window.removeEventListener("click", this.handleWindowClick, false); + window.removeEventListener('click', this.handleWindowClick, false); } return ( <div className="menu-container"> diff --git a/src/renderer/component/nsfwOverlay/index.js b/src/renderer/component/nsfwOverlay/index.js index aa847f16f..1343bd7c7 100644 --- a/src/renderer/component/nsfwOverlay/index.js +++ b/src/renderer/component/nsfwOverlay/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import NsfwOverlay from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import NsfwOverlay from './view'; const perform = dispatch => ({ - navigateSettings: () => dispatch(doNavigate("/settings")), + navigateSettings: () => dispatch(doNavigate('/settings')), }); export default connect(null, perform)(NsfwOverlay); diff --git a/src/renderer/component/nsfwOverlay/view.jsx b/src/renderer/component/nsfwOverlay/view.jsx index fc7fc19dd..c89fe6da9 100644 --- a/src/renderer/component/nsfwOverlay/view.jsx +++ b/src/renderer/component/nsfwOverlay/view.jsx @@ -1,21 +1,17 @@ -import React from "react"; -import Link from "component/link"; +import React from 'react'; +import Link from 'component/link'; -const NsfwOverlay = props => { - return ( - <div className="card-overlay"> - <p> - {__( - "This content is Not Safe For Work. To view adult content, please change your" - )}{" "} - <Link - className="button-text" - onClick={() => props.navigateSettings()} - label={__("Settings")} - />. - </p> - </div> - ); -}; +const NsfwOverlay = props => ( + <div className="card-overlay"> + <p> + {__('This content is Not Safe For Work. To view adult content, please change your')}{' '} + <Link + className="button-text" + onClick={() => props.navigateSettings()} + label={__('Settings')} + />. + </p> + </div> +); export default NsfwOverlay; diff --git a/src/renderer/component/publishForm/index.js b/src/renderer/component/publishForm/index.js index df41581d9..de3ba7663 100644 --- a/src/renderer/component/publishForm/index.js +++ b/src/renderer/component/publishForm/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import PublishForm from "./view"; -import { selectBalance } from "redux/selectors/wallet"; +import React from 'react'; +import { connect } from 'react-redux'; +import PublishForm from './view'; +import { selectBalance } from 'redux/selectors/wallet'; const select = state => ({ balance: selectBalance(state), diff --git a/src/renderer/component/publishForm/internal/channelSection.jsx b/src/renderer/component/publishForm/internal/channelSection.jsx index 49c560f65..6b4be16c6 100644 --- a/src/renderer/component/publishForm/internal/channelSection.jsx +++ b/src/renderer/component/publishForm/internal/channelSection.jsx @@ -1,15 +1,15 @@ -import React from "react"; -import lbryuri from "lbryuri"; -import { FormRow } from "component/form.js"; -import { BusyMessage } from "component/common"; -import Link from "component/link"; +import React from 'react'; +import lbryuri from 'lbryuri'; +import { FormRow } from 'component/form.js'; +import { BusyMessage } from 'component/common'; +import Link from 'component/link'; class ChannelSection extends React.PureComponent { constructor(props) { super(props); this.state = { - newChannelName: "@", + newChannelName: '@', newChannelBid: 10, addingChannel: false, }; @@ -17,7 +17,7 @@ class ChannelSection extends React.PureComponent { handleChannelChange(event) { const channel = event.target.value; - if (channel === "new") this.setState({ addingChannel: true }); + if (channel === 'new') this.setState({ addingChannel: true }); else { this.setState({ addingChannel: false }); this.props.handleChannelChange(event.target.value); @@ -25,21 +25,17 @@ class ChannelSection extends React.PureComponent { } handleNewChannelNameChange(event) { - const newChannelName = event.target.value.startsWith("@") + const newChannelName = event.target.value.startsWith('@') ? event.target.value - : "@" + event.target.value; + : `@${event.target.value}`; - if ( - newChannelName.length > 1 && - !lbryuri.isValidName(newChannelName.substr(1), false) - ) { + if (newChannelName.length > 1 && !lbryuri.isValidName(newChannelName.substr(1), false)) { this.refs.newChannelName.showError( - __("LBRY channel names must contain only letters, numbers and dashes.") + __('LBRY channel names must contain only letters, numbers and dashes.') ); return; - } else { - this.refs.newChannelName.clearError(); } + this.refs.newChannelName.clearError(); this.setState({ newChannelName, @@ -57,9 +53,7 @@ class ChannelSection extends React.PureComponent { const { newChannelBid } = this.state; if (newChannelBid > balance) { - this.refs.newChannelName.showError( - __("Unable to create channel due to insufficient funds.") - ); + this.refs.newChannelName.showError(__('Unable to create channel due to insufficient funds.')); return; } @@ -85,19 +79,17 @@ class ChannelSection extends React.PureComponent { this.setState({ creatingChannel: false, }); - this.refs.newChannelName.showError( - __("Unable to create channel due to an internal error.") - ); + this.refs.newChannelName.showError(__('Unable to create channel due to an internal error.')); }; this.props.createChannel(newChannelName, amount).then(success, failure); } render() { const lbcInputHelp = __( - "This LBC remains yours. It is a deposit to reserve the name and can be undone at any time." + 'This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.' ); - const channel = this.state.addingChannel ? "new" : this.props.channel; + const channel = this.state.addingChannel ? 'new' : this.props.channel; const { fetchingChannels, channels = [] } = this.props; const channelSelector = ( @@ -109,7 +101,7 @@ class ChannelSection extends React.PureComponent { value={channel} > <option key="anonymous" value="anonymous"> - {__("Anonymous")} + {__('Anonymous')} </option> {channels.map(({ name }) => ( <option key={name} value={name}> @@ -117,7 +109,7 @@ class ChannelSection extends React.PureComponent { </option> ))} <option key="new" value="new"> - {__("New channel...")} + {__('New channel...')} </option> </FormRow> ); @@ -125,12 +117,10 @@ class ChannelSection extends React.PureComponent { return ( <section className="card"> <div className="card__title-primary"> - <h4>{__("Channel Name")}</h4> + <h4>{__('Channel Name')}</h4> <div className="card__subtitle"> - {__( - "This is a username or handle that your content can be found under." - )}{" "} - {__("Ex. @Marvel, @TheBeatles, @BooksByJoe")} + {__('This is a username or handle that your content can be found under.')}{' '} + {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')} </div> </div> <div className="card__content"> @@ -143,13 +133,13 @@ class ChannelSection extends React.PureComponent { {this.state.addingChannel && ( <div className="card__content"> <FormRow - label={__("Name")} + label={__('Name')} type="text" onChange={this.handleNewChannelNameChange.bind(this)} value={this.state.newChannelName} /> <FormRow - label={__("Deposit")} + label={__('Deposit')} postfix="LBC" step="any" min="0" @@ -163,9 +153,7 @@ class ChannelSection extends React.PureComponent { <Link button="primary" label={ - !this.state.creatingChannel - ? __("Create channel") - : __("Creating channel...") + !this.state.creatingChannel ? __('Create channel') : __('Creating channel...') } onClick={this.handleCreateChannelClick.bind(this)} disabled={this.state.creatingChannel} diff --git a/src/renderer/component/publishForm/view.jsx b/src/renderer/component/publishForm/view.jsx index 5a82737d9..1d407f908 100644 --- a/src/renderer/component/publishForm/view.jsx +++ b/src/renderer/component/publishForm/view.jsx @@ -1,44 +1,44 @@ -import React from "react"; -import lbry from "lbry"; -import lbryuri from "lbryuri"; -import FormField from "component/formField"; -import { Form, FormRow, Submit } from "component/form.js"; -import Link from "component/link"; -import FormFieldPrice from "component/formFieldPrice"; -import Modal from "modal/modal"; -import { BusyMessage } from "component/common"; -import ChannelSection from "./internal/channelSection"; +import React from 'react'; +import lbry from 'lbry'; +import lbryuri from 'lbryuri'; +import FormField from 'component/formField'; +import { Form, FormRow, Submit } from 'component/form.js'; +import Link from 'component/link'; +import FormFieldPrice from 'component/formFieldPrice'; +import Modal from 'modal/modal'; +import { BusyMessage } from 'component/common'; +import ChannelSection from './internal/channelSection'; class PublishForm extends React.PureComponent { constructor(props) { super(props); - this._requiredFields = ["name", "bid", "meta_title", "tosAgree"]; + this._requiredFields = ['name', 'bid', 'meta_title', 'tosAgree']; - this._defaultCopyrightNotice = "All rights reserved."; + this._defaultCopyrightNotice = 'All rights reserved.'; this._defaultPaidPrice = 0.01; this.state = { id: null, uri: null, - rawName: "", - name: "", + rawName: '', + name: '', bid: 10, hasFile: false, - feeAmount: "", - feeCurrency: "LBC", - channel: "anonymous", - newChannelName: "@", + feeAmount: '', + feeCurrency: 'LBC', + channel: 'anonymous', + newChannelName: '@', newChannelBid: 10, - meta_title: "", - meta_thumbnail: "", - meta_description: "", - meta_language: "en", - meta_nsfw: "0", - licenseType: "", + meta_title: '', + meta_thumbnail: '', + meta_description: '', + meta_language: 'en', + meta_nsfw: '0', + licenseType: '', copyrightNotice: this._defaultCopyrightNotice, - otherLicenseDescription: "", - otherLicenseUrl: "", + otherLicenseDescription: '', + otherLicenseUrl: '', tosAgree: false, prefillDone: false, uploadProgress: 0.0, @@ -50,7 +50,7 @@ class PublishForm extends React.PureComponent { isFee: false, customUrl: false, source: null, - mode: "publish", + mode: 'publish', }; } @@ -65,7 +65,7 @@ class PublishForm extends React.PureComponent { const { bid } = this.state; if (bid > balance) { - this.handlePublishError({ message: "insufficient funds" }); + this.handlePublishError({ message: 'insufficient funds' }); return; } @@ -74,16 +74,16 @@ class PublishForm extends React.PureComponent { submitting: true, }); - let checkFields = this._requiredFields; + const checkFields = this._requiredFields; if (!this.myClaimExists()) { - checkFields.unshift("file"); + checkFields.unshift('file'); } let missingFieldFound = false; - for (let fieldName of checkFields) { + for (const fieldName of checkFields) { const field = this.refs[fieldName]; if (field) { - if (field.getValue() === "" || field.getValue() === false) { + if (field.getValue() === '' || field.getValue() === false) { field.showRequiredError(); if (!missingFieldFound) { field.focus(); @@ -102,10 +102,10 @@ class PublishForm extends React.PureComponent { return; } - let metadata = {}; + const metadata = {}; - for (let metaField of ["title", "description", "thumbnail", "language"]) { - const value = this.state["meta_" + metaField]; + for (const metaField of ['title', 'description', 'thumbnail', 'language']) { + const value = this.state[`meta_${metaField}`]; if (value) { metadata[metaField] = value; } @@ -115,19 +115,19 @@ class PublishForm extends React.PureComponent { metadata.licenseUrl = this.getLicenseUrl(); metadata.nsfw = !!parseInt(this.state.meta_nsfw); - var doPublish = () => { - var publishArgs = { + const doPublish = () => { + const publishArgs = { name: this.state.name, bid: parseFloat(this.state.bid), - metadata: metadata, - ...(this.state.channel != "new" && this.state.channel != "anonymous" + metadata, + ...(this.state.channel != 'new' && this.state.channel != 'anonymous' ? { channel_name: this.state.channel } : {}), }; const { source } = this.state; - if (this.refs.file.getValue() !== "") { + if (this.refs.file.getValue() !== '') { publishArgs.file_path = this.refs.file.getValue(); } else if (source) { publishArgs.sources = source; @@ -145,7 +145,7 @@ class PublishForm extends React.PureComponent { metadata.fee = { currency: this.state.feeCurrency, amount: parseFloat(this.state.feeAmount), - address: address, + address, }; doPublish(); @@ -157,18 +157,18 @@ class PublishForm extends React.PureComponent { handlePublishStarted() { this.setState({ - modal: "publishStarted", + modal: 'publishStarted', }); } handlePublishStartedConfirmed() { - this.props.navigate("/published"); + this.props.navigate('/published'); } handlePublishError(error) { this.setState({ submitting: false, - modal: "error", + modal: 'error', errorMessage: error.message, }); } @@ -220,13 +220,11 @@ class PublishForm extends React.PureComponent { myClaimInfo() { const { id } = this.state; - return Object.values(this.props.myClaims).find( - claim => claim.claim_id === id - ); + return Object.values(this.props.myClaims).find(claim => claim.claim_id === id); } handleNameChange(event) { - var rawName = event.target.value; + const rawName = event.target.value; this.setState({ customUrl: Boolean(rawName.length), }); @@ -237,33 +235,31 @@ class PublishForm extends React.PureComponent { nameChanged(rawName) { if (!rawName) { this.setState({ - rawName: "", - name: "", - uri: "", + rawName: '', + name: '', + uri: '', prefillDone: false, - mode: "publish", + mode: 'publish', }); return; } if (!lbryuri.isValidName(rawName, false)) { - this.refs.name.showError( - __("LBRY names must contain only letters, numbers and dashes.") - ); + this.refs.name.showError(__('LBRY names must contain only letters, numbers and dashes.')); return; } - let channel = ""; - if (this.state.channel !== "anonymous") channel = this.state.channel; + let channel = ''; + if (this.state.channel !== 'anonymous') channel = this.state.channel; const name = rawName.toLowerCase(); const uri = lbryuri.build({ contentName: name, channelName: channel }); this.setState({ - rawName: rawName, - name: name, + rawName, + name, prefillDone: false, - mode: "publish", + mode: 'publish', uri, }); @@ -282,26 +278,18 @@ class PublishForm extends React.PureComponent { const { claim_id, name, channel_name, amount } = claimInfo; const { source, metadata } = claimInfo.value.stream; - const { - license, - licenseUrl, - title, - thumbnail, - description, - language, - nsfw, - } = metadata; + const { license, licenseUrl, title, thumbnail, description, language, nsfw } = metadata; - let newState = { + const newState = { id: claim_id, - channel: channel_name || "anonymous", + channel: channel_name || 'anonymous', bid: amount, meta_title: title, meta_thumbnail: thumbnail, meta_description: description, meta_language: language, meta_nsfw: nsfw, - mode: "edit", + mode: 'edit', prefillDone: true, rawName: name, name, @@ -309,21 +297,18 @@ class PublishForm extends React.PureComponent { }; if (license == this._defaultCopyrightNotice) { - newState.licenseType = "copyright"; + newState.licenseType = 'copyright'; newState.copyrightNotice = this._defaultCopyrightNotice; } else { // If the license URL or description matches one of the drop-down options, use that - let licenseType = "other"; // Will be overridden if we find a match - for (let option of this._meta_license.getOptions()) { - if ( - option.getAttribute("data-url") === licenseUrl || - option.text === license - ) { + let licenseType = 'other'; // Will be overridden if we find a match + for (const option of this._meta_license.getOptions()) { + if (option.getAttribute('data-url') === licenseUrl || option.text === license) { licenseType = option.value; } } - if (licenseType == "other") { + if (licenseType == 'other') { newState.otherLicenseDescription = license; newState.otherLicenseUrl = licenseUrl; } @@ -349,10 +334,7 @@ class PublishForm extends React.PureComponent { handleFeePrefChange(feeEnabled) { this.setState({ isFee: feeEnabled, - feeAmount: - this.state.feeAmount == "" - ? this._defaultPaidPrice - : this.state.feeAmount, + feeAmount: this.state.feeAmount == '' ? this._defaultPaidPrice : this.state.feeAmount, }); } @@ -363,7 +345,7 @@ class PublishForm extends React.PureComponent { * more complex logic and the final value is determined at submit time. */ this.setState({ - ["meta_" + event.target.name]: event.target.value, + [`meta_${event.target.name}`]: event.target.value, }); } @@ -399,7 +381,7 @@ class PublishForm extends React.PureComponent { handleChannelChange(channelName) { this.setState({ - mode: "publish", + mode: 'publish', channel: channelName, }); const nameChanged = () => this.nameChanged(this.state.rawName); @@ -414,9 +396,9 @@ class PublishForm extends React.PureComponent { getLicense() { switch (this.state.licenseType) { - case "copyright": + case 'copyright': return this.state.copyrightNotice; - case "other": + case 'other': return this.state.otherLicenseDescription; default: return this._meta_license.getSelectedElement().text; @@ -425,12 +407,12 @@ class PublishForm extends React.PureComponent { getLicenseUrl() { switch (this.state.licenseType) { - case "copyright": - return ""; - case "other": + case 'copyright': + return ''; + case 'other': return this.state.otherLicenseUrl; default: - return this._meta_license.getSelectedElement().getAttribute("data-url"); + return this._meta_license.getSelectedElement().getAttribute('data-url'); } } @@ -450,8 +432,8 @@ class PublishForm extends React.PureComponent { const { mode } = this.state; if (this.refs.file.getValue()) { this.setState({ hasFile: true }); - if (!this.state.customUrl && mode !== "edit") { - let fileName = this._getFileName(this.refs.file.getValue()); + if (!this.state.customUrl && mode !== 'edit') { + const fileName = this._getFileName(this.refs.file.getValue()); this.nameChanged(fileName); } } else { @@ -460,11 +442,11 @@ class PublishForm extends React.PureComponent { } _getFileName(fileName) { - const path = require("path"); + const path = require('path'); const extension = path.extname(fileName); fileName = path.basename(fileName, extension); - fileName = fileName.replace(lbryuri.REGEXP_INVALID_URI, ""); + fileName = fileName.replace(lbryuri.REGEXP_INVALID_URI, ''); return fileName; } @@ -474,23 +456,20 @@ class PublishForm extends React.PureComponent { const claim = this.claim(); if (prefillDone) { - return __("Existing claim data was prefilled"); + return __('Existing claim data was prefilled'); } if (uri && resolvingUris.indexOf(uri) !== -1 && claim === undefined) { - return __("Checking..."); + return __('Checking...'); } else if (!name) { - return __("Select a URL for this publish."); + return __('Select a URL for this publish.'); } else if (!claim) { - return __("This URL is unused."); + return __('This URL is unused.'); } else if (this.myClaimExists() && !prefillDone) { return ( <span> - {__("You already have a claim with this name.")}{" "} - <Link - label={__("Edit existing claim")} - onClick={() => this.handleEditClaim()} - /> + {__('You already have a claim with this name.')}{' '} + <Link label={__('Edit existing claim')} onClick={() => this.handleEditClaim()} /> </span> ); } else if (claim) { @@ -504,20 +483,18 @@ class PublishForm extends React.PureComponent { )} </span> ); - } else { - return ( - <span> - {__( - 'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.', - topClaimValue, - name - )} - </span> - ); } - } else { - return ""; + return ( + <span> + {__( + 'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.', + topClaimValue, + name + )} + </span> + ); } + return ''; } closeModal() { @@ -529,14 +506,12 @@ class PublishForm extends React.PureComponent { render() { const { mode, submitting } = this.state; - const lbcInputHelp = __( - "This LBC remains yours and the deposit can be undone at any time." - ); + const lbcInputHelp = __('This LBC remains yours and the deposit can be undone at any time.'); - let submitLabel = !submitting ? __("Publish") : __("Publishing..."); + let submitLabel = !submitting ? __('Publish') : __('Publishing...'); - if (mode === "edit") { - submitLabel = !submitting ? __("Update") : __("Updating..."); + if (mode === 'edit') { + submitLabel = !submitting ? __('Update') : __('Updating...'); } return ( @@ -544,10 +519,8 @@ class PublishForm extends React.PureComponent { <Form onSubmit={this.handleSubmit.bind(this)}> <section className="card"> <div className="card__title-primary"> - <h4>{__("Content")}</h4> - <div className="card__subtitle"> - {__("What are you publishing?")} - </div> + <h4>{__('Content')}</h4> + <div className="card__subtitle">{__('What are you publishing?')}</div> </div> <div className="card__content"> <FormRow @@ -571,7 +544,7 @@ class PublishForm extends React.PureComponent { <div className="card__content"> <FormRow ref="meta_title" - label={__("Title")} + label={__('Title')} type="text" name="title" value={this.state.meta_title} @@ -584,7 +557,7 @@ class PublishForm extends React.PureComponent { <div className="card__content"> <FormRow type="text" - label={__("Thumbnail URL")} + label={__('Thumbnail URL')} name="thumbnail" value={this.state.meta_thumbnail} placeholder="http://spee.ch/mylogo" @@ -596,11 +569,11 @@ class PublishForm extends React.PureComponent { <div className="card__content"> <FormRow type="SimpleMDE" - label={__("Description")} + label={__('Description')} ref="meta_description" name="description" value={this.state.meta_description} - placeholder={__("Description of your content")} + placeholder={__('Description of your content')} onChange={text => { this.handleDescriptionChanged(text); }} @@ -608,7 +581,7 @@ class PublishForm extends React.PureComponent { </div> <div className="card__content"> <FormRow - label={__("Language")} + label={__('Language')} type="select" value={this.state.meta_language} name="language" @@ -616,19 +589,19 @@ class PublishForm extends React.PureComponent { this.handleMetadataChange(event); }} > - <option value="en">{__("English")}</option> - <option value="zh">{__("Chinese")}</option> - <option value="fr">{__("French")}</option> - <option value="de">{__("German")}</option> - <option value="jp">{__("Japanese")}</option> - <option value="ru">{__("Russian")}</option> - <option value="es">{__("Spanish")}</option> + <option value="en">{__('English')}</option> + <option value="zh">{__('Chinese')}</option> + <option value="fr">{__('French')}</option> + <option value="de">{__('German')}</option> + <option value="jp">{__('Japanese')}</option> + <option value="ru">{__('Russian')}</option> + <option value="es">{__('Spanish')}</option> </FormRow> </div> <div className="card__content"> <FormRow type="select" - label={__("Maturity")} + label={__('Maturity')} value={this.state.meta_nsfw} name="nsfw" onChange={event => { @@ -636,8 +609,8 @@ class PublishForm extends React.PureComponent { }} > {/* <option value=""></option> */} - <option value="0">{__("All Ages")}</option> - <option value="1">{__("Adults Only")}</option> + <option value="0">{__('All Ages')}</option> + <option value="1">{__('Adults Only')}</option> </FormRow> </div> </div> @@ -646,14 +619,12 @@ class PublishForm extends React.PureComponent { <section className="card"> <div className="card__title-primary"> - <h4>{__("Price")}</h4> - <div className="card__subtitle"> - {__("How much does this content cost?")} - </div> + <h4>{__('Price')}</h4> + <div className="card__subtitle">{__('How much does this content cost?')}</div> </div> <div className="card__content"> <FormRow - label={__("Free")} + label={__('Free')} type="radio" name="isFree" onChange={() => this.handleFeePrefChange(false)} @@ -662,27 +633,26 @@ class PublishForm extends React.PureComponent { <FormField type="radio" name="isFree" - label={!this.state.isFee ? __("Choose price...") : __("Price ")} + label={!this.state.isFee ? __('Choose price...') : __('Price ')} onChange={() => { this.handleFeePrefChange(true); }} checked={this.state.isFee} /> - <span className={!this.state.isFee ? "hidden" : ""}> + <span className={!this.state.isFee ? 'hidden' : ''}> <FormFieldPrice min="0" defaultValue={{ amount: this._defaultPaidPrice, - currency: "LBC", + currency: 'LBC', }} onChange={val => this.handleFeeChange(val)} /> </span> - {this.state.isFee && - this.state.feeCurrency.toUpperCase() != "LBC" ? ( + {this.state.isFee && this.state.feeCurrency.toUpperCase() != 'LBC' ? ( <div className="form-field__helper"> {__( - "All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase." + 'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.' )} </div> ) : null} @@ -690,7 +660,7 @@ class PublishForm extends React.PureComponent { </section> <section className="card"> <div className="card__title-primary"> - <h4>{__("License")}</h4> + <h4>{__('License')}</h4> </div> <div className="card__content"> <FormRow @@ -703,61 +673,51 @@ class PublishForm extends React.PureComponent { this.handleLicenseTypeChange(event); }} > - <option>{__("None")}</option> - <option value="publicDomain">{__("Public Domain")}</option> + <option>{__('None')}</option> + <option value="publicDomain">{__('Public Domain')}</option> <option value="cc-by" data-url="https://creativecommons.org/licenses/by/4.0/legalcode" > - {__("Creative Commons Attribution 4.0 International")} + {__('Creative Commons Attribution 4.0 International')} </option> <option value="cc-by-sa" data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode" > - {__( - "Creative Commons Attribution-ShareAlike 4.0 International" - )} + {__('Creative Commons Attribution-ShareAlike 4.0 International')} </option> <option value="cc-by-nd" data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode" > - {__( - "Creative Commons Attribution-NoDerivatives 4.0 International" - )} + {__('Creative Commons Attribution-NoDerivatives 4.0 International')} </option> <option value="cc-by-nc" data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode" > - {__( - "Creative Commons Attribution-NonCommercial 4.0 International" - )} + {__('Creative Commons Attribution-NonCommercial 4.0 International')} </option> <option value="cc-by-nc-sa" data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode" > - {__( - "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" - )} + {__('Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International')} </option> <option value="cc-by-nc-nd" data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode" > - {__( - "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International" - )} + {__('Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International')} </option> - <option value="copyright">{__("Copyrighted...")}</option> - <option value="other">{__("Other...")}</option> + <option value="copyright">{__('Copyrighted...')}</option> + <option value="other">{__('Other...')}</option> </FormRow> - {this.state.licenseType == "copyright" ? ( + {this.state.licenseType == 'copyright' ? ( <FormRow - label={__("Copyright notice")} + label={__('Copyright notice')} type="text" name="copyright-notice" value={this.state.copyrightNotice} @@ -767,9 +727,9 @@ class PublishForm extends React.PureComponent { /> ) : null} - {this.state.licenseType == "other" ? ( + {this.state.licenseType == 'other' ? ( <FormRow - label={__("License description")} + label={__('License description')} type="text" name="other-license-description" value={this.state.otherLicenseDescription} @@ -779,9 +739,9 @@ class PublishForm extends React.PureComponent { /> ) : null} - {this.state.licenseType == "other" ? ( + {this.state.licenseType == 'other' ? ( <FormRow - label={__("License URL")} + label={__('License URL')} type="text" name="other-license-url" value={this.state.otherLicenseUrl} @@ -801,23 +761,18 @@ class PublishForm extends React.PureComponent { <section className="card"> <div className="card__title-primary"> - <h4>{__("Content URL")}</h4> + <h4>{__('Content URL')}</h4> <div className="card__subtitle"> {__( - "This is the exact address where people find your content (ex. lbry://myvideo)." - )}{" "} - <Link - label={__("Learn more")} - href="https://lbry.io/faq/naming" - />. + 'This is the exact address where people find your content (ex. lbry://myvideo).' + )}{' '} + <Link label={__('Learn more')} href="https://lbry.io/faq/naming" />. </div> </div> <div className="card__content"> <FormRow prefix={`lbry://${ - this.state.channel === "anonymous" - ? "" - : `${this.state.channel}/` + this.state.channel === 'anonymous' ? '' : `${this.state.channel}/` }`} type="text" ref="name" @@ -835,7 +790,7 @@ class PublishForm extends React.PureComponent { ref="bid" type="number" step="any" - label={__("Deposit")} + label={__('Deposit')} postfix="LBC" onChange={event => { this.handleBidChange(event); @@ -847,23 +802,23 @@ class PublishForm extends React.PureComponent { /> </div> ) : ( - "" + '' )} </section> <section className="card"> <div className="card__title-primary"> - <h4>{__("Terms of Service")}</h4> + <h4>{__('Terms of Service')}</h4> </div> <div className="card__content"> <FormRow ref="tosAgree" label={ <span> - {__("I agree to the")}{" "} + {__('I agree to the')}{' '} <Link href="https://www.lbry.io/termsofservice" - label={__("LBRY terms of service")} + label={__('LBRY terms of service')} /> </span> } @@ -878,36 +833,27 @@ class PublishForm extends React.PureComponent { <div className="card-series-submit"> <Submit - label={ - !this.state.submitting ? __("Publish") : __("Publishing...") - } + label={!this.state.submitting ? __('Publish') : __('Publishing...')} disabled={ this.props.balance <= 0 || this.state.submitting || - (this.state.uri && - this.props.resolvingUris.indexOf(this.state.uri) !== -1) || - (this.claim() && - !this.topClaimIsMine() && - this.state.bid <= this.topClaimValue()) + (this.state.uri && this.props.resolvingUris.indexOf(this.state.uri) !== -1) || + (this.claim() && !this.topClaimIsMine() && this.state.bid <= this.topClaimValue()) } /> - <Link - button="cancel" - onClick={this.props.back} - label={__("Cancel")} - /> + <Link button="cancel" onClick={this.props.back} label={__('Cancel')} /> </div> </Form> <Modal - isOpen={this.state.modal == "publishStarted"} - contentLabel={__("File published")} + isOpen={this.state.modal == 'publishStarted'} + contentLabel={__('File published')} onConfirmed={event => { this.handlePublishStartedConfirmed(event); }} > <p> - {__("Your file has been published to LBRY at the address")}{" "} + {__('Your file has been published to LBRY at the address')}{' '} <code>{this.state.uri}</code>! </p> <p> @@ -917,15 +863,14 @@ class PublishForm extends React.PureComponent { </p> </Modal> <Modal - isOpen={this.state.modal == "error"} - contentLabel={__("Error publishing file")} + isOpen={this.state.modal == 'error'} + contentLabel={__('Error publishing file')} onConfirmed={event => { this.closeModal(event); }} > - {__( - "The following error occurred when attempting to publish your file" - )}: {this.state.errorMessage} + {__('The following error occurred when attempting to publish your file')}:{' '} + {this.state.errorMessage} </Modal> </main> ); diff --git a/src/renderer/component/rewardLink/index.js b/src/renderer/component/rewardLink/index.js index 04eb383af..2fc1654a4 100644 --- a/src/renderer/component/rewardLink/index.js +++ b/src/renderer/component/rewardLink/index.js @@ -1,16 +1,13 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { makeSelectClaimRewardError, makeSelectRewardByType, makeSelectIsRewardClaimPending, -} from "redux/selectors/rewards"; -import { doNavigate } from "redux/actions/navigation"; -import { - doClaimRewardType, - doClaimRewardClearError, -} from "redux/actions/rewards"; -import RewardLink from "./view"; +} from 'redux/selectors/rewards'; +import { doNavigate } from 'redux/actions/navigation'; +import { doClaimRewardType, doClaimRewardClearError } from 'redux/actions/rewards'; +import RewardLink from './view'; const makeSelect = () => { const selectIsPending = makeSelectIsRewardClaimPending(); diff --git a/src/renderer/component/rewardLink/view.jsx b/src/renderer/component/rewardLink/view.jsx index 05271feb8..f15bb9c99 100644 --- a/src/renderer/component/rewardLink/view.jsx +++ b/src/renderer/component/rewardLink/view.jsx @@ -1,33 +1,23 @@ -import React from "react"; -import Modal from "modal/modal"; -import Link from "component/link"; +import React from 'react'; +import Modal from 'modal/modal'; +import Link from 'component/link'; const RewardLink = props => { - const { - reward, - button, - claimReward, - clearError, - errorMessage, - label, - isPending, - } = props; + const { reward, button, claimReward, clearError, errorMessage, label, isPending } = props; return ( <div className="reward-link"> <Link button={button} disabled={isPending} - label={ - isPending ? __("Claiming...") : label ? label : __("Claim Reward") - } + label={isPending ? __('Claiming...') : label || __('Claim Reward')} onClick={() => { claimReward(reward); }} /> {errorMessage ? ( <Modal - isOpen={true} + isOpen contentLabel="Reward Claim Error" className="error-modal" onConfirmed={() => { @@ -37,7 +27,7 @@ const RewardLink = props => { {errorMessage} </Modal> ) : ( - "" + '' )} </div> ); diff --git a/src/renderer/component/rewardListClaimed/index.js b/src/renderer/component/rewardListClaimed/index.js index 45f98bdc5..212341cda 100644 --- a/src/renderer/component/rewardListClaimed/index.js +++ b/src/renderer/component/rewardListClaimed/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectClaimedRewards } from "redux/selectors/rewards"; -import RewardListClaimed from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectClaimedRewards } from 'redux/selectors/rewards'; +import RewardListClaimed from './view'; const select = state => ({ rewards: selectClaimedRewards(state), diff --git a/src/renderer/component/rewardListClaimed/view.jsx b/src/renderer/component/rewardListClaimed/view.jsx index ea1d7a208..63f422fa1 100644 --- a/src/renderer/component/rewardListClaimed/view.jsx +++ b/src/renderer/component/rewardListClaimed/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import LinkTransaction from "component/linkTransaction"; +import React from 'react'; +import LinkTransaction from 'component/linkTransaction'; const RewardListClaimed = props => { const { rewards } = props; @@ -17,27 +17,23 @@ const RewardListClaimed = props => { <table className="table-standard table-stretch"> <thead> <tr> - <th>{__("Title")}</th> - <th>{__("Amount")}</th> - <th>{__("Transaction")}</th> - <th>{__("Date")}</th> + <th>{__('Title')}</th> + <th>{__('Amount')}</th> + <th>{__('Transaction')}</th> + <th>{__('Date')}</th> </tr> </thead> <tbody> - {rewards.map(reward => { - return ( - <tr key={reward.id}> - <td>{reward.reward_title}</td> - <td>{reward.reward_amount}</td> - <td> - <LinkTransaction id={reward.transaction_id} /> - </td> - <td> - {reward.created_at.replace("Z", " ").replace("T", " ")} - </td> - </tr> - ); - })} + {rewards.map(reward => ( + <tr key={reward.id}> + <td>{reward.reward_title}</td> + <td>{reward.reward_amount}</td> + <td> + <LinkTransaction id={reward.transaction_id} /> + </td> + <td>{reward.created_at.replace('Z', ' ').replace('T', ' ')}</td> + </tr> + ))} </tbody> </table> </div> diff --git a/src/renderer/component/rewardSummary/index.js b/src/renderer/component/rewardSummary/index.js index a2b64dfbb..54124dfda 100644 --- a/src/renderer/component/rewardSummary/index.js +++ b/src/renderer/component/rewardSummary/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectUnclaimedRewardValue } from "redux/selectors/rewards"; -import RewardSummary from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectUnclaimedRewardValue } from 'redux/selectors/rewards'; +import RewardSummary from './view'; const select = state => ({ unclaimedRewardAmount: selectUnclaimedRewardValue(state), diff --git a/src/renderer/component/rewardSummary/view.jsx b/src/renderer/component/rewardSummary/view.jsx index e214d67a1..766586c27 100644 --- a/src/renderer/component/rewardSummary/view.jsx +++ b/src/renderer/component/rewardSummary/view.jsx @@ -1,7 +1,7 @@ // @flow -import React from "react"; -import Link from "component/link"; -import { CreditAmount } from "component/common"; +import React from 'react'; +import Link from 'component/link'; +import { CreditAmount } from 'component/common'; type Props = { unclaimedRewardAmount: number, @@ -13,29 +13,20 @@ const RewardSummary = (props: Props) => { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Rewards")}</h3> + <h3>{__('Rewards')}</h3> </div> <div className="card__content"> {unclaimedRewardAmount > 0 ? ( <p> - {__("You have")}{" "} - <CreditAmount amount={unclaimedRewardAmount} precision={8} />{" "} - {__("in unclaimed rewards")}. + {__('You have')} <CreditAmount amount={unclaimedRewardAmount} precision={8} />{' '} + {__('in unclaimed rewards')}. </p> ) : ( - <p> - {__( - "There are no rewards available at this time, please check back later" - )}. - </p> + <p>{__('There are no rewards available at this time, please check back later')}.</p> )} </div> <div className="card__actions"> - <Link - button="primary" - navigate="/rewards" - label={__("Claim Rewards")} - /> + <Link button="primary" navigate="/rewards" label={__('Claim Rewards')} /> </div> </section> ); diff --git a/src/renderer/component/rewardTile/index.js b/src/renderer/component/rewardTile/index.js index 2a1f0f485..ade2a1db9 100644 --- a/src/renderer/component/rewardTile/index.js +++ b/src/renderer/component/rewardTile/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import RewardTile from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import RewardTile from './view'; export default connect(null, null)(RewardTile); diff --git a/src/renderer/component/rewardTile/view.jsx b/src/renderer/component/rewardTile/view.jsx index bc6af7313..6cbfcc4cd 100644 --- a/src/renderer/component/rewardTile/view.jsx +++ b/src/renderer/component/rewardTile/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import { CreditAmount, Icon } from "component/common"; -import RewardLink from "component/rewardLink"; -import Link from "component/link"; -import rewards from "rewards"; +import React from 'react'; +import { CreditAmount, Icon } from 'component/common'; +import RewardLink from 'component/rewardLink'; +import Link from 'component/link'; +import rewards from 'rewards'; const RewardTile = props => { const { reward } = props; @@ -19,12 +19,12 @@ const RewardTile = props => { <div className="card__content">{reward.reward_description}</div> <div className="card__actions "> {reward.reward_type == rewards.TYPE_REFERRAL && ( - <Link button="alt" navigate="/invite" label={__("Go To Invites")} /> + <Link button="alt" navigate="/invite" label={__('Go To Invites')} /> )} {reward.reward_type !== rewards.TYPE_REFERRAL && (claimed ? ( <span> - <Icon icon="icon-check" /> {__("Reward claimed.")} + <Icon icon="icon-check" /> {__('Reward claimed.')} </span> ) : ( <RewardLink button="alt" reward_type={reward.reward_type} /> diff --git a/src/renderer/component/router/index.js b/src/renderer/component/router/index.js index ed413c66f..df1adc161 100644 --- a/src/renderer/component/router/index.js +++ b/src/renderer/component/router/index.js @@ -1,10 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import Router from "./view.jsx"; -import { - selectCurrentPage, - selectCurrentParams, -} from "redux/selectors/navigation.js"; +import React from 'react'; +import { connect } from 'react-redux'; +import Router from './view.jsx'; +import { selectCurrentPage, selectCurrentParams } from 'redux/selectors/navigation.js'; const select = state => ({ params: selectCurrentParams(state), diff --git a/src/renderer/component/router/view.jsx b/src/renderer/component/router/view.jsx index 4a8a82c70..b65e830fe 100644 --- a/src/renderer/component/router/view.jsx +++ b/src/renderer/component/router/view.jsx @@ -1,23 +1,23 @@ -import React from "react"; -import SettingsPage from "page/settings"; -import HelpPage from "page/help"; -import ReportPage from "page/report.js"; -import WalletPage from "page/wallet"; -import GetCreditsPage from "../../page/getCredits"; -import SendReceivePage from "page/sendCredits"; -import ShowPage from "page/show"; -import PublishPage from "page/publish"; -import DiscoverPage from "page/discover"; -import RewardsPage from "page/rewards"; -import FileListDownloaded from "page/fileListDownloaded"; -import FileListPublished from "page/fileListPublished"; -import TransactionHistoryPage from "page/transactionHistory"; -import ChannelPage from "page/channel"; -import SearchPage from "page/search"; -import AuthPage from "page/auth"; -import InvitePage from "page/invite"; -import BackupPage from "page/backup"; -import SubscriptionsPage from "page/subscriptions"; +import React from 'react'; +import SettingsPage from 'page/settings'; +import HelpPage from 'page/help'; +import ReportPage from 'page/report.js'; +import WalletPage from 'page/wallet'; +import GetCreditsPage from '../../page/getCredits'; +import SendReceivePage from 'page/sendCredits'; +import ShowPage from 'page/show'; +import PublishPage from 'page/publish'; +import DiscoverPage from 'page/discover'; +import RewardsPage from 'page/rewards'; +import FileListDownloaded from 'page/fileListDownloaded'; +import FileListPublished from 'page/fileListPublished'; +import TransactionHistoryPage from 'page/transactionHistory'; +import ChannelPage from 'page/channel'; +import SearchPage from 'page/search'; +import AuthPage from 'page/auth'; +import InvitePage from 'page/invite'; +import BackupPage from 'page/backup'; +import SubscriptionsPage from 'page/subscriptions'; const route = (page, routesMap) => { const component = routesMap[page]; diff --git a/src/renderer/component/shapeShift/index.js b/src/renderer/component/shapeShift/index.js index 74bfb0565..0c0cb5409 100644 --- a/src/renderer/component/shapeShift/index.js +++ b/src/renderer/component/shapeShift/index.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux'; import { createShapeShift, shapeShiftInit, getCoinStats, clearShapeShift, getActiveShift, -} from "redux/actions/shape_shift"; -import { doShowSnackBar } from "redux/actions/app"; -import { selectReceiveAddress } from "redux/selectors/wallet"; -import { selectShapeShift } from "redux/selectors/shape_shift"; -import ShapeShift from "./view"; +} from 'redux/actions/shape_shift'; +import { doShowSnackBar } from 'redux/actions/app'; +import { selectReceiveAddress } from 'redux/selectors/wallet'; +import { selectShapeShift } from 'redux/selectors/shape_shift'; +import ShapeShift from './view'; const select = state => ({ receiveAddress: selectReceiveAddress(state), diff --git a/src/renderer/component/shapeShift/internal/active-shift.jsx b/src/renderer/component/shapeShift/internal/active-shift.jsx index 40e5cad40..ae2e83348 100644 --- a/src/renderer/component/shapeShift/internal/active-shift.jsx +++ b/src/renderer/component/shapeShift/internal/active-shift.jsx @@ -1,11 +1,11 @@ // @flow -import * as React from "react"; -import QRCode from "qrcode.react"; -import * as statuses from "constants/shape_shift"; -import Address from "component/address"; -import Link from "component/link"; -import type { Dispatch } from "redux/actions/shape_shift"; -import ShiftMarketInfo from "./market_info"; +import * as React from 'react'; +import QRCode from 'qrcode.react'; +import * as statuses from 'constants/shape_shift'; +import Address from 'component/address'; +import Link from 'component/link'; +import type { Dispatch } from 'redux/actions/shape_shift'; +import ShiftMarketInfo from './market_info'; type Props = { shiftState: ?string, @@ -78,10 +78,10 @@ class ActiveShapeShift extends React.PureComponent<Props> { {shiftState === statuses.NO_DEPOSITS && ( <div> <p> - Send up to{" "} + Send up to{' '} <span className="credit-amount--bold"> {originCoinDepositMax} {shiftCoinType} - </span>{" "} + </span>{' '} to the address below. </p> <ShiftMarketInfo @@ -104,41 +104,32 @@ class ActiveShapeShift extends React.PureComponent<Props> { {shiftState === statuses.RECEIVED && ( <div className="card__content--extra-vertical-space"> <p> - {__( - "ShapeShift has received your payment! Sending the funds to your LBRY wallet." - )} + {__('ShapeShift has received your payment! Sending the funds to your LBRY wallet.')} </p> - <span className="help"> - {__("This can take a while, especially with BTC.")} - </span> + <span className="help">{__('This can take a while, especially with BTC.')}</span> </div> )} {shiftState === statuses.COMPLETE && ( <div className="card__content--extra-vertical-space"> - <p> - {__( - "Transaction complete! You should see the new LBC in your wallet." - )} - </p> + <p>{__('Transaction complete! You should see the new LBC in your wallet.')}</p> </div> )} <div className="card__actions card__actions--only-vertical"> <Link - button={shiftState === statuses.COMPLETE ? "primary" : "alt"} + button={shiftState === statuses.COMPLETE ? 'primary' : 'alt'} onClick={clearShapeShift} label={ - shiftState === statuses.COMPLETE || - shiftState === statuses.RECEIVED - ? __("Done") - : __("Cancel") + shiftState === statuses.COMPLETE || shiftState === statuses.RECEIVED + ? __('Done') + : __('Cancel') } /> {shiftOrderId && ( <span className="shapeshift__link"> <Link button="text" - label={__("View the status on Shapeshift.io")} + label={__('View the status on Shapeshift.io')} href={`https://shapeshift.io/#/status/${shiftOrderId}`} /> </span> @@ -147,8 +138,8 @@ class ActiveShapeShift extends React.PureComponent<Props> { shiftReturnAddress && ( <div className="shapeshift__actions-help"> <span className="help"> - If the transaction doesn't go through, ShapeShift will return - your {shiftCoinType} back to {shiftReturnAddress} + If the transaction doesn't go through, ShapeShift will return your {shiftCoinType}{' '} + back to {shiftReturnAddress} </span> </div> )} diff --git a/src/renderer/component/shapeShift/internal/form.jsx b/src/renderer/component/shapeShift/internal/form.jsx index 8a59c3a4c..f70ebe2d8 100644 --- a/src/renderer/component/shapeShift/internal/form.jsx +++ b/src/renderer/component/shapeShift/internal/form.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import Link from "component/link"; -import { getExampleAddress } from "util/shape_shift"; -import { Submit, FormRow } from "component/form"; -import type { ShapeShiftFormValues, Dispatch } from "redux/actions/shape_shift"; -import ShiftMarketInfo from "./market_info"; +import React from 'react'; +import Link from 'component/link'; +import { getExampleAddress } from 'util/shape_shift'; +import { Submit, FormRow } from 'component/form'; +import type { ShapeShiftFormValues, Dispatch } from 'redux/actions/shape_shift'; +import ShiftMarketInfo from './market_info'; type ShapeShiftFormErrors = { returnAddress?: string, @@ -50,7 +50,7 @@ export default (props: Props) => { return ( <form onSubmit={handleSubmit}> <div className="form-field"> - <span>{__("Exchange")} </span> + <span>{__('Exchange')} </span> <select className="form-field__input form-field__input-select" name="originCoin" @@ -65,7 +65,7 @@ export default (props: Props) => { </option> ))} </select> - <span> {__("for LBC")}</span> + <span> {__('for LBC')}</span> <div className="shapeshift__tx-info"> {!updating && originCoinDepositMax && ( @@ -84,7 +84,7 @@ export default (props: Props) => { type="text" name="returnAddress" placeholder={getExampleAddress(originCoin)} - label={__("Return address")} + label={__('Return address')} onChange={handleChange} onBlur={handleBlur} value={values.returnAddress} @@ -93,14 +93,13 @@ export default (props: Props) => { /> <span className="help"> <span> - ({__("optional but recommended")}) {__("We will return your")}{" "} - {originCoin}{" "} + ({__('optional but recommended')}) {__('We will return your')} {originCoin}{' '} {__("to this address if the transaction doesn't go through.")} </span> </span> <div className="card__actions card__actions--only-vertical"> <Submit - label={__("Begin Conversion")} + label={__('Begin Conversion')} disabled={isSubmitting || !!Object.keys(errors).length} /> </div> diff --git a/src/renderer/component/shapeShift/internal/market_info.jsx b/src/renderer/component/shapeShift/internal/market_info.jsx index 2d7395b81..cbea4bd4f 100644 --- a/src/renderer/component/shapeShift/internal/market_info.jsx +++ b/src/renderer/component/shapeShift/internal/market_info.jsx @@ -1,5 +1,5 @@ // @flow -import React from "react"; +import React from 'react'; type Props = { shapeShiftRate: ?number, @@ -21,13 +21,13 @@ export default (props: Props) => { return ( <div> <span className="help"> - {__("Receive")} {shapeShiftRate} LBC - {" / "} - {"1"} {originCoin} {__("less")} {originCoinDepositFee} LBC {__("fee")}. + {__('Receive')} {shapeShiftRate} LBC + {' / '} + {'1'} {originCoin} {__('less')} {originCoinDepositFee} LBC {__('fee')}. <br /> - {__("Exchange max")}: {originCoinDepositMax} {originCoin} + {__('Exchange max')}: {originCoinDepositMax} {originCoin} <br /> - {__("Exchange min")}: {originCoinDepositMin} {originCoin} + {__('Exchange min')}: {originCoinDepositMin} {originCoin} </span> </div> ); diff --git a/src/renderer/component/shapeShift/view.jsx b/src/renderer/component/shapeShift/view.jsx index a90a203cb..d1db01eeb 100644 --- a/src/renderer/component/shapeShift/view.jsx +++ b/src/renderer/component/shapeShift/view.jsx @@ -1,18 +1,18 @@ // @flow -import * as React from "react"; -import { shell } from "electron"; -import { Formik } from "formik"; -import classnames from "classnames"; -import * as statuses from "constants/shape_shift"; -import { validateShapeShiftForm } from "util/shape_shift"; -import Link from "component/link"; -import Spinner from "component/common/spinner"; -import { BusyMessage } from "component/common"; -import ShapeShiftForm from "./internal/form"; -import ActiveShapeShift from "./internal/active-shift"; +import * as React from 'react'; +import { shell } from 'electron'; +import { Formik } from 'formik'; +import classnames from 'classnames'; +import * as statuses from 'constants/shape_shift'; +import { validateShapeShiftForm } from 'util/shape_shift'; +import Link from 'component/link'; +import Spinner from 'component/common/spinner'; +import { BusyMessage } from 'component/common'; +import ShapeShiftForm from './internal/form'; +import ActiveShapeShift from './internal/active-shift'; -import type { ShapeShiftState } from "redux/reducers/shape_shift"; -import type { Dispatch, ShapeShiftFormValues } from "redux/actions/shape_shift"; +import type { ShapeShiftState } from 'redux/reducers/shape_shift'; +import type { Dispatch, ShapeShiftFormValues } from 'redux/actions/shape_shift'; type Props = { shapeShift: ShapeShiftState, @@ -27,10 +27,7 @@ type Props = { class ShapeShift extends React.PureComponent<Props> { componentDidMount() { - const { - shapeShiftInit, - shapeShift: { hasActiveShift, shiftSupportedCoins }, - } = this.props; + const { shapeShiftInit, shapeShift: { hasActiveShift, shiftSupportedCoins } } = this.props; if (!hasActiveShift && !shiftSupportedCoins.length) { // calls shapeshift to see list of supported coins for shifting @@ -70,8 +67,8 @@ class ShapeShift extends React.PureComponent<Props> { const initialFormValues: ShapeShiftFormValues = { receiveAddress, - originCoin: "BTC", - returnAddress: "", + originCoin: 'BTC', + returnAddress: '', }; return ( @@ -80,19 +77,17 @@ class ShapeShift extends React.PureComponent<Props> { // if the markup below changes for the initial render (form.jsx) there will be content jumping // the styling in shapeshift.scss will need to be updated to the correct min-height <section - className={classnames("card shapeshift__wrapper", { - "shapeshift__initial-wrapper": loading, + className={classnames('card shapeshift__wrapper', { + 'shapeshift__initial-wrapper': loading, })} > <div className="card__title-primary"> - <h3>{__("Convert Crypto to LBC")}</h3> + <h3>{__('Convert Crypto to LBC')}</h3> <p className="help"> - {__("Powered by ShapeShift. Read our FAQ")}{" "} - <Link href="https://lbry.io/faq/shapeshift">{__("here")}</Link>. + {__('Powered by ShapeShift. Read our FAQ')}{' '} + <Link href="https://lbry.io/faq/shapeshift">{__('here')}</Link>. {hasActiveShift && - shiftState !== "complete" && ( - <span>{__("This will update automatically.")}</span> - )} + shiftState !== 'complete' && <span>{__('This will update automatically.')}</span>} </p> </div> diff --git a/src/renderer/component/snackBar/index.js b/src/renderer/component/snackBar/index.js index 64dc70196..9600fdd68 100644 --- a/src/renderer/component/snackBar/index.js +++ b/src/renderer/component/snackBar/index.js @@ -1,8 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doRemoveSnackBarSnack } from "redux/actions/app"; -import { selectSnackBarSnacks } from "redux/selectors/app"; -import SnackBar from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doRemoveSnackBarSnack } from 'redux/actions/app'; +import { selectSnackBarSnacks } from 'redux/selectors/app'; +import SnackBar from './view'; const perform = dispatch => ({ removeSnack: () => dispatch(doRemoveSnackBarSnack()), diff --git a/src/renderer/component/snackBar/view.jsx b/src/renderer/component/snackBar/view.jsx index a04aa3145..2205cab3d 100644 --- a/src/renderer/component/snackBar/view.jsx +++ b/src/renderer/component/snackBar/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import Link from "component/link"; +import React from 'react'; +import Link from 'component/link'; class SnackBar extends React.PureComponent { constructor(props) { @@ -13,7 +13,7 @@ class SnackBar extends React.PureComponent { const { snacks, removeSnack } = this.props; if (!snacks.length) { - this._hideTimeout = null; //should be unmounting anyway, but be safe? + this._hideTimeout = null; // should be unmounting anyway, but be safe? return null; } @@ -32,11 +32,7 @@ class SnackBar extends React.PureComponent { {message} {linkText && linkTarget && ( - <Link - navigate={linkTarget} - className="snack-bar__action" - label={linkText} - /> + <Link navigate={linkTarget} className="snack-bar__action" label={linkText} /> )} </div> ); diff --git a/src/renderer/component/splash/index.js b/src/renderer/component/splash/index.js index 1337d9516..d57d014aa 100644 --- a/src/renderer/component/splash/index.js +++ b/src/renderer/component/splash/index.js @@ -1,12 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; -import { - selectCurrentModal, - selectDaemonVersionMatched, -} from "redux/selectors/app"; -import { doCheckDaemonVersion } from "redux/actions/app"; -import SplashScreen from "./view"; +import { selectCurrentModal, selectDaemonVersionMatched } from 'redux/selectors/app'; +import { doCheckDaemonVersion } from 'redux/actions/app'; +import SplashScreen from './view'; const select = state => ({ modal: selectCurrentModal(state), diff --git a/src/renderer/component/splash/view.jsx b/src/renderer/component/splash/view.jsx index 5697eb7cd..02bb7c237 100644 --- a/src/renderer/component/splash/view.jsx +++ b/src/renderer/component/splash/view.jsx @@ -1,11 +1,11 @@ -import React from "react"; -import PropTypes from "prop-types"; -import lbry from "lbry.js"; -import LoadScreen from "../load_screen.js"; -import ModalIncompatibleDaemon from "modal/modalIncompatibleDaemon"; -import ModalUpgrade from "modal/modalUpgrade"; -import ModalDownloading from "modal/modalDownloading"; -import * as modals from "constants/modal_types"; +import React from 'react'; +import PropTypes from 'prop-types'; +import lbry from 'lbry.js'; +import LoadScreen from '../load_screen.js'; +import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon'; +import ModalUpgrade from 'modal/modalUpgrade'; +import ModalDownloading from 'modal/modalDownloading'; +import * as modals from 'constants/modal_types'; export class SplashScreen extends React.PureComponent { static propTypes = { @@ -17,8 +17,8 @@ export class SplashScreen extends React.PureComponent { super(props); this.state = { - details: __("Starting daemon"), - message: __("Connecting"), + details: __('Starting daemon'), + message: __('Connecting'), isRunning: false, isLagging: false, }; @@ -32,19 +32,19 @@ export class SplashScreen extends React.PureComponent { _updateStatusCallback(status) { const startupStatus = status.startup_status; - if (startupStatus.code == "started") { + if (startupStatus.code == 'started') { // Wait until we are able to resolve a name before declaring // that we are done. // TODO: This is a hack, and the logic should live in the daemon // to give us a better sense of when we are actually started this.setState({ - message: __("Testing Network"), - details: __("Waiting for name resolution"), + message: __('Testing Network'), + details: __('Waiting for name resolution'), isLagging: false, isRunning: true, }); - lbry.resolve({ uri: "lbry://one" }).then(() => { + lbry.resolve({ uri: 'lbry://one' }).then(() => { // Only leave the load screen if the daemon version matched; // otherwise we'll notify the user at the end of the load screen. @@ -54,24 +54,18 @@ export class SplashScreen extends React.PureComponent { }); return; } - if ( - status.blockchain_status && - status.blockchain_status.blocks_behind > 0 - ) { + if (status.blockchain_status && status.blockchain_status.blocks_behind > 0) { const format = - status.blockchain_status.blocks_behind == 1 - ? "%s block behind" - : "%s blocks behind"; + status.blockchain_status.blocks_behind == 1 ? '%s block behind' : '%s blocks behind'; this.setState({ - message: __("Blockchain Sync"), + message: __('Blockchain Sync'), details: __(format, status.blockchain_status.blocks_behind), isLagging: startupStatus.is_lagging, }); } else { this.setState({ - message: __("Network Loading"), - details: - startupStatus.message + (startupStatus.is_lagging ? "" : "..."), + message: __('Network Loading'), + details: startupStatus.message + (startupStatus.is_lagging ? '' : '...'), isLagging: startupStatus.is_lagging, }); } @@ -90,9 +84,9 @@ export class SplashScreen extends React.PureComponent { .catch(() => { this.setState({ isLagging: true, - message: __("Connection Failure"), + message: __('Connection Failure'), details: __( - "Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug." + 'Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug.' ), }); }); @@ -104,19 +98,13 @@ export class SplashScreen extends React.PureComponent { return ( <div> - <LoadScreen - message={message} - details={details} - isWarning={isLagging} - /> + <LoadScreen message={message} details={details} isWarning={isLagging} /> {/* Temp hack: don't show any modals on splash screen daemon is running; daemon doesn't let you quit during startup, so the "Quit" buttons in the modals won't work. */} - {modal == "incompatibleDaemon" && - isRunning && <ModalIncompatibleDaemon />} + {modal == 'incompatibleDaemon' && isRunning && <ModalIncompatibleDaemon />} {modal == modals.UPGRADE && isRunning && <ModalUpgrade />} - {modal == modals.DOWNLOADING && - isRunning && <ModalDownloading />} + {modal == modals.DOWNLOADING && isRunning && <ModalDownloading />} </div> ); } diff --git a/src/renderer/component/subHeader/index.js b/src/renderer/component/subHeader/index.js index d74d46306..e550952c2 100644 --- a/src/renderer/component/subHeader/index.js +++ b/src/renderer/component/subHeader/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { - selectCurrentPage, - selectHeaderLinks, -} from "redux/selectors/navigation"; -import { doNavigate } from "redux/actions/navigation"; -import SubHeader from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectCurrentPage, selectHeaderLinks } from 'redux/selectors/navigation'; +import { doNavigate } from 'redux/actions/navigation'; +import SubHeader from './view'; const select = (state, props) => ({ currentPage: selectCurrentPage(state), diff --git a/src/renderer/component/subHeader/view.jsx b/src/renderer/component/subHeader/view.jsx index 5a3b09d5f..65227dc72 100644 --- a/src/renderer/component/subHeader/view.jsx +++ b/src/renderer/component/subHeader/view.jsx @@ -1,20 +1,18 @@ -import React from "react"; -import Link from "component/link"; -import classnames from "classnames"; +import React from 'react'; +import Link from 'component/link'; +import classnames from 'classnames'; const SubHeader = props => { const { subLinks, currentPage, navigate, fullWidth, smallMargin } = props; const links = []; - for (let link of Object.keys(subLinks)) { + for (const link of Object.keys(subLinks)) { links.push( <Link onClick={event => navigate(`/${link}`, event)} key={link} - className={ - link == currentPage ? "sub-header-selected" : "sub-header-unselected" - } + className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected'} > {subLinks[link]} </Link> @@ -23,9 +21,9 @@ const SubHeader = props => { return ( <nav - className={classnames("sub-header", { - "sub-header--full-width": fullWidth, - "sub-header--small-margin": smallMargin, + className={classnames('sub-header', { + 'sub-header--full-width': fullWidth, + 'sub-header--small-margin': smallMargin, })} > {links} diff --git a/src/renderer/component/subscribeButton/index.js b/src/renderer/component/subscribeButton/index.js index ead3c461b..2f5dceb30 100644 --- a/src/renderer/component/subscribeButton/index.js +++ b/src/renderer/component/subscribeButton/index.js @@ -1,11 +1,8 @@ -import { connect } from "react-redux"; -import { - doChannelSubscribe, - doChannelUnsubscribe, -} from "redux/actions/subscriptions"; -import { selectSubscriptions } from "redux/selectors/subscriptions"; +import { connect } from 'react-redux'; +import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions'; +import { selectSubscriptions } from 'redux/selectors/subscriptions'; -import SubscribeButton from "./view"; +import SubscribeButton from './view'; const select = (state, props) => ({ subscriptions: selectSubscriptions(state), diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx index c4c08628c..216b0bf72 100644 --- a/src/renderer/component/subscribeButton/view.jsx +++ b/src/renderer/component/subscribeButton/view.jsx @@ -1,36 +1,27 @@ -import React from "react"; -import Link from "component/link"; - -export default ({ - channelName, - uri, - subscriptions, - doChannelSubscribe, - doChannelUnsubscribe - }) => { +import React from 'react'; +import Link from 'component/link'; +export default ({ channelName, uri, subscriptions, doChannelSubscribe, doChannelUnsubscribe }) => { const isSubscribed = - subscriptions - .map(subscription => subscription.channelName) - .indexOf(channelName) !== -1; + subscriptions.map(subscription => subscription.channelName).indexOf(channelName) !== -1; - const subscriptionHandler = isSubscribed - ? doChannelUnsubscribe - : doChannelSubscribe; + const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe; - const subscriptionLabel = isSubscribed ? __("Unsubscribe") : __("Subscribe"); + const subscriptionLabel = isSubscribed ? __('Unsubscribe') : __('Subscribe'); return channelName && uri ? ( <div className="card__actions"> <Link - iconRight={isSubscribed ? "" : "at"} - button={isSubscribed ? "alt" : "primary"} + iconRight={isSubscribed ? '' : 'at'} + button={isSubscribed ? 'alt' : 'primary'} label={subscriptionLabel} - onClick={() => subscriptionHandler({ - channelName, - uri, - })} + onClick={() => + subscriptionHandler({ + channelName, + uri, + }) + } /> </div> ) : null; -} +}; diff --git a/src/renderer/component/theme/index.js b/src/renderer/component/theme/index.js index c6940828f..77f5fba6d 100644 --- a/src/renderer/component/theme/index.js +++ b/src/renderer/component/theme/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectThemePath } from "redux/selectors/settings.js"; -import Theme from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectThemePath } from 'redux/selectors/settings.js'; +import Theme from './view'; const select = state => ({ themePath: selectThemePath(state), diff --git a/src/renderer/component/theme/view.jsx b/src/renderer/component/theme/view.jsx index 1ff7c8480..bac5410d8 100644 --- a/src/renderer/component/theme/view.jsx +++ b/src/renderer/component/theme/view.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; const Theme = props => { const { themePath } = props; @@ -7,14 +7,7 @@ const Theme = props => { return null; } - return ( - <link - href={themePath} - rel="stylesheet" - type="text/css" - media="screen,print" - /> - ); + return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />; }; export default Theme; diff --git a/src/renderer/component/tooltip.js b/src/renderer/component/tooltip.js index a1fa85349..c81775614 100644 --- a/src/renderer/component/tooltip.js +++ b/src/renderer/component/tooltip.js @@ -1,5 +1,5 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react'; +import PropTypes from 'prop-types'; export class ToolTip extends React.PureComponent { static propTypes = { @@ -29,7 +29,7 @@ export class ToolTip extends React.PureComponent { render() { return ( - <span className={`tooltip ${this.props.className || ""}`}> + <span className={`tooltip ${this.props.className || ''}`}> <a className="tooltip__link" onClick={() => { @@ -39,7 +39,7 @@ export class ToolTip extends React.PureComponent { {this.props.label} </a> <div - className={`tooltip__body ${this.state.showTooltip ? "" : " hidden"}`} + className={`tooltip__body ${this.state.showTooltip ? '' : ' hidden'}`} onMouseOut={() => { this.handleTooltipMouseOut(); }} diff --git a/src/renderer/component/transactionList/index.js b/src/renderer/component/transactionList/index.js index 12d5ea42f..54b7b755f 100644 --- a/src/renderer/component/transactionList/index.js +++ b/src/renderer/component/transactionList/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import { doOpenModal } from "redux/actions/app"; -import { selectClaimedRewardsByTransactionId } from "redux/selectors/rewards"; -import { selectAllMyClaimsByOutpoint } from "redux/selectors/claims"; -import TransactionList from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import { doOpenModal } from 'redux/actions/app'; +import { selectClaimedRewardsByTransactionId } from 'redux/selectors/rewards'; +import { selectAllMyClaimsByOutpoint } from 'redux/selectors/claims'; +import TransactionList from './view'; const select = state => ({ rewards: selectClaimedRewardsByTransactionId(state), diff --git a/src/renderer/component/transactionList/internal/TransactionListItem.jsx b/src/renderer/component/transactionList/internal/TransactionListItem.jsx index 847e3759c..ce4a1b215 100644 --- a/src/renderer/component/transactionList/internal/TransactionListItem.jsx +++ b/src/renderer/component/transactionList/internal/TransactionListItem.jsx @@ -1,10 +1,10 @@ -import React from "react"; -import LinkTransaction from "component/linkTransaction"; -import { CreditAmount } from "component/common"; -import DateTime from "component/dateTime"; -import Link from "component/link"; -import lbryuri from "lbryuri"; -import * as txnTypes from "constants/transaction_types"; +import React from 'react'; +import LinkTransaction from 'component/linkTransaction'; +import { CreditAmount } from 'component/common'; +import DateTime from 'component/dateTime'; +import Link from 'component/link'; +import lbryuri from 'lbryuri'; +import * as txnTypes from 'constants/transaction_types'; class TransactionListItem extends React.PureComponent { abandonClaim() { @@ -16,21 +16,10 @@ class TransactionListItem extends React.PureComponent { getLink(type) { if (type == txnTypes.TIP) { return ( - <Link - onClick={this.abandonClaim.bind(this)} - icon="icon-unlock-alt" - title={__("Unlock")} - /> - ); - } else { - return ( - <Link - onClick={this.abandonClaim.bind(this)} - icon="icon-trash" - title={__("Revoke")} - /> + <Link onClick={this.abandonClaim.bind(this)} icon="icon-unlock-alt" title={__('Unlock')} /> ); } + return <Link onClick={this.abandonClaim.bind(this)} icon="icon-trash" title={__('Revoke')} />; } capitalize(string) { @@ -51,9 +40,9 @@ class TransactionListItem extends React.PureComponent { } = transaction; const dateFormat = { - month: "short", - day: "numeric", - year: "numeric", + month: 'short', + day: 'numeric', + year: 'numeric', }; return ( @@ -61,41 +50,25 @@ class TransactionListItem extends React.PureComponent { <td> {date ? ( <div> - <DateTime - date={date} - show={DateTime.SHOW_DATE} - formatOptions={dateFormat} - /> + <DateTime date={date} show={DateTime.SHOW_DATE} formatOptions={dateFormat} /> <div className="meta"> <DateTime date={date} show={DateTime.SHOW_TIME} /> </div> </div> ) : ( - <span className="empty">{__("Pending")}</span> + <span className="empty">{__('Pending')}</span> )} </td> <td> - <CreditAmount - amount={amount} - look="plain" - label={false} - showPlus={true} - precision={8} - /> + <CreditAmount amount={amount} look="plain" label={false} showPlus precision={8} /> <br /> - {fee != 0 && ( - <CreditAmount amount={fee} look="fee" label={false} precision={8} /> - )} + {fee != 0 && <CreditAmount amount={fee} look="fee" label={false} precision={8} />} </td> <td> {this.capitalize(type)} {isRevokeable && this.getLink(type)} </td> <td> - {reward && ( - <Link navigate="/rewards"> - {__("Reward: %s", reward.reward_title)} - </Link> - )} + {reward && <Link navigate="/rewards">{__('Reward: %s', reward.reward_title)}</Link>} {name && claimId && ( <Link diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx index dca14dd93..0d5de3597 100644 --- a/src/renderer/component/transactionList/view.jsx +++ b/src/renderer/component/transactionList/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import TransactionListItem from "./internal/TransactionListItem"; -import FormField from "component/formField"; -import Link from "component/link"; -import * as icons from "constants/icons"; -import * as modals from "constants/modal_types"; +import React from 'react'; +import TransactionListItem from './internal/TransactionListItem'; +import FormField from 'component/formField'; +import Link from 'component/link'; +import * as icons from 'constants/icons'; +import * as modals from 'constants/modal_types'; class TransactionList extends React.PureComponent { constructor(props) { @@ -39,48 +39,38 @@ class TransactionList extends React.PureComponent { render() { const { emptyMessage, rewards, transactions } = this.props; - let transactionList = transactions.filter( - this.filterTransaction.bind(this) - ); + const transactionList = transactions.filter(this.filterTransaction.bind(this)); return ( <div> {(transactionList.length || this.state.filter) && ( <span className="sort-section"> - {__("Filter")}{" "} - <FormField - type="select" - onChange={this.handleFilterChanged.bind(this)} - > - <option value="">{__("All")}</option> - <option value="spend">{__("Spends")}</option> - <option value="receive">{__("Receives")}</option> - <option value="publish">{__("Publishes")}</option> - <option value="channel">{__("Channels")}</option> - <option value="tip">{__("Tips")}</option> - <option value="support">{__("Supports")}</option> - <option value="update">{__("Updates")}</option> - </FormField>{" "} - <Link - href="https://lbry.io/faq/transaction-types" - icon={icons.HELP_CIRCLE} - /> + {__('Filter')}{' '} + <FormField type="select" onChange={this.handleFilterChanged.bind(this)}> + <option value="">{__('All')}</option> + <option value="spend">{__('Spends')}</option> + <option value="receive">{__('Receives')}</option> + <option value="publish">{__('Publishes')}</option> + <option value="channel">{__('Channels')}</option> + <option value="tip">{__('Tips')}</option> + <option value="support">{__('Supports')}</option> + <option value="update">{__('Updates')}</option> + </FormField>{' '} + <Link href="https://lbry.io/faq/transaction-types" icon={icons.HELP_CIRCLE} /> </span> )} {!transactionList.length && ( - <div className="empty"> - {emptyMessage || __("No transactions to list.")} - </div> + <div className="empty">{emptyMessage || __('No transactions to list.')}</div> )} {Boolean(transactionList.length) && ( <table className="table-standard table-transactions table-stretch"> <thead> <tr> - <th>{__("Date")}</th> - <th>{__("Amount (Fee)")}</th> - <th>{__("Type")} </th> - <th>{__("Details")} </th> - <th>{__("Transaction")}</th> + <th>{__('Date')}</th> + <th>{__('Amount (Fee)')}</th> + <th>{__('Type')} </th> + <th>{__('Details')} </th> + <th>{__('Transaction')}</th> </tr> </thead> <tbody> diff --git a/src/renderer/component/transactionListRecent/index.js b/src/renderer/component/transactionListRecent/index.js index 1813cf00e..c01590705 100644 --- a/src/renderer/component/transactionListRecent/index.js +++ b/src/renderer/component/transactionListRecent/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doFetchTransactions } from "redux/actions/wallet"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchTransactions } from 'redux/actions/wallet'; import { selectBalance, selectRecentTransactions, selectHasTransactions, selectIsFetchingTransactions, -} from "redux/selectors/wallet"; +} from 'redux/selectors/wallet'; -import TransactionListRecent from "./view"; +import TransactionListRecent from './view'; const select = state => ({ fetchingTransactions: selectIsFetchingTransactions(state), diff --git a/src/renderer/component/transactionListRecent/view.jsx b/src/renderer/component/transactionListRecent/view.jsx index 7c5b00c4b..3bc5b0159 100644 --- a/src/renderer/component/transactionListRecent/view.jsx +++ b/src/renderer/component/transactionListRecent/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import { BusyMessage } from "component/common"; -import Link from "component/link"; -import TransactionList from "component/transactionList"; -import * as icons from "constants/icons"; +import React from 'react'; +import { BusyMessage } from 'component/common'; +import Link from 'component/link'; +import TransactionList from 'component/transactionList'; +import * as icons from 'constants/icons'; class TransactionListRecent extends React.PureComponent { componentWillMount() { @@ -15,16 +15,14 @@ class TransactionListRecent extends React.PureComponent { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Recent Transactions")}</h3> + <h3>{__('Recent Transactions')}</h3> </div> <div className="card__content"> - {fetchingTransactions && ( - <BusyMessage message={__("Loading transactions")} /> - )} + {fetchingTransactions && <BusyMessage message={__('Loading transactions')} />} {!fetchingTransactions && ( <TransactionList transactions={transactions} - emptyMessage={__("You have no recent transactions.")} + emptyMessage={__('You have no recent transactions.')} /> )} </div> @@ -32,7 +30,7 @@ class TransactionListRecent extends React.PureComponent { <div className="card__actions card__actions--bottom"> <Link navigate="/history" - label={__("Full History")} + label={__('Full History')} icon={icons.HISTORY} className="no-underline" button="text" diff --git a/src/renderer/component/truncatedMarkdown/index.js b/src/renderer/component/truncatedMarkdown/index.js index 7cec6defe..fddddf434 100644 --- a/src/renderer/component/truncatedMarkdown/index.js +++ b/src/renderer/component/truncatedMarkdown/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import TruncatedMarkdown from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import TruncatedMarkdown from './view'; export default connect()(TruncatedMarkdown); diff --git a/src/renderer/component/truncatedMarkdown/view.jsx b/src/renderer/component/truncatedMarkdown/view.jsx index ba060016b..f19ab67ab 100644 --- a/src/renderer/component/truncatedMarkdown/view.jsx +++ b/src/renderer/component/truncatedMarkdown/view.jsx @@ -1,7 +1,7 @@ -import React from "react"; -import PropTypes from "prop-types"; -import ReactMarkdown from "react-markdown"; -import ReactDOMServer from "react-dom/server"; +import React from 'react'; +import PropTypes from 'prop-types'; +import ReactMarkdown from 'react-markdown'; +import ReactDOMServer from 'react-dom/server'; class TruncatedMarkdown extends React.PureComponent { static propTypes = { @@ -14,24 +14,21 @@ class TruncatedMarkdown extends React.PureComponent { transformMarkdown(text) { // render markdown to html string then trim html tag - let htmlString = ReactDOMServer.renderToStaticMarkup( + const htmlString = ReactDOMServer.renderToStaticMarkup( <ReactMarkdown source={this.props.children} /> ); - var txt = document.createElement("textarea"); + const txt = document.createElement('textarea'); txt.innerHTML = htmlString; - return txt.value.replace(/<(?:.|\n)*?>/gm, ""); + return txt.value.replace(/<(?:.|\n)*?>/gm, ''); } render() { - let content = - this.props.children && typeof this.props.children === "string" + const content = + this.props.children && typeof this.props.children === 'string' ? this.transformMarkdown(this.props.children) : this.props.children; return ( - <span - className="truncated-text" - style={{ WebkitLineClamp: this.props.lines }} - > + <span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}> {content} </span> ); diff --git a/src/renderer/component/uriIndicator/index.js b/src/renderer/component/uriIndicator/index.js index 1b3ddabec..b5e9162f0 100644 --- a/src/renderer/component/uriIndicator/index.js +++ b/src/renderer/component/uriIndicator/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import lbryuri from "lbryuri"; -import { connect } from "react-redux"; -import { doResolveUri } from "redux/actions/content"; -import { makeSelectIsUriResolving } from "redux/selectors/content"; -import { makeSelectClaimForUri } from "redux/selectors/claims"; -import UriIndicator from "./view"; +import React from 'react'; +import lbryuri from 'lbryuri'; +import { connect } from 'react-redux'; +import { doResolveUri } from 'redux/actions/content'; +import { makeSelectIsUriResolving } from 'redux/selectors/content'; +import { makeSelectClaimForUri } from 'redux/selectors/claims'; +import UriIndicator from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/component/uriIndicator/view.jsx b/src/renderer/component/uriIndicator/view.jsx index 3bf850d11..5a746cd53 100644 --- a/src/renderer/component/uriIndicator/view.jsx +++ b/src/renderer/component/uriIndicator/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import { Icon } from "component/common"; -import Link from "component/link"; -import lbryuri from "lbryuri"; -import classnames from "classnames"; +import React from 'react'; +import { Icon } from 'component/common'; +import Link from 'component/link'; +import lbryuri from 'lbryuri'; +import classnames from 'classnames'; class UriIndicator extends React.PureComponent { componentWillMount() { @@ -39,9 +39,7 @@ class UriIndicator extends React.PureComponent { value, } = claim; const channelClaimId = - value && - value.publisherSignature && - value.publisherSignature.certificateId; + value && value.publisherSignature && value.publisherSignature.certificateId; if (!hasSignature || !channelName) { return <span className="empty">Anonymous</span>; @@ -50,34 +48,30 @@ class UriIndicator extends React.PureComponent { let icon, channelLink, modifier; if (signatureIsValid) { - modifier = "valid"; - channelLink = link - ? lbryuri.build({ channelName, claimId: channelClaimId }, false) - : false; + modifier = 'valid'; + channelLink = link ? lbryuri.build({ channelName, claimId: channelClaimId }, false) : false; } else { - icon = "icon-times-circle"; - modifier = "invalid"; + icon = 'icon-times-circle'; + modifier = 'invalid'; } const inner = ( <span> <span - className={classnames("channel-name", { - "channel-name--small": smallCard, - "button-text no-underline": link, + className={classnames('channel-name', { + 'channel-name--small': smallCard, + 'button-text no-underline': link, })} > {channelName} - </span>{" "} + </span>{' '} {!signatureIsValid ? ( <Icon icon={icon} - className={`channel-indicator__icon channel-indicator__icon--${ - modifier - }`} + className={`channel-indicator__icon channel-indicator__icon--${modifier}`} /> ) : ( - "" + '' )} </span> ); @@ -87,11 +81,7 @@ class UriIndicator extends React.PureComponent { } return ( - <Link - navigate="/show" - navigateParams={{ uri: channelLink }} - className="no-underline" - > + <Link navigate="/show" navigateParams={{ uri: channelLink }} className="no-underline"> {inner} </Link> ); diff --git a/src/renderer/component/userEmailNew/index.js b/src/renderer/component/userEmailNew/index.js index f5ddbd8e9..98cc7bd04 100644 --- a/src/renderer/component/userEmailNew/index.js +++ b/src/renderer/component/userEmailNew/index.js @@ -1,13 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doUserEmailNew, doUserInviteNew } from "redux/actions/user"; -import { - selectEmailNewIsPending, - selectEmailNewErrorMessage, -} from "redux/selectors/user"; -import UserEmailNew from "./view"; -import rewards from "rewards"; -import { makeSelectRewardAmountByType } from "redux/selectors/rewards"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doUserEmailNew, doUserInviteNew } from 'redux/actions/user'; +import { selectEmailNewIsPending, selectEmailNewErrorMessage } from 'redux/selectors/user'; +import UserEmailNew from './view'; +import rewards from 'rewards'; +import { makeSelectRewardAmountByType } from 'redux/selectors/rewards'; const select = state => ({ isPending: selectEmailNewIsPending(state), diff --git a/src/renderer/component/userEmailNew/view.jsx b/src/renderer/component/userEmailNew/view.jsx index 8f6c9a434..05e9a1e2d 100644 --- a/src/renderer/component/userEmailNew/view.jsx +++ b/src/renderer/component/userEmailNew/view.jsx @@ -1,13 +1,13 @@ -import React from "react"; -import { CreditAmount } from "component/common"; -import { Form, FormRow, Submit } from "component/form.js"; +import React from 'react'; +import { CreditAmount } from 'component/common'; +import { Form, FormRow, Submit } from 'component/form.js'; class UserEmailNew extends React.PureComponent { constructor(props) { super(props); this.state = { - email: "", + email: '', }; } @@ -28,18 +28,15 @@ class UserEmailNew extends React.PureComponent { return ( <div> <p> - Let us know your email and you'll receive{" "} - <CreditAmount amount={rewardAmount} label="LBC" />, the blockchain - token used by LBRY. + Let us know your email and you'll receive{' '} + <CreditAmount amount={rewardAmount} label="LBC" />, the blockchain token used by LBRY. </p> <p> {__( "We'll also let you know about LBRY updates, security issues, and great new content." )} </p> - <p> - {__("We'll never sell your email, and you can unsubscribe at any time.")} - </p> + <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p> <Form onSubmit={this.handleSubmit.bind(this)}> <FormRow type="text" diff --git a/src/renderer/component/userEmailVerify/index.js b/src/renderer/component/userEmailVerify/index.js index e0fa0902b..c5ce0376a 100644 --- a/src/renderer/component/userEmailVerify/index.js +++ b/src/renderer/component/userEmailVerify/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doUserEmailVerify } from "redux/actions/user"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doUserEmailVerify } from 'redux/actions/user'; import { selectEmailVerifyIsPending, selectEmailToVerify, selectEmailVerifyErrorMessage, -} from "redux/selectors/user"; -import UserEmailVerify from "./view"; -import rewards from "rewards"; -import { makeSelectRewardAmountByType } from "redux/selectors/rewards"; +} from 'redux/selectors/user'; +import UserEmailVerify from './view'; +import rewards from 'rewards'; +import { makeSelectRewardAmountByType } from 'redux/selectors/rewards'; const select = state => ({ isPending: selectEmailVerifyIsPending(state), diff --git a/src/renderer/component/userEmailVerify/view.jsx b/src/renderer/component/userEmailVerify/view.jsx index 2e330acbe..cae368a96 100644 --- a/src/renderer/component/userEmailVerify/view.jsx +++ b/src/renderer/component/userEmailVerify/view.jsx @@ -1,14 +1,14 @@ -import React from "react"; -import Link from "component/link"; -import { CreditAmount } from "component/common"; -import { Form, FormRow, Submit } from "component/form.js"; +import React from 'react'; +import Link from 'component/link'; +import { CreditAmount } from 'component/common'; +import { Form, FormRow, Submit } from 'component/form.js'; class UserEmailVerify extends React.PureComponent { constructor(props) { super(props); this.state = { - code: "", + code: '', }; } @@ -24,19 +24,13 @@ class UserEmailVerify extends React.PureComponent { } render() { - const { - cancelButton, - errorMessage, - email, - isPending, - rewardAmount, - } = this.props; + const { cancelButton, errorMessage, email, isPending, rewardAmount } = this.props; return ( <Form onSubmit={this.handleSubmit.bind(this)}> <p>Please enter the verification code emailed to {email}.</p> <FormRow type="text" - label={__("Verification Code")} + label={__('Verification Code')} name="code" value={this.state.code} onChange={event => { @@ -47,14 +41,13 @@ class UserEmailVerify extends React.PureComponent { {/* render help separately so it always shows */} <div className="form-field__helper"> <p> - {__("Email")}{" "} - <Link href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{" "} - <Link href="https://chat.lbry.io" label="chat" />{" "} - {__("if you encounter any trouble with your code.")} + {__('Email')} <Link href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{' '} + <Link href="https://chat.lbry.io" label="chat" />{' '} + {__('if you encounter any trouble with your code.')} </p> </div> <div className="form-row-submit"> - <Submit label={__("Verify")} disabled={isPending} /> + <Submit label={__('Verify')} disabled={isPending} /> {cancelButton} </div> </Form> diff --git a/src/renderer/component/userVerify/index.js b/src/renderer/component/userVerify/index.js index 046bafdb0..20f084e7f 100644 --- a/src/renderer/component/userVerify/index.js +++ b/src/renderer/component/userVerify/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import { doUserIdentityVerify } from "redux/actions/user"; -import rewards from "rewards"; -import { makeSelectRewardByType } from "redux/selectors/rewards"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import { doUserIdentityVerify } from 'redux/actions/user'; +import rewards from 'rewards'; +import { makeSelectRewardByType } from 'redux/selectors/rewards'; import { selectIdentityVerifyIsPending, selectIdentityVerifyErrorMessage, -} from "redux/selectors/user"; -import UserVerify from "./view"; +} from 'redux/selectors/user'; +import UserVerify from './view'; const select = (state, props) => { const selectReward = makeSelectRewardByType(); diff --git a/src/renderer/component/userVerify/view.jsx b/src/renderer/component/userVerify/view.jsx index 7e62abde3..07cadba99 100644 --- a/src/renderer/component/userVerify/view.jsx +++ b/src/renderer/component/userVerify/view.jsx @@ -1,14 +1,14 @@ -import React from "react"; -import Link from "component/link"; -import CardVerify from "component/cardVerify"; -import lbryio from "lbryio.js"; +import React from 'react'; +import Link from 'component/link'; +import CardVerify from 'component/cardVerify'; +import lbryio from 'lbryio.js'; class UserVerify extends React.PureComponent { constructor(props) { super(props); this.state = { - code: "", + code: '', }; } @@ -28,33 +28,27 @@ class UserVerify extends React.PureComponent { <div> <section className="card card--form"> <div className="card__title-primary"> - <h1>{__("Final Human Proof")}</h1> + <h1>{__('Final Human Proof')}</h1> </div> <div className="card__content"> <p> - Finally, please complete <strong>one and only one</strong> of the - options below. + Finally, please complete <strong>one and only one</strong> of the options below. </p> </div> </section> <section className="card card--form"> <div className="card__title-primary"> - <h3>{__("1) Proof via Credit")}</h3> + <h3>{__('1) Proof via Credit')}</h3> </div> <div className="card__content"> - {__( - "If you have a valid credit or debit card, you can use it to instantly prove your humanity." - ) + - " " + - __("There is no charge at all for this, now or in the future.") + - " "} + {`${__( + 'If you have a valid credit or debit card, you can use it to instantly prove your humanity.' + )} ${__('There is no charge at all for this, now or in the future.')} `} </div> <div className="card__actions"> - {errorMessage && ( - <p className="form-field__error">{errorMessage}</p> - )} + {errorMessage && <p className="form-field__error">{errorMessage}</p>} <CardVerify - label={__("Perform Card Verification")} + label={__('Perform Card Verification')} disabled={isPending} token={this.onToken.bind(this)} stripeKey={lbryio.getStripeToken()} @@ -62,32 +56,27 @@ class UserVerify extends React.PureComponent { </div> <div className="card__content"> <div className="meta"> - {__( - "A $1 authorization may temporarily appear with your provider." - )}{" "} + {__('A $1 authorization may temporarily appear with your provider.')}{' '} <Link href="https://lbry.io/faq/identity-requirements" - label={__("Read more about why we do this.")} + label={__('Read more about why we do this.')} /> </div> </div> </section> <section className="card card--form"> <div className="card__title-primary"> - <h3>{__("2) Proof via YouTube")}</h3> + <h3>{__('2) Proof via YouTube')}</h3> </div> <div className="card__content"> <p> {__( - "If you have a YouTube account with subscribers and views, you can sync your account and content to be granted instant verification." + 'If you have a YouTube account with subscribers and views, you can sync your account and content to be granted instant verification.' )} </p> <p> - {__("Some account minimums apply.")}{" "} - <Link - href="https://lbry.io/faq/youtube" - label={__("Read more.")} - /> + {__('Some account minimums apply.')}{' '} + <Link href="https://lbry.io/faq/youtube" label={__('Read more.')} /> </p> </div> <div className="card__actions"> @@ -95,30 +84,29 @@ class UserVerify extends React.PureComponent { href="https://api.lbry.io/yt/connect" button="alt" icon="icon-youtube" - label={__("YouTube Account Sync")} + label={__('YouTube Account Sync')} /> </div> <div className="card__content"> <div className="meta"> - This will not automatically refresh after approval. Once you have - synced your account, just navigate away or click{" "} - <Link navigate="/rewards" label="here" />. + This will not automatically refresh after approval. Once you have synced your account, + just navigate away or click <Link navigate="/rewards" label="here" />. </div> </div> </section> <section className="card card--form"> <div className="card__title-primary"> - <h3>{__("3) Proof via Chat")}</h3> + <h3>{__('3) Proof via Chat')}</h3> </div> <div className="card__content"> <p> {__( - "A moderator capable of approving you is typically available in the #verification channel of our chat room." + 'A moderator capable of approving you is typically available in the #verification channel of our chat room.' )} </p> <p> {__( - "This process will likely involve providing proof of a stable and established online or real-life identity." + 'This process will likely involve providing proof of a stable and established online or real-life identity.' )} </p> </div> @@ -127,27 +115,23 @@ class UserVerify extends React.PureComponent { href="https://chat.lbry.io" button="alt" icon="icon-comments" - label={__("Join LBRY Chat")} + label={__('Join LBRY Chat')} /> </div> </section> <section className="card card--form"> <div className="card__title-primary"> - <h5>{__("Or, Skip It Entirely")}</h5> + <h5>{__('Or, Skip It Entirely')}</h5> </div> <div className="card__content"> <p className="meta"> {__( - "You can continue without this step, but you will not be eligible to earn rewards." + 'You can continue without this step, but you will not be eligible to earn rewards.' )} </p> </div> <div className="card__actions"> - <Link - onClick={() => navigate("/discover")} - button="alt" - label={__("Skip Rewards")} - /> + <Link onClick={() => navigate('/discover')} button="alt" label={__('Skip Rewards')} /> </div> </section> </div> diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index a9b0ed62d..0ba70c754 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -1,21 +1,18 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doChangeVolume } from "redux/actions/app"; -import { selectVolume } from "redux/selectors/app"; -import { doPlayUri, doSetPlayingUri } from "redux/actions/content"; -import { - makeSelectMetadataForUri, - makeSelectContentTypeForUri, -} from "redux/selectors/claims"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doChangeVolume } from 'redux/actions/app'; +import { selectVolume } from 'redux/selectors/app'; +import { doPlayUri, doSetPlayingUri } from 'redux/actions/content'; +import { makeSelectMetadataForUri, makeSelectContentTypeForUri } from 'redux/selectors/claims'; import { makeSelectFileInfoForUri, makeSelectLoadingForUri, makeSelectDownloadingForUri, -} from "redux/selectors/file_info"; -import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; -import { selectShowNsfw } from "redux/selectors/settings"; -import Video from "./view"; -import { selectPlayingUri } from "redux/selectors/content"; +} from 'redux/selectors/file_info'; +import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info'; +import { selectShowNsfw } from 'redux/selectors/settings'; +import Video from './view'; +import { selectPlayingUri } from 'redux/selectors/content'; const select = (state, props) => ({ costInfo: makeSelectCostInfoForUri(props.uri)(state), diff --git a/src/renderer/component/video/internal/loading-screen.jsx b/src/renderer/component/video/internal/loading-screen.jsx index 94cc7ce4d..958619b79 100644 --- a/src/renderer/component/video/internal/loading-screen.jsx +++ b/src/renderer/component/video/internal/loading-screen.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import Spinner from "component/common/spinner"; +import React from 'react'; +import Spinner from 'component/common/spinner'; const LoadingScreen = ({ status, spinner = true }) => ( <div className="video__loading-screen"> diff --git a/src/renderer/component/video/internal/play-button.jsx b/src/renderer/component/video/internal/play-button.jsx index ca49cb331..a33aff082 100644 --- a/src/renderer/component/video/internal/play-button.jsx +++ b/src/renderer/component/video/internal/play-button.jsx @@ -1,21 +1,18 @@ -import React from "react"; -import Link from "component/link"; +import React from 'react'; +import Link from 'component/link'; class VideoPlayButton extends React.PureComponent { componentDidMount() { this.keyDownListener = this.onKeyDown.bind(this); - document.addEventListener("keydown", this.keyDownListener); + document.addEventListener('keydown', this.keyDownListener); } componentWillUnmount() { - document.removeEventListener("keydown", this.keyDownListener); + document.removeEventListener('keydown', this.keyDownListener); } onKeyDown(event) { - if ( - "input" !== event.target.tagName.toLowerCase() && - "Space" === event.code - ) { + if (event.target.tagName.toLowerCase() !== 'input' && event.code === 'Space') { event.preventDefault(); this.watch(); } @@ -37,16 +34,13 @@ class VideoPlayButton extends React.PureComponent { */ const disabled = isLoading || fileInfo === undefined; - const icon = - ["audio", "video"].indexOf(mediaType) !== -1 - ? "icon-play" - : "icon-folder-o"; + const icon = ['audio', 'video'].indexOf(mediaType) !== -1 ? 'icon-play' : 'icon-folder-o'; return ( <Link - button={button ? button : null} + button={button || null} disabled={disabled} - label={label ? label : ""} + label={label || ''} className="video__play-button" icon={icon} onClick={() => this.watch()} diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 9d7b6608f..7d0bc93ec 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -1,12 +1,13 @@ -const { remote } = require("electron"); -import React from "react"; -import { Thumbnail } from "component/common"; -import player from "render-media"; -import fs from "fs"; -import LoadingScreen from "./loading-screen"; +const { remote } = require('electron'); + +import React from 'react'; +import { Thumbnail } from 'component/common'; +import player from 'render-media'; +import fs from 'fs'; +import LoadingScreen from './loading-screen'; class VideoPlayer extends React.PureComponent { - static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; + static MP3_CONTENT_TYPES = ['audio/mpeg3', 'audio/mpeg']; constructor(props) { super(props); @@ -22,13 +23,7 @@ class VideoPlayer extends React.PureComponent { componentDidMount() { const container = this.refs.media; - const { - contentType, - downloadPath, - mediaType, - changeVolume, - volume, - } = this.props; + const { contentType, downloadPath, mediaType, changeVolume, volume } = this.props; const loadedMetadata = e => { this.setState({ hasMetadata: true, startedPlaying: true }); this.refs.media.children[0].play(); @@ -39,10 +34,8 @@ class VideoPlayer extends React.PureComponent { // Handle fullscreen change for the Windows platform const win32FullScreenChange = e => { const win = remote.BrowserWindow.getFocusedWindow(); - if ("win32" === process.platform) { - win.setMenu( - document.webkitIsFullScreen ? null : remote.Menu.getApplicationMenu() - ); + if (process.platform === 'win32') { + win.setMenu(document.webkitIsFullScreen ? null : remote.Menu.getApplicationMenu()); } }; @@ -58,22 +51,15 @@ class VideoPlayer extends React.PureComponent { ); } - document.addEventListener("keydown", this.togglePlayListener); + document.addEventListener('keydown', this.togglePlayListener); const mediaElement = this.refs.media.children[0]; if (mediaElement) { - mediaElement.addEventListener("click", this.togglePlayListener); - mediaElement.addEventListener( - "loadedmetadata", - loadedMetadata.bind(this), - { - once: true, - } - ); - mediaElement.addEventListener( - "webkitfullscreenchange", - win32FullScreenChange.bind(this) - ); - mediaElement.addEventListener("volumechange", () => { + mediaElement.addEventListener('click', this.togglePlayListener); + mediaElement.addEventListener('loadedmetadata', loadedMetadata.bind(this), { + once: true, + }); + mediaElement.addEventListener('webkitfullscreenchange', win32FullScreenChange.bind(this)); + mediaElement.addEventListener('volumechange', () => { changeVolume(mediaElement.volume); }); mediaElement.volume = volume; @@ -81,10 +67,10 @@ class VideoPlayer extends React.PureComponent { } componentWillUnmount() { - document.removeEventListener("keydown", this.togglePlayListener); + document.removeEventListener('keydown', this.togglePlayListener); const mediaElement = this.refs.media.children[0]; if (mediaElement) { - mediaElement.removeEventListener("click", this.togglePlayListener); + mediaElement.removeEventListener('click', this.togglePlayListener); } } @@ -95,7 +81,7 @@ class VideoPlayer extends React.PureComponent { // clear the container const { downloadPath } = this.props; - const audio = document.createElement("audio"); + const audio = document.createElement('audio'); audio.autoplay = autoplay; audio.controls = true; audio.src = downloadPath; @@ -105,8 +91,8 @@ class VideoPlayer extends React.PureComponent { togglePlay(event) { // ignore all events except click and spacebar keydown, or input events in a form control if ( - "keydown" === event.type && - ("Space" !== event.code || "input" === event.target.tagName.toLowerCase()) + event.type === 'keydown' && + (event.code !== 'Space' || event.target.tagName.toLowerCase() === 'input') ) { return; } @@ -144,37 +130,33 @@ class VideoPlayer extends React.PureComponent { return { name: filename, - createReadStream: opts => { - return fs.createReadStream(downloadPath, opts); - }, + createReadStream: opts => fs.createReadStream(downloadPath, opts), }; } playableType() { const { mediaType } = this.props; - return ["audio", "video"].indexOf(mediaType) !== -1; + return ['audio', 'video'].indexOf(mediaType) !== -1; } render() { const { mediaType, poster } = this.props; const { hasMetadata, unplayable } = this.state; - const noMetadataMessage = "Waiting for metadata."; + const noMetadataMessage = 'Waiting for metadata.'; const unplayableMessage = "Sorry, looks like we can't play this file."; const needsMetadata = this.playableType(); return ( <div> - {["audio", "application"].indexOf(mediaType) !== -1 && + {['audio', 'application'].indexOf(mediaType) !== -1 && (!this.playableType() || hasMetadata) && !unplayable && <Thumbnail src={poster} className="video-embedded" />} {this.playableType() && !hasMetadata && !unplayable && <LoadingScreen status={noMetadataMessage} />} - {unplayable && ( - <LoadingScreen status={unplayableMessage} spinner={false} /> - )} + {unplayable && <LoadingScreen status={unplayableMessage} spinner={false} />} <div ref="media" className="media" /> </div> ); diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index c42994a17..1b12d4a3b 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import lbry from "lbry"; -import VideoPlayer from "./internal/player"; -import VideoPlayButton from "./internal/play-button"; -import LoadingScreen from "./internal/loading-screen"; -import NsfwOverlay from "component/nsfwOverlay"; +import React from 'react'; +import lbry from 'lbry'; +import VideoPlayer from './internal/player'; +import VideoPlayButton from './internal/play-button'; +import LoadingScreen from './internal/loading-screen'; +import NsfwOverlay from 'component/nsfwOverlay'; class Video extends React.PureComponent { constructor(props) { @@ -26,11 +26,7 @@ class Video extends React.PureComponent { } handleMouseOver() { - if ( - this.props.obscureNsfw && - this.props.metadata && - this.props.metadata.nsfw - ) { + if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { this.setState({ showNsfwHelp: true, }); @@ -61,39 +57,34 @@ class Video extends React.PureComponent { const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - const mediaType = lbry.getMediaType( - contentType, - fileInfo && fileInfo.file_name - ); + const mediaType = lbry.getMediaType(contentType, fileInfo && fileInfo.file_name); - let loadStatusMessage = ""; + let loadStatusMessage = ''; if (fileInfo && fileInfo.completed && !fileInfo.written_bytes) { loadStatusMessage = __( "It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds." ); } else if (isLoading) { - loadStatusMessage = __("Requesting stream..."); + loadStatusMessage = __('Requesting stream...'); } else if (isDownloading) { - loadStatusMessage = __("Downloading stream... not long left now!"); + loadStatusMessage = __('Downloading stream... not long left now!'); } - let klasses = []; - klasses.push(obscureNsfw ? "video--obscured " : ""); - if (isLoading || isDownloading) klasses.push("video-embedded", "video"); - if (mediaType === "video") { - klasses.push("video-embedded", "video"); - klasses.push(isPlaying ? "video--active" : "video--hidden"); - } else if (mediaType === "application") { - klasses.push("video-embedded"); - } else { - if (!isPlaying) klasses.push("video-embedded"); - } + const klasses = []; + klasses.push(obscureNsfw ? 'video--obscured ' : ''); + if (isLoading || isDownloading) klasses.push('video-embedded', 'video'); + if (mediaType === 'video') { + klasses.push('video-embedded', 'video'); + klasses.push(isPlaying ? 'video--active' : 'video--hidden'); + } else if (mediaType === 'application') { + klasses.push('video-embedded'); + } else if (!isPlaying) klasses.push('video-embedded'); const poster = metadata.thumbnail; return ( <div - className={klasses.join(" ")} + className={klasses.join(' ')} onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)} > @@ -113,10 +104,7 @@ class Video extends React.PureComponent { /> ))} {!isPlaying && ( - <div - className="video__cover" - style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }} - > + <div className="video__cover" style={{ backgroundImage: `url("${metadata.thumbnail}")` }}> <VideoPlayButton {...this.props} mediaType={mediaType} /> </div> )} diff --git a/src/renderer/component/walletAddress/index.js b/src/renderer/component/walletAddress/index.js index f335249f8..738892973 100644 --- a/src/renderer/component/walletAddress/index.js +++ b/src/renderer/component/walletAddress/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCheckAddressIsMine, doGetNewAddress } from "redux/actions/wallet"; -import { - selectReceiveAddress, - selectGettingNewAddress, -} from "redux/selectors/wallet"; -import WalletAddress from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCheckAddressIsMine, doGetNewAddress } from 'redux/actions/wallet'; +import { selectReceiveAddress, selectGettingNewAddress } from 'redux/selectors/wallet'; +import WalletAddress from './view'; const select = state => ({ receiveAddress: selectReceiveAddress(state), diff --git a/src/renderer/component/walletAddress/view.jsx b/src/renderer/component/walletAddress/view.jsx index 829955fa6..d0f6e0a77 100644 --- a/src/renderer/component/walletAddress/view.jsx +++ b/src/renderer/component/walletAddress/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import Link from "component/link"; -import Address from "component/address"; +import React from 'react'; +import Link from 'component/link'; +import Address from 'component/address'; class WalletAddress extends React.PureComponent { componentWillMount() { @@ -13,19 +13,17 @@ class WalletAddress extends React.PureComponent { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Receive Credits")}</h3> + <h3>{__('Receive Credits')}</h3> </div> <div className="card__content"> <p> - {__( - "Use this wallet address to receive credits sent by another user (or yourself)." - )} + {__('Use this wallet address to receive credits sent by another user (or yourself).')} </p> <Address address={receiveAddress} /> </div> <div className="card__actions"> <Link - label={__("Get New Address")} + label={__('Get New Address')} button="primary" icon="icon-refresh" onClick={getNewAddress} @@ -36,7 +34,7 @@ class WalletAddress extends React.PureComponent { <div className="help"> <p> {__( - "You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources." + 'You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.' )} </p> </div> diff --git a/src/renderer/component/walletBalance/index.js b/src/renderer/component/walletBalance/index.js index e67f90acc..0e1b4439c 100644 --- a/src/renderer/component/walletBalance/index.js +++ b/src/renderer/component/walletBalance/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectBalance } from "redux/selectors/wallet"; -import WalletBalance from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectBalance } from 'redux/selectors/wallet'; +import WalletBalance from './view'; const select = state => ({ balance: selectBalance(state), diff --git a/src/renderer/component/walletBalance/view.jsx b/src/renderer/component/walletBalance/view.jsx index 597d3a0ff..9c1b1f6cc 100644 --- a/src/renderer/component/walletBalance/view.jsx +++ b/src/renderer/component/walletBalance/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import Link from "component/link"; -import { CreditAmount } from "component/common"; +import React from 'react'; +import Link from 'component/link'; +import { CreditAmount } from 'component/common'; const WalletBalance = props => { const { balance, navigate } = props; @@ -15,20 +15,18 @@ const WalletBalance = props => { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Balance")}</h3> + <h3>{__('Balance')}</h3> </div> <div className="card__content"> - {(balance || balance === 0) && ( - <CreditAmount amount={balance} precision={8} /> - )} + {(balance || balance === 0) && <CreditAmount amount={balance} precision={8} />} </div> <div className="card__actions"> - <Link button="alt" navigate="/getcredits" label={__("Get Credits")} /> + <Link button="alt" navigate="/getcredits" label={__('Get Credits')} /> <Link button="alt" disabled={balance === 0} navigate="/backup" - label={__("Backup Wallet")} + label={__('Backup Wallet')} /> </div> </section> diff --git a/src/renderer/component/walletSend/index.js b/src/renderer/component/walletSend/index.js index 87344fa37..fa005c0c4 100644 --- a/src/renderer/component/walletSend/index.js +++ b/src/renderer/component/walletSend/index.js @@ -1,17 +1,17 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { doSendDraftTransaction, doSetDraftTransactionAmount, doSetDraftTransactionAddress, -} from "redux/actions/wallet"; +} from 'redux/actions/wallet'; import { selectDraftTransactionAmount, selectDraftTransactionAddress, selectDraftTransactionError, -} from "redux/selectors/wallet"; +} from 'redux/selectors/wallet'; -import WalletSend from "./view"; +import WalletSend from './view'; const select = state => ({ address: selectDraftTransactionAddress(state), @@ -22,8 +22,7 @@ const select = state => ({ const perform = dispatch => ({ sendToAddress: () => dispatch(doSendDraftTransaction()), setAmount: event => dispatch(doSetDraftTransactionAmount(event.target.value)), - setAddress: event => - dispatch(doSetDraftTransactionAddress(event.target.value)), + setAddress: event => dispatch(doSetDraftTransactionAddress(event.target.value)), }); export default connect(select, perform)(WalletSend); diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx index 942cec9e5..673e7e0f7 100644 --- a/src/renderer/component/walletSend/view.jsx +++ b/src/renderer/component/walletSend/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Form, FormRow, Submit } from "component/form"; -import lbryuri from "lbryuri"; +import React from 'react'; +import { Form, FormRow, Submit } from 'component/form'; +import lbryuri from 'lbryuri'; class WalletSend extends React.PureComponent { handleSubmit() { @@ -13,26 +13,18 @@ class WalletSend extends React.PureComponent { } render() { - const { - closeModal, - modal, - setAmount, - setAddress, - amount, - address, - error, - } = this.props; + const { closeModal, modal, setAmount, setAddress, amount, address, error } = this.props; return ( <section className="card"> <Form onSubmit={this.handleSubmit.bind(this)}> <div className="card__title-primary"> - <h3>{__("Send Credits")}</h3> + <h3>{__('Send Credits')}</h3> </div> <div className="card__content"> <FormRow - label={__("Amount")} - postfix={__("LBC")} + label={__('Amount')} + postfix={__('LBC')} step="any" min="0" type="number" @@ -44,20 +36,17 @@ class WalletSend extends React.PureComponent { </div> <div className="card__content"> <FormRow - label={__("Recipient Address")} + label={__('Recipient Address')} placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={setAddress} value={address} regexp={lbryuri.REGEXP_ADDRESS} - trim={true} + trim /> <div className="form-row-submit"> - <Submit - label={__("Send")} - disabled={!(parseFloat(amount) > 0.0) || !address} - /> + <Submit label={__('Send')} disabled={!(parseFloat(amount) > 0.0) || !address} /> </div> </div> </Form> diff --git a/src/renderer/component/walletSendTip/index.js b/src/renderer/component/walletSendTip/index.js index 109eec9c1..daa4ec66a 100644 --- a/src/renderer/component/walletSendTip/index.js +++ b/src/renderer/component/walletSendTip/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doSendSupport } from "redux/actions/wallet"; -import WalletSendTip from "./view"; -import { makeSelectTitleForUri } from "redux/selectors/claims"; -import { selectIsSendingSupport } from "redux/selectors/wallet"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doSendSupport } from 'redux/actions/wallet'; +import WalletSendTip from './view'; +import { makeSelectTitleForUri } from 'redux/selectors/claims'; +import { selectIsSendingSupport } from 'redux/selectors/wallet'; const select = (state, props) => ({ isPending: selectIsSendingSupport(state), @@ -11,8 +11,7 @@ const select = (state, props) => ({ }); const perform = dispatch => ({ - sendSupport: (amount, claim_id, uri) => - dispatch(doSendSupport(amount, claim_id, uri)), + sendSupport: (amount, claim_id, uri) => dispatch(doSendSupport(amount, claim_id, uri)), }); export default connect(select, perform)(WalletSendTip); diff --git a/src/renderer/component/walletSendTip/view.jsx b/src/renderer/component/walletSendTip/view.jsx index 42ffa6840..d3e106c19 100644 --- a/src/renderer/component/walletSendTip/view.jsx +++ b/src/renderer/component/walletSendTip/view.jsx @@ -1,7 +1,7 @@ -import React from "react"; -import Link from "component/link"; -import { FormRow } from "component/form"; -import UriIndicator from "component/uriIndicator"; +import React from 'react'; +import Link from 'component/link'; +import { FormRow } from 'component/form'; +import UriIndicator from 'component/uriIndicator'; class WalletSendTip extends React.PureComponent { constructor(props) { @@ -14,7 +14,7 @@ class WalletSendTip extends React.PureComponent { handleSendButtonClicked() { const { claim_id, uri } = this.props; - let amount = this.state.amount; + const amount = this.state.amount; this.props.sendSupport(amount, claim_id, uri); } @@ -31,28 +31,21 @@ class WalletSendTip extends React.PureComponent { <div> <div className="card__title-primary"> <h1> - {__("Support")} <UriIndicator uri={uri} /> + {__('Support')} <UriIndicator uri={uri} /> </h1> </div> <div className="card__content"> <FormRow - label={__("Amount")} - postfix={__("LBC")} + label={__('Amount')} + postfix={__('LBC')} min="0" step="any" type="number" errorMessage={errorMessage} helper={ <span> - {__( - 'This will appear as a tip for "%s" located at %s.', - title, - uri - ) + " "} - <Link - label={__("Learn more")} - href="https://lbry.io/faq/tipping" - /> + {`${__('This will appear as a tip for "%s" located at %s.', title, uri)} `} + <Link label={__('Learn more')} href="https://lbry.io/faq/tipping" /> </span> } placeholder="1.00" @@ -60,17 +53,12 @@ class WalletSendTip extends React.PureComponent { /> <div className="form-row-submit"> <Link - label={__("Send")} + label={__('Send')} button="primary" disabled={isPending} onClick={this.handleSendButtonClicked.bind(this)} /> - <Link - label={__("Cancel")} - button="alt" - navigate="/show" - navigateParams={{ uri }} - /> + <Link label={__('Cancel')} button="alt" navigate="/show" navigateParams={{ uri }} /> </div> </div> </div> diff --git a/src/renderer/component/wunderbar/index.js b/src/renderer/component/wunderbar/index.js index 81bab941d..826ab4225 100644 --- a/src/renderer/component/wunderbar/index.js +++ b/src/renderer/component/wunderbar/index.js @@ -1,12 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; -import lbryuri from "lbryuri.js"; -import { - selectWunderBarAddress, - selectWunderBarIcon, -} from "redux/selectors/search"; -import { doNavigate } from "redux/actions/navigation"; -import Wunderbar from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import lbryuri from 'lbryuri.js'; +import { selectWunderBarAddress, selectWunderBarIcon } from 'redux/selectors/search'; +import { doNavigate } from 'redux/actions/navigation'; +import Wunderbar from './view'; const select = state => ({ address: selectWunderBarAddress(state), @@ -14,11 +11,9 @@ const select = state => ({ }); const perform = dispatch => ({ - onSearch: query => dispatch(doNavigate("/search", { query })), + onSearch: query => dispatch(doNavigate('/search', { query })), onSubmit: (query, extraParams) => - dispatch( - doNavigate("/show", { uri: lbryuri.normalize(query), ...extraParams }) - ), + dispatch(doNavigate('/show', { uri: lbryuri.normalize(query), ...extraParams })), }); export default connect(select, perform)(Wunderbar); diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx index b23dc2218..b0242baff 100644 --- a/src/renderer/component/wunderbar/view.jsx +++ b/src/renderer/component/wunderbar/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import PropTypes from "prop-types"; -import lbryuri from "lbryuri.js"; -import { Icon } from "component/common.js"; -import { parseQueryParams } from "util/query_params"; +import React from 'react'; +import PropTypes from 'prop-types'; +import lbryuri from 'lbryuri.js'; +import { Icon } from 'component/common.js'; +import { parseQueryParams } from 'util/query_params'; class WunderBar extends React.PureComponent { static TYPING_TIMEOUT = 800; @@ -45,7 +45,7 @@ class WunderBar extends React.PureComponent { this._isSearchDispatchPending = true; - let searchQuery = event.target.value; + const searchQuery = event.target.value; this._userTypingTimer = setTimeout(() => { const hasQuery = searchQuery.length === 0; @@ -68,19 +68,16 @@ class WunderBar extends React.PureComponent { onFocus() { this._stateBeforeSearch = this.state; - let newState = { - icon: "icon-search", + const newState = { + icon: 'icon-search', isActive: true, }; this._focusPending = true; - //below is hacking, improved when we have proper routing - if ( - !this.state.address.startsWith("lbry://") && - this.state.icon !== "icon-search" - ) { - //onFocus, if they are not on an exact URL or a search page, clear the bar - newState.address = ""; + // below is hacking, improved when we have proper routing + if (!this.state.address.startsWith('lbry://') && this.state.icon !== 'icon-search') { + // onFocus, if they are not on an exact URL or a search page, clear the bar + newState.address = ''; } this.setState(newState); } @@ -91,7 +88,7 @@ class WunderBar extends React.PureComponent { this.onBlur(); }, WunderBar.TYPING_TIMEOUT + 1); } else { - let commonState = { isActive: false }; + const commonState = { isActive: false }; if (this._resetOnNextBlur) { this.setState(Object.assign({}, this._stateBeforeSearch, commonState)); this._input.value = this.state.address; @@ -108,7 +105,7 @@ class WunderBar extends React.PureComponent { const start = this._input.selectionStart, end = this._input.selectionEnd; - this._input.value = this.state.address; //this causes cursor to go to end of input + this._input.value = this.state.address; // this causes cursor to go to end of input this._input.setSelectionRange(start, end); @@ -122,23 +119,23 @@ class WunderBar extends React.PureComponent { onKeyPress(event) { if (event.charCode == 13 && this._input.value) { let uri = null, - method = "onSubmit", + method = 'onSubmit', extraParams = {}; this._resetOnNextBlur = false; clearTimeout(this._userTypingTimer); - const parts = this._input.value.trim().split("?"); + const parts = this._input.value.trim().split('?'); const value = parts.shift(); - if (parts.length > 0) extraParams = parseQueryParams(parts.join("")); + if (parts.length > 0) extraParams = parseQueryParams(parts.join('')); try { uri = lbryuri.normalize(value); this.setState({ value: uri }); } catch (error) { - //then it's not a valid URL, so let's search + // then it's not a valid URL, so let's search uri = value; - method = "onSearch"; + method = 'onSearch'; } this.props[method](uri, extraParams); @@ -152,12 +149,8 @@ class WunderBar extends React.PureComponent { render() { return ( - <div - className={ - "wunderbar" + (this.state.isActive ? " wunderbar--active" : "") - } - > - {this.state.icon ? <Icon fixed icon={this.state.icon} /> : ""} + <div className={`wunderbar${this.state.isActive ? ' wunderbar--active' : ''}`}> + {this.state.icon ? <Icon fixed icon={this.state.icon} /> : ''} <input className="wunderbar__input" type="search" @@ -167,7 +160,7 @@ class WunderBar extends React.PureComponent { onChange={this.onChange} onKeyPress={this.onKeyPress} value={this.state.address} - placeholder={__("Find movies, music, games, and more")} + placeholder={__('Find movies, music, games, and more')} /> </div> ); diff --git a/src/renderer/modal/modal.js b/src/renderer/modal/modal.js index a89f9025b..58052bce3 100644 --- a/src/renderer/modal/modal.js +++ b/src/renderer/modal/modal.js @@ -1,12 +1,12 @@ -import React from "react"; -import PropTypes from "prop-types"; -import ReactModal from "react-modal"; -import Link from "component/link/index"; -import app from "app.js"; +import React from 'react'; +import PropTypes from 'prop-types'; +import ReactModal from 'react-modal'; +import Link from 'component/link/index'; +import app from 'app.js'; export class Modal extends React.PureComponent { static propTypes = { - type: PropTypes.oneOf(["alert", "confirm", "custom"]), + type: PropTypes.oneOf(['alert', 'confirm', 'custom']), overlay: PropTypes.bool, onConfirmed: PropTypes.func, onAborted: PropTypes.func, @@ -17,10 +17,10 @@ export class Modal extends React.PureComponent { }; static defaultProps = { - type: "alert", + type: 'alert', overlay: true, - confirmButtonLabel: app.i18n.__("OK"), - abortButtonLabel: app.i18n.__("Cancel"), + confirmButtonLabel: app.i18n.__('OK'), + abortButtonLabel: app.i18n.__('Cancel'), confirmButtonDisabled: false, abortButtonDisabled: false, }; @@ -30,15 +30,15 @@ export class Modal extends React.PureComponent { <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props} - className={`${this.props.className || ""} modal`} + className={`${this.props.className || ''} modal`} overlayClassName={ - ![null, undefined, ""].includes(this.props.overlayClassName) + ![null, undefined, ''].includes(this.props.overlayClassName) ? this.props.overlayClassName - : "modal-overlay" + : 'modal-overlay' } > <div>{this.props.children}</div> - {this.props.type == "custom" ? null : ( // custom modals define their own buttons + {this.props.type == 'custom' ? null : ( // custom modals define their own buttons <div className="modal__buttons"> <Link button="primary" @@ -47,7 +47,7 @@ export class Modal extends React.PureComponent { disabled={this.props.confirmButtonDisabled} onClick={this.props.onConfirmed} /> - {this.props.type == "confirm" ? ( + {this.props.type == 'confirm' ? ( <Link button="alt" label={this.props.abortButtonLabel} @@ -70,9 +70,9 @@ export class ExpandableModal extends React.PureComponent { }; static defaultProps = { - confirmButtonLabel: app.i18n.__("OK"), - expandButtonLabel: app.i18n.__("Show More..."), - hideButtonLabel: app.i18n.__("Show Less"), + confirmButtonLabel: app.i18n.__('OK'), + expandButtonLabel: app.i18n.__('Show More...'), + hideButtonLabel: app.i18n.__('Show Less'), }; constructor(props) { @@ -103,11 +103,7 @@ export class ExpandableModal extends React.PureComponent { /> <Link button="alt" - label={ - !this.state.expanded - ? this.props.expandButtonLabel - : this.props.hideButtonLabel - } + label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel} className="modal__button" onClick={() => { this.toggleExpanded(); diff --git a/src/renderer/modal/modalAffirmPurchase/index.js b/src/renderer/modal/modalAffirmPurchase/index.js index d128e31b1..f3e5fc161 100644 --- a/src/renderer/modal/modalAffirmPurchase/index.js +++ b/src/renderer/modal/modalAffirmPurchase/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doLoadVideo, doSetPlayingUri } from "redux/actions/content"; -import { makeSelectMetadataForUri } from "redux/selectors/claims"; -import ModalAffirmPurchase from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doLoadVideo, doSetPlayingUri } from 'redux/actions/content'; +import { makeSelectMetadataForUri } from 'redux/selectors/claims'; +import ModalAffirmPurchase from './view'; const select = (state, props) => ({ metadata: makeSelectMetadataForUri(props.uri)(state), diff --git a/src/renderer/modal/modalAffirmPurchase/view.jsx b/src/renderer/modal/modalAffirmPurchase/view.jsx index 96dd6c1c9..0f8b2edd7 100644 --- a/src/renderer/modal/modalAffirmPurchase/view.jsx +++ b/src/renderer/modal/modalAffirmPurchase/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import FilePrice from "component/filePrice"; -import { Modal } from "modal/modal"; +import React from 'react'; +import FilePrice from 'component/filePrice'; +import { Modal } from 'modal/modal'; class ModalAffirmPurchase extends React.PureComponent { onAffirmPurchase() { @@ -14,16 +14,16 @@ class ModalAffirmPurchase extends React.PureComponent { return ( <Modal type="confirm" - isOpen={true} - contentLabel={__("Confirm Purchase")} + isOpen + contentLabel={__('Confirm Purchase')} onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={cancelPurchase} > - {__("This will purchase")} <strong>{title}</strong> {__("for")}{" "} + {__('This will purchase')} <strong>{title}</strong> {__('for')}{' '} <strong> - <FilePrice uri={uri} showFullPrice={true} look="plain" /> - </strong>{" "} - {__("credits")}. + <FilePrice uri={uri} showFullPrice look="plain" /> + </strong>{' '} + {__('credits')}. </Modal> ); } diff --git a/src/renderer/modal/modalAuthFailure/index.js b/src/renderer/modal/modalAuthFailure/index.js index 6e1aa708d..ed408365f 100644 --- a/src/renderer/modal/modalAuthFailure/index.js +++ b/src/renderer/modal/modalAuthFailure/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import ModalAuthFailure from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import ModalAuthFailure from './view'; const select = state => ({}); diff --git a/src/renderer/modal/modalAuthFailure/view.jsx b/src/renderer/modal/modalAuthFailure/view.jsx index ada5e2340..83c6b6856 100644 --- a/src/renderer/modal/modalAuthFailure/view.jsx +++ b/src/renderer/modal/modalAuthFailure/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Modal } from "modal/modal"; +import React from 'react'; +import { Modal } from 'modal/modal'; class ModalAuthFailure extends React.PureComponent { render() { @@ -7,20 +7,20 @@ class ModalAuthFailure extends React.PureComponent { return ( <Modal - isOpen={true} - contentLabel={__("Unable to Authenticate")} + isOpen + contentLabel={__('Unable to Authenticate')} type="confirm" - confirmButtonLabel={__("Reload")} - abortButtonLabel={__("Continue")} + confirmButtonLabel={__('Reload')} + abortButtonLabel={__('Continue')} onConfirmed={() => { window.location.reload(); }} onAborted={close} > - <h3>{__("Authentication Failure")}</h3> + <h3>{__('Authentication Failure')}</h3> <p> {__( - "If reloading does not fix this, or you see this at every start up, please email help@lbry.io." + 'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.' )} </p> </Modal> diff --git a/src/renderer/modal/modalCreditIntro/index.js b/src/renderer/modal/modalCreditIntro/index.js index 28e49c19d..a6eb79720 100644 --- a/src/renderer/modal/modalCreditIntro/index.js +++ b/src/renderer/modal/modalCreditIntro/index.js @@ -1,17 +1,17 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doNavigate } from "redux/actions/navigation"; -import { doSetClientSetting } from "redux/actions/settings"; -import { selectUserIsRewardApproved } from "redux/selectors/user"; -import { selectBalance } from "redux/selectors/wallet"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doNavigate } from 'redux/actions/navigation'; +import { doSetClientSetting } from 'redux/actions/settings'; +import { selectUserIsRewardApproved } from 'redux/selectors/user'; +import { selectBalance } from 'redux/selectors/wallet'; import { makeSelectHasClaimedReward, makeSelectRewardByType, selectUnclaimedRewardValue, -} from "redux/selectors/rewards"; -import * as settings from "constants/settings"; -import ModalCreditIntro from "./view"; +} from 'redux/selectors/rewards'; +import * as settings from 'constants/settings'; +import ModalCreditIntro from './view'; const select = (state, props) => { const selectHasClaimed = makeSelectHasClaimedReward(), @@ -27,7 +27,7 @@ const select = (state, props) => { const perform = dispatch => () => ({ addBalance: () => { dispatch(doSetClientSetting(settings.CREDIT_REQUIRED_ACKNOWLEDGED, true)); - dispatch(doNavigate("/getcredits")); + dispatch(doNavigate('/getcredits')); dispatch(doCloseModal()); }, closeModal: () => { diff --git a/src/renderer/modal/modalCreditIntro/view.jsx b/src/renderer/modal/modalCreditIntro/view.jsx index b44fe9b77..572e6b59d 100644 --- a/src/renderer/modal/modalCreditIntro/view.jsx +++ b/src/renderer/modal/modalCreditIntro/view.jsx @@ -1,52 +1,43 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import { CreditAmount, CurrencySymbol } from "component/common"; -import Link from "component/link/index"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import { CreditAmount, CurrencySymbol } from 'component/common'; +import Link from 'component/link/index'; const ModalCreditIntro = props => { const { closeModal, totalRewardValue, currentBalance, addBalance } = props; const totalRewardRounded = Math.round(totalRewardValue / 10) * 10; return ( - <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY"> + <Modal type="custom" isOpen contentLabel="Welcome to LBRY"> <section> - <h3 className="modal__header"> - {__("Computer Wizard Needs Tokens Badly")} - </h3> + <h3 className="modal__header">{__('Computer Wizard Needs Tokens Badly')}</h3> <p> - Some actions require{" "} LBRY credits - (<em> + Some actions require LBRY credits (<em> <CurrencySymbol /> </em>), the blockchain token that powers the LBRY network. </p> {currentBalance <= 0 && ( <p> - You currently have <CreditAmount amount={currentBalance} />, so the - actions you can take are limited. + You currently have <CreditAmount amount={currentBalance} />, so the actions you can take + are limited. </p> )} <p> - There are a variety of ways to get credits, including more than{" "} + There are a variety of ways to get credits, including more than{' '} {totalRewardValue ? ( <CreditAmount amount={totalRewardRounded} /> ) : ( - <span className="credit-amount">{__("?? credits")}</span> - )}{" "} - {__(" in free rewards for participating in the LBRY beta.")} + <span className="credit-amount">{__('?? credits')}</span> + )}{' '} + {__(' in free rewards for participating in the LBRY beta.')} </p> <div className="modal__buttons"> - <Link - button="primary" - onClick={addBalance} - label={__("Get Credits")} - /> + <Link button="primary" onClick={addBalance} label={__('Get Credits')} /> <Link button="alt" onClick={closeModal} - label={ - currentBalance <= 0 ? __("Use Without LBC") : __("Meh, Not Now") - } + label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')} /> </div> </section> diff --git a/src/renderer/modal/modalDownloading/index.js b/src/renderer/modal/modalDownloading/index.js index 56b385a2d..4174b4577 100644 --- a/src/renderer/modal/modalDownloading/index.js +++ b/src/renderer/modal/modalDownloading/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doStartUpgrade, doCancelUpgrade } from "redux/actions/app"; -import { - selectDownloadProgress, - selectDownloadComplete, -} from "redux/selectors/app"; -import ModalDownloading from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doStartUpgrade, doCancelUpgrade } from 'redux/actions/app'; +import { selectDownloadProgress, selectDownloadComplete } from 'redux/selectors/app'; +import ModalDownloading from './view'; const select = state => ({ downloadProgress: selectDownloadProgress(state), diff --git a/src/renderer/modal/modalDownloading/view.jsx b/src/renderer/modal/modalDownloading/view.jsx index d52176b8e..4ae556db6 100644 --- a/src/renderer/modal/modalDownloading/view.jsx +++ b/src/renderer/modal/modalDownloading/view.jsx @@ -1,53 +1,41 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import { Line } from "rc-progress"; -import Link from "component/link/index"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import { Line } from 'rc-progress'; +import Link from 'component/link/index'; class ModalDownloading extends React.PureComponent { render() { - const { - downloadProgress, - downloadComplete, - startUpgrade, - cancelUpgrade, - } = this.props; + const { downloadProgress, downloadComplete, startUpgrade, cancelUpgrade } = this.props; return ( - <Modal - isOpen={true} - contentLabel={__("Downloading Update")} - type="custom" - > - {__("Downloading Update")} + <Modal isOpen contentLabel={__('Downloading Update')} type="custom"> + {__('Downloading Update')} {downloadProgress ? `: ${downloadProgress}%` : null} - <Line - percent={downloadProgress ? downloadProgress : 0} - strokeWidth="4" - /> + <Line percent={downloadProgress || 0} strokeWidth="4" /> {downloadComplete ? ( <div> <br /> <p>{__('Click "Begin Upgrade" to start the upgrade process.')}</p> <p> {__( - "The app will close, and you will be prompted to install the latest version of LBRY." + 'The app will close, and you will be prompted to install the latest version of LBRY.' )} </p> - <p>{__("After the install is complete, please reopen the app.")}</p> + <p>{__('After the install is complete, please reopen the app.')}</p> </div> ) : null} <div className="modal__buttons"> {downloadComplete ? ( <Link button="primary" - label={__("Begin Upgrade")} + label={__('Begin Upgrade')} className="modal__button" onClick={startUpgrade} /> ) : null} <Link button="alt" - label={__("Cancel")} + label={__('Cancel')} className="modal__button" onClick={cancelUpgrade} /> diff --git a/src/renderer/modal/modalEmailCollection/index.js b/src/renderer/modal/modalEmailCollection/index.js index b61c42e0a..242b9e509 100644 --- a/src/renderer/modal/modalEmailCollection/index.js +++ b/src/renderer/modal/modalEmailCollection/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import * as settings from "constants/settings"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doSetClientSetting } from "redux/actions/settings"; -import { selectEmailToVerify, selectUser } from "redux/selectors/user"; -import ModalEmailCollection from "./view"; +import React from 'react'; +import * as settings from 'constants/settings'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doSetClientSetting } from 'redux/actions/settings'; +import { selectEmailToVerify, selectUser } from 'redux/selectors/user'; +import ModalEmailCollection from './view'; const select = state => ({ email: selectEmailToVerify(state), diff --git a/src/renderer/modal/modalEmailCollection/view.jsx b/src/renderer/modal/modalEmailCollection/view.jsx index 422c4c080..a17ecf7df 100644 --- a/src/renderer/modal/modalEmailCollection/view.jsx +++ b/src/renderer/modal/modalEmailCollection/view.jsx @@ -1,40 +1,35 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import Link from "component/link/index"; -import UserEmailNew from "component/userEmailNew"; -import UserEmailVerify from "component/userEmailVerify"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import Link from 'component/link/index'; +import UserEmailNew from 'component/userEmailNew'; +import UserEmailVerify from 'component/userEmailVerify'; class ModalEmailCollection extends React.PureComponent { renderInner() { const { closeModal, email, user } = this.props; - const cancelButton = ( - <Link button="text" onClick={closeModal} label={__("Not Now")} /> - ); + const cancelButton = <Link button="text" onClick={closeModal} label={__('Not Now')} />; if (!user.has_verified_email && !email) { return <UserEmailNew cancelButton={cancelButton} />; } else if (!user.has_verified_email) { return <UserEmailVerify cancelButton={cancelButton} />; - } else { - closeModal(); } + closeModal(); } render() { const { user } = this.props; - //this shouldn't happen + // this shouldn't happen if (!user) { return null; } return ( - <Modal type="custom" isOpen={true} contentLabel="Email"> + <Modal type="custom" isOpen contentLabel="Email"> <section> - <h3 className="modal__header"> - Can We Stay In Touch? - </h3> + <h3 className="modal__header">Can We Stay In Touch?</h3> {this.renderInner()} </section> </Modal> diff --git a/src/renderer/modal/modalError/index.js b/src/renderer/modal/modalError/index.js index b9ce5c21e..570827151 100644 --- a/src/renderer/modal/modalError/index.js +++ b/src/renderer/modal/modalError/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import ModalError from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import ModalError from './view'; const perform = dispatch => ({ closeModal: () => dispatch(doCloseModal()), diff --git a/src/renderer/modal/modalError/view.jsx b/src/renderer/modal/modalError/view.jsx index 3dd16fdce..c42d04c8f 100644 --- a/src/renderer/modal/modalError/view.jsx +++ b/src/renderer/modal/modalError/view.jsx @@ -1,56 +1,48 @@ -import React from "react"; -import lbry from "lbry"; -import { ExpandableModal } from "modal/modal"; +import React from 'react'; +import lbry from 'lbry'; +import { ExpandableModal } from 'modal/modal'; class ModalError extends React.PureComponent { render() { const { closeModal, error } = this.props; - const errorObj = typeof error === "string" ? { message: error } : error; + const errorObj = typeof error === 'string' ? { message: error } : error; const error_key_labels = { - connectionString: __("API connection string"), - method: __("Method"), - params: __("Parameters"), - code: __("Error code"), - message: __("Error message"), - data: __("Error data"), + connectionString: __('API connection string'), + method: __('Method'), + params: __('Parameters'), + code: __('Error code'), + message: __('Error message'), + data: __('Error data'), }; const errorInfoList = []; - for (let key of Object.keys(errorObj)) { - let val = - typeof errorObj[key] == "string" - ? errorObj[key] - : JSON.stringify(errorObj[key]); - let label = error_key_labels[key]; + for (const key of Object.keys(errorObj)) { + const val = typeof errorObj[key] === 'string' ? errorObj[key] : JSON.stringify(errorObj[key]); + const label = error_key_labels[key]; errorInfoList.push( <li key={key}> <strong>{label}</strong>: <code>{val}</code> </li> ); } - const errorInfo = ( - <ul className="error-modal__error-list">{errorInfoList}</ul> - ); + const errorInfo = <ul className="error-modal__error-list">{errorInfoList}</ul>; return ( <ExpandableModal - isOpen={true} - contentLabel={__("Error")} + isOpen + contentLabel={__('Error')} className="error-modal" overlayClassName="error-modal-overlay" onConfirmed={closeModal} extraContent={errorInfo} > - <h3 className="modal__header">{__("Error")}</h3> + <h3 className="modal__header">{__('Error')}</h3> <div className="error-modal__content"> <div> - <img - className="error-modal__warning-symbol" - src={lbry.imagePath("warning.png")} - /> + <img className="error-modal__warning-symbol" src={lbry.imagePath('warning.png')} /> </div> <p> {__( diff --git a/src/renderer/modal/modalFileTimeout/index.js b/src/renderer/modal/modalFileTimeout/index.js index a204b8149..2d8d280fc 100644 --- a/src/renderer/modal/modalFileTimeout/index.js +++ b/src/renderer/modal/modalFileTimeout/index.js @@ -1,8 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { makeSelectMetadataForUri } from "redux/selectors/claims"; -import ModalFileTimeout from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { makeSelectMetadataForUri } from 'redux/selectors/claims'; +import ModalFileTimeout from './view'; const select = state => ({ metadata: makeSelectMetadataForUri(props.uri)(state), diff --git a/src/renderer/modal/modalFileTimeout/view.jsx b/src/renderer/modal/modalFileTimeout/view.jsx index da9be3f17..f222ddfe2 100644 --- a/src/renderer/modal/modalFileTimeout/view.jsx +++ b/src/renderer/modal/modalFileTimeout/view.jsx @@ -1,17 +1,13 @@ -import React from "react"; -import { Modal } from "modal/modal"; +import React from 'react'; +import { Modal } from 'modal/modal'; class ModalFileTimeout extends React.PureComponent { render() { const { metadata: { title } } = this.props; return ( - <Modal - isOpen={true} - contentLabel={__("Download failed")} - onConfirmed={closeModal} - > - {__("LBRY was unable to download the stream")} <strong>{title}</strong>. + <Modal isOpen contentLabel={__('Download failed')} onConfirmed={closeModal}> + {__('LBRY was unable to download the stream')} <strong>{title}</strong>. </Modal> ); } diff --git a/src/renderer/modal/modalFirstReward/index.js b/src/renderer/modal/modalFirstReward/index.js index 208491421..eb9f65297 100644 --- a/src/renderer/modal/modalFirstReward/index.js +++ b/src/renderer/modal/modalFirstReward/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import rewards from "rewards"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { makeSelectRewardByType } from "redux/selectors/rewards"; -import ModalFirstReward from "./view"; +import React from 'react'; +import rewards from 'rewards'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { makeSelectRewardByType } from 'redux/selectors/rewards'; +import ModalFirstReward from './view'; const select = (state, props) => { const selectReward = makeSelectRewardByType(); diff --git a/src/renderer/modal/modalFirstReward/view.jsx b/src/renderer/modal/modalFirstReward/view.jsx index 0744f44f7..b50625b58 100644 --- a/src/renderer/modal/modalFirstReward/view.jsx +++ b/src/renderer/modal/modalFirstReward/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import { CreditAmount } from "component/common"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import { CreditAmount } from 'component/common'; class ModalFirstReward extends React.PureComponent { render() { @@ -10,14 +10,14 @@ class ModalFirstReward extends React.PureComponent { <Modal type="alert" overlayClassName="modal-overlay modal-overlay--clear" - isOpen={true} - contentLabel={__("Welcome to LBRY")} + isOpen + contentLabel={__('Welcome to LBRY')} onConfirmed={closeModal} > <section> - <h3 className="modal__header">{__("Your First Reward")}</h3> + <h3 className="modal__header">{__('Your First Reward')}</h3> <p> - {__("You just earned your first reward of")}{" "} + {__('You just earned your first reward of')}{' '} <CreditAmount amount={reward.reward_amount} />. </p> <p> @@ -27,12 +27,12 @@ class ModalFirstReward extends React.PureComponent { </p> <p> {__( - "These credits are used to compensate creators, to publish your own content, and to have say in how the network works." + 'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.' )} </p> <p> {__( - "No need to understand it all just yet! Try watching or publishing something next." + 'No need to understand it all just yet! Try watching or publishing something next.' )} </p> </section> diff --git a/src/renderer/modal/modalIncompatibleDaemon/index.js b/src/renderer/modal/modalIncompatibleDaemon/index.js index f8e45c9d4..fda1b57f9 100644 --- a/src/renderer/modal/modalIncompatibleDaemon/index.js +++ b/src/renderer/modal/modalIncompatibleDaemon/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doQuit, doSkipWrongDaemonNotice } from "redux/actions/app"; -import ModalIncompatibleDaemon from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doQuit, doSkipWrongDaemonNotice } from 'redux/actions/app'; +import ModalIncompatibleDaemon from './view'; const select = state => ({}); diff --git a/src/renderer/modal/modalIncompatibleDaemon/view.jsx b/src/renderer/modal/modalIncompatibleDaemon/view.jsx index e4b1e5561..cfab04ab1 100644 --- a/src/renderer/modal/modalIncompatibleDaemon/view.jsx +++ b/src/renderer/modal/modalIncompatibleDaemon/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import Link from "component/link/index"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import Link from 'component/link/index'; class ModalIncompatibleDaemon extends React.PureComponent { render() { @@ -8,19 +8,16 @@ class ModalIncompatibleDaemon extends React.PureComponent { return ( <Modal - isOpen={true} - contentLabel={__("Incompatible daemon running")} + isOpen + contentLabel={__('Incompatible daemon running')} type="alert" - confirmButtonLabel={__("Quit")} + confirmButtonLabel={__('Quit')} onConfirmed={quit} > {__( - "This browser is running with an incompatible version of the LBRY protocol and your install must be repaired. " + 'This browser is running with an incompatible version of the LBRY protocol and your install must be repaired. ' )} - <Link - label={__("Learn more")} - href="https://lbry.io/faq/incompatible-protocol-version" - /> + <Link label={__('Learn more')} href="https://lbry.io/faq/incompatible-protocol-version" /> </Modal> ); } diff --git a/src/renderer/modal/modalRemoveFile/index.js b/src/renderer/modal/modalRemoveFile/index.js index e49bbc7aa..76fac9580 100644 --- a/src/renderer/modal/modalRemoveFile/index.js +++ b/src/renderer/modal/modalRemoveFile/index.js @@ -1,13 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doDeleteFileAndGoBack } from "redux/actions/file_info"; -import { - makeSelectTitleForUri, - makeSelectClaimIsMine, -} from "redux/selectors/claims"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; -import ModalRemoveFile from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doDeleteFileAndGoBack } from 'redux/actions/file_info'; +import { makeSelectTitleForUri, makeSelectClaimIsMine } from 'redux/selectors/claims'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; +import ModalRemoveFile from './view'; const select = (state, props) => ({ claimIsMine: makeSelectClaimIsMine(props.uri)(state), diff --git a/src/renderer/modal/modalRemoveFile/view.jsx b/src/renderer/modal/modalRemoveFile/view.jsx index 7106a5e4c..011247aed 100644 --- a/src/renderer/modal/modalRemoveFile/view.jsx +++ b/src/renderer/modal/modalRemoveFile/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import FormField from "component/formField/index"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import FormField from 'component/formField/index'; class ModalRemoveFile extends React.PureComponent { constructor(props) { @@ -25,29 +25,20 @@ class ModalRemoveFile extends React.PureComponent { } render() { - const { - claimIsMine, - closeModal, - deleteFile, - fileInfo: { outpoint }, - title, - } = this.props; + const { claimIsMine, closeModal, deleteFile, fileInfo: { outpoint }, title } = this.props; const { deleteChecked, abandonClaimChecked } = this.state; return ( <Modal - isOpen={true} - contentLabel={__("Confirm File Remove")} + isOpen + contentLabel={__('Confirm File Remove')} type="confirm" - confirmButtonLabel={__("Remove")} - onConfirmed={() => - deleteFile(outpoint, deleteChecked, abandonClaimChecked) - } + confirmButtonLabel={__('Remove')} + onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)} onAborted={closeModal} > <p> - {__("Are you sure you'd like to remove")} <cite>{title}</cite>{" "} - {__("from LBRY?")} + {__("Are you sure you'd like to remove")} <cite>{title}</cite> {__('from LBRY?')} </p> <section> @@ -55,7 +46,7 @@ class ModalRemoveFile extends React.PureComponent { type="checkbox" checked={deleteChecked} onClick={this.handleDeleteCheckboxClicked.bind(this)} - label={__("Delete this file from my computer")} + label={__('Delete this file from my computer')} /> </section> {claimIsMine && ( @@ -64,7 +55,7 @@ class ModalRemoveFile extends React.PureComponent { type="checkbox" checked={abandonClaimChecked} onClick={this.handleAbandonClaimCheckboxClicked.bind(this)} - label={__("Abandon the claim for this URI")} + label={__('Abandon the claim for this URI')} /> </section> )} diff --git a/src/renderer/modal/modalRevokeClaim/index.js b/src/renderer/modal/modalRevokeClaim/index.js index 1d09b4daa..7a47859f4 100644 --- a/src/renderer/modal/modalRevokeClaim/index.js +++ b/src/renderer/modal/modalRevokeClaim/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doAbandonClaim } from "redux/actions/content"; -import { selectTransactionItems } from "redux/selectors/wallet"; -import ModalRevokeClaim from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doAbandonClaim } from 'redux/actions/content'; +import { selectTransactionItems } from 'redux/selectors/wallet'; +import ModalRevokeClaim from './view'; const select = state => ({ transactionItems: selectTransactionItems(state), diff --git a/src/renderer/modal/modalRevokeClaim/view.jsx b/src/renderer/modal/modalRevokeClaim/view.jsx index 06f1362f8..3afa38659 100644 --- a/src/renderer/modal/modalRevokeClaim/view.jsx +++ b/src/renderer/modal/modalRevokeClaim/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import * as txnTypes from "constants/transaction_types"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import * as txnTypes from 'constants/transaction_types'; class ModalRevokeClaim extends React.PureComponent { constructor(props) { @@ -16,62 +16,58 @@ class ModalRevokeClaim extends React.PureComponent { getButtonLabel(type) { if (type == txnTypes.TIP) { - return "Confirm Tip Unlock"; - } else { - return "Confirm Claim Revoke"; + return 'Confirm Tip Unlock'; } + return 'Confirm Claim Revoke'; } getMsgBody(type) { if (type == txnTypes.TIP) { return ( <div> - <h3>{__("Confirm Tip Unlock")}</h3> + <h3>{__('Confirm Tip Unlock')}</h3> <p> - {__("Are you sure you want to unlock these credits?")} + {__('Are you sure you want to unlock these credits?')} <br /> <br /> {__( - "These credits are permanently yours and can be\ + 'These credits are permanently yours and can be\ unlocked at any time. Unlocking them allows you to\ spend them, but can hurt the performance of your\ content in lookups and search results. It is\ recommended you leave tips locked until you\ - need or want to spend them." - )} - </p> - </div> - ); - } else { - return ( - <div> - <h3>{__("Confirm Claim Revoke")}</h3> - <p> - {__("Are you sure want to revoke this claim?")} - <br /> - <br /> - {__( - "This will prevent others from resolving and\ - accessing the content you published. It will return\ - the LBC to your spendable balance, less a small\ - transaction fee." + need or want to spend them.' )} </p> </div> ); } + return ( + <div> + <h3>{__('Confirm Claim Revoke')}</h3> + <p> + {__('Are you sure want to revoke this claim?')} + <br /> + <br /> + {__( + 'This will prevent others from resolving and\ + accessing the content you published. It will return\ + the LBC to your spendable balance, less a small\ + transaction fee.' + )} + </p> + </div> + ); } render() { const { transactionItems, txid, nout, closeModal } = this.props; - const { type } = transactionItems.find( - claim => claim.txid == txid && claim.nout == nout - ); + const { type } = transactionItems.find(claim => claim.txid == txid && claim.nout == nout); return ( <Modal - isOpen={true} - contentLabel={__("Confirm Claim Revoke")} + isOpen + contentLabel={__('Confirm Claim Revoke')} type="confirm" confirmButtonLabel={this.getButtonLabel(type)} onConfirmed={this.revokeClaim.bind(this)} diff --git a/src/renderer/modal/modalRewardApprovalRequired/index.js b/src/renderer/modal/modalRewardApprovalRequired/index.js index d85b70a28..21091f5d8 100644 --- a/src/renderer/modal/modalRewardApprovalRequired/index.js +++ b/src/renderer/modal/modalRewardApprovalRequired/index.js @@ -1,8 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import { doAuthNavigate } from "redux/actions/navigation"; -import ModalRewardApprovalRequired from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import { doAuthNavigate } from 'redux/actions/navigation'; +import ModalRewardApprovalRequired from './view'; const perform = dispatch => ({ doAuth: () => { diff --git a/src/renderer/modal/modalRewardApprovalRequired/view.jsx b/src/renderer/modal/modalRewardApprovalRequired/view.jsx index fcdab9f98..340f1e719 100644 --- a/src/renderer/modal/modalRewardApprovalRequired/view.jsx +++ b/src/renderer/modal/modalRewardApprovalRequired/view.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Modal } from "modal/modal"; +import React from 'react'; +import { Modal } from 'modal/modal'; class ModalRewardApprovalRequired extends React.PureComponent { render() { @@ -7,18 +7,16 @@ class ModalRewardApprovalRequired extends React.PureComponent { return ( <Modal - isOpen={true} - contentLabel={__("Human Verification Required")} + isOpen + contentLabel={__('Human Verification Required')} onConfirmed={doAuth} onAborted={closeModal} type="confirm" confirmButtonLabel={__("I'm Totally Real")} - abortButtonLabel={__("Never Mind")} + abortButtonLabel={__('Never Mind')} > <section> - <h3 className="modal__header"> - {__("This is awkward. Are you real?")} - </h3> + <h3 className="modal__header">{__('This is awkward. Are you real?')}</h3> <p> {__( "Before we can give you any credits, we need to perform a brief check to make sure you're a new and unique person." diff --git a/src/renderer/modal/modalRouter/index.js b/src/renderer/modal/modalRouter/index.js index 0b00c82a9..313c82528 100644 --- a/src/renderer/modal/modalRouter/index.js +++ b/src/renderer/modal/modalRouter/index.js @@ -1,18 +1,15 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doOpenModal } from "redux/actions/app"; -import * as settings from "constants/settings"; -import { selectCurrentModal, selectModalProps } from "redux/selectors/app"; -import { selectCurrentPage } from "redux/selectors/navigation"; -import { selectCostForCurrentPageUri } from "redux/selectors/cost_info"; -import { makeSelectClientSetting } from "redux/selectors/settings"; -import { - selectUser, - selectUserIsVerificationCandidate, -} from "redux/selectors/user"; -import { selectBalance } from "redux/selectors/wallet"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doOpenModal } from 'redux/actions/app'; +import * as settings from 'constants/settings'; +import { selectCurrentModal, selectModalProps } from 'redux/selectors/app'; +import { selectCurrentPage } from 'redux/selectors/navigation'; +import { selectCostForCurrentPageUri } from 'redux/selectors/cost_info'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { selectUser, selectUserIsVerificationCandidate } from 'redux/selectors/user'; +import { selectBalance } from 'redux/selectors/wallet'; -import ModalRouter from "./view"; +import ModalRouter from './view'; const select = (state, props) => ({ balance: selectBalance(state), @@ -21,15 +18,11 @@ const select = (state, props) => ({ modalProps: selectModalProps(state), page: selectCurrentPage(state), isVerificationCandidate: selectUserIsVerificationCandidate(state), - isCreditIntroAcknowledged: makeSelectClientSetting( - settings.CREDIT_REQUIRED_ACKNOWLEDGED - )(state), - isEmailCollectionAcknowledged: makeSelectClientSetting( - settings.EMAIL_COLLECTION_ACKNOWLEDGED - )(state), - isWelcomeAcknowledged: makeSelectClientSetting( - settings.NEW_USER_ACKNOWLEDGED - )(state), + isCreditIntroAcknowledged: makeSelectClientSetting(settings.CREDIT_REQUIRED_ACKNOWLEDGED)(state), + isEmailCollectionAcknowledged: makeSelectClientSetting(settings.EMAIL_COLLECTION_ACKNOWLEDGED)( + state + ), + isWelcomeAcknowledged: makeSelectClientSetting(settings.NEW_USER_ACKNOWLEDGED)(state), user: selectUser(state), }); diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx index 6ffcb7151..b2d68fbf2 100644 --- a/src/renderer/modal/modalRouter/view.jsx +++ b/src/renderer/modal/modalRouter/view.jsx @@ -1,19 +1,19 @@ -import React from "react"; -import ModalError from "modal/modalError"; -import ModalAuthFailure from "modal/modalAuthFailure"; -import ModalDownloading from "modal/modalDownloading"; -import ModalUpgrade from "modal/modalUpgrade"; -import ModalWelcome from "modal/modalWelcome"; -import ModalFirstReward from "modal/modalFirstReward"; -import ModalRewardApprovalRequired from "modal/modalRewardApprovalRequired"; -import ModalCreditIntro from "modal/modalCreditIntro"; -import ModalRemoveFile from "modal/modalRemoveFile"; -import ModalTransactionFailed from "modal/modalTransactionFailed"; -import ModalFileTimeout from "modal/modalFileTimeout"; -import ModalAffirmPurchase from "modal/modalAffirmPurchase"; -import ModalRevokeClaim from "modal/modalRevokeClaim"; -import ModalEmailCollection from "../modalEmailCollection"; -import * as modals from "constants/modal_types"; +import React from 'react'; +import ModalError from 'modal/modalError'; +import ModalAuthFailure from 'modal/modalAuthFailure'; +import ModalDownloading from 'modal/modalDownloading'; +import ModalUpgrade from 'modal/modalUpgrade'; +import ModalWelcome from 'modal/modalWelcome'; +import ModalFirstReward from 'modal/modalFirstReward'; +import ModalRewardApprovalRequired from 'modal/modalRewardApprovalRequired'; +import ModalCreditIntro from 'modal/modalCreditIntro'; +import ModalRemoveFile from 'modal/modalRemoveFile'; +import ModalTransactionFailed from 'modal/modalTransactionFailed'; +import ModalFileTimeout from 'modal/modalFileTimeout'; +import ModalAffirmPurchase from 'modal/modalAffirmPurchase'; +import ModalRevokeClaim from 'modal/modalRevokeClaim'; +import ModalEmailCollection from '../modalEmailCollection'; +import * as modals from 'constants/modal_types'; class ModalRouter extends React.PureComponent { constructor(props) { @@ -44,14 +44,11 @@ class ModalRouter extends React.PureComponent { this.checkShowWelcome, this.checkShowEmail, this.checkShowCreditIntro, - ].reduce((acc, func) => { - return !acc ? func.bind(this)(props) : acc; - }, false); + ].reduce((acc, func) => (!acc ? func.bind(this)(props) : acc), false); if ( transitionModal && - (transitionModal != this.state.lastTransitionModal || - page != this.state.lastTransitionPage) + (transitionModal != this.state.lastTransitionModal || page != this.state.lastTransitionPage) ) { openModal(transitionModal); this.setState({ @@ -63,22 +60,13 @@ class ModalRouter extends React.PureComponent { checkShowWelcome(props) { const { isWelcomeAcknowledged, user } = props; - if ( - !isWelcomeAcknowledged && - user && - !user.is_reward_approved && - !user.is_identity_verified - ) { + if (!isWelcomeAcknowledged && user && !user.is_reward_approved && !user.is_identity_verified) { return modals.WELCOME; } } checkShowEmail(props) { - const { - isEmailCollectionAcknowledged, - isVerificationCandidate, - user, - } = props; + const { isEmailCollectionAcknowledged, isVerificationCandidate, user } = props; if ( !isEmailCollectionAcknowledged && isVerificationCandidate && @@ -95,7 +83,7 @@ class ModalRouter extends React.PureComponent { if ( balance <= 0 && !isCreditIntroAcknowledged && - (["send", "publish"].includes(page) || this.isPaidShowPage(props)) + (['send', 'publish'].includes(page) || this.isPaidShowPage(props)) ) { return modals.INSUFFICIENT_CREDITS; } @@ -103,7 +91,7 @@ class ModalRouter extends React.PureComponent { isPaidShowPage(props) { const { page, showPageCost } = props; - return page === "show" && showPageCost > 0; + return page === 'show' && showPageCost > 0; } render() { diff --git a/src/renderer/modal/modalTransactionFailed/index.js b/src/renderer/modal/modalTransactionFailed/index.js index 5274a2467..7809b05ee 100644 --- a/src/renderer/modal/modalTransactionFailed/index.js +++ b/src/renderer/modal/modalTransactionFailed/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "redux/actions/app"; -import ModalTransactionFailed from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doCloseModal } from 'redux/actions/app'; +import ModalTransactionFailed from './view'; const select = state => ({}); diff --git a/src/renderer/modal/modalTransactionFailed/view.jsx b/src/renderer/modal/modalTransactionFailed/view.jsx index 776d5d387..e632e6624 100644 --- a/src/renderer/modal/modalTransactionFailed/view.jsx +++ b/src/renderer/modal/modalTransactionFailed/view.jsx @@ -1,17 +1,13 @@ -import React from "react"; -import { Modal } from "modal/modal"; +import React from 'react'; +import { Modal } from 'modal/modal'; class ModalTransactionFailed extends React.PureComponent { render() { const { closeModal } = this.props; return ( - <Modal - isOpen={true} - contentLabel={__("Transaction failed")} - onConfirmed={closeModal} - > - {__("Transaction failed.")}: + <Modal isOpen contentLabel={__('Transaction failed')} onConfirmed={closeModal}> + {__('Transaction failed.')}: </Modal> ); } diff --git a/src/renderer/modal/modalUpgrade/index.js b/src/renderer/modal/modalUpgrade/index.js index 1ba5a5dc1..abec51a72 100644 --- a/src/renderer/modal/modalUpgrade/index.js +++ b/src/renderer/modal/modalUpgrade/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doDownloadUpgrade, doSkipUpgrade } from "redux/actions/app"; -import ModalUpgrade from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app'; +import ModalUpgrade from './view'; const select = state => ({}); diff --git a/src/renderer/modal/modalUpgrade/view.jsx b/src/renderer/modal/modalUpgrade/view.jsx index e80f4c07c..208f71d16 100644 --- a/src/renderer/modal/modalUpgrade/view.jsx +++ b/src/renderer/modal/modalUpgrade/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import Link from "component/link"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import Link from 'component/link'; class ModalUpgrade extends React.PureComponent { render() { @@ -8,26 +8,23 @@ class ModalUpgrade extends React.PureComponent { return ( <Modal - isOpen={true} - contentLabel={__("Upgrade available")} + isOpen + contentLabel={__('Upgrade available')} type="confirm" - confirmButtonLabel={__("Upgrade")} - abortButtonLabel={__("Skip")} + confirmButtonLabel={__('Upgrade')} + abortButtonLabel={__('Skip')} onConfirmed={downloadUpgrade} onAborted={skipUpgrade} > - <h3 className="text-center">{__("LBRY Leveled Up")}</h3> + <h3 className="text-center">{__('LBRY Leveled Up')}</h3> <br /> <p> - {__("An updated version of LBRY is now available.")}{" "} - {__("Your version is out of date and may be unreliable or insecure.")} + {__('An updated version of LBRY is now available.')}{' '} + {__('Your version is out of date and may be unreliable or insecure.')} </p> <p className="meta text-center"> - {__("Want to know what has changed?")} See the{" "} - <Link - label={__("release notes")} - href="https://github.com/lbryio/lbry-app/releases" - />. + {__('Want to know what has changed?')} See the{' '} + <Link label={__('release notes')} href="https://github.com/lbryio/lbry-app/releases" />. </p> </Modal> ); diff --git a/src/renderer/modal/modalWelcome/index.js b/src/renderer/modal/modalWelcome/index.js index e093ce883..0688d6a07 100644 --- a/src/renderer/modal/modalWelcome/index.js +++ b/src/renderer/modal/modalWelcome/index.js @@ -1,10 +1,10 @@ -import React from "react"; -import * as settings from "constants/settings"; -import * as modals from "constants/modal_types"; -import { connect } from "react-redux"; -import { doCloseModal, doOpenModal } from "redux/actions/app"; -import { doSetClientSetting } from "redux/actions/settings"; -import ModalWelcome from "./view"; +import React from 'react'; +import * as settings from 'constants/settings'; +import * as modals from 'constants/modal_types'; +import { connect } from 'react-redux'; +import { doCloseModal, doOpenModal } from 'redux/actions/app'; +import { doSetClientSetting } from 'redux/actions/settings'; +import ModalWelcome from './view'; const perform = dispatch => () => ({ closeModal: () => { diff --git a/src/renderer/modal/modalWelcome/view.jsx b/src/renderer/modal/modalWelcome/view.jsx index c26121e37..42608254b 100644 --- a/src/renderer/modal/modalWelcome/view.jsx +++ b/src/renderer/modal/modalWelcome/view.jsx @@ -1,32 +1,24 @@ -import React from "react"; -import { Modal } from "modal/modal"; -import Link from "component/link/index"; +import React from 'react'; +import { Modal } from 'modal/modal'; +import Link from 'component/link/index'; const ModalWelcome = props => { const { closeModal } = props; return ( - <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY"> + <Modal type="custom" isOpen contentLabel="Welcome to LBRY"> <section> - <h3 className="modal__header">{__("Welcome to LBRY")}</h3> + <h3 className="modal__header">{__('Welcome to LBRY')}</h3> <p> - {__( - "Using LBRY is like dating a centaur. Totally normal up top, and" - )}{" "} - <em>{__("way different")}</em> {__("underneath.")} + {__('Using LBRY is like dating a centaur. Totally normal up top, and')}{' '} + <em>{__('way different')}</em> {__('underneath.')} </p> - <p>{__("Up top, LBRY is similar to popular media sites.")}</p> + <p>{__('Up top, LBRY is similar to popular media sites.')}</p> <p> - {__( - "Below, LBRY is controlled by users -- you -- via blockchain and decentralization." - )} + {__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')} </p> <div className="modal__buttons"> - <Link - button="primary" - onClick={closeModal} - label={__("Blockchain Centaurs? I'm In")} - /> + <Link button="primary" onClick={closeModal} label={__("Blockchain Centaurs? I'm In")} /> </div> </section> </Modal> diff --git a/src/renderer/page/auth/index.js b/src/renderer/page/auth/index.js index dcaf477b2..63d9b15f7 100644 --- a/src/renderer/page/auth/index.js +++ b/src/renderer/page/auth/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { doNavigate } from "redux/actions/navigation"; -import { connect } from "react-redux"; -import { selectPathAfterAuth } from "redux/selectors/navigation"; +import React from 'react'; +import { doNavigate } from 'redux/actions/navigation'; +import { connect } from 'react-redux'; +import { selectPathAfterAuth } from 'redux/selectors/navigation'; import { selectAuthenticationIsPending, selectEmailToVerify, @@ -9,8 +9,8 @@ import { selectUser, selectUserIsPending, selectIdentityVerifyIsPending, -} from "redux/selectors/user"; -import AuthPage from "./view"; +} from 'redux/selectors/user'; +import AuthPage from './view'; const select = state => ({ isPending: diff --git a/src/renderer/page/auth/view.jsx b/src/renderer/page/auth/view.jsx index 49ea877b2..423ce8597 100644 --- a/src/renderer/page/auth/view.jsx +++ b/src/renderer/page/auth/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import { BusyMessage } from "component/common"; -import Link from "component/link"; -import UserEmailNew from "component/userEmailNew"; -import UserEmailVerify from "component/userEmailVerify"; -import UserVerify from "component/userVerify"; +import React from 'react'; +import { BusyMessage } from 'component/common'; +import Link from 'component/link'; +import UserEmailNew from 'component/userEmailNew'; +import UserEmailVerify from 'component/userEmailVerify'; +import UserVerify from 'component/userVerify'; export class AuthPage extends React.PureComponent { componentWillMount() { @@ -30,30 +30,28 @@ export class AuthPage extends React.PureComponent { const { email, isPending, isVerificationCandidate, user } = this.props; if (isPending || (user && !user.has_verified_email && !email)) { - return __("Human Proofing"); + return __('Human Proofing'); } else if (user && !user.has_verified_email) { - return __("Confirm Email"); + return __('Confirm Email'); } else if (user && !user.is_identity_verified && !user.is_reward_approved) { - return __("Final Verification"); - } else { - return __("Welcome to LBRY"); + return __('Final Verification'); } + return __('Welcome to LBRY'); } renderMain() { const { email, isPending, isVerificationCandidate, user } = this.props; if (isPending) { - return [<BusyMessage message={__("Authenticating")} />, true]; + return [<BusyMessage message={__('Authenticating')} />, true]; } else if (user && !user.has_verified_email && !email) { return [<UserEmailNew />, true]; } else if (user && !user.has_verified_email) { return [<UserEmailVerify />, true]; } else if (user && !user.is_identity_verified) { return [<UserVerify />, false]; - } else { - return [<span className="empty">{__("No further steps.")}</span>, true]; } + return [<span className="empty">{__('No further steps.')}</span>, true]; } render() { @@ -69,13 +67,10 @@ export class AuthPage extends React.PureComponent { <div className="card__content">{innerContent}</div> <div className="card__content"> <div className="help"> - {__( - "This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards." - ) + " "} - <Link - onClick={() => navigate("/discover")} - label={__("Return home")} - />. + {`${__( + 'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards.' + )} `} + <Link onClick={() => navigate('/discover')} label={__('Return home')} />. </div> </div> </section> diff --git a/src/renderer/page/backup/index.js b/src/renderer/page/backup/index.js index 0766083c9..43bc773f9 100644 --- a/src/renderer/page/backup/index.js +++ b/src/renderer/page/backup/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectDaemonSettings } from "redux/selectors/settings"; -import BackupPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectDaemonSettings } from 'redux/selectors/settings'; +import BackupPage from './view'; const select = state => ({ daemonSettings: selectDaemonSettings(state), diff --git a/src/renderer/page/backup/view.jsx b/src/renderer/page/backup/view.jsx index 09c0b54da..bcb0a0667 100644 --- a/src/renderer/page/backup/view.jsx +++ b/src/renderer/page/backup/view.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import SubHeader from "component/subHeader"; -import Link from "component/link"; +import React from 'react'; +import SubHeader from 'component/subHeader'; +import Link from 'component/link'; class BackupPage extends React.PureComponent { render() { @@ -10,7 +10,7 @@ class BackupPage extends React.PureComponent { return ( <main className="main--single-column"> <SubHeader /> - <span className="empty">{__("Failed to load settings.")}</span> + <span className="empty">{__('Failed to load settings.')}</span> </main> ); } @@ -20,22 +20,22 @@ class BackupPage extends React.PureComponent { <SubHeader /> <section className="card"> <div className="card__title-primary"> - <h3>{__("Backup Your LBRY Credits")}</h3> + <h3>{__('Backup Your LBRY Credits')}</h3> </div> <div className="card__content"> <p> {__( - "Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer." + 'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.' )} </p> <p> {__( - "Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently." + 'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.' )} </p> <p> {__( - "However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:" + 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' )} </p> <p> @@ -44,15 +44,15 @@ class BackupPage extends React.PureComponent { <p> <strong> {__( - "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place." + 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' )} </strong> </p> <p> - For more details on backing up and best practices,{" "} + For more details on backing up and best practices,{' '} <Link href="https://lbry.io/faq/how-to-backup-wallet" - label={__("see this article")} + label={__('see this article')} />. </p> </div> diff --git a/src/renderer/page/channel/index.js b/src/renderer/page/channel/index.js index 4597fd573..c06f42e49 100644 --- a/src/renderer/page/channel/index.js +++ b/src/renderer/page/channel/index.js @@ -1,27 +1,21 @@ -import React from "react"; -import { connect } from "react-redux"; -import { - doFetchClaimsByChannel, - doFetchClaimCountByChannel, -} from "redux/actions/content"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchClaimsByChannel, doFetchClaimCountByChannel } from 'redux/actions/content'; import { makeSelectClaimForUri, makeSelectClaimsInChannelForCurrentPage, makeSelectFetchingChannelClaims, -} from "redux/selectors/claims"; -import { - makeSelectCurrentParam, - selectCurrentParams, -} from "redux/selectors/navigation"; -import { doNavigate } from "redux/actions/navigation"; -import { makeSelectTotalPagesForChannel } from "redux/selectors/content"; -import ChannelPage from "./view"; +} from 'redux/selectors/claims'; +import { makeSelectCurrentParam, selectCurrentParams } from 'redux/selectors/navigation'; +import { doNavigate } from 'redux/actions/navigation'; +import { makeSelectTotalPagesForChannel } from 'redux/selectors/content'; +import ChannelPage from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.uri)(state), fetching: makeSelectFetchingChannelClaims(props.uri)(state), - page: makeSelectCurrentParam("page")(state), + page: makeSelectCurrentParam('page')(state), params: selectCurrentParams(state), totalPages: makeSelectTotalPagesForChannel(props.uri)(state), }); diff --git a/src/renderer/page/channel/view.jsx b/src/renderer/page/channel/view.jsx index 94b726bcd..f32a9f938 100644 --- a/src/renderer/page/channel/view.jsx +++ b/src/renderer/page/channel/view.jsx @@ -1,10 +1,10 @@ -import React from "react"; -import lbryuri from "lbryuri"; -import { BusyMessage } from "component/common"; -import FileTile from "component/fileTile"; -import ReactPaginate from "react-paginate"; -import Link from "component/link"; -import SubscribeButton from "component/subscribeButton"; +import React from 'react'; +import lbryuri from 'lbryuri'; +import { BusyMessage } from 'component/common'; +import FileTile from 'component/fileTile'; +import ReactPaginate from 'react-paginate'; +import Link from 'component/link'; +import SubscribeButton from 'component/subscribeButton'; class ChannelPage extends React.PureComponent { componentDidMount() { @@ -29,7 +29,7 @@ class ChannelPage extends React.PureComponent { const { params } = this.props; const newParams = Object.assign({}, params, { page: pageNumber }); - this.props.navigate("/show", newParams); + this.props.navigate('/show', newParams); } render() { @@ -46,14 +46,11 @@ class ChannelPage extends React.PureComponent { } = this.props; const { name, claim_id: claimId } = claim; - const subscriptionUri = lbryuri.build( - { channelName: name, claimId }, - false - ); + const subscriptionUri = lbryuri.build({ channelName: name, claimId }, false); let contentList; if (fetching) { - contentList = <BusyMessage message={__("Fetching content")} />; + contentList = <BusyMessage message={__('Fetching content')} />; } else { contentList = claimsInChannel && claimsInChannel.length ? ( @@ -64,11 +61,11 @@ class ChannelPage extends React.PureComponent { name: claim.name, claimId: claim.claim_id, })} - showLocal={true} + showLocal /> )) ) : ( - <span className="empty">{__("No content found.")}</span> + <span className="empty">{__('No content found.')}</span> ); } @@ -84,12 +81,12 @@ class ChannelPage extends React.PureComponent { <div className="card__content"> <p className="empty"> {__( - "Channel pages are empty for all publishers currently, but will be coming in a future update." + 'Channel pages are empty for all publishers currently, but will be coming in a future update.' )} </p> </div> </section> - <h3 className="card-row__header">{__("Published Content")}</h3> + <h3 className="card-row__header">{__('Published Content')}</h3> {contentList} <div /> {(!fetching || (claimsInChannel && claimsInChannel.length)) && diff --git a/src/renderer/page/discover/index.js b/src/renderer/page/discover/index.js index 396351025..ea3fc0fd0 100644 --- a/src/renderer/page/discover/index.js +++ b/src/renderer/page/discover/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doFetchFeaturedUris } from "redux/actions/content"; -import { - selectFeaturedUris, - selectFetchingFeaturedUris, -} from "redux/selectors/content"; -import DiscoverPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchFeaturedUris } from 'redux/actions/content'; +import { selectFeaturedUris, selectFetchingFeaturedUris } from 'redux/selectors/content'; +import DiscoverPage from './view'; const select = state => ({ featuredUris: selectFeaturedUris(state), diff --git a/src/renderer/page/discover/view.jsx b/src/renderer/page/discover/view.jsx index 47919e542..53bc5afaa 100644 --- a/src/renderer/page/discover/view.jsx +++ b/src/renderer/page/discover/view.jsx @@ -1,12 +1,12 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import lbryuri from "lbryuri"; -import FileCard from "component/fileCard"; -import { Icon, BusyMessage } from "component/common.js"; -import ToolTip from "component/tooltip.js"; -import SubHeader from "component/subHeader"; -import classnames from "classnames"; -import Link from "component/link"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import lbryuri from 'lbryuri'; +import FileCard from 'component/fileCard'; +import { Icon, BusyMessage } from 'component/common.js'; +import ToolTip from 'component/tooltip.js'; +import SubHeader from 'component/subHeader'; +import classnames from 'classnames'; +import Link from 'component/link'; // This should be in a separate file export class FeaturedCategory extends React.PureComponent { @@ -28,7 +28,7 @@ export class FeaturedCategory extends React.PureComponent { componentDidMount() { const cardRow = ReactDOM.findDOMNode(this.refs.rowitems); - const cards = cardRow.getElementsByTagName("section"); + const cards = cardRow.getElementsByTagName('section'); // check if the last card is visible const lastCard = cards[cards.length - 1]; @@ -45,10 +45,10 @@ export class FeaturedCategory extends React.PureComponent { const cardRow = ReactDOM.findDOMNode(this.refs.rowitems); if (cardRow.scrollLeft > 0) { // check the visible cards - const cards = cardRow.getElementsByTagName("section"); + const cards = cardRow.getElementsByTagName('section'); let firstVisibleCard = null; let firstVisibleIdx = -1; - for (var i = 0; i < cards.length; i++) { + for (let i = 0; i < cards.length; i++) { if (this.isCardVisible(cards[i], cardRow, false)) { firstVisibleCard = cards[i]; firstVisibleIdx = i; @@ -77,10 +77,10 @@ export class FeaturedCategory extends React.PureComponent { const cardRow = ReactDOM.findDOMNode(this.refs.rowitems); // check the visible cards - const cards = cardRow.getElementsByTagName("section"); + const cards = cardRow.getElementsByTagName('section'); let lastVisibleCard = null; let lastVisibleIdx = -1; - for (var i = 0; i < cards.length; i++) { + for (let i = 0; i < cards.length; i++) { if (this.isCardVisible(cards[i], cardRow, true)) { lastVisibleCard = cards[i]; lastVisibleIdx = i; @@ -91,7 +91,7 @@ export class FeaturedCategory extends React.PureComponent { const numDisplayed = this.numDisplayedCards(cardRow); const animationCallback = () => { // update last visible index after scroll - for (var i = 0; i < cards.length; i++) { + for (let i = 0; i < cards.length; i++) { if (this.isCardVisible(cards[i], cardRow, true)) { lastVisibleIdx = i; } @@ -105,10 +105,7 @@ export class FeaturedCategory extends React.PureComponent { this.scrollCardItemsLeftAnimated( cardRow, - Math.min( - lastVisibleCard.offsetLeft, - cardRow.scrollWidth - cardRow.clientWidth - ), + Math.min(lastVisibleCard.offsetLeft, cardRow.scrollWidth - cardRow.clientWidth), 100, animationCallback ); @@ -128,19 +125,14 @@ export class FeaturedCategory extends React.PureComponent { const diff = target - cardRow.scrollLeft; const tick = diff / duration * 10; setTimeout(() => { - cardRow.scrollLeft = cardRow.scrollLeft + tick; + cardRow.scrollLeft += tick; if (cardRow.scrollLeft === target) { if (callback) { callback(); } return; } - component.scrollCardItemsLeftAnimated( - cardRow, - target, - duration - 10, - callback - ); + component.scrollCardItemsLeftAnimated(cardRow, target, duration - 10, callback); }, 10); } @@ -154,14 +146,13 @@ export class FeaturedCategory extends React.PureComponent { return ( (sectionLeft >= 0 && sectionEnd <= cardRowWidth) || - (((sectionLeft < 0 && sectionEnd > 0) || - (sectionLeft > 0 && sectionLeft <= cardRowWidth)) && + (((sectionLeft < 0 && sectionEnd > 0) || (sectionLeft > 0 && sectionLeft <= cardRowWidth)) && partialVisibility) ); } numDisplayedCards(cardRow) { - const cards = cardRow.getElementsByTagName("section"); + const cards = cardRow.getElementsByTagName('section'); const cardRowWidth = cardRow.offsetWidth; // get the width of the first card and then calculate const cardWidth = cards.length > 0 ? cards[0].offsetWidth : 0; @@ -205,20 +196,14 @@ export class FeaturedCategory extends React.PureComponent { <div className="card-row__scrollhouse"> {this.state.canScrollPrevious && ( <div className="card-row__nav card-row__nav--left"> - <a - className="card-row__scroll-button" - onClick={this.handleScrollPrevious.bind(this)} - > + <a className="card-row__scroll-button" onClick={this.handleScrollPrevious.bind(this)}> <Icon icon="icon-chevron-left" /> </a> </div> )} {this.state.canScrollNext && ( <div className="card-row__nav card-row__nav--right"> - <a - className="card-row__scroll-button" - onClick={this.handleScrollNext.bind(this)} - > + <a className="card-row__scroll-button" onClick={this.handleScrollNext.bind(this)}> <Icon icon="icon-chevron-right" /> </a> </div> @@ -226,11 +211,7 @@ export class FeaturedCategory extends React.PureComponent { <div ref="rowitems" className="card-row__items"> {names && names.map(name => ( - <FileCard - key={name} - displayStyle="card" - uri={lbryuri.normalize(name)} - /> + <FileCard key={name} displayStyle="card" uri={lbryuri.normalize(name)} /> ))} </div> </div> @@ -246,36 +227,31 @@ class DiscoverPage extends React.PureComponent { render() { const { featuredUris, fetchingFeaturedUris } = this.props; - const hasContent = - typeof featuredUris === "object" && Object.keys(featuredUris).length, + const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length, failedToLoad = !fetchingFeaturedUris && !hasContent; return ( <main - className={classnames("main main--no-margin", { + className={classnames('main main--no-margin', { reloading: hasContent && fetchingFeaturedUris, })} > <SubHeader fullWidth smallMargin /> - {!hasContent && - fetchingFeaturedUris && ( - <BusyMessage message={__("Fetching content")} /> - )} + {!hasContent && fetchingFeaturedUris && <BusyMessage message={__('Fetching content')} />} {hasContent && - Object.keys(featuredUris).map(category => { - return featuredUris[category].length ? ( - <FeaturedCategory - key={category} - category={category} - names={featuredUris[category]} - /> - ) : ( - "" - ); - })} - {failedToLoad && ( - <div className="empty">{__("Failed to load landing content.")}</div> - )} + Object.keys(featuredUris).map( + category => + featuredUris[category].length ? ( + <FeaturedCategory + key={category} + category={category} + names={featuredUris[category]} + /> + ) : ( + '' + ) + )} + {failedToLoad && <div className="empty">{__('Failed to load landing content.')}</div>} </main> ); } diff --git a/src/renderer/page/file/index.js b/src/renderer/page/file/index.js index ba1fc3398..4984ed812 100644 --- a/src/renderer/page/file/index.js +++ b/src/renderer/page/file/index.js @@ -1,18 +1,18 @@ -import { connect } from "react-redux"; -import { doNavigate } from "redux/actions/navigation"; -import { doFetchFileInfo } from "redux/actions/file_info"; -import { makeSelectFileInfoForUri } from "redux/selectors/file_info"; -import { selectRewardContentClaimIds } from "redux/selectors/content"; -import { doFetchCostInfoForUri } from "redux/actions/cost_info"; +import { connect } from 'react-redux'; +import { doNavigate } from 'redux/actions/navigation'; +import { doFetchFileInfo } from 'redux/actions/file_info'; +import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; +import { selectRewardContentClaimIds } from 'redux/selectors/content'; +import { doFetchCostInfoForUri } from 'redux/actions/cost_info'; import { makeSelectClaimForUri, makeSelectContentTypeForUri, makeSelectMetadataForUri, -} from "redux/selectors/claims"; -import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; -import { selectShowNsfw } from "redux/selectors/settings"; -import FilePage from "./view"; -import { makeSelectCurrentParam } from "redux/selectors/navigation"; +} from 'redux/selectors/claims'; +import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info'; +import { selectShowNsfw } from 'redux/selectors/settings'; +import FilePage from './view'; +import { makeSelectCurrentParam } from 'redux/selectors/navigation'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), @@ -20,10 +20,9 @@ const select = (state, props) => ({ costInfo: makeSelectCostInfoForUri(props.uri)(state), metadata: makeSelectMetadataForUri(props.uri)(state), obscureNsfw: !selectShowNsfw(state), - tab: makeSelectCurrentParam("tab")(state), + tab: makeSelectCurrentParam('tab')(state), fileInfo: makeSelectFileInfoForUri(props.uri)(state), rewardedContentClaimIds: selectRewardContentClaimIds(state, props), - }); const perform = dispatch => ({ diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index 6b91cd138..fb8f741c8 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -1,17 +1,17 @@ -import React from "react"; -import lbry from "lbry"; -import lbryuri from "lbryuri"; -import Video from "component/video"; -import { Thumbnail } from "component/common"; -import FilePrice from "component/filePrice"; -import FileDetails from "component/fileDetails"; -import UriIndicator from "component/uriIndicator"; -import Icon from "component/icon"; -import WalletSendTip from "component/walletSendTip"; -import DateTime from "component/dateTime"; -import * as icons from "constants/icons"; -import Link from "component/link"; -import SubscribeButton from "component/subscribeButton"; +import React from 'react'; +import lbry from 'lbry'; +import lbryuri from 'lbryuri'; +import Video from 'component/video'; +import { Thumbnail } from 'component/common'; +import FilePrice from 'component/filePrice'; +import FileDetails from 'component/fileDetails'; +import UriIndicator from 'component/uriIndicator'; +import Icon from 'component/icon'; +import WalletSendTip from 'component/walletSendTip'; +import DateTime from 'component/dateTime'; +import * as icons from 'constants/icons'; +import Link from 'component/link'; +import SubscribeButton from 'component/subscribeButton'; class FilePage extends React.PureComponent { componentDidMount() { @@ -46,38 +46,30 @@ class FilePage extends React.PureComponent { rewardedContentClaimIds, } = this.props; - const showTipBox = tab == "tip"; + const showTipBox = tab == 'tip'; if (!claim || !metadata) { - return ( - <span className="empty">{__("Empty claim or metadata info.")}</span> - ); + return <span className="empty">{__('Empty claim or metadata info.')}</span>; } const title = metadata.title; const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id); const mediaType = lbry.getMediaType(contentType); - const player = require("render-media"); + const player = require('render-media'); const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; const isPlayable = - Object.values(player.mime).indexOf(contentType) !== -1 || - mediaType === "audio"; + Object.values(player.mime).indexOf(contentType) !== -1 || mediaType === 'audio'; const { height, channel_name: channelName, value } = claim; const channelClaimId = - value && - value.publisherSignature && - value.publisherSignature.certificateId; + value && value.publisherSignature && value.publisherSignature.certificateId; let subscriptionUri; if (channelName && channelClaimId) { - subscriptionUri = lbryuri.build( - { channelName, claimId: channelClaimId }, - false - ); + subscriptionUri = lbryuri.build({ channelName, claimId: channelClaimId }, false); } return ( - <section className={"card " + (obscureNsfw ? "card--obscured " : "")}> + <section className={`card ${obscureNsfw ? 'card--obscured ' : ''}`}> <div className="show-page-media"> {isPlayable ? ( <Video className="video-embedded" uri={uri} /> @@ -88,16 +80,16 @@ class FilePage extends React.PureComponent { )} </div> <div className="card__inner"> - {(!tab || tab === "details") && ( + {(!tab || tab === 'details') && ( <div> - {" "} + {' '} <div className="card__title-identity"> {!fileInfo || fileInfo.written_bytes <= 0 ? ( - <span style={{ float: "right" }}> + <span style={{ float: 'right' }}> <FilePrice uri={lbryuri.normalize(uri)} /> {isRewardContent && ( <span> - {" "} + {' '} <Icon icon={icons.FEATURED} /> </span> )} @@ -105,10 +97,9 @@ class FilePage extends React.PureComponent { ) : null} <h1>{title}</h1> <div className="card__subtitle card--file-subtitle"> - <UriIndicator uri={uri} link={true} /> + <UriIndicator uri={uri} link /> <span className="card__publish-date"> - Published on{" "} - <DateTime block={height} show={DateTime.SHOW_DATE} /> + Published on <DateTime block={height} show={DateTime.SHOW_DATE} /> </span> </div> </div> @@ -116,9 +107,7 @@ class FilePage extends React.PureComponent { <FileDetails uri={uri} /> </div> )} - {tab === "tip" && ( - <WalletSendTip claim_id={claim.claim_id} uri={uri} /> - )} + {tab === 'tip' && <WalletSendTip claim_id={claim.claim_id} uri={uri} />} </div> </section> ); diff --git a/src/renderer/page/fileListDownloaded/index.js b/src/renderer/page/fileListDownloaded/index.js index ec68d1014..8361a560f 100644 --- a/src/renderer/page/fileListDownloaded/index.js +++ b/src/renderer/page/fileListDownloaded/index.js @@ -1,17 +1,17 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doFetchFileInfosAndPublishedClaims } from "redux/actions/file_info"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchFileInfosAndPublishedClaims } from 'redux/actions/file_info'; import { selectFileInfosDownloaded, selectIsFetchingFileListDownloadedOrPublished, -} from "redux/selectors/file_info"; +} from 'redux/selectors/file_info'; import { selectMyClaimsWithoutChannels, selectIsFetchingClaimListMine, -} from "redux/selectors/claims"; -import { doFetchClaimListMine } from "redux/actions/content"; -import { doNavigate } from "redux/actions/navigation"; -import FileListDownloaded from "./view"; +} from 'redux/selectors/claims'; +import { doFetchClaimListMine } from 'redux/actions/content'; +import { doNavigate } from 'redux/actions/navigation'; +import FileListDownloaded from './view'; const select = state => ({ fileInfos: selectFileInfosDownloaded(state), @@ -22,8 +22,7 @@ const select = state => ({ const perform = dispatch => ({ navigate: path => dispatch(doNavigate(path)), - fetchFileInfosDownloaded: () => - dispatch(doFetchFileInfosAndPublishedClaims()), + fetchFileInfosDownloaded: () => dispatch(doFetchFileInfosAndPublishedClaims()), fetchClaims: () => dispatch(doFetchClaimListMine()), }); diff --git a/src/renderer/page/fileListDownloaded/view.jsx b/src/renderer/page/fileListDownloaded/view.jsx index ceb0837e8..f6be896ef 100644 --- a/src/renderer/page/fileListDownloaded/view.jsx +++ b/src/renderer/page/fileListDownloaded/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import Link from "component/link"; -import { FileTile } from "component/fileTile"; -import { BusyMessage, Thumbnail } from "component/common.js"; -import FileList from "component/fileList"; -import SubHeader from "component/subHeader"; +import React from 'react'; +import Link from 'component/link'; +import { FileTile } from 'component/fileTile'; +import { BusyMessage, Thumbnail } from 'component/common.js'; +import FileList from 'component/fileList'; +import SubHeader from 'component/subHeader'; class FileListDownloaded extends React.PureComponent { componentWillMount() { @@ -17,20 +17,18 @@ class FileListDownloaded extends React.PureComponent { let content; if (fileInfos && fileInfos.length > 0) { content = <FileList fileInfos={fileInfos} fetching={isFetching} />; + } else if (isFetching) { + content = <BusyMessage message={__('Loading')} />; } else { - if (isFetching) { - content = <BusyMessage message={__("Loading")} />; - } else { - content = ( - <span> - {__("You haven't downloaded anything from LBRY yet. Go")}{" "} - <Link - onClick={() => navigate("/discover")} - label={__("search for your first download")} - />! - </span> - ); - } + content = ( + <span> + {__("You haven't downloaded anything from LBRY yet. Go")}{' '} + <Link + onClick={() => navigate('/discover')} + label={__('search for your first download')} + />! + </span> + ); } return ( diff --git a/src/renderer/page/fileListPublished/index.js b/src/renderer/page/fileListPublished/index.js index bf93aa71b..a6eb4be3b 100644 --- a/src/renderer/page/fileListPublished/index.js +++ b/src/renderer/page/fileListPublished/index.js @@ -1,14 +1,14 @@ -import React from "react"; -import rewards from "rewards"; -import { connect } from "react-redux"; -import { doFetchClaimListMine } from "redux/actions/content"; +import React from 'react'; +import rewards from 'rewards'; +import { connect } from 'react-redux'; +import { doFetchClaimListMine } from 'redux/actions/content'; import { selectMyClaimsWithoutChannels, selectIsFetchingClaimListMine, -} from "redux/selectors/claims"; -import { doClaimRewardType } from "redux/actions/rewards"; -import { doNavigate } from "redux/actions/navigation"; -import FileListPublished from "./view"; +} from 'redux/selectors/claims'; +import { doClaimRewardType } from 'redux/actions/rewards'; +import { doNavigate } from 'redux/actions/navigation'; +import FileListPublished from './view'; const select = state => ({ claims: selectMyClaimsWithoutChannels(state), @@ -18,8 +18,7 @@ const select = state => ({ const perform = dispatch => ({ navigate: path => dispatch(doNavigate(path)), fetchClaims: () => dispatch(doFetchClaimListMine()), - claimFirstPublishReward: () => - dispatch(doClaimRewardType(rewards.TYPE_FIRST_PUBLISH)), + claimFirstPublishReward: () => dispatch(doClaimRewardType(rewards.TYPE_FIRST_PUBLISH)), }); export default connect(select, perform)(FileListPublished); diff --git a/src/renderer/page/fileListPublished/view.jsx b/src/renderer/page/fileListPublished/view.jsx index 2444bca12..de19dd1dd 100644 --- a/src/renderer/page/fileListPublished/view.jsx +++ b/src/renderer/page/fileListPublished/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import Link from "component/link"; -import FileTile from "component/fileTile"; -import { BusyMessage, Thumbnail } from "component/common.js"; -import FileList from "component/fileList"; -import SubHeader from "component/subHeader"; +import React from 'react'; +import Link from 'component/link'; +import FileTile from 'component/fileTile'; +import { BusyMessage, Thumbnail } from 'component/common.js'; +import FileList from 'component/fileList'; +import SubHeader from 'component/subHeader'; class FileListPublished extends React.PureComponent { componentWillMount() { @@ -27,20 +27,18 @@ class FileListPublished extends React.PureComponent { fileTileShowEmpty={FileTile.SHOW_EMPTY_PENDING} /> ); + } else if (isFetching) { + content = <BusyMessage message={__('Loading')} />; } else { - if (isFetching) { - content = <BusyMessage message={__("Loading")} />; - } else { - content = ( - <span> - {__("It looks like you haven't published anything to LBRY yet. Go")}{" "} - <Link - onClick={() => navigate("/publish")} - label={__("share your beautiful cats with the world")} - />! - </span> - ); - } + content = ( + <span> + {__("It looks like you haven't published anything to LBRY yet. Go")}{' '} + <Link + onClick={() => navigate('/publish')} + label={__('share your beautiful cats with the world')} + />! + </span> + ); } return ( diff --git a/src/renderer/page/getCredits/index.js b/src/renderer/page/getCredits/index.js index a28ca3e0a..c212a7e62 100644 --- a/src/renderer/page/getCredits/index.js +++ b/src/renderer/page/getCredits/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import GetCreditsPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import GetCreditsPage from './view'; export default connect(null, null)(GetCreditsPage); diff --git a/src/renderer/page/getCredits/view.jsx b/src/renderer/page/getCredits/view.jsx index cd214e628..b8e670443 100644 --- a/src/renderer/page/getCredits/view.jsx +++ b/src/renderer/page/getCredits/view.jsx @@ -1,49 +1,38 @@ -import React from "react"; -import SubHeader from "component/subHeader"; -import Link from "component/link"; -import RewardSummary from "component/rewardSummary"; -import ShapeShift from "component/shapeShift"; +import React from 'react'; +import SubHeader from 'component/subHeader'; +import Link from 'component/link'; +import RewardSummary from 'component/rewardSummary'; +import ShapeShift from 'component/shapeShift'; -const GetCreditsPage = props => { - return ( - <main className="main--single-column"> - <SubHeader /> - <RewardSummary /> - <ShapeShift /> - <section className="card"> - <div className="card__title-primary"> - <h3>{__("From External Wallet")}</h3> - </div> - <div className="card__actions"> - <Link - button="alt" - navigate="/send" - icon="icon-send" - label={__("Send / Receive")} - /> - </div> - </section> - <section className="card"> - <div className="card__title-primary"> - <h3>{__("More ways to get LBRY Credits")}</h3> - </div> - <div className="card__content"> - <p> - { - "LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more." - } - </p> - </div> - <div className="card__actions"> - <Link - button="alt" - href="https://lbry.io/faq/earn-credits" - label={__("Read More")} - /> - </div> - </section> - </main> - ); -}; +const GetCreditsPage = props => ( + <main className="main--single-column"> + <SubHeader /> + <RewardSummary /> + <ShapeShift /> + <section className="card"> + <div className="card__title-primary"> + <h3>{__('From External Wallet')}</h3> + </div> + <div className="card__actions"> + <Link button="alt" navigate="/send" icon="icon-send" label={__('Send / Receive')} /> + </div> + </section> + <section className="card"> + <div className="card__title-primary"> + <h3>{__('More ways to get LBRY Credits')}</h3> + </div> + <div className="card__content"> + <p> + { + 'LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more.' + } + </p> + </div> + <div className="card__actions"> + <Link button="alt" href="https://lbry.io/faq/earn-credits" label={__('Read More')} /> + </div> + </section> + </main> +); export default GetCreditsPage; diff --git a/src/renderer/page/help/index.js b/src/renderer/page/help/index.js index 746fd4d65..7138061ed 100644 --- a/src/renderer/page/help/index.js +++ b/src/renderer/page/help/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import { doAuthNavigate } from "redux/actions/navigation"; -import { connect } from "react-redux"; -import { doFetchAccessToken } from "redux/actions/user"; -import { selectAccessToken, selectUser } from "redux/selectors/user"; -import HelpPage from "./view"; +import React from 'react'; +import { doAuthNavigate } from 'redux/actions/navigation'; +import { connect } from 'react-redux'; +import { doFetchAccessToken } from 'redux/actions/user'; +import { selectAccessToken, selectUser } from 'redux/selectors/user'; +import HelpPage from './view'; const select = state => ({ user: selectUser(state), @@ -11,7 +11,7 @@ const select = state => ({ }); const perform = dispatch => ({ - doAuth: () => dispatch(doAuthNavigate("/help")), + doAuth: () => dispatch(doAuthNavigate('/help')), fetchAccessToken: () => dispatch(doFetchAccessToken()), }); diff --git a/src/renderer/page/help/view.jsx b/src/renderer/page/help/view.jsx index 2aca230c6..8d1ca882c 100644 --- a/src/renderer/page/help/view.jsx +++ b/src/renderer/page/help/view.jsx @@ -1,9 +1,9 @@ -//@TODO: Customize advice based on OS -import React from "react"; -import lbry from "lbry.js"; -import Link from "component/link"; -import SubHeader from "component/subHeader"; -import { BusyMessage, Icon } from "component/common"; +// @TODO: Customize advice based on OS +import React from 'react'; +import lbry from 'lbry.js'; +import Link from 'component/link'; +import SubHeader from 'component/subHeader'; +import { BusyMessage, Icon } from 'component/common'; class HelpPage extends React.PureComponent { constructor(props) { @@ -19,14 +19,12 @@ class HelpPage extends React.PureComponent { } componentWillMount() { - lbry - .getAppVersionInfo() - .then(({ remoteVersion, localVersion, upgradeAvailable }) => { - this.setState({ - uiVersion: localVersion, - upgradeAvailable: upgradeAvailable, - }); + lbry.getAppVersionInfo().then(({ remoteVersion, localVersion, upgradeAvailable }) => { + this.setState({ + uiVersion: localVersion, + upgradeAvailable, }); + }); lbry.version().then(info => { this.setState({ versionInfo: info, @@ -54,18 +52,17 @@ class HelpPage extends React.PureComponent { if (this.state.versionInfo) { ver = this.state.versionInfo; - if (ver.os_system == "Darwin") { - osName = - parseInt(ver.os_release.match(/^\d+/)) < 16 ? "Mac OS X" : "Mac OS"; + if (ver.os_system == 'Darwin') { + osName = parseInt(ver.os_release.match(/^\d+/)) < 16 ? 'Mac OS X' : 'Mac OS'; platform = `${osName} ${ver.os_release}`; - newVerLink = "https://lbry.io/get/lbry.dmg"; - } else if (ver.os_system == "Linux") { + newVerLink = 'https://lbry.io/get/lbry.dmg'; + } else if (ver.os_system == 'Linux') { platform = `Linux (${ver.platform})`; - newVerLink = "https://lbry.io/get/lbry.deb"; + newVerLink = 'https://lbry.io/get/lbry.deb'; } else { platform = `Windows (${ver.platform})`; - newVerLink = "https://lbry.io/get/lbry.msi"; + newVerLink = 'https://lbry.io/get/lbry.msi'; } } else { ver = null; @@ -76,14 +73,14 @@ class HelpPage extends React.PureComponent { <SubHeader /> <section className="card"> <div className="card__title-primary"> - <h3>{__("Read the FAQ")}</h3> + <h3>{__('Read the FAQ')}</h3> </div> <div className="card__content"> - <p>{__("Our FAQ answers many common questions.")}</p> + <p>{__('Our FAQ answers many common questions.')}</p> <p> <Link href="https://lbry.io/faq" - label={__("Read the FAQ")} + label={__('Read the FAQ')} icon="icon-question" button="alt" /> @@ -92,17 +89,17 @@ class HelpPage extends React.PureComponent { </section> <section className="card"> <div className="card__title-primary"> - <h3>{__("Get Live Help")}</h3> + <h3>{__('Get Live Help')}</h3> </div> <div className="card__content"> <p> - {__("Live help is available most hours in the")}{" "} - <strong>#help</strong> {__("channel of our Discord chat room.")} + {__('Live help is available most hours in the')} <strong>#help</strong>{' '} + {__('channel of our Discord chat room.')} </p> <p> <Link button="alt" - label={__("Join Our Chat")} + label={__('Join Our Chat')} icon="icon-comments" href="https://chat.lbry.io" /> @@ -111,72 +108,67 @@ class HelpPage extends React.PureComponent { </section> <section className="card"> <div className="card__title-primary"> - <h3>{__("Report a Bug")}</h3> + <h3>{__('Report a Bug')}</h3> </div> <div className="card__content"> - <p>{__("Did you find something wrong?")}</p> + <p>{__('Did you find something wrong?')}</p> <p> <Link navigate="/report" - label={__("Submit a Bug Report")} + label={__('Submit a Bug Report')} icon="icon-bug" button="alt" /> </p> - <div className="meta"> - {__("Thanks! LBRY is made by its users.")} - </div> + <div className="meta">{__('Thanks! LBRY is made by its users.')}</div> </div> </section> <section className="card"> <div className="card__title-primary"> - <h3>{__("About")}</h3> + <h3>{__('About')}</h3> </div> <div className="card__content"> {this.state.upgradeAvailable === null ? ( - "" + '' ) : this.state.upgradeAvailable ? ( <p> - {__("A newer version of LBRY is available.")}{" "} - <Link href={newVerLink} label={__("Download now!")} /> + {__('A newer version of LBRY is available.')}{' '} + <Link href={newVerLink} label={__('Download now!')} /> </p> ) : ( - <p>{__("Your copy of LBRY is up to date.")}</p> + <p>{__('Your copy of LBRY is up to date.')}</p> )} {this.state.uiVersion && ver ? ( <table className="table-standard table-stretch table-standard--definition-list"> <tbody> <tr> - <th>{__("App")}</th> + <th>{__('App')}</th> <td>{this.state.uiVersion}</td> </tr> <tr> - <th>{__("Daemon (lbrynet)")}</th> + <th>{__('Daemon (lbrynet)')}</th> <td>{ver.lbrynet_version}</td> </tr> <tr> - <th>{__("Wallet (lbryum)")}</th> + <th>{__('Wallet (lbryum)')}</th> <td>{ver.lbryum_version}</td> </tr> <tr> - <th>{__("Connected Email")}</th> + <th>{__('Connected Email')}</th> <td> {user && user.primary_email ? ( user.primary_email ) : ( <span> - <span className="empty">{__("none")} </span> - (<Link - onClick={() => doAuth()} - label={__("set email")} - />) + <span className="empty">{__('none')} </span> + (<Link onClick={() => doAuth()} label={__('set email')} />) </span> )} </td> </tr> <tr> - <th>{__("Reward Eligible")}</th> + <th>{__('Reward Eligible')}</th> <td> {user && user.is_reward_approved ? ( <Icon icon="icon-check" /> @@ -186,30 +178,25 @@ class HelpPage extends React.PureComponent { </td> </tr> <tr> - <th>{__("Platform")}</th> + <th>{__('Platform')}</th> <td>{platform}</td> </tr> <tr> - <th>{__("Installation ID")}</th> + <th>{__('Installation ID')}</th> <td>{this.state.lbryId}</td> </tr> <tr> - <th>{__("Access Token")}</th> + <th>{__('Access Token')}</th> <td> {this.state.accessTokenHidden && ( - <Link - label={__("show")} - onClick={this.showAccessToken.bind(this)} - /> + <Link label={__('show')} onClick={this.showAccessToken.bind(this)} /> )} {!this.state.accessTokenHidden && accessToken && ( <div> <p>{accessToken}</p> <div className="help"> - {__( - "This is equivalent to a password. Do not post or share this." - )} + {__('This is equivalent to a password. Do not post or share this.')} </div> </div> )} @@ -218,7 +205,7 @@ class HelpPage extends React.PureComponent { </tbody> </table> ) : ( - <BusyMessage message={__("Looking up version info")} /> + <BusyMessage message={__('Looking up version info')} /> )} </div> </section> diff --git a/src/renderer/page/invite/index.js b/src/renderer/page/invite/index.js index 596526eee..65360a1f2 100644 --- a/src/renderer/page/invite/index.js +++ b/src/renderer/page/invite/index.js @@ -1,11 +1,11 @@ -import React from "react"; -import { connect } from "react-redux"; -import InvitePage from "./view"; -import { doFetchInviteStatus } from "redux/actions/user"; +import React from 'react'; +import { connect } from 'react-redux'; +import InvitePage from './view'; +import { doFetchInviteStatus } from 'redux/actions/user'; import { selectUserInviteStatusFailed, selectUserInviteStatusIsPending, -} from "redux/selectors/user"; +} from 'redux/selectors/user'; const select = state => ({ isFailed: selectUserInviteStatusFailed(state), diff --git a/src/renderer/page/invite/view.jsx b/src/renderer/page/invite/view.jsx index c4dd7ae31..4199066a5 100644 --- a/src/renderer/page/invite/view.jsx +++ b/src/renderer/page/invite/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import { BusyMessage } from "component/common"; -import SubHeader from "component/subHeader"; -import InviteNew from "component/inviteNew"; -import InviteList from "component/inviteList"; +import React from 'react'; +import { BusyMessage } from 'component/common'; +import SubHeader from 'component/subHeader'; +import InviteNew from 'component/inviteNew'; +import InviteList from 'component/inviteList'; class InvitePage extends React.PureComponent { componentWillMount() { @@ -15,15 +15,9 @@ class InvitePage extends React.PureComponent { return ( <main className="main--single-column"> <SubHeader /> - {isPending && ( - <BusyMessage message={__("Checking your invite status")} /> - )} + {isPending && <BusyMessage message={__('Checking your invite status')} />} {!isPending && - isFailed && ( - <span className="empty"> - {__("Failed to retrieve invite status.")} - </span> - )} + isFailed && <span className="empty">{__('Failed to retrieve invite status.')}</span>} {!isPending && !isFailed && <InviteNew />} {!isPending && !isFailed && <InviteList />} </main> diff --git a/src/renderer/page/publish/index.js b/src/renderer/page/publish/index.js index f8ec16c23..01f579e5a 100644 --- a/src/renderer/page/publish/index.js +++ b/src/renderer/page/publish/index.js @@ -1,24 +1,24 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate, doHistoryBack } from "redux/actions/navigation"; -import { doClaimRewardType } from "redux/actions/rewards"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doNavigate, doHistoryBack } from 'redux/actions/navigation'; +import { doClaimRewardType } from 'redux/actions/rewards'; import { selectMyClaims, selectFetchingMyChannels, selectMyChannelClaims, selectClaimsByUri, -} from "redux/selectors/claims"; -import { selectResolvingUris } from "redux/selectors/content"; +} from 'redux/selectors/claims'; +import { selectResolvingUris } from 'redux/selectors/content'; import { doFetchClaimListMine, doFetchChannelListMine, doResolveUri, doCreateChannel, doPublish, -} from "redux/actions/content"; -import { selectBalance } from "redux/selectors/wallet"; -import rewards from "rewards"; -import PublishPage from "./view"; +} from 'redux/actions/content'; +import { selectBalance } from 'redux/selectors/wallet'; +import rewards from 'rewards'; +import PublishPage from './view'; const select = state => ({ balance: selectBalance(state), @@ -33,8 +33,7 @@ const perform = dispatch => ({ back: () => dispatch(doHistoryBack()), navigate: path => dispatch(doNavigate(path)), fetchClaimListMine: () => dispatch(doFetchClaimListMine()), - claimFirstChannelReward: () => - dispatch(doClaimRewardType(rewards.TYPE_FIRST_CHANNEL)), + claimFirstChannelReward: () => dispatch(doClaimRewardType(rewards.TYPE_FIRST_CHANNEL)), fetchChannelListMine: () => dispatch(doFetchChannelListMine()), resolveUri: uri => dispatch(doResolveUri(uri)), createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)), diff --git a/src/renderer/page/publish/view.jsx b/src/renderer/page/publish/view.jsx index ab39fcec8..c0cc68aab 100644 --- a/src/renderer/page/publish/view.jsx +++ b/src/renderer/page/publish/view.jsx @@ -1,8 +1,6 @@ -import React from "react"; -import PublishForm from "component/publishForm"; +import React from 'react'; +import PublishForm from 'component/publishForm'; -const PublishPage = props => { - return <PublishForm {...props} />; -}; +const PublishPage = props => <PublishForm {...props} />; export default PublishPage; diff --git a/src/renderer/page/report.js b/src/renderer/page/report.js index 489a52d0a..617ca6d3d 100644 --- a/src/renderer/page/report.js +++ b/src/renderer/page/report.js @@ -1,8 +1,8 @@ -import React from "react"; -import Link from "component/link"; -import { FormRow } from "component/form"; -import { doShowSnackBar } from "redux/actions/app"; -import lbry from "../lbry.js"; +import React from 'react'; +import Link from 'component/link'; +import { FormRow } from 'component/form'; +import { doShowSnackBar } from 'redux/actions/app'; +import lbry from '../lbry.js'; class ReportPage extends React.Component { constructor(props) { @@ -10,7 +10,7 @@ class ReportPage extends React.Component { this.state = { submitting: false, - message: "", + message: '', }; } @@ -27,13 +27,13 @@ class ReportPage extends React.Component { // Display global notice const action = doShowSnackBar({ - message: __("Message received! Thanks for helping."), + message: __('Message received! Thanks for helping.'), isError: false, }); window.app.store.dispatch(action); }); - this.setState({ message: "" }); + this.setState({ message: '' }); } } @@ -48,10 +48,10 @@ class ReportPage extends React.Component { <main className="main--single-column"> <section className="card"> <div className="card__content"> - <h3>{__("Report an Issue")}</h3> + <h3>{__('Report an Issue')}</h3> <p> {__( - "Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!" + 'Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!' )} </p> <div className="form-row"> @@ -63,7 +63,7 @@ class ReportPage extends React.Component { onChange={event => { this.onMessageChange(event); }} - placeholder={__("Description of your issue")} + placeholder={__('Description of your issue')} /> </div> <div className="form-row form-row-submit"> @@ -71,24 +71,20 @@ class ReportPage extends React.Component { onClick={event => { this.submitMessage(event); }} - className={`button-block button-primary ${ - this.state.submitting ? "disabled" : "" - }`} + className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`} > - {this.state.submitting - ? __("Submitting...") - : __("Submit Report")} + {this.state.submitting ? __('Submitting...') : __('Submit Report')} </button> </div> </div> </section> <section className="card"> <div className="card__content"> - <h3>{__("Developer?")}</h3> - {__("You can also")}{" "} + <h3>{__('Developer?')}</h3> + {__('You can also')}{' '} <Link href="https://github.com/lbryio/lbry/issues" - label={__("submit an issue on GitHub")} + label={__('submit an issue on GitHub')} />. </div> </section> diff --git a/src/renderer/page/rewards/index.js b/src/renderer/page/rewards/index.js index dd00a2c40..e456a1ca2 100644 --- a/src/renderer/page/rewards/index.js +++ b/src/renderer/page/rewards/index.js @@ -1,13 +1,10 @@ -import React from "react"; -import { connect } from "react-redux"; -import { - selectFetchingRewards, - selectUnclaimedRewards, -} from "redux/selectors/rewards"; -import { selectUser } from "redux/selectors/user"; -import { doAuthNavigate, doNavigate } from "redux/actions/navigation"; -import { doRewardList } from "redux/actions/rewards"; -import RewardsPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectFetchingRewards, selectUnclaimedRewards } from 'redux/selectors/rewards'; +import { selectUser } from 'redux/selectors/user'; +import { doAuthNavigate, doNavigate } from 'redux/actions/navigation'; +import { doRewardList } from 'redux/actions/rewards'; +import RewardsPage from './view'; const select = (state, props) => ({ fetching: selectFetchingRewards(state), @@ -19,7 +16,7 @@ const perform = dispatch => ({ fetchRewards: () => dispatch(doRewardList()), navigate: path => dispatch(doNavigate(path)), doAuth: () => { - dispatch(doAuthNavigate("/rewards")); + dispatch(doAuthNavigate('/rewards')); }, }); diff --git a/src/renderer/page/rewards/view.jsx b/src/renderer/page/rewards/view.jsx index b2132df83..258d76052 100644 --- a/src/renderer/page/rewards/view.jsx +++ b/src/renderer/page/rewards/view.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import { BusyMessage } from "component/common"; -import RewardListClaimed from "component/rewardListClaimed"; -import RewardTile from "component/rewardTile"; -import SubHeader from "component/subHeader"; -import Link from "component/link"; +import React from 'react'; +import { BusyMessage } from 'component/common'; +import RewardListClaimed from 'component/rewardListClaimed'; +import RewardTile from 'component/rewardTile'; +import SubHeader from 'component/subHeader'; +import Link from 'component/link'; class RewardsPage extends React.PureComponent { /* @@ -32,22 +32,16 @@ class RewardsPage extends React.PureComponent { const { doAuth, navigate, user } = this.props; if (user && !user.is_reward_approved) { - if ( - !user.primary_email || - !user.has_verified_email || - !user.is_identity_verified - ) { + if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) { return ( <section className="card"> <div className="card__title-primary"> - <h3>{__("Humans Only")}</h3> + <h3>{__('Humans Only')}</h3> </div> <div className="card__content empty"> <p> - {__("Rewards are for human beings only.")}{" "} - {__( - "You'll have to prove you're one of us before you can claim any rewards." - )} + {__('Rewards are for human beings only.')}{' '} + {__("You'll have to prove you're one of us before you can claim any rewards.")} </p> </div> <div className="card__content"> @@ -55,40 +49,31 @@ class RewardsPage extends React.PureComponent { </div> </section> ); - } else { - return ( - <div className="card__content"> - <p> - {__( - "This account must undergo review before you can participate in the rewards program." - )}{" "} - {__( - "This can take anywhere from several minutes to several days." - )} - </p> - - <p> - {__( - "We apologize for this inconvenience, but have added this additional step to prevent fraud." - )} - </p> - <p> - {__( - "If you continue to see this message, send us an email to help@lbry.io." - ) + - " " + - __("Please enjoy free content in the meantime!")} - </p> - <p> - <Link - onClick={() => navigate("/discover")} - button="primary" - label="Return Home" - /> - </p> - </div> - ); } + return ( + <div className="card__content"> + <p> + {__( + 'This account must undergo review before you can participate in the rewards program.' + )}{' '} + {__('This can take anywhere from several minutes to several days.')} + </p> + + <p> + {__( + 'We apologize for this inconvenience, but have added this additional step to prevent fraud.' + )} + </p> + <p> + {`${__('If you continue to see this message, send us an email to help@lbry.io.')} ${__( + 'Please enjoy free content in the meantime!' + )}`} + </p> + <p> + <Link onClick={() => navigate('/discover')} button="primary" label="Return Home" /> + </p> + </div> + ); } } @@ -98,36 +83,29 @@ class RewardsPage extends React.PureComponent { if (fetching) { return ( <div className="card__content"> - <BusyMessage message={__("Fetching rewards")} /> + <BusyMessage message={__('Fetching rewards')} /> </div> ); } else if (user === null) { return ( <div className="card__content empty"> <p> - {__( - "This application is unable to earn rewards due to an authentication failure." - )} + {__('This application is unable to earn rewards due to an authentication failure.')} </p> </div> ); } else if (!rewards || rewards.length <= 0) { return ( <div className="card__content empty"> - {__( - "There are no rewards available at this time, please check back later." - )} - </div> - ); - } else { - return ( - <div className="card-grid"> - {rewards.map(reward => ( - <RewardTile key={reward.reward_type} reward={reward} /> - ))} + {__('There are no rewards available at this time, please check back later.')} </div> ); } + return ( + <div className="card-grid"> + {rewards.map(reward => <RewardTile key={reward.reward_type} reward={reward} />)} + </div> + ); } render() { diff --git a/src/renderer/page/search/index.js b/src/renderer/page/search/index.js index b184768a9..202844e07 100644 --- a/src/renderer/page/search/index.js +++ b/src/renderer/page/search/index.js @@ -1,8 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { selectIsSearching, selectSearchQuery } from "redux/selectors/search"; -import { doNavigate } from "redux/actions/navigation"; -import SearchPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { selectIsSearching, selectSearchQuery } from 'redux/selectors/search'; +import { doNavigate } from 'redux/actions/navigation'; +import SearchPage from './view'; const select = state => ({ isSearching: selectIsSearching(state), diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index d6a69bf9c..48aed6fce 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import lbryuri from "lbryuri"; -import FileTile from "component/fileTile"; -import FileListSearch from "component/fileListSearch"; -import { ToolTip } from "component/tooltip.js"; +import React from 'react'; +import lbryuri from 'lbryuri'; +import FileTile from 'component/fileTile'; +import FileListSearch from 'component/fileListSearch'; +import { ToolTip } from 'component/tooltip.js'; class SearchPage extends React.PureComponent { render() { @@ -13,29 +13,24 @@ class SearchPage extends React.PureComponent { {lbryuri.isValid(query) ? ( <section className="section-spaced"> <h3 className="card-row__header"> - {__("Exact URL")}{" "} + {__('Exact URL')}{' '} <ToolTip label="?" - body={__( - "This is the resolution of a LBRY URL and not controlled by LBRY Inc." - )} + body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')} className="tooltip--header" /> </h3> - <FileTile - uri={lbryuri.normalize(query)} - showEmpty={FileTile.SHOW_EMPTY_PUBLISH} - /> + <FileTile uri={lbryuri.normalize(query)} showEmpty={FileTile.SHOW_EMPTY_PUBLISH} /> </section> ) : ( - "" + '' )} <section className="section-spaced"> <h3 className="card-row__header"> - {__("Search Results for")} {query}{" "} + {__('Search Results for')} {query}{' '} <ToolTip label="?" - body={__("These search results are provided by LBRY, Inc.")} + body={__('These search results are provided by LBRY, Inc.')} className="tooltip--header" /> </h3> diff --git a/src/renderer/page/sendCredits/index.js b/src/renderer/page/sendCredits/index.js index a03af086a..3441ef7fa 100644 --- a/src/renderer/page/sendCredits/index.js +++ b/src/renderer/page/sendCredits/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import SendReceivePage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import SendReceivePage from './view'; export default connect(null, null)(SendReceivePage); diff --git a/src/renderer/page/sendCredits/view.jsx b/src/renderer/page/sendCredits/view.jsx index c5d1b4ca8..07df1fd6f 100644 --- a/src/renderer/page/sendCredits/view.jsx +++ b/src/renderer/page/sendCredits/view.jsx @@ -1,16 +1,14 @@ -import React from "react"; -import SubHeader from "component/subHeader"; -import WalletSend from "component/walletSend"; -import WalletAddress from "component/walletAddress"; +import React from 'react'; +import SubHeader from 'component/subHeader'; +import WalletSend from 'component/walletSend'; +import WalletAddress from 'component/walletAddress'; -const SendReceivePage = props => { - return ( - <main className="main--single-column"> - <SubHeader /> - <WalletSend /> - <WalletAddress /> - </main> - ); -}; +const SendReceivePage = props => ( + <main className="main--single-column"> + <SubHeader /> + <WalletSend /> + <WalletAddress /> + </main> +); export default SendReceivePage; diff --git a/src/renderer/page/settings/index.js b/src/renderer/page/settings/index.js index ad76676b4..29d2b325c 100644 --- a/src/renderer/page/settings/index.js +++ b/src/renderer/page/settings/index.js @@ -1,32 +1,28 @@ -import React from "react"; -import { connect } from "react-redux"; -import * as settings from "constants/settings"; -import { doClearCache } from "redux/actions/app"; +import React from 'react'; +import { connect } from 'react-redux'; +import * as settings from 'constants/settings'; +import { doClearCache } from 'redux/actions/app'; import { doSetDaemonSetting, doSetClientSetting, doGetThemes, doSetTheme, doChangeLanguage, -} from "redux/actions/settings"; +} from 'redux/actions/settings'; import { makeSelectClientSetting, selectDaemonSettings, selectLanguages, -} from "redux/selectors/settings"; -import { selectCurrentLanguage } from "redux/selectors/app"; -import SettingsPage from "./view"; +} from 'redux/selectors/settings'; +import { selectCurrentLanguage } from 'redux/selectors/app'; +import SettingsPage from './view'; const select = state => ({ daemonSettings: selectDaemonSettings(state), showNsfw: makeSelectClientSetting(settings.SHOW_NSFW)(state), showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state), - instantPurchaseEnabled: makeSelectClientSetting( - settings.INSTANT_PURCHASE_ENABLED - )(state), - instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)( - state - ), + instantPurchaseEnabled: makeSelectClientSetting(settings.INSTANT_PURCHASE_ENABLED)(state), + instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state), showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state), theme: makeSelectClientSetting(settings.THEME)(state), themes: makeSelectClientSetting(settings.THEMES)(state), diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx index 53636b33e..67471841c 100644 --- a/src/renderer/page/settings/view.jsx +++ b/src/renderer/page/settings/view.jsx @@ -1,11 +1,11 @@ -import React from "react"; -import FormField from "component/formField"; -import { FormRow } from "component/form.js"; -import SubHeader from "component/subHeader"; -import * as settings from "constants/settings"; -import lbry from "lbry.js"; -import Link from "component/link"; -import FormFieldPrice from "component/formFieldPrice"; +import React from 'react'; +import FormField from 'component/formField'; +import { FormRow } from 'component/form.js'; +import SubHeader from 'component/subHeader'; +import * as settings from 'constants/settings'; +import lbry from 'lbry.js'; +import Link from 'component/link'; +import FormFieldPrice from 'component/formFieldPrice'; class SettingsPage extends React.PureComponent { constructor(props) { @@ -22,7 +22,7 @@ class SettingsPage extends React.PureComponent { }); const success = () => { this.setState({ clearingCache: false }); - window.location.href = "index.html"; + window.location.href = 'index.html'; }; const clear = () => this.props.clearCache().then(success.bind(this)); @@ -34,30 +34,30 @@ class SettingsPage extends React.PureComponent { } onRunOnStartChange(event) { - this.setDaemonSetting("run_on_startup", event.target.checked); + this.setDaemonSetting('run_on_startup', event.target.checked); } onShareDataChange(event) { - this.setDaemonSetting("share_usage_data", event.target.checked); + this.setDaemonSetting('share_usage_data', event.target.checked); } onDownloadDirChange(event) { - this.setDaemonSetting("download_directory", event.target.value); + this.setDaemonSetting('download_directory', event.target.value); } onKeyFeeChange(newValue) { - let setting = newValue; + const setting = newValue; - //this is stupid and should be fixed... somewhere + // this is stupid and should be fixed... somewhere if (setting && (setting.amount === undefined || setting.amount === null)) { setting.amount = 0; } - this.setDaemonSetting("max_key_fee", setting); + this.setDaemonSetting('max_key_fee', setting); } onKeyFeeDisableChange(isDisabled) { - this.setDaemonSetting("disable_max_key_fee", isDisabled); + this.setDaemonSetting('disable_max_key_fee', isDisabled); } onThemeChange(event) { @@ -109,10 +109,7 @@ class SettingsPage extends React.PureComponent { } onShowUnavailableChange(event) { - this.props.setClientSetting( - settings.SHOW_UNAVAILABLE, - event.target.checked - ); + this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked); } componentWillMount() { @@ -137,7 +134,7 @@ class SettingsPage extends React.PureComponent { if (!daemonSettings || Object.keys(daemonSettings).length === 0) { return ( <main className="main--single-column"> - <span className="empty">{__("Failed to load settings.")}</span> + <span className="empty">{__('Failed to load settings.')}</span> </main> ); } @@ -169,21 +166,21 @@ class SettingsPage extends React.PureComponent { </section> */} <section className="card"> <div className="card__content"> - <h4>{__("Download Directory")}</h4> + <h4>{__('Download Directory')}</h4> </div> <div className="card__content"> <FormRow type="directory" name="download_directory" defaultValue={daemonSettings.download_directory} - helper={__("LBRY downloads will be saved here.")} + helper={__('LBRY downloads will be saved here.')} onChange={this.onDownloadDirChange.bind(this)} /> </div> </section> <section className="card"> <div className="card__content"> - <h4>{__("Max Purchase Price")}</h4> + <h4>{__('Max Purchase Price')}</h4> </div> <div className="card__content"> <FormRow @@ -193,7 +190,7 @@ class SettingsPage extends React.PureComponent { this.onKeyFeeDisableChange(true); }} defaultChecked={daemonSettings.disable_max_key_fee} - label={__("No Limit")} + label={__('No Limit')} /> <div className="form-row"> <FormField @@ -203,11 +200,7 @@ class SettingsPage extends React.PureComponent { this.onKeyFeeDisableChange(false); }} defaultChecked={!daemonSettings.disable_max_key_fee} - label={ - daemonSettings.disable_max_key_fee - ? __("Choose limit") - : __("Limit to") - } + label={daemonSettings.disable_max_key_fee ? __('Choose limit') : __('Limit to')} /> {!daemonSettings.disable_max_key_fee && ( <FormFieldPrice @@ -216,14 +209,14 @@ class SettingsPage extends React.PureComponent { defaultValue={ daemonSettings.max_key_fee ? daemonSettings.max_key_fee - : { currency: "USD", amount: 50 } + : { currency: 'USD', amount: 50 } } /> )} </div> <div className="form-field__helper"> {__( - "This will prevent you from purchasing any content over this cost, as a safety measure." + 'This will prevent you from purchasing any content over this cost, as a safety measure.' )} </div> </div> @@ -231,14 +224,14 @@ class SettingsPage extends React.PureComponent { <section className="card"> <div className="card__content"> - <h4>{__("Purchase Confirmations")}</h4> + <h4>{__('Purchase Confirmations')}</h4> </div> <div className="card__content"> <FormRow type="radio" name="instant_purchase_max" defaultChecked={!instantPurchaseEnabled} - label={__("Ask for confirmation of all purchases")} + label={__('Ask for confirmation of all purchases')} onClick={e => { this.onInstantPurchaseEnabledChange(false); }} @@ -248,10 +241,9 @@ class SettingsPage extends React.PureComponent { type="radio" name="instant_purchase_max" defaultChecked={instantPurchaseEnabled} - label={ - "Single-click purchasing of content less than" + - (instantPurchaseEnabled ? "" : "...") - } + label={`Single-click purchasing of content less than${ + instantPurchaseEnabled ? '' : '...' + }`} onClick={e => { this.onInstantPurchaseEnabledChange(true); }} @@ -265,30 +257,30 @@ class SettingsPage extends React.PureComponent { )} </div> <div className="form-field__helper"> - When this option is chosen, LBRY won't ask you to confirm - downloads below the given price. + When this option is chosen, LBRY won't ask you to confirm downloads below the given + price. </div> </div> </section> <section className="card"> <div className="card__content"> - <h4>{__("Content")}</h4> + <h4>{__('Content')}</h4> </div> <div className="card__content"> <FormRow type="checkbox" onChange={this.onShowUnavailableChange.bind(this)} defaultChecked={showUnavailable} - label={__("Show unavailable content in search results")} + label={__('Show unavailable content in search results')} /> <FormRow - label={__("Show NSFW content")} + label={__('Show NSFW content')} type="checkbox" onChange={this.onShowNsfwChange.bind(this)} defaultChecked={showNsfw} helper={__( - "NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. " + 'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. ' )} /> </div> @@ -296,23 +288,21 @@ class SettingsPage extends React.PureComponent { <section className="card"> <div className="card__content"> - <h4>{__("Share Diagnostic Data")}</h4> + <h4>{__('Share Diagnostic Data')}</h4> </div> <div className="card__content"> <FormRow type="checkbox" onChange={this.onShareDataChange.bind(this)} defaultChecked={daemonSettings.share_usage_data} - label={__( - "Help make LBRY better by contributing diagnostic data about my usage" - )} + label={__('Help make LBRY better by contributing diagnostic data about my usage')} /> </div> </section> <section className="card"> <div className="card__content"> - <h4>{__("Theme")}</h4> + <h4>{__('Theme')}</h4> </div> <div className="card__content"> <FormField @@ -332,16 +322,12 @@ class SettingsPage extends React.PureComponent { <section className="card"> <div className="card__content"> - <h4>{__("Application Cache")}</h4> + <h4>{__('Application Cache')}</h4> </div> <div className="card__content"> <p> <Link - label={ - this.state.clearingCache - ? __("Clearing") - : __("Clear the cache") - } + label={this.state.clearingCache ? __('Clearing') : __('Clear the cache')} icon="icon-trash" button="alt" onClick={this.clearCache.bind(this)} diff --git a/src/renderer/page/show/index.js b/src/renderer/page/show/index.js index d8c628387..8a3871668 100644 --- a/src/renderer/page/show/index.js +++ b/src/renderer/page/show/index.js @@ -1,9 +1,9 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doResolveUri } from "redux/actions/content"; -import { makeSelectClaimForUri } from "redux/selectors/claims"; -import { makeSelectIsUriResolving } from "redux/selectors/content"; -import ShowPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doResolveUri } from 'redux/actions/content'; +import { makeSelectClaimForUri } from 'redux/selectors/claims'; +import { makeSelectIsUriResolving } from 'redux/selectors/content'; +import ShowPage from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), diff --git a/src/renderer/page/show/view.jsx b/src/renderer/page/show/view.jsx index d0584847f..ebb45da30 100644 --- a/src/renderer/page/show/view.jsx +++ b/src/renderer/page/show/view.jsx @@ -1,8 +1,8 @@ -import React from "react"; -import lbryuri from "lbryuri"; -import { BusyMessage } from "component/common"; -import ChannelPage from "page/channel"; -import FilePage from "page/file"; +import React from 'react'; +import lbryuri from 'lbryuri'; +import { BusyMessage } from 'component/common'; +import ChannelPage from 'page/channel'; +import FilePage from 'page/file'; class ShowPage extends React.PureComponent { componentWillMount() { @@ -22,7 +22,7 @@ class ShowPage extends React.PureComponent { render() { const { claim, isResolvingUri, uri } = this.props; - let innerContent = ""; + let innerContent = ''; if ((isResolvingUri && !claim) || !claim) { innerContent = ( @@ -33,21 +33,15 @@ class ShowPage extends React.PureComponent { </div> </div> <div className="card__content"> - {isResolvingUri && ( - <BusyMessage - message={__("Loading magic decentralized data...")} - /> - )} + {isResolvingUri && <BusyMessage message={__('Loading magic decentralized data...')} />} {claim === null && !isResolvingUri && ( - <span className="empty"> - {__("There's nothing at this location.")} - </span> + <span className="empty">{__("There's nothing at this location.")}</span> )} </div> </section> ); - } else if (claim && claim.name.length && claim.name[0] === "@") { + } else if (claim && claim.name.length && claim.name[0] === '@') { innerContent = <ChannelPage uri={uri} />; } else if (claim) { innerContent = <FilePage uri={uri} />; diff --git a/src/renderer/page/subscriptions/index.js b/src/renderer/page/subscriptions/index.js index dae4925cb..1cd401dda 100644 --- a/src/renderer/page/subscriptions/index.js +++ b/src/renderer/page/subscriptions/index.js @@ -1,21 +1,21 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react'; +import { connect } from 'react-redux'; import { selectSubscriptionsFromClaims, selectSubscriptions, - selectHasFetchedSubscriptions -} from "redux/selectors/subscriptions"; -import { doFetchClaimsByChannel } from "redux/actions/content"; -import { setHasFetchedSubscriptions } from "redux/actions/subscriptions"; -import SubscriptionsPage from "./view"; + selectHasFetchedSubscriptions, +} from 'redux/selectors/subscriptions'; +import { doFetchClaimsByChannel } from 'redux/actions/content'; +import { setHasFetchedSubscriptions } from 'redux/actions/subscriptions'; +import SubscriptionsPage from './view'; const select = state => ({ - hasFetchedSubscriptions: state.subscriptions.hasFetchedSubscriptions, + hasFetchedSubscriptions: state.subscriptions.hasFetchedSubscriptions, savedSubscriptions: selectSubscriptions(state), subscriptions: selectSubscriptionsFromClaims(state), -}) +}); export default connect(select, { doFetchClaimsByChannel, - setHasFetchedSubscriptions + setHasFetchedSubscriptions, })(SubscriptionsPage); diff --git a/src/renderer/page/subscriptions/view.jsx b/src/renderer/page/subscriptions/view.jsx index 8e034b006..3e09748a5 100644 --- a/src/renderer/page/subscriptions/view.jsx +++ b/src/renderer/page/subscriptions/view.jsx @@ -1,9 +1,9 @@ // @flow -import React from "react"; -import SubHeader from "component/subHeader"; -import { BusyMessage } from "component/common.js"; -import { FeaturedCategory } from "page/discover/view"; -import type { Subscription } from "redux/reducers/subscriptions"; +import React from 'react'; +import SubHeader from 'component/subHeader'; +import { BusyMessage } from 'component/common.js'; +import { FeaturedCategory } from 'page/discover/view'; +import type { Subscription } from 'redux/reducers/subscriptions'; type SavedSubscriptions = Array<Subscription>; @@ -31,11 +31,7 @@ export default class extends React.PureComponent<Props> { } componentWillReceiveProps(props: Props) { - const { - savedSubscriptions, - hasFetchedSubscriptions, - setHasFetchedSubscriptions, - } = props; + const { savedSubscriptions, hasFetchedSubscriptions, setHasFetchedSubscriptions } = props; if (!hasFetchedSubscriptions && savedSubscriptions.length) { this.fetchSubscriptions(savedSubscriptions); @@ -56,12 +52,13 @@ export default class extends React.PureComponent<Props> { render() { const { subscriptions, savedSubscriptions } = this.props; - const someClaimsNotLoaded = Boolean(subscriptions.find(subscription => !subscription.claims.length)) + const someClaimsNotLoaded = Boolean( + subscriptions.find(subscription => !subscription.claims.length) + ); const fetchingSubscriptions = !!savedSubscriptions.length && - (subscriptions.length !== savedSubscriptions.length || - someClaimsNotLoaded); + (subscriptions.length !== savedSubscriptions.length || someClaimsNotLoaded); return ( <main className="main main--no-margin"> @@ -71,7 +68,7 @@ export default class extends React.PureComponent<Props> { )} {fetchingSubscriptions && ( <div className="card-row__placeholder"> - <BusyMessage message={__("Fetching subscriptions")} /> + <BusyMessage message={__('Fetching subscriptions')} /> </div> )} {!!savedSubscriptions.length && ( @@ -82,7 +79,7 @@ export default class extends React.PureComponent<Props> { // will need to update when you can subscribe to empty channels // for now this prevents issues with FeaturedCategory being rendered // before the names (claim uris) are populated - return ""; + return ''; } return ( diff --git a/src/renderer/page/transactionHistory/index.js b/src/renderer/page/transactionHistory/index.js index bea2b4976..2323994f1 100644 --- a/src/renderer/page/transactionHistory/index.js +++ b/src/renderer/page/transactionHistory/index.js @@ -1,11 +1,8 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doFetchTransactions } from "redux/actions/wallet"; -import { - selectTransactionItems, - selectIsFetchingTransactions, -} from "redux/selectors/wallet"; -import TransactionHistoryPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import { doFetchTransactions } from 'redux/actions/wallet'; +import { selectTransactionItems, selectIsFetchingTransactions } from 'redux/selectors/wallet'; +import TransactionHistoryPage from './view'; const select = state => ({ fetchingTransactions: selectIsFetchingTransactions(state), diff --git a/src/renderer/page/transactionHistory/view.jsx b/src/renderer/page/transactionHistory/view.jsx index ec4db0ed9..562da6aa5 100644 --- a/src/renderer/page/transactionHistory/view.jsx +++ b/src/renderer/page/transactionHistory/view.jsx @@ -1,7 +1,7 @@ -import React from "react"; -import { BusyMessage } from "component/common"; -import SubHeader from "component/subHeader"; -import TransactionList from "component/transactionList"; +import React from 'react'; +import { BusyMessage } from 'component/common'; +import SubHeader from 'component/subHeader'; +import TransactionList from 'component/transactionList'; class TransactionHistoryPage extends React.PureComponent { componentWillMount() { @@ -16,23 +16,22 @@ class TransactionHistoryPage extends React.PureComponent { <SubHeader /> <section className="card"> <div - className={ - "card__title-primary " + - (fetchingTransactions && transactions.length ? "reloading" : "") - } + className={`card__title-primary ${ + fetchingTransactions && transactions.length ? 'reloading' : '' + }`} > - <h3>{__("Transaction History")}</h3> + <h3>{__('Transaction History')}</h3> </div> <div className="card__content"> {fetchingTransactions && !transactions.length ? ( - <BusyMessage message={__("Loading transactions")} /> + <BusyMessage message={__('Loading transactions')} /> ) : ( - "" + '' )} {transactions && transactions.length ? ( <TransactionList transactions={transactions} /> ) : ( - "" + '' )} </div> </section> diff --git a/src/renderer/page/wallet/index.js b/src/renderer/page/wallet/index.js index 01fdf2a64..364f16edb 100644 --- a/src/renderer/page/wallet/index.js +++ b/src/renderer/page/wallet/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import { connect } from "react-redux"; -import WalletPage from "./view"; +import React from 'react'; +import { connect } from 'react-redux'; +import WalletPage from './view'; export default connect(null, null)(WalletPage); diff --git a/src/renderer/page/wallet/view.jsx b/src/renderer/page/wallet/view.jsx index b8bee1c94..b98bb80f9 100644 --- a/src/renderer/page/wallet/view.jsx +++ b/src/renderer/page/wallet/view.jsx @@ -1,20 +1,18 @@ -import React from "react"; -import SubHeader from "component/subHeader"; -import WalletBalance from "component/walletBalance"; -import RewardSummary from "component/rewardSummary"; -import TransactionListRecent from "component/transactionListRecent"; +import React from 'react'; +import SubHeader from 'component/subHeader'; +import WalletBalance from 'component/walletBalance'; +import RewardSummary from 'component/rewardSummary'; +import TransactionListRecent from 'component/transactionListRecent'; -const WalletPage = props => { - return ( - <main className="main--single-column page--wallet"> - <SubHeader /> - <div className="card-grid"> - <WalletBalance /> - <RewardSummary /> - </div> - <TransactionListRecent /> - </main> - ); -}; +const WalletPage = props => ( + <main className="main--single-column page--wallet"> + <SubHeader /> + <div className="card-grid"> + <WalletBalance /> + <RewardSummary /> + </div> + <TransactionListRecent /> + </main> +); export default WalletPage;