Additional tipping fixes/changes

- [x] Display empty message on empty filtered Tx list
- [ ] Tipping form has to stay open until success is detected(or closed
by user)
- [ ] Storing the older transaction list, and refreshing the new one in
the background.

Tip Box shown until valid Txn or manually cancelled

Cleanup of show tip box logic

ui/js/actions/claims.js

@@ -4,6 +4,14 @@ import { doOpenModal, doShowSnackBar } from "actions/app";
 import * as types from "constants/action_types";
 import * as modals from "constants/modal_types";
 
+export function doShowTipBox() {
+  return { type: types.SHOW_TIP_BOX };
+}
+
+export function doHideTipBox() {
+  return { type: types.HIDE_TIP_BOX };
+}
+
 export function doSendSupport(amount, claim_id) {
   return function(dispatch, getState) {
     const state = getState();
@@ -22,6 +30,7 @@ export function doSendSupport(amount, claim_id) {
         dispatch({
           type: types.SUPPORT_TRANSACTION_COMPLETED,
         });
+        dispatch(doHideTipBox);
         dispatch(
           doShowSnackBar({
             message: __(`You sent ${amount} LBC as support, Mahalo!`),
@@ -32,7 +41,7 @@ export function doSendSupport(amount, claim_id) {
       } else {
         dispatch({
           type: types.SUPPORT_TRANSACTION_FAILED,
-          data: { error: results },
+          data: { error: results.code },
         });
         dispatch(doOpenModal(modals.TRANSACTION_FAILED));
       }
@@ -41,7 +50,7 @@ export function doSendSupport(amount, claim_id) {
     const errorCallback = error => {
       dispatch({
         type: types.SUPPORT_TRANSACTION_FAILED,
-        data: { error: error.message },
+        data: { error: error.code },
       });
       dispatch(doOpenModal(modals.TRANSACTION_FAILED));
     };

ui/js/component/fileActions/index.js

@@ -9,6 +9,7 @@ import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info";
 import { makeSelectClaimIsMine } from "selectors/claims";
 import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content";
 import { doNavigate } from "actions/navigation";
+import { doShowTipBox } from "actions/claims";
 import FileActions from "./view";
 
 const select = (state, props) => ({
@@ -25,6 +26,7 @@ const perform = dispatch => ({
   startDownload: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
   editClaim: claimId => dispatch(doNavigate("/publish", { id: claimId })),
+  showTipBox: () => dispatch(doShowTipBox()),
 });
 
 export default connect(select, perform)(FileActions);

ui/js/component/fileActions/view.jsx

@@ -4,10 +4,6 @@ import FileDownloadLink from "component/fileDownloadLink";
 import * as modals from "constants/modal_types";
 
 class FileActions extends React.PureComponent {
-  handleSupportButtonClicked() {
-    this.props.onTipShow();
-  }
-
   render() {
     const {
       fileInfo,
@@ -37,7 +33,7 @@ class FileActions extends React.PureComponent {
           button="text"
           icon="icon-gift"
           label={__("Support")}
-          onClick={this.handleSupportButtonClicked.bind(this)}
+          onClick={this.props.showTipBox}
         />
         <Link
           button="text"

ui/js/component/tipLink/index.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { doSendSupport } from "actions/claims";
+import { doSendSupport, doHideTipBox } from "actions/claims";
 import TipLink from "./view";
 
 const select = state => ({});
 
 const perform = dispatch => ({
   sendSupport: (amount, claim_id) => dispatch(doSendSupport(amount, claim_id)),
+  hideTipBox: () => dispatch(doHideTipBox()),
 });
 
 export default connect(select, perform)(TipLink);

ui/js/component/tipLink/view.jsx

@@ -7,7 +7,7 @@ class TipLink extends React.PureComponent {
     super(props);
 
     this.state = {
-      tipAmount: 1.0,
+      tipAmount: 0.0,
     };
   }
 
@@ -15,11 +15,10 @@ class TipLink extends React.PureComponent {
     let claim_id = this.props.claim_id;
     let amount = this.state.tipAmount;
     this.props.sendSupport(amount, claim_id);
-    this.props.onTipHide();
   }
 
   handleSupportCancelButtonClicked() {
-    this.props.onTipHide();
+    this.props.hideTipBox();
   }
 
   handleSupportPriceChange(event) {

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

@@ -125,13 +125,26 @@ class TransactionTableBody extends React.PureComponent {
 
   render() {
     const { transactions, filter } = this.props;
+    let transactionList = transactions
+      .filter(this.filterList, this)
+      .filter(this.removeFeeTx, this)
+      .map(this.renderBody, this);
+
+    if (transactionList.length == 0) {
+      return (
+        <tbody>
+          <tr>
+            <td className="empty" colSpan="3">
+              {__("There are no transactions of this type.")}
+            </td>
+          </tr>
+        </tbody>
+      );
+    }
 
     return (
       <tbody>
-        {transactions
-          .filter(this.filterList, this)
-          .filter(this.removeFeeTx, this)
-          .map(this.renderBody, this)}
+        {transactionList}
       </tbody>
     );
   }

ui/js/constants/action_types.js

@@ -136,6 +136,8 @@ export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED";
 export const SUPPORT_TRANSACTION_STARTED = "SUPPORT_TRANSACTION_STARTED";
 export const SUPPORT_TRANSACTION_COMPLETED = "SUPPORT_TRANSACTION_COMPLETED";
 export const SUPPORT_TRANSACTION_FAILED = "SUPPORT_TRANSACTION_FAILED";
+export const HIDE_TIP_BOX = "HIDE_TIP_BOX";
+export const SHOW_TIP_BOX = "SHOW_TIP_BOX";
 
 //Language
 export const DOWNLOAD_LANGUAGE_SUCCEEDED = "DOWNLOAD_LANGUAGE_SUCCEEDED";

ui/js/page/file/index.js

@@ -9,6 +9,7 @@ import {
   makeSelectClaimForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
+  selectShowTipBox,
 } from "selectors/claims";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
 import { selectShowNsfw } from "selectors/settings";
@@ -20,6 +21,7 @@ const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   metadata: makeSelectMetadataForUri(props.uri)(state),
   obscureNsfw: !selectShowNsfw(state),
+  showTipBox: selectShowTipBox(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
 });

ui/js/page/file/view.jsx

@@ -71,18 +71,6 @@ class FilePage extends React.PureComponent {
     }
   }
 
-  handleTipShow() {
-    this.setState({
-      showTipBox: true,
-    });
-  }
-
-  handleTipHide() {
-    this.setState({
-      showTipBox: false,
-    });
-  }
-
   render() {
     const {
       claim,
@@ -91,10 +79,9 @@ class FilePage extends React.PureComponent {
       contentType,
       uri,
       rewardedContentClaimIds,
+      showTipBox,
     } = this.props;
 
-    const { showTipBox } = this.state;
-
     if (!claim || !metadata) {
       return (
         <span className="empty">{__("Empty claim or metadata info.")}</span>
@@ -156,10 +143,7 @@ class FilePage extends React.PureComponent {
                     </Link>
                   : uriIndicator}
               </div>
-              <FileActions
-                uri={uri}
-                onTipShow={this.handleTipShow.bind(this)}
-              />
+              <FileActions uri={uri} />
             </div>
             {!showTipBox &&
               <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
@@ -179,13 +163,7 @@ class FilePage extends React.PureComponent {
                 />
               </div>
             : ""}
-          {showTipBox
-            ? <TipLink
-                onTipShow={this.handleTipShow.bind(this)}
-                onTipHide={this.handleTipHide.bind(this)}
-                claim_id={claim.claim_id}
-              />
-            : ""}
+          {showTipBox ? <TipLink claim_id={claim.claim_id} /> : ""}
           {!showTipBox &&
             <div className="card__content">
               <Link

ui/js/reducers/claims.js

@@ -1,7 +1,14 @@
 import * as types from "constants/action_types";
 
 const reducers = {};
-const defaultState = {};
+
+const buildSupportTransaction = () => ({
+  tipBoxShown: false,
+});
+
+const defaultState = {
+  supportTransaction: buildSupportTransaction(),
+};
 
 reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
   const { uri, certificate, claim } = action.data;
@@ -189,6 +196,22 @@ reducers[types.CREATE_CHANNEL_COMPLETED] = function(state, action) {
   });
 };
 
+reducers[types.HIDE_TIP_BOX] = function(state, action) {
+  return Object.assign({}, state, {
+    supportTransaction: buildSupportTransaction(),
+  });
+};
+
+reducers[types.SHOW_TIP_BOX] = function(state, action) {
+  const newSupportTransaction = Object.assign({}, state.supportTransaction, {
+    tipBoxShown: true,
+  });
+
+  return Object.assign({}, state, {
+    supportTransaction: newSupportTransaction,
+  });
+};
+
 reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) {
   const newSupportTransaction = Object.assign({}, state.supportTransaction, {
     sendingSupport: true,
@@ -200,13 +223,16 @@ reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) {
 };
 
 reducers[types.SUPPORT_TRANSACTION_COMPLETED] = function(state, action) {
-  return Object.assign({}, state);
+  return Object.assign({}, state, {
+    supportTransaction: buildSupportTransaction(),
+  });
 };
 
 reducers[types.SUPPORT_TRANSACTION_FAILED] = function(state, action) {
   const newSupportTransaction = Object.assign({}, state.supportTransaction, {
     sendingSupport: false,
     error: action.data.error,
+    tipBoxShown: true,
   });
 
   return Object.assign({}, state, {

ui/js/selectors/claims.js

@@ -174,3 +174,8 @@ export const selectMyChannelClaims = createSelector(
     return claims;
   }
 );
+
+export const selectShowTipBox = createSelector(
+  _selectState,
+  state => state.supportTransaction.tipBoxShown
+);