diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index e6f87f206..fcffca1b9 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -1,7 +1,7 @@ import React from "react"; import { Icon, BusyMessage } from "component/common"; import FilePrice from "component/filePrice"; -import { FormField } from "component/form"; +import { TipLink } from "component/tipLink"; import { Modal } from "component/modal"; import Link from "component/link"; import { ToolTip } from "component/tooltip"; @@ -14,8 +14,6 @@ class FileActions extends React.PureComponent { super(props); this.state = { forceShowActions: false, - showTipBox: false, - feeAmount: "1.00", }; } @@ -60,37 +58,6 @@ class FileActions extends React.PureComponent { this.props.loadVideo(this.props.uri); } - handleTipPublisherButtonClicked() { - this.setState({ - showTipBox: true, - }); - } - - handleTipButtonClicked() { - let address = this.props.claim.address; - let amount = this.state.feeAmount; - - this.props.setAddress(address); - this.props.setAmount(amount); - this.props.sendToAddress(); - - this.setState({ - showTipBox: false, - }); - } - - handleTipCancelButtonClicked() { - this.setState({ - showTipBox: false, - }); - } - - handleFeeAmountChange(event) { - this.setState({ - feeAmount: event.target.value, - }); - } - render() { const { fileInfo, @@ -109,8 +76,6 @@ class FileActions extends React.PureComponent { claimIsMine, } = this.props; - const { showTipBox } = this.state; - const metadata = fileInfo ? fileInfo.metadata : null, openInFolderMessage = platform.startsWith("Mac") ? __("Open in Finder") @@ -119,40 +84,6 @@ class FileActions extends React.PureComponent { title = metadata ? metadata.title : uri; let content; - let tipLink = ( - - ); - - let tipBox = ( - - this.handleFeeAmountChange(event)} - /> - {__(" ")} - - - - ); if (loading || downloading) { const progress = fileInfo && fileInfo.written_bytes @@ -250,7 +181,7 @@ class FileActions extends React.PureComponent { /> : ""} - {showTipBox ? tipBox : tipLink} + } - {modal == "insufficientBalance" && - - {__( - "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." - )} - } - {modal == "transactionSuccessful" && - - {__( - "The publisher of the content was successfully tipped " + - this.state.feeAmount + - " LBC. Mahalo!" - )} - } - {modal == "transactionFailed" && - - {__("Something went wrong")}: - } ); } diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js new file mode 100644 index 000000000..41a894efb --- /dev/null +++ b/ui/js/component/tipLink/index.js @@ -0,0 +1,28 @@ +import React from "react"; +import { connect } from "react-redux"; +import { + doSendDraftTransaction, + doSetDraftTransactionAmount, + doSetDraftTransactionAddress, +} from "actions/wallet"; +import { selectCurrentModal } from "selectors/app"; +import { doCloseModal, doOpenModal } from "actions/app"; +import TipLink from "./view"; + +const makeSelect = () => { + const select = (state, props) => ({ + modal: selectCurrentModal(state), + }); + + return select; +}; + +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), + openModal: modal => dispatch(doOpenModal(modal)), + sendToAddress: () => dispatch(doSendDraftTransaction()), + setAmount: amount => dispatch(doSetDraftTransactionAmount(amount)), + setAddress: address => dispatch(doSetDraftTransactionAddress(address)), +}); + +export default connect(makeSelect, perform)(TipLink); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx new file mode 100644 index 000000000..caa0a767b --- /dev/null +++ b/ui/js/component/tipLink/view.jsx @@ -0,0 +1,123 @@ +import React from "react"; +import { Modal } from "component/modal"; +import Link from "component/link"; +import { FormField } from "component/form"; + +class TipLink extends React.PureComponent { + constructor(props) { + super(props); + + this.state = { + showTipBox: false, + feeAmount: "1.00", + }; + } + + handleTipPublisherButtonClicked() { + this.setState({ + showTipBox: true, + }); + } + + handleTipButtonClicked() { + let address = this.props.claim.address; + let amount = this.state.feeAmount; + + this.props.setAddress(address); + this.props.setAmount(amount); + this.props.sendToAddress(); + + this.setState({ + showTipBox: false, + }); + } + + handleTipCancelButtonClicked() { + this.setState({ + showTipBox: false, + }); + } + + handleFeeAmountChange(event) { + this.setState({ + feeAmount: event.target.value, + }); + } + + render() { + const { showTipBox } = this.state; + + let tipLink = ( + + ); + + let tipBox = ( + + this.handleFeeAmountChange(event)} + /> + {__(" ")} + + + + ); + + return ( +
+ {showTipBox ? tipBox : tipLink} + {modal == "insufficientBalance" && + + {__( + "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." + )} + } + {modal == "transactionSuccessful" && + + {__( + "The publisher of the content was successfully tipped " + + this.state.feeAmount + + " LBC. Mahalo!" + )} + } + {modal == "transactionFailed" && + + {__("Something went wrong")}: + } +
+ ); + } +} + +export default TipLink;