From 1a8929f8d6257639a2bdd51c6ebf23cb809f8ee5 Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Sat, 22 Apr 2017 23:07:46 +0700
Subject: [PATCH] Some transactions cleanup and starting on sending

---
 ui/js/actions/wallet.js    |   5 +
 ui/js/page/wallet/index.js |  10 +-
 ui/js/page/wallet/view.jsx | 241 ++++++++++++++++++++++---------------
 ui/js/reducers/wallet.js   |  14 ++-
 ui/js/selectors/wallet.js  |  48 +++-----
 5 files changed, 187 insertions(+), 131 deletions(-)

diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js
index 3486b9be5..f28ddcbdc 100644
--- a/ui/js/actions/wallet.js
+++ b/ui/js/actions/wallet.js
@@ -58,3 +58,8 @@ export function doCheckAddressIsMine(address) {
     })
   }
 }
+
+export function doSendToAddress() {
+  return function(dispatch, getState) {
+  }
+}
diff --git a/ui/js/page/wallet/index.js b/ui/js/page/wallet/index.js
index 7976808f1..03d6fc48b 100644
--- a/ui/js/page/wallet/index.js
+++ b/ui/js/page/wallet/index.js
@@ -8,9 +8,11 @@ import {
 import {
   doGetNewAddress,
   doCheckAddressIsMine,
+  doSendToAddress,
 } from 'actions/wallet'
 import {
   selectCurrentPage,
+  selectCurrentModal,
 } from 'selectors/app'
 import {
   selectBalance,
@@ -30,12 +32,18 @@ const select = (state) => ({
   transactionItems: selectTransactionItems(state),
   receiveAddress: selectReceiveAddress(state),
   gettingNewAddress: selectGettingNewAddress(state),
+  modal: selectCurrentModal(state),
+  address: null,
+  amount: 0.0,
 })
 
 const perform = (dispatch) => ({
   closeModal: () => dispatch(doCloseModal()),
   getNewAddress: () => dispatch(doGetNewAddress()),
-  checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address))
+  checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address)),
+  sendToAddress: () => dispatch(doSendToAddress()),
+  setAmount: () => console.log('set amount'),
+  setAddress: () => console.log('set address'),
 })
 
 export default connect(select, perform)(WalletPage)
diff --git a/ui/js/page/wallet/view.jsx b/ui/js/page/wallet/view.jsx
index 042b6415d..c4b1c4acb 100644
--- a/ui/js/page/wallet/view.jsx
+++ b/ui/js/page/wallet/view.jsx
@@ -46,116 +46,159 @@ class AddressSection extends React.Component {
   }
 }
 
