refactor remove file modal

This commit is contained in:
Jeremy Kauffman 2017-07-02 14:23:38 -04:00
parent 91359c2966
commit 8ea972200a
14 changed files with 133 additions and 88 deletions
ui/js
component
app
fileActions
modalDownloading
modalError
modalRemoveFile
modalUpgrade
modalWelcome
constants

View file

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import Router from "component/router"; import Router from "component/router";
import Header from "component/header"; import Header from "component/header";
import ErrorModal from "component/errorModal"; import ModalError from "component/modalError";
import DownloadingModal from "component/downloadingModal"; import ModalDownloading from "component/modalDownloading";
import UpgradeModal from "component/upgradeModal"; import UpgradeModal from "component/modalUpgrade";
import WelcomeModal from "component/welcomeModal"; import WelcomeModal from "component/modalWelcome";
import lbry from "lbry"; import lbry from "lbry";
import { Line } from "rc-progress"; import { Line } from "rc-progress";
@ -33,8 +33,8 @@ class App extends React.PureComponent {
<Router /> <Router />
</div> </div>
{modal == "upgrade" && <UpgradeModal />} {modal == "upgrade" && <UpgradeModal />}
{modal == "downloading" && <DownloadingModal />} {modal == "downloading" && <ModalDownloading />}
{modal == "error" && <ErrorModal />} {modal == "error" && <ModalError />}
{modal == "welcome" && <WelcomeModal />} {modal == "welcome" && <WelcomeModal />}
</div> </div>
); );

View file

@ -9,13 +9,9 @@ import {
import { makeSelectIsAvailableForUri } from "selectors/availability"; import { makeSelectIsAvailableForUri } from "selectors/availability";
import { selectCurrentModal } from "selectors/app"; import { selectCurrentModal } from "selectors/app";
import { makeSelectCostInfoForUri } from "selectors/cost_info"; 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 { doFetchAvailability } from "actions/availability";
import { import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info";
doOpenFileInShell,
doOpenFileInFolder,
doDeleteFile,
} from "actions/file_info";
import { makeSelectClaimForUriIsMine } from "selectors/claims"; import { makeSelectClaimForUriIsMine } from "selectors/claims";
import { doPurchaseUri, doLoadVideo } from "actions/content"; import { doPurchaseUri, doLoadVideo } from "actions/content";
import FileActions from "./view"; import FileActions from "./view";
@ -48,10 +44,6 @@ const perform = dispatch => ({
closeModal: () => dispatch(doCloseModal()), closeModal: () => dispatch(doCloseModal()),
openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)), openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)),
openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)), openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
dispatch(doHistoryBack());
dispatch(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
},
openModal: modal => dispatch(doOpenModal(modal)), openModal: modal => dispatch(doOpenModal(modal)),
startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")), startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")),
loadVideo: uri => dispatch(doLoadVideo(uri)), loadVideo: uri => dispatch(doLoadVideo(uri)),

View file

