Merge pull request #306 from lbryio/abandon-claim-on-delete

Add option to abandon claim when deleting published file

ui/js/actions/file_info.js

@@ -4,10 +4,11 @@ import { doFetchClaimListMine } from "actions/content";
 import {
   selectClaimsByUri,
   selectClaimListMineIsPending,
+  selectMyClaimsOutpoints,
 } from "selectors/claims";
 import {
   selectFileListIsPending,
-  selectAllFileInfos,
+  selectFileInfosByOutpoint,
   selectUrisLoading,
 } from "selectors/file_info";
 import { doCloseModal } from "actions/app";
@@ -78,8 +79,41 @@ export function doOpenFileInFolder(fileInfo) {
   };
 }
 
-export function doDeleteFile(outpoint, deleteFromComputer) {
+export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
   return function(dispatch, getState) {
+    const state = getState();
+
+    lbry.file_delete({
+      outpoint: outpoint,
+      delete_from_download_dir: deleteFromComputer,
+    });
+
+    // If the file is for a claim we published then also abandom the claim
+    const myClaimsOutpoints = selectMyClaimsOutpoints(state);
+    if (abandonClaim && myClaimsOutpoints.indexOf(outpoint) !== -1) {
+      const byOutpoint = selectFileInfosByOutpoint(state);
+      const fileInfo = byOutpoint[outpoint];
+
+      if (fileInfo) {
+        dispatch({
+          type: types.ABANDON_CLAIM_STARTED,
+          data: {
+            claimId: fileInfo.claim_id,
+          },
+        });
+
+        const success = () => {
+          dispatch({
+            type: types.ABANDON_CLAIM_COMPLETED,
+            data: {
+              claimId: fileInfo.claim_id,
+            },
+          });
+        };
+        lbry.claim_abandon({ claim_id: fileInfo.claim_id }).then(success);
+      }
+    }
+
     dispatch({
       type: types.FILE_DELETE,
       data: {
@@ -87,11 +121,6 @@ export function doDeleteFile(outpoint, deleteFromComputer) {
       },
     });
 
-    lbry.file_delete({
-      outpoint: outpoint,
-      delete_from_download_dir: deleteFromComputer,
-    });
-
     dispatch(doCloseModal());
   };
 }

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,10 @@ 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";
 
@@ -25,6 +22,7 @@ const makeSelect = () => {
   const selectDownloadingForUri = makeSelectDownloadingForUri();
   const selectCostInfoForUri = makeSelectCostInfoForUri();
   const selectLoadingForUri = makeSelectLoadingForUri();
+  const selectClaimForUriIsMine = makeSelectClaimForUriIsMine();
 
   const select = (state, props) => ({
     fileInfo: selectFileInfoForUri(state, props),
@@ -35,6 +33,7 @@ const makeSelect = () => {
     downloading: selectDownloadingForUri(state, props),
     costInfo: selectCostInfoForUri(state, props),
     loading: selectLoadingForUri(state, props),
+    claimIsMine: selectClaimForUriIsMine(state, props),
   });
 
   return select;
@@ -45,10 +44,6 @@ const perform = dispatch => ({
   closeModal: () => dispatch(doCloseModal()),
   openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)),
   openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
-  deleteFile: (fileInfo, deleteFromComputer) => {
-    dispatch(doHistoryBack());
-    dispatch(doDeleteFile(fileInfo, deleteFromComputer));
-  },
   openModal: modal => dispatch(doOpenModal(modal)),
   startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")),
   loadVideo: uri => dispatch(doLoadVideo(uri)),

ui/js/component/fileActions/view.jsx

@@ -2,17 +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,
     };
   }
 
@@ -37,12 +37,6 @@ class FileActions extends React.PureComponent {
     });
   }
 
