refactor remove file modal
This commit is contained in:
parent
91359c2966
commit
8ea972200a
14 changed files with 133 additions and 88 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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)),
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
|
@ -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;
|
|
@ -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);
|
|
@ -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;
|
27
ui/js/component/modalRemoveFile/index.js
Normal file
27
ui/js/component/modalRemoveFile/index.js
Normal 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);
|
72
ui/js/component/modalRemoveFile/view.jsx
Normal file
72
ui/js/component/modalRemoveFile/view.jsx
Normal 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;
|
|
@ -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);
|
|
@ -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;
|
|
@ -1 +1,2 @@
|
||||||
export const WELCOME = "welcome";
|
export const WELCOME = "welcome";
|
||||||
|
export const CONFIRM_FILE_REMOVE = "confirmFileRemove";
|
||||||
|
|
Loading…
Add table
Reference in a new issue