@ -2,18 +2,17 @@ import React from "react";
import { Icon, BusyMessage } from "component/common"; import { Icon, BusyMessage } from "component/common";
import FilePrice from "component/filePrice"; import FilePrice from "component/filePrice";
import { Modal } from "component/modal"; import { Modal } from "component/modal";
import { FormField } from "component/form";
import Link from "component/link"; import Link from "component/link";
import { ToolTip } from "component/tooltip"; import { ToolTip } from "component/tooltip";
import { DropDownMenu, DropDownMenuItem } from "component/menu"; import { DropDownMenu, DropDownMenuItem } from "component/menu";
import ModalRemoveFile from "component/modalRemoveFile";
import * as modals from "constants/modal_types";
class FileActions extends React.PureComponent { class FileActions extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
forceShowActions: false, 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() { onAffirmPurchase() {
this.props.closeModal(); this.props.closeModal();
this.props.loadVideo(this.props.uri); this.props.loadVideo(this.props.uri);
@ -62,7 +49,6 @@ class FileActions extends React.PureComponent {
platform, platform,
downloading, downloading,
uri, uri,
deleteFile,
openInFolder, openInFolder,
openInShell, openInShell,
modal, modal,
@ -74,9 +60,7 @@ class FileActions extends React.PureComponent {
claimIsMine, claimIsMine,
} = this.props; } = this.props;
const deleteChecked = this.state.deleteChecked, const metadata = fileInfo ? fileInfo.metadata : null,
abandonClaimChecked = this.state.abandonClaimChecked,
metadata = fileInfo ? fileInfo.metadata : null,
openInFolderMessage = platform.startsWith("Mac") openInFolderMessage = platform.startsWith("Mac")
? __("Open in Finder") ? __("Open in Finder")
: __("Open in Folder"), : __("Open in Folder"),
@ -86,10 +70,9 @@ class FileActions extends React.PureComponent {
let content; let content;
if (loading || downloading) { if (loading || downloading) {
const progress = const progress = fileInfo && fileInfo.written_bytes
fileInfo && fileInfo.written_bytes ? fileInfo.written_bytes / fileInfo.total_bytes * 100
? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0,
: 0,
label = fileInfo label = fileInfo
? progress.toFixed(0) + __("% complete") ? progress.toFixed(0) + __("% complete")
: __("Connecting..."), : __("Connecting..."),
@ -175,7 +158,7 @@ class FileActions extends React.PureComponent {
/> />
<DropDownMenuItem <DropDownMenuItem
key={1} key={1}
onClick={() => openModal("confirmRemove")} onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}
label={__("Remove...")} label={__("Remove...")}
/> />
</DropDownMenu> </DropDownMenu>
@ -207,42 +190,12 @@ class FileActions extends React.PureComponent {
> >
{__("LBRY was unable to download the stream")} <strong>{uri}</strong>. {__("LBRY was unable to download the stream")} <strong>{uri}</strong>.
</Modal> </Modal>
<Modal {modal == modals.CONFIRM_FILE_REMOVE &&
isOpen={modal == "confirmRemove"} <ModalRemoveFile
contentLabel={__("Not enough credits")} uri={uri}
type="confirm" outpoint={fileInfo.outpoint}
confirmButtonLabel={__("Remove")} title={title}
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>
</section> </section>
); );
} }

View file

@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doStartUpgrade, doCancelUpgrade } from "actions/app"; import { doStartUpgrade, doCancelUpgrade } from "actions/app";
import { selectDownloadProgress, selectDownloadComplete } from "selectors/app"; import { selectDownloadProgress, selectDownloadComplete } from "selectors/app";
import DownloadingModal from "./view"; import ModalDownloading from "./view";
const select = state => ({ const select = state => ({
downloadProgress: selectDownloadProgress(state), downloadProgress: selectDownloadProgress(state),
@ -14,4 +14,4 @@ const perform = dispatch => ({
cancelUpgrade: () => dispatch(doCancelUpgrade()), cancelUpgrade: () => dispatch(doCancelUpgrade()),
}); });
export default connect(select, perform)(DownloadingModal); export default connect(select, perform)(ModalDownloading);

View file

@ -3,7 +3,7 @@ import { Modal } from "component/modal";
import { Line } from "rc-progress"; import { Line } from "rc-progress";
import Link from "component/link"; import Link from "component/link";
class DownloadingModal extends React.PureComponent { class ModalDownloading extends React.PureComponent {
render() { render() {
const { const {
downloadProgress, downloadProgress,
@ -59,4 +59,4 @@ class DownloadingModal extends React.PureComponent {
} }
} }
export default DownloadingModal; export default ModalDownloading;

View file

@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { selectCurrentModal, selectModalExtraContent } from "selectors/app"; import { selectCurrentModal, selectModalExtraContent } from "selectors/app";
import { doCloseModal } from "actions/app"; import { doCloseModal } from "actions/app";
import ErrorModal from "./view"; import ModalError from "./view";
const select = state => ({ const select = state => ({
modal: selectCurrentModal(state), modal: selectCurrentModal(state),
@ -13,4 +13,4 @@ const perform = dispatch => ({
closeModal: () => dispatch(doCloseModal()), closeModal: () => dispatch(doCloseModal()),
}); });
export default connect(select, perform)(ErrorModal); export default connect(select, perform)(ModalError);

View file

@ -2,7 +2,7 @@ import React from "react";
import lbry from "lbry"; import lbry from "lbry";
import { ExpandableModal } from "component/modal"; import { ExpandableModal } from "component/modal";
class ErrorModal extends React.PureComponent { class ModalError extends React.PureComponent {
render() { render() {
const { modal, closeModal, error } = this.props; const { modal, closeModal, error } = this.props;
@ -60,4 +60,4 @@ class ErrorModal extends React.PureComponent {
} }
} }
export default ErrorModal; export default ModalError;

View file

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

View file

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

View file

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doDownloadUpgrade, doSkipUpgrade } from "actions/app"; import { doDownloadUpgrade, doSkipUpgrade } from "actions/app";
import UpgradeModal from "./view"; import ModalUpgrade from "./view";
const select = state => ({}); const select = state => ({});
@ -10,4 +10,4 @@ const perform = dispatch => ({
skipUpgrade: () => dispatch(doSkipUpgrade()), skipUpgrade: () => dispatch(doSkipUpgrade()),
}); });
export default connect(select, perform)(UpgradeModal); export default connect(select, perform)(ModalUpgrade);

View file

@ -2,7 +2,7 @@ import React from "react";
import { Modal } from "component/modal"; import { Modal } from "component/modal";
import { downloadUpgrade, skipUpgrade } from "actions/app"; import { downloadUpgrade, skipUpgrade } from "actions/app";
class UpgradeModal extends React.PureComponent { class ModalUpgrade extends React.PureComponent {
render() { render() {
const { downloadUpgrade, skipUpgrade } = this.props; const { downloadUpgrade, skipUpgrade } = this.props;
@ -24,4 +24,4 @@ class UpgradeModal extends React.PureComponent {
} }
} }
export default UpgradeModal; export default ModalUpgrade;

View file

@ -1 +1,2 @@
export const WELCOME = "welcome"; export const WELCOME = "welcome";
export const CONFIRM_FILE_REMOVE = "confirmFileRemove";