Feedback fixes

ui/js/actions/content.js

@@ -506,35 +506,41 @@ export function doPublish(params) {
   };
 }
 
-export function doAbandonClaim(claimId, txid, nout) {
+export function doAbandonClaim(claimId, name, txid, nout) {
   return function(dispatch, getState) {
     const state = getState();
 
-    dispatch(doCloseModal());
-
     dispatch({
       type: types.ABANDON_CLAIM_STARTED,
       data: {
         claimId: claimId,
-        txid: txid,
-        nout: nout,
       },
     });
 
-    const success = dispatch({
-      type: types.ABANDON_CLAIM_SUCCEEDED,
-      data: {
-        claimId: claimId,
-        txid: txid,
-        nout: nout,
-      },
-    });
+    const errorCallback = error => {
+      dispatch(doOpenModal(modals.TRANSACTION_FAILED));
+    };
+
+    const successCallback = results => {
+      if (results.txid) {
+        dispatch({
+          type: types.ABANDON_CLAIM_SUCCEEDED,
+          data: {
+            claimId: claimId,
+          },
+        });
+        dispatch(doResolveUri(lbryuri.build({ name, claimId })));
+        dispatch(doFetchClaimListMine());
+      } else {
+        dispatch(doOpenModal(modals.TRANSACTION_FAILED));
+      }
+    };
 
     lbry
       .claim_abandon({
         txid: txid,
         nout: nout,
       })
-      .then(success);
+      .then(successCallback, errorCallback);
   };
 }

ui/js/component/transactionList/index.js

@@ -2,10 +2,8 @@ import React from "react";
 import { connect } from "react-redux";
 import { doNavigate } from "actions/navigation";
 import { doOpenModal } from "actions/app";
-import { doResolveUri } from "actions/content";
 import { selectClaimedRewardsByTransactionId } from "selectors/rewards";
 import { selectAllMyClaimsByTxidNout } from "selectors/claims";
-import { selectResolvingUris } from "selectors/content";
 import TransactionList from "./view";
 
 const select = state => ({
@@ -15,7 +13,6 @@ const select = state => ({
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
-  resolveUri: uri => dispatch(doResolveUri(uri)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 

ui/js/component/transactionList/internal/TransactionListItem.jsx

@@ -6,10 +6,53 @@ import Link from "component/link";
 import lbryuri from "lbryuri";
 
 class TransactionListItem extends React.PureComponent {
-  abandonClaim(abandonData) {
+  abandonClaim() {
+    const {
+      claim_id: claimId,
+      claim_name: name,
+      txid,
+      type,
+      nout,
+    } = this.props.transaction;
+    let msg;
+
+    if (type == "tip") {
+      msg = "This will reduce the committed credits to the URL";
+    } else {
+      msg = "This will reclaim you lbc, back to your account";
+    }
+
+    const abandonData = {
+      name: name,
+      claimId: claimId,
+      txid: txid,
+      nout: nout,
+      msg: msg,
+    };
+
     this.props.revokeClaim(abandonData);
   }
 
+  getLink(type) {
+    if (type == "tip") {
+      return (
+        <Link
+          onClick={this.abandonClaim.bind(this)}
+          icon="icon-unlock-alt"
+          title={__("Unlock Tip")}
+        />
+      );
+    } else {
+      return (
+        <Link
+          onClick={this.abandonClaim.bind(this)}
+          icon="icon-trash"
+          title={__("Delete")}
+        />
+      );
+    }
+  }
+
   render() {
     const { reward, transaction, isRevokeable } = this.props;
     const {
@@ -23,13 +66,6 @@ class TransactionListItem extends React.PureComponent {
       nout,
     } = transaction;
 
-    const abandonData = {
-      name: name,
-      claimId: claimId,
-      txid: txid,
-      nout: nout,
-    };
-
     const dateFormat = {
       month: "short",
       day: "numeric",
@@ -72,7 +108,8 @@ class TransactionListItem extends React.PureComponent {
             />}
         </td>
         <td>
-          {type}
+          {type}{" "}
+          {isRevokeable && this.getLink(type)}
         </td>
         <td>
           {reward &&
@@ -92,12 +129,6 @@ class TransactionListItem extends React.PureComponent {
         <td>
           <LinkTransaction id={txid} />
         </td>
-        <td>
-          {isRevokeable &&
-            <Link onClick={() => this.abandonClaim(abandonData)}>
-              {__("Revoke")}
-            </Link>}
-        </td>
       </tr>
     );
   }

ui/js/component/transactionList/view.jsx

@@ -32,16 +32,7 @@ class TransactionList extends React.PureComponent {
   }
 
   revokeClaim(abandonData) {
-    const {
-      name: name,
-      claimId: claimId,
-      txid: txid,
-      nout: nout,
-    } = abandonData;
-
-    const uri = lbryuri.build({ name, claimId });
-    this.props.resolveUri(uri);
-    this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, { claimId, txid, nout });
+    this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, abandonData);
   }
 
   render() {
@@ -83,7 +74,6 @@ class TransactionList extends React.PureComponent {
                 <th>{__("Type")} </th>
                 <th>{__("Details")} </th>
                 <th>{__("Transaction")}</th>
-                <th>{__("Action")}</th>
               </tr>
             </thead>
             <tbody>

ui/js/modal/modalRevokeClaim/index.js

@@ -6,8 +6,8 @@ import ModalRevokeClaim from "./view";
 
 const perform = dispatch => ({
   closeModal: () => dispatch(doCloseModal()),
-  abandonClaim: (claimId, txid, nout) =>
-    dispatch(doAbandonClaim(claimId, txid, nout)),
+  abandonClaim: (claimId, name, txid, nout) =>
+    dispatch(doAbandonClaim(claimId, name, txid, nout)),
 });
 
 export default connect(null, perform)(ModalRevokeClaim);

ui/js/modal/modalRevokeClaim/view.jsx

@@ -6,12 +6,15 @@ class ModalRevokeClaim extends React.PureComponent {
     super(props);
   }
 
-  s() {
-    console.log("gotcha");
+  revokeClaim() {
+    const { name, claimId, txid, nout } = this.props;
+
+    this.props.closeModal();
+    this.props.abandonClaim(claimId, name, txid, nout);
   }
 
   render() {
-    const { claimId, txid, nout, abandonClaim, closeModal } = this.props;
+    const { msg, closeModal } = this.props;
 
     return (
       <Modal
@@ -19,12 +22,11 @@ class ModalRevokeClaim extends React.PureComponent {
         contentLabel={__("Confirm Claim Revoke")}
         type="confirm"
         confirmButtonLabel={__("Yes, Revoke")}
-        // onConfirmed={this.s.bind(this)}
-        onConfirmed={() => abandonClaim(claimId, txid, nout)}
+        onConfirmed={this.revokeClaim.bind(this)}
         onAborted={closeModal}
       >
         <p>
-          {__("Are you sure you want to revoke the claim?")}
+          {msg}
         </p>
       </Modal>
     );

ui/js/reducers/claims.js

@@ -161,35 +161,20 @@ reducers[types.ABANDON_CLAIM_STARTED] = function(state, action) {
 };
 
 reducers[types.ABANDON_CLAIM_SUCCEEDED] = function(state, action) {
-  const { claimId, txid, nout } = action.data;
+  const { claimId } = action.data;
   const myClaims = new Set(state.myClaims);
   const byId = Object.assign({}, state.byId);
   const claimsByUri = Object.assign({}, state.claimsByUri);
-  const supports = byId[claimId].supports;
-  const uris = [];
 
-  // This logic is needed when a claim has supports
-  // and it is the support that is being abandoned
-  // so we need to remove the support from the state
-  // but this is not working, even after calling resolve on the uri.
-  if (supports && supports.length > 0) {
-    const indexToDelete = supports.findIndex(support => {
-      return support.txid === txid && support.nout === nout;
-    });
+  Object.keys(claimsByUri).forEach(uri => {
+    if (claimsByUri[uri] === claimId) {
+      delete claimsByUri[uri];
+    }
+  });
 
-    supports.splice(indexToDelete, 1);
-  }
+  delete byId[claimId];
+  myClaims.delete(claimId);
 
-  if (!supports || supports.length == 0) {
-    Object.keys(claimsByUri).forEach(uri => {
-      if (claimsByUri[uri] === claimId) {
-        delete claimsByUri[uri];
-      }
-    });
-
-    delete byId[claimId];
-    myClaims.delete(claimId);
-  }
   return Object.assign({}, state, {
     myClaims,
     byId,

ui/scss/component/_table.scss

@@ -62,10 +62,9 @@ table.table-stretch {
 }
 
 table.table-transactions {
-  td:nth-of-type(1) { width: 13%; }
-  td:nth-of-type(2) { width: 13%; }
-  td:nth-of-type(3) { width: 13%; }
-  td:nth-of-type(4) { width: 35%; }
-  td:nth-of-type(5) { width: 13%; }
-  td:nth-of-type(6) { width: 13%; }
+  td:nth-of-type(1) { width: 15%; }
+  td:nth-of-type(2) { width: 15%; }
+  td:nth-of-type(3) { width: 15%; }
+  td:nth-of-type(4) { width: 40%; }
+  td:nth-of-type(5) { width: 15%; }
 }