From 0a04874e52b9c2fda80aa6f1b8ec23e3ee2a9fa2 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 19:19:33 -0500
Subject: [PATCH] create components for each type of activity / fix modal not
 closing on successful payment

---
 app/reducers/payment.js                       | 11 ++++-
 app/routes/activity/components/Activity.js    | 41 +++++++++----------
 .../components/components/Invoice/Invoice.js  | 15 +++++++
 .../components/Invoice/Invoice.scss           |  0
 .../components/components/Invoice/index.js    |  3 ++
 .../components/components/Payment/Payment.js  | 15 +++++++
 .../components/Payment/Payment.scss           |  0
 .../components/components/Payment/index.js    |  3 ++
 .../components/Transaction/Transaction.js     | 15 +++++++
 .../components/Transaction/Transaction.scss   |  0
 .../components/Transaction/index.js           |  3 ++
 .../activity/containers/ActivityContainer.js  |  1 -
 .../components/Form/components/Pay/Pay.js     |  5 ++-
 13 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 app/routes/activity/components/components/Invoice/Invoice.js
 create mode 100644 app/routes/activity/components/components/Invoice/Invoice.scss
 create mode 100644 app/routes/activity/components/components/Invoice/index.js
 create mode 100644 app/routes/activity/components/components/Payment/Payment.js
 create mode 100644 app/routes/activity/components/components/Payment/Payment.scss
 create mode 100644 app/routes/activity/components/components/Payment/index.js
 create mode 100644 app/routes/activity/components/components/Transaction/Transaction.js
 create mode 100644 app/routes/activity/components/components/Transaction/Transaction.scss
 create mode 100644 app/routes/activity/components/components/Transaction/index.js

diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index 7a04bd7b..b8dbc445 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -68,7 +68,16 @@ export const payInvoice = paymentRequest => (dispatch) => {
 
 // Receive IPC event for successful payment
 // TODO: Add payment to state, not a total re-fetch
-export const paymentSuccessful = () => fetchPayments()
+export const paymentSuccessful = () => dispatch => {
+  // Close the form modal once the payment was succesful
+  dispatch(setForm({ modalOpen: false }))
+
+  // Refetch payments (TODO: dont do a full refetch, rather append new tx to list)
+  fetchPayments()
+
+  // Reset the payment form
+  dispatch(resetForm())
+}
 
 
 // ------------------------------------
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 064ac5f1..cd52d7b0 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -1,8 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
+import { FaChain, FaBolt } from 'react-icons/lib/fa'
 import Payments from './components/Payments'
 import Invoices from './components/Invoices'
+
+import Invoice from './components/Invoice'
+import Payment from './components/Payment'
+import Transaction from './components/Transaction'
+
 import styles from './Activity.scss'
 
 class Activity extends Component {
@@ -36,7 +42,6 @@ class Activity extends Component {
       currentTicker,
       sortedActivity
     } = this.props
-    console.log('sortedActivity: ', sortedActivity)
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
     return (
       <div>
@@ -69,28 +74,22 @@ class Activity extends Component {
               Requests
             </span>
           </header>
-          <div className={styles.activityContainer}>
+          <ul className={styles.activityContainer}>
             {
-              tab === 1 ?
-                <Payments
-                  payment={payment}
-                  payments={payments}
-                  ticker={ticker}
-                  setPayment={setPayment}
-                  paymentModalOpen={paymentModalOpen}
-                  currentTicker={currentTicker}
-                />
-                :
-                <Invoices
-                  invoice={invoice}
-                  invoices={invoices}
-                  ticker={ticker}
-                  setInvoice={setInvoice}
-                  invoiceModalOpen={invoiceModalOpen}
-                  currentTicker={currentTicker}
-                />
+              sortedActivity.map((activity, index) => {
+                if (activity.hasOwnProperty('block_hash')) {
+                  // activity is an on-chain tx
+                  return <Transaction transaction={activity} key={index} />
+                } else if (activity.hasOwnProperty('payment_request')) {
+                  // activity is an LN invoice
+                  return <Invoice invoice={activity} key={index} />
+                } else {
+                  // activity is an LN payment
+                  return <Payment payment={activity} key={index} />
+                }
+              })
             }
-          </div>
+          </ul>
         </div>
       </div>
     )
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
new file mode 100644
index 00000000..89db79aa
--- /dev/null
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Invoice.scss'
+
+const Invoice = () => (
+  <div>
+    Invoice
+  </div>
+)
+
+Invoice.propTypes = {
+  
+}
+
+export default Invoice
diff --git a/app/routes/activity/components/components/Invoice/Invoice.scss b/app/routes/activity/components/components/Invoice/Invoice.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Invoice/index.js b/app/routes/activity/components/components/Invoice/index.js
new file mode 100644
index 00000000..a72db95c
--- /dev/null
+++ b/app/routes/activity/components/components/Invoice/index.js
@@ -0,0 +1,3 @@
+import Invoice from './Invoice'
+
+export default Invoice
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
new file mode 100644
index 00000000..833b51f6
--- /dev/null
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Payment.scss'
+
+const Payment = () => (
+  <div>
+    Payment
+  </div>
+)
+
+Payment.propTypes = {
+  
+}
+
+export default Payment
diff --git a/app/routes/activity/components/components/Payment/Payment.scss b/app/routes/activity/components/components/Payment/Payment.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Payment/index.js b/app/routes/activity/components/components/Payment/index.js
new file mode 100644
index 00000000..3f7e6951
--- /dev/null
+++ b/app/routes/activity/components/components/Payment/index.js
@@ -0,0 +1,3 @@
+import Payment from './Payment'
+
+export default Payment
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
new file mode 100644
index 00000000..5e1fb5eb
--- /dev/null
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Transaction.scss'
+
+const Transaction = () => (
+  <div>
+    transaction
+  </div>
+)
+
+Transaction.propTypes = {
+  
+}
+
+export default Transaction
diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/routes/activity/components/components/Transaction/Transaction.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/routes/activity/components/components/Transaction/index.js b/app/routes/activity/components/components/Transaction/index.js
new file mode 100644
index 00000000..7fc5e311
--- /dev/null
+++ b/app/routes/activity/components/components/Transaction/index.js
@@ -0,0 +1,3 @@
+import Transaction from './Transaction'
+
+export default Transaction
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index 35658ed7..c860ea0c 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -24,7 +24,6 @@ const mapDispatchToProps = {
   searchInvoices
 }
 
-console.log('activitySelectors: ', activitySelectors)
 const mapStateToProps = state => ({
   activity: state.activity,
 
diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.js b/app/routes/app/components/components/Form/components/Pay/Pay.js
index 38c33f12..dbf9da89 100644
--- a/app/routes/app/components/components/Form/components/Pay/Pay.js
+++ b/app/routes/app/components/components/Form/components/Pay/Pay.js
@@ -128,7 +128,10 @@ class Pay extends Component {
 
 Pay.propTypes = {
   sendingTransaction: PropTypes.bool.isRequired,
-  invoiceAmount: PropTypes.string.isRequired,
+  invoiceAmount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]).isRequired,
   onchainAmount: PropTypes.string.isRequired,
   setOnchainAmount: PropTypes.func.isRequired,
   payment_request: PropTypes.string.isRequired,