-  handleDeleteCheckboxClicked(event) {
-    this.setState({
-      deleteChecked: event.target.checked,
-    });
-  }
-
   onAffirmPurchase() {
     this.props.closeModal();
     this.props.loadVideo(this.props.uri);
@@ -55,7 +49,6 @@ class FileActions extends React.PureComponent {
       platform,
       downloading,
       uri,
-      deleteFile,
       openInFolder,
       openInShell,
       modal,
@@ -64,10 +57,10 @@ class FileActions extends React.PureComponent {
       startDownload,
       costInfo,
       loading,
+      claimIsMine,
     } = this.props;
 
-    const deleteChecked = this.state.deleteChecked,
-      metadata = fileInfo ? fileInfo.metadata : null,
+    const metadata = fileInfo ? fileInfo.metadata : null,
       openInFolderMessage = platform.startsWith("Mac")
         ? __("Open in Finder")
         : __("Open in Folder"),
@@ -85,7 +78,10 @@ class FileActions extends React.PureComponent {
           : __("Connecting..."),
         labelWithIcon = (
           <span className="button__content">
-            <Icon icon="icon-download" /><span>{label}</span>
+            <Icon icon="icon-download" />
+            <span>
+              {label}
+            </span>
           </span>
         );
 
@@ -162,7 +158,7 @@ class FileActions extends React.PureComponent {
               />
               <DropDownMenuItem
                 key={1}
-                onClick={() => openModal("confirmRemove")}
+                onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}
                 label={__("Remove...")}
               />
             </DropDownMenu>
@@ -174,9 +170,11 @@ class FileActions extends React.PureComponent {
           onConfirmed={this.onAffirmPurchase.bind(this)}
           onAborted={closeModal}
         >
-          {__("This will purchase")} <strong>{title}</strong> {__("for")}
-          {" "}<strong><FilePrice uri={uri} look="plain" /></strong>
-          {" "}{__("credits")}.
+          {__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
+          <strong>
+            <FilePrice uri={uri} look="plain" />
+          </strong>{" "}
+          {__("credits")}.
         </Modal>
         <Modal
           isOpen={modal == "notEnoughCredits"}
@@ -192,28 +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)}
-          onAborted={closeModal}
-        >
-          <p>
-            {__("Are you sure you'd like to remove")} <cite>{title}</cite>
-            {" "}{__("from LBRY?")}
-          </p>
-
-          <label>
-            <FormField
-              type="checkbox"
-              checked={deleteChecked}
-              onClick={this.handleDeleteCheckboxClicked.bind(this)}
-            />
-            {" "}{__("Delete this file from my computer")}
-          </label>
-        </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/action_types.js

@@ -62,6 +62,8 @@ export const PLAY_VIDEO_STARTED = "PLAY_VIDEO_STARTED";
 export const FETCH_AVAILABILITY_STARTED = "FETCH_AVAILABILITY_STARTED";
 export const FETCH_AVAILABILITY_COMPLETED = "FETCH_AVAILABILITY_COMPLETED";
 export const FILE_DELETE = "FILE_DELETE";
+export const ABANDON_CLAIM_STARTED = "ABANDON_CLAIM_STARTED";
+export const ABANDON_CLAIM_COMPLETED = "ABANDON_CLAIM_COMPLETED";
 
 // Search
 export const SEARCH_STARTED = "SEARCH_STARTED";

ui/js/constants/modal_types.js

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

ui/js/lbry.js

@@ -268,9 +268,10 @@ lbry.getClientSettings = function() {
   var outSettings = {};
   for (let setting of Object.keys(lbry.defaultClientSettings)) {
     var localStorageVal = localStorage.getItem("setting_" + setting);
-    outSettings[setting] = localStorageVal === null
-      ? lbry.defaultClientSettings[setting]
-      : JSON.parse(localStorageVal);
+    outSettings[setting] =
+      localStorageVal === null
+        ? lbry.defaultClientSettings[setting]
+        : JSON.parse(localStorageVal);
   }
   return outSettings;
 };
@@ -462,6 +463,12 @@ lbry.claim_list_mine = function(params = {}) {
   });
 };
 
+lbry.claim_abandon = function(params = {}) {
+  return new Promise((resolve, reject) => {
+    apiCall("claim_abandon", params, resolve, reject);
+  });
+};
+
 lbry._resolveXhrs = {};
 lbry.resolve = function(params = {}) {
   return new Promise((resolve, reject) => {

ui/js/reducers/claims.js

@@ -80,6 +80,29 @@ reducers[types.FETCH_CHANNEL_CLAIMS_COMPLETED] = function(state, action) {
   });
 };
 
+reducers[types.ABANDON_CLAIM_COMPLETED] = function(state, action) {
+  const { claimId } = action.data;
+  const myClaims = new Set(state.myClaims);
+  const byId = Object.assign({}, state.byId);
+  const claimsByUri = Object.assign({}, state.claimsByUri);
+  const uris = [];
+
+  Object.keys(claimsByUri).forEach(uri => {
+    if (claimsByUri[uri] === claimId) {
+      delete claimsByUri[uri];
+    }
+  });
+
+  delete byId[claimId];
+  myClaims.delete(claimId);
+
+  return Object.assign({}, state, {
+    myClaims,
+    byId,
+    claimsByUri,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/claims.js

@@ -48,6 +48,18 @@ export const makeSelectClaimForUri = () => {
   return createSelector(selectClaimForUri, claim => claim);
 };
 
+const selectClaimForUriIsMine = (state, props) => {
+  const uri = lbryuri.normalize(props.uri);
+  const claim = selectClaimsByUri(state)[uri];
+  const myClaims = selectMyClaims(state);
+
+  return myClaims.has(claim.claim_id);
+};
+
+export const makeSelectClaimForUriIsMine = () => {
+  return createSelector(selectClaimForUriIsMine, isMine => isMine);
+};
+
 export const selectClaimsInChannelForUri = (state, props) => {
   return selectAllClaimsByChannel(state)[props.uri];
 };
@@ -95,7 +107,7 @@ export const selectClaimListMineIsPending = createSelector(
 
 export const selectMyClaims = createSelector(
   _selectState,
-  state => state.myClaims || new Set()
+  state => new Set(state.myClaims)
 );
 
 export const selectMyClaimsOutpoints = createSelector(