diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index f117c5f2e..727f4e39a 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -1,10 +1,10 @@ import React from "react"; import Router from "component/router"; import Header from "component/header"; -import ErrorModal from "component/errorModal"; -import DownloadingModal from "component/downloadingModal"; -import UpgradeModal from "component/upgradeModal"; -import WelcomeModal from "component/welcomeModal"; +import ModalError from "component/modalError"; +import ModalDownloading from "component/modalDownloading"; +import UpgradeModal from "component/modalUpgrade"; +import WelcomeModal from "component/modalWelcome"; import lbry from "lbry"; import { Line } from "rc-progress"; @@ -33,8 +33,8 @@ class App extends React.PureComponent { <Router /> </div> {modal == "upgrade" && <UpgradeModal />} - {modal == "downloading" && <DownloadingModal />} - {modal == "error" && <ErrorModal />} + {modal == "downloading" && <ModalDownloading />} + {modal == "error" && <ModalError />} {modal == "welcome" && <WelcomeModal />} </div> ); diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index eb5fc7422..769a1390d 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -9,13 +9,9 @@ import { import { makeSelectIsAvailableForUri } from "selectors/availability"; import { selectCurrentModal } from "selectors/app"; import { makeSelectCostInfoForUri } from "selectors/cost_info"; -import { doCloseModal, doOpenModal, doHistoryBack } from "actions/app"; +import { doCloseModal, doOpenModal } from "actions/app"; import { doFetchAvailability } from "actions/availability"; -import { - doOpenFileInShell, - doOpenFileInFolder, - doDeleteFile, -} from "actions/file_info"; +import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info"; import { makeSelectClaimForUriIsMine } from "selectors/claims"; import { doPurchaseUri, doLoadVideo } from "actions/content"; import FileActions from "./view"; @@ -48,10 +44,6 @@ const perform = dispatch => ({ closeModal: () => dispatch(doCloseModal()), openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)), openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)), - deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => { - dispatch(doHistoryBack()); - dispatch(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim)); - }, openModal: modal => dispatch(doOpenModal(modal)), startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")), loadVideo: uri => dispatch(doLoadVideo(uri)), diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 530987806..53188a1f5 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -2,18 +2,17 @@ import React from "react"; import { Icon, BusyMessage } from "component/common"; import FilePrice from "component/filePrice"; import { Modal } from "component/modal"; -import { FormField } from "component/form"; import Link from "component/link"; import { ToolTip } from "component/tooltip"; import { DropDownMenu, DropDownMenuItem } from "component/menu"; +import ModalRemoveFile from "component/modalRemoveFile"; +import * as modals from "constants/modal_types"; class FileActions extends React.PureComponent { constructor(props) { super(props); this.state = { forceShowActions: false, - deleteChecked: false, - abandonClaimChecked: false, }; } @@ -38,18 +37,6 @@ class FileActions extends React.PureComponent { }); } - handleDeleteCheckboxClicked(event) { - this.setState({ - deleteChecked: event.target.checked, - }); - } - - handleAbandonClaimCheckboxClicked(event) { - this.setState({ - abandonClaimChecked: event.target.checked, - }); - } - onAffirmPurchase() { this.props.closeModal(); this.props.loadVideo(this.props.uri); @@ -62,7 +49,6 @@ class FileActions extends React.PureComponent { platform, downloading, uri, - deleteFile, openInFolder, openInShell, modal, @@ -74,9 +60,7 @@ class FileActions extends React.PureComponent { claimIsMine, } = this.props; - const deleteChecked = this.state.deleteChecked, - abandonClaimChecked = this.state.abandonClaimChecked, - metadata = fileInfo ? fileInfo.metadata : null, + const metadata = fileInfo ? fileInfo.metadata : null, openInFolderMessage = platform.startsWith("Mac") ? __("Open in Finder") : __("Open in Folder"), @@ -86,10 +70,9 @@ class FileActions extends React.PureComponent { let content; if (loading || downloading) { - const progress = - fileInfo && fileInfo.written_bytes - ? fileInfo.written_bytes / fileInfo.total_bytes * 100 - : 0, + const progress = fileInfo && fileInfo.written_bytes + ? fileInfo.written_bytes / fileInfo.total_bytes * 100 + : 0, label = fileInfo ? progress.toFixed(0) + __("% complete") : __("Connecting..."), @@ -175,7 +158,7 @@ class FileActions extends React.PureComponent { /> <DropDownMenuItem key={1} - onClick={() => openModal("confirmRemove")} + onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)} label={__("Remove...")} /> </DropDownMenu> @@ -207,42 +190,12 @@ class FileActions extends React.PureComponent { > {__("LBRY was unable to download the stream")} <strong>{uri}</strong>. </Modal> - <Modal - isOpen={modal == "confirmRemove"} - contentLabel={__("Not enough credits")} - type="confirm" - confirmButtonLabel={__("Remove")} - onConfirmed={() => - deleteFile(fileInfo.outpoint, deleteChecked, abandonClaimChecked)} - onAborted={closeModal} - > - <p> - {__("Are you sure you'd like to remove")} <cite>{title}</cite>{" "} - {__("from LBRY?")} - </p> - - <section> - <label> - <FormField - type="checkbox" - checked={deleteChecked} - onClick={this.handleDeleteCheckboxClicked.bind(this)} - />{" "} - {__("Delete this file from my computer")} - </label> - </section> - {claimIsMine && - <section> - <label> - <FormField - type="checkbox" - checked={abandonClaimChecked} - onClick={this.handleAbandonClaimCheckboxClicked.bind(this)} - />{" "} - {__("Abandon the claim for this URI")} - </label> - </section>} - </Modal> + {modal == modals.CONFIRM_FILE_REMOVE && + <ModalRemoveFile + uri={uri} + outpoint={fileInfo.outpoint} + title={title} + />} </section> ); } diff --git a/ui/js/component/downloadingModal/index.jsx b/ui/js/component/modalDownloading/index.js similarity index 83% rename from ui/js/component/downloadingModal/index.jsx rename to ui/js/component/modalDownloading/index.js index 1902cbd13..a8a316658 100644 --- a/ui/js/component/downloadingModal/index.jsx +++ b/ui/js/component/modalDownloading/index.js @@ -2,7 +2,7 @@ import React from "react"; import { connect } from "react-redux"; import { doStartUpgrade, doCancelUpgrade } from "actions/app"; import { selectDownloadProgress, selectDownloadComplete } from "selectors/app"; -import DownloadingModal from "./view"; +import ModalDownloading from "./view"; const select = state => ({ downloadProgress: selectDownloadProgress(state), @@ -14,4 +14,4 @@ const perform = dispatch => ({ cancelUpgrade: () => dispatch(doCancelUpgrade()), }); -export default connect(select, perform)(DownloadingModal); +export default connect(select, perform)(ModalDownloading); diff --git a/ui/js/component/downloadingModal/view.jsx b/ui/js/component/modalDownloading/view.jsx similarity index 94% rename from ui/js/component/downloadingModal/view.jsx rename to ui/js/component/modalDownloading/view.jsx index 0bf612d7f..9b5bed354 100644 --- a/ui/js/component/downloadingModal/view.jsx +++ b/ui/js/component/modalDownloading/view.jsx @@ -3,7 +3,7 @@ import { Modal } from "component/modal"; import { Line } from "rc-progress"; import Link from "component/link"; -class DownloadingModal extends React.PureComponent { +class ModalDownloading extends React.PureComponent { render() { const { downloadProgress, @@ -59,4 +59,4 @@ class DownloadingModal extends React.PureComponent { } } -export default DownloadingModal; +export default ModalDownloading; diff --git a/ui/js/component/errorModal/index.jsx b/ui/js/component/modalError/index.js similarity index 81% rename from ui/js/component/errorModal/index.jsx rename to ui/js/component/modalError/index.js index dadbe3eb5..47680ecc9 100644 --- a/ui/js/component/errorModal/index.jsx +++ b/ui/js/component/modalError/index.js @@ -2,7 +2,7 @@ import React from "react"; import { connect } from "react-redux"; import { selectCurrentModal, selectModalExtraContent } from "selectors/app"; import { doCloseModal } from "actions/app"; -import ErrorModal from "./view"; +import ModalError from "./view"; const select = state => ({ modal: selectCurrentModal(state), @@ -13,4 +13,4 @@ const perform = dispatch => ({ closeModal: () => dispatch(doCloseModal()), }); -export default connect(select, perform)(ErrorModal); +export default connect(select, perform)(ModalError); diff --git a/ui/js/component/errorModal/view.jsx b/ui/js/component/modalError/view.jsx similarity index 95% rename from ui/js/component/errorModal/view.jsx rename to ui/js/component/modalError/view.jsx index 57bfe19dc..8090c4282 100644 --- a/ui/js/component/errorModal/view.jsx +++ b/ui/js/component/modalError/view.jsx @@ -2,7 +2,7 @@ import React from "react"; import lbry from "lbry"; import { ExpandableModal } from "component/modal"; -class ErrorModal extends React.PureComponent { +class ModalError extends React.PureComponent { render() { const { modal, closeModal, error } = this.props; @@ -60,4 +60,4 @@ class ErrorModal extends React.PureComponent { } } -export default ErrorModal; +export default ModalError; diff --git a/ui/js/component/modalRemoveFile/index.js b/ui/js/component/modalRemoveFile/index.js new file mode 100644 index 000000000..de54514d5 --- /dev/null +++ b/ui/js/component/modalRemoveFile/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal, doHistoryBack } from "actions/app"; +import { doDeleteFile } from "actions/file_info"; +import { makeSelectClaimForUriIsMine } from "selectors/claims"; + +import ModalRemoveFile from "./view"; + +const makeSelect = () => { + const selectClaimForUriIsMine = makeSelectClaimForUriIsMine(); + + const select = (state, props) => ({ + claimIsMine: selectClaimForUriIsMine(state, props), + }); + + return select; +}; + +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), + deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => { + dispatch(doHistoryBack()); + dispatch(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim)); + }, +}); + +export default connect(makeSelect, perform)(ModalRemoveFile); diff --git a/ui/js/component/modalRemoveFile/view.jsx b/ui/js/component/modalRemoveFile/view.jsx new file mode 100644 index 000000000..02a58d0c2 --- /dev/null +++ b/ui/js/component/modalRemoveFile/view.jsx @@ -0,0 +1,72 @@ +import React from "react"; +import { Modal } from "component/modal"; +import { FormField } from "component/form.js"; + +class ModalRemoveFile extends React.PureComponent { + constructor(props) { + super(props); + + this.state = { + deleteChecked: false, + abandonClaimChecked: false, + }; + } + + handleDeleteCheckboxClicked(event) { + this.setState({ + deleteChecked: event.target.checked, + }); + } + + handleAbandonClaimCheckboxClicked(event) { + this.setState({ + abandonClaimChecked: event.target.checked, + }); + } + + render() { + const { claimIsMine, closeModal, deleteFile, outpoint, title } = this.props; + const { deleteChecked, abandonClaimChecked } = this.state; + + return ( + <Modal + isOpen={true} + contentLabel={__("Confirm File Remove")} + type="confirm" + confirmButtonLabel={__("Remove")} + onConfirmed={() => + deleteFile(outpoint, deleteChecked, abandonClaimChecked)} + onAborted={closeModal} + > + <p> + {__("Are you sure you'd like to remove")} <cite>{title}</cite>{" "} + {__("from LBRY?")} + </p> + + <section> + <label> + <FormField + type="checkbox" + checked={deleteChecked} + onClick={this.handleDeleteCheckboxClicked.bind(this)} + />{" "} + {__("Delete this file from my computer")} + </label> + </section> + {claimIsMine && + <section> + <label> + <FormField + type="checkbox" + checked={abandonClaimChecked} + onClick={this.handleAbandonClaimCheckboxClicked.bind(this)} + />{" "} + {__("Abandon the claim for this URI")} + </label> + </section>} + </Modal> + ); + } +} + +export default ModalRemoveFile; diff --git a/ui/js/component/upgradeModal/index.jsx b/ui/js/component/modalUpgrade/index.js similarity index 77% rename from ui/js/component/upgradeModal/index.jsx rename to ui/js/component/modalUpgrade/index.js index f30266554..ae4d815c7 100644 --- a/ui/js/component/upgradeModal/index.jsx +++ b/ui/js/component/modalUpgrade/index.js @@ -1,7 +1,7 @@ import React from "react"; import { connect } from "react-redux"; import { doDownloadUpgrade, doSkipUpgrade } from "actions/app"; -import UpgradeModal from "./view"; +import ModalUpgrade from "./view"; const select = state => ({}); @@ -10,4 +10,4 @@ const perform = dispatch => ({ skipUpgrade: () => dispatch(doSkipUpgrade()), }); -export default connect(select, perform)(UpgradeModal); +export default connect(select, perform)(ModalUpgrade); diff --git a/ui/js/component/upgradeModal/view.jsx b/ui/js/component/modalUpgrade/view.jsx similarity index 88% rename from ui/js/component/upgradeModal/view.jsx rename to ui/js/component/modalUpgrade/view.jsx index 37df28c4b..544fd96b7 100644 --- a/ui/js/component/upgradeModal/view.jsx +++ b/ui/js/component/modalUpgrade/view.jsx @@ -2,7 +2,7 @@ import React from "react"; import { Modal } from "component/modal"; import { downloadUpgrade, skipUpgrade } from "actions/app"; -class UpgradeModal extends React.PureComponent { +class ModalUpgrade extends React.PureComponent { render() { const { downloadUpgrade, skipUpgrade } = this.props; @@ -24,4 +24,4 @@ class UpgradeModal extends React.PureComponent { } } -export default UpgradeModal; +export default ModalUpgrade; diff --git a/ui/js/component/welcomeModal/index.jsx b/ui/js/component/modalWelcome/index.js similarity index 100% rename from ui/js/component/welcomeModal/index.jsx rename to ui/js/component/modalWelcome/index.js diff --git a/ui/js/component/welcomeModal/view.jsx b/ui/js/component/modalWelcome/view.jsx similarity index 100% rename from ui/js/component/welcomeModal/view.jsx rename to ui/js/component/modalWelcome/view.jsx diff --git a/ui/js/constants/modal_types.js b/ui/js/constants/modal_types.js index b34bb9afb..787dabaaf 100644 --- a/ui/js/constants/modal_types.js +++ b/ui/js/constants/modal_types.js @@ -1 +1,2 @@ export const WELCOME = "welcome"; +export const CONFIRM_FILE_REMOVE = "confirmFileRemove";