refactor remove file modal

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

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)),

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

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

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;

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

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;

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

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;

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

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;

ui/js/constants/modal_types.js

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