-var SendToAddressSection = React.createClass({
-  handleSubmit: function(event) {
-    if (typeof event !== 'undefined') {
-      event.preventDefault();
-    }
+const SendToAddressSection = (props) => {
+  const {
+    sendToAddress,
+    closeModal,
+    modal,
+    setAmount,
+    setAddress,
+    amount,
+    address,
+  } = props
 
-    if ((this.state.balance - this.state.amount) < 1)
-    {
-      this.setState({
-        modal: 'insufficientBalance',
-      });
-      return;
-    }
+  const results = null
 
-    this.setState({
-      results: "",
-    });
+  return (
+    <section className="card">
+      <form onSubmit={sendToAddress}>
+        <div className="card__title-primary">
+          <h3>Send Credits</h3>
+        </div>
+        <div className="card__content">
+          <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={setAmount} />
+        </div>
+        <div className="card__content">
+          <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={setAddress} />
+        </div>
+        <div className="card__actions card__actions--form-submit">
+          <Link button="primary" label="Send" onClick={sendToAddress} disabled={!(parseFloat(amount) > 0.0) || !address} />
+          <input type='submit' className='hidden' />
+        </div>
+          {
+            results ?
+            <div className="card__content">
+              <h4>Results</h4>
+              {results}
+            </div> : ''
+          }
+      </form>
+      {modal == 'insufficientBalance' && <Modal isOpen={true} contentLabel="Insufficient balance" onConfirmed={closeModal}>
+        Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
+      </Modal>}
+    </section>
+  )
+}
 
-    lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
-      if(results === true)
-      {
-        this.setState({
-          results: "Your transaction was successfully placed in the queue.",
-        });
-      }
-      else
-      {
-        this.setState({
-          results: "Something went wrong: " + results
-        });
-      }
-    }, (error) => {
-      this.setState({
-        results: "Something went wrong: " + error.message
-      })
-    });
-  },
-  closeModal: function() {
-    this.setState({
-      modal: null,
-    });
-  },
-  getInitialState: function() {
-    return {
-      address: "",
-      amount: 0.0,
-      balance: <BusyMessage message="Checking balance" />,
-      results: "",
-    }
-  },
-  componentWillMount: function() {
-    lbry.getBalance((results) => {
-      this.setState({
-        balance: results,
-      });
-    });
-  },
-  setAmount: function(event) {
-    this.setState({
-      amount: parseFloat(event.target.value),
-    })
-  },
-  setAddress: function(event) {
-    this.setState({
-      address: event.target.value,
-    })
-  },
-  render: function() {
-    return (
-      <section className="card">
-        <form onSubmit={this.handleSubmit}>
-          <div className="card__title-primary">
-            <h3>Send Credits</h3>
-          </div>
-          <div className="card__content">
-            <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
-          </div>
-          <div className="card__content">
-            <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
-          </div>
-          <div className="card__actions card__actions--form-submit">
-            <Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
-            <input type='submit' className='hidden' />
-          </div>
-            {
-              this.state.results ?
-              <div className="card__content">
-                <h4>Results</h4>
-                {this.state.results}
-              </div> : ''
-            }
-        </form>
-        <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
-               onConfirmed={this.closeModal}>
-          Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
-        </Modal>
-      </section>
-    );
-  }
-});
+// var SendToAddressSection = React.createClass({
+//   handleSubmit: function(event) {
+//     if (typeof event !== 'undefined') {
+//       event.preventDefault();
+//     }
+
+//     if ((this.state.balance - this.state.amount) < 1)
+//     {
+//       this.setState({
+//         modal: 'insufficientBalance',
+//       });
+//       return;
+//     }
+
+//     this.setState({
+//       results: "",
+//     });
+
+//     lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
+//       if(results === true)
+//       {
+//         this.setState({
+//           results: "Your transaction was successfully placed in the queue.",
+//         });
+//       }
+//       else
+//       {
+//         this.setState({
+//           results: "Something went wrong: " + results
+//         });
+//       }
+//     }, (error) => {
+//       this.setState({
+//         results: "Something went wrong: " + error.message
+//       })
+//     });
+//   },
+//   closeModal: function() {
+//     this.setState({
+//       modal: null,
+//     });
+//   },
+//   getInitialState: function() {
+//     return {
+//       address: "",
+//       amount: 0.0,
+//       balance: <BusyMessage message="Checking balance" />,
+//       results: "",
+//     }
+//   },
+//   componentWillMount: function() {
+//     lbry.getBalance((results) => {
+//       this.setState({
+//         balance: results,
+//       });
+//     });
+//   },
+//   setAmount: function(event) {
+//     this.setState({
+//       amount: parseFloat(event.target.value),
+//     })
+//   },
+//   setAddress: function(event) {
+//     this.setState({
+//       address: event.target.value,
+//     })
+//   },
+//   render: function() {
+//     return (
+//       <section className="card">
+//         <form onSubmit={this.handleSubmit}>
+//           <div className="card__title-primary">
+//             <h3>Send Credits</h3>
+//           </div>
+//           <div className="card__content">
+//             <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
+//           </div>
+//           <div className="card__content">
+//             <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
+//           </div>
+//           <div className="card__actions card__actions--form-submit">
+//             <Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
+//             <input type='submit' className='hidden' />
+//           </div>
+//             {
+//               this.state.results ?
+//               <div className="card__content">
+//                 <h4>Results</h4>
+//                 {this.state.results}
+//               </div> : ''
+//             }
+//         </form>
+//         <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
+//                onConfirmed={this.closeModal}>
+//           Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
+//         </Modal>
+//       </section>
+//     );
+//   }
+// });
 
 const TransactionList = (props) => {
   const {
-    transactions,
     fetchingTransactions,
     transactionItems,
   } = props
 
   const rows = []
-  if (transactions.length > 0) {
+  if (transactionItems.length > 0) {
     transactionItems.forEach(function(item) {
       rows.push(
         <tr key={item.id}>
diff --git a/ui/js/reducers/wallet.js b/ui/js/reducers/wallet.js
index 6628f394f..4b4f46db1 100644
--- a/ui/js/reducers/wallet.js
+++ b/ui/js/reducers/wallet.js
@@ -17,8 +17,20 @@ reducers[types.FETCH_TRANSACTIONS_STARTED] = function(state, action) {
 }
 
 reducers[types.FETCH_TRANSACTIONS_COMPLETED] = function(state, action) {
+  const oldTransactions = Object.assign({}, state.transactions)
+  const byId = Object.assign({}, oldTransactions.byId)
+  const { transactions } = action.data
+
+  transactions.forEach((transaction) => {
+    byId[transaction.txid] = transaction
+  })
+
+  const newTransactions = Object.assign({}, oldTransactions, {
+    byId: byId
+  })
+
   return Object.assign({}, state, {
-    transactions: action.data.transactions,
+    transactions: newTransactions,
     fetchingTransactions: false
   })
 }
diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js
index 6e3809cce..f0f9d1254 100644
--- a/ui/js/selectors/wallet.js
+++ b/ui/js/selectors/wallet.js
@@ -8,44 +8,32 @@ export const _selectState = state => state.wallet || {}
 
 export const selectBalance = createSelector(
   _selectState,
-  (state) => {
-    return state.balance || 0
-  }
+  (state) => state.balance || 0
 )
 
 export const selectTransactions = createSelector(
   _selectState,
-  (state) => state.transactions
+  (state) => state.transactions || {}
+)
+
+export const selectTransactionsById = createSelector(
+  selectTransactions,
+  (transactions) => transactions.byId || {}
 )
 
 export const selectTransactionItems = createSelector(
-  selectTransactions,
-  (transactions) => {
-    if (transactions.length == 0) return transactions
-
+  selectTransactionsById,
+  (byId) => {
     const transactionItems = []
-    const condensedTransactions = {}
-
-    transactions.forEach(function(tx) {
-      const txid = tx["txid"];
-      if (!(txid in condensedTransactions)) {
-        condensedTransactions[txid] = 0;
-      }
-      condensedTransactions[txid] += parseFloat(tx["value"]);
-    });
-    transactions.reverse().forEach(function(tx) {
-      const txid = tx["txid"];
-      if (condensedTransactions[txid] && condensedTransactions[txid] != 0)
-      {
-        transactionItems.push({
-          id: txid,
-          date: tx["timestamp"] ? (new Date(parseInt(tx["timestamp"]) * 1000)) : null,
-          amount: condensedTransactions[txid]
-        });
-        delete condensedTransactions[txid];
-      }
-    });
-
+    const txids = Object.keys(byId)
+    txids.forEach((txid) => {
+      const tx = byId[txid]
+      transactionItems.push({
+        id: txid,
+        date: tx.timestamp ? (new Date(parseInt(tx.timestamp) * 1000)) : null,
+        amount: parseFloat(tx.value)
+      })
+    })
     return transactionItems
   }
 )