fix(invoice): update invoice modal once received

Ensure that the invoice / transaction / payment modal view shows the
most current data from the store. Do not duplicate data in the store
but instead reference the canonical data by id.

See https://redux.js.org/faq/organizingstate#how-do-i-organize-nested-or-duplicate-data-in-my-state

Fix #623

app/components/Activity/ActivityModal.js

@@ -10,8 +10,8 @@ import InvoiceModal from './InvoiceModal'
 import styles from './ActivityModal.scss'
 
 const ActivityModal = ({
-  modalType,
-  modalProps,
+  itemType,
+  item,
   ticker,
   currentTicker,
   network,
@@ -25,11 +25,12 @@ const ActivityModal = ({
     INVOICE: InvoiceModal
   }
 
-  if (!modalType) {
+  if (!item) {
     return null
   }
 
-  const SpecificModal = MODAL_COMPONENTS[modalType]
+  const SpecificModal = MODAL_COMPONENTS[itemType]
+
   return (
     <div className={styles.container}>
       <div className={styles.closeContainer}>
@@ -38,7 +39,7 @@ const ActivityModal = ({
         </span>
       </div>
       <SpecificModal
-        {...modalProps}
+        item={item}
         network={network}
         ticker={ticker}
         currentTicker={currentTicker}
@@ -52,11 +53,9 @@ ActivityModal.propTypes = {
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
   toggleCurrencyProps: PropTypes.object.isRequired,
-
   network: PropTypes.object.isRequired,
-
-  modalType: PropTypes.string,
-  modalProps: PropTypes.object.isRequired,
+  item: PropTypes.object,
+  itemType: PropTypes.string,
   hideActivityModal: PropTypes.func.isRequired
 }
 

app/components/Activity/InvoiceModal.js

@@ -15,7 +15,7 @@ import Countdown from './Countdown'
 import styles from './InvoiceModal.scss'
 
 const InvoiceModal = ({
-  invoice,
+  item: invoice,
   ticker,
   currentTicker,
 
@@ -83,6 +83,7 @@ const InvoiceModal = ({
                 <Moment format="MM/DD/YYYY">{invoice.creation_date * 1000}</Moment>
               </p>
               {!invoice.settled && <p className={styles.notPaid}>Not Paid</p>}
+              {invoice.settled && <p className={styles.paid}>Paid</p>}
             </section>
           </div>
 
@@ -107,7 +108,7 @@ const InvoiceModal = ({
 }
 
 InvoiceModal.propTypes = {
-  invoice: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
   toggleCurrencyProps: PropTypes.object.isRequired

app/components/Activity/InvoiceModal.scss

@@ -96,7 +96,12 @@
         text-align: right;
 
         .notPaid {
-          color: #ff8a65;
+          color: $orange;
+          margin-top: 5px;
+        }
+
+        .paid {
+          color: $green;
           margin-top: 5px;
         }
       }

app/components/Activity/PaymentModal.js

@@ -14,7 +14,7 @@ import Value from 'components/Value'
 import styles from './PaymentModal.scss'
 
 const PaymentModal = ({
-  payment,
+  item: payment,
   ticker,
   currentTicker,
 
@@ -88,7 +88,7 @@ const PaymentModal = ({
 )
 
 PaymentModal.propTypes = {
-  payment: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
 

app/components/Activity/TransactionModal.js

@@ -16,7 +16,7 @@ import Value from 'components/Value'
 import styles from './TransactionModal.scss'
 
 const TransactionModal = ({
-  transaction,
+  item: transaction,
   ticker,
   currentTicker,
   network,
@@ -107,7 +107,7 @@ const TransactionModal = ({
 )
 
 TransactionModal.propTypes = {
-  transaction: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
 

app/reducers/activity.js

@@ -13,8 +13,8 @@ const initialState = {
     { key: 'PENDING_ACTIVITY', name: 'Pending' }
   ],
   modal: {
-    modalType: null,
-    modalProps: {},
+    itemType: null,
+    itemId: null,
     showCurrencyFilters: false
   },
   searchActive: false,
@@ -39,11 +39,11 @@ export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function showActivityModal(modalType, modalProps) {
+export function showActivityModal(itemType, itemId) {
   return {
     type: SHOW_ACTIVITY_MODAL,
-    modalType,
-    modalProps
+    itemType,
+    itemId
   }
 }
 
@@ -91,19 +91,19 @@ export function setActivityModalCurrencyFilters(showCurrencyFilters) {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({
+  [SHOW_ACTIVITY_MODAL]: (state, { itemType, itemId }) => ({
     ...state,
-    modal: { modalType, modalProps }
+    modal: { itemType, itemId }
   }),
-  [HIDE_ACTIVITY_MODAL]: state => ({ ...state, modal: { modalType: null, modalProps: {} } }),
+  [HIDE_ACTIVITY_MODAL]: state => ({ ...state, modal: { itemType: null, itemId: null } }),
   [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter, filterPulldown: false }),
   [TOGGLE_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
 
   [SET_ACTIVITY_MODAL_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
     ...state,
     modal: {
-      modalType: state.modal.modalType,
-      modalProps: state.modal.modalProps,
+      itemType: state.modal.itemType,
+      itemId: state.modal.itemId,
       showCurrencyFilters
     }
   }),
@@ -122,12 +122,34 @@ const searchSelector = state => state.activity.searchText
 const paymentsSelector = state => state.payment.payments
 const invoicesSelector = state => state.invoice.invoices
 const transactionsSelector = state => state.transaction.transactions
+const modalItemTypeSelector = state => state.activity.modal.itemType
+const modalItemIdSelector = state => state.activity.modal.itemId
 
 const invoiceExpired = invoice => {
   const expiresAt = parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10)
   return expiresAt < Date.now() / 1000
 }
 
+activitySelectors.activityModalItem = createSelector(
+  paymentsSelector,
+  invoicesSelector,
+  transactionsSelector,
+  modalItemTypeSelector,
+  modalItemIdSelector,
+  (payments, invoices, transactions, itemType, itemId) => {
+    switch (itemType) {
+      case 'INVOICE':
+        return invoices.find(invoice => invoice.payment_request === itemId)
+      case 'TRANSACTION':
+        return transactions.find(transaction => transaction.tx_hash === itemId)
+      case 'PAYMENT':
+        return payments.find(payment => payment.payment_hash === itemId)
+      default:
+        return null
+    }
+  }
+)
+
 // helper function that returns invoice, payment or transaction timestamp
 function returnTimestamp(transaction) {
   // if on-chain txn

app/reducers/invoice.js

@@ -138,7 +138,7 @@ export const createdInvoice = (event, invoice) => dispatch => {
   dispatch(push('/'))
 
   // Set invoice modal to newly created invoice
-  dispatch(showActivityModal('INVOICE', { invoice }))
+  dispatch(showActivityModal('INVOICE', invoice.payment_request))
 }
 
 export const invoiceFailed = (event, { error }) => dispatch => {

app/routes/activity/components/components/Invoice/Invoice.js

@@ -11,7 +11,7 @@ import styles from '../Activity.scss'
 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName }) => (
   <div
     className={`${styles.container} ${!invoice.settled ? styles.unpaid : undefined}`}
-    onClick={() => showActivityModal('INVOICE', { invoice })}
+    onClick={() => showActivityModal('INVOICE', invoice.payment_request)}
   >
     <div className={styles.activityTypeIcon}>
       <section

app/routes/activity/components/components/Payment/Payment.js

@@ -20,7 +20,10 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
   }
 
   return (
-    <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
+    <div
+      className={styles.container}
+      onClick={() => showActivityModal('PAYMENT', payment.payment_hash)}
+    >
       <div className={styles.activityTypeIcon}>
         <section className="hint--bottom" data-hint="Lightning payment">
           <Isvg src={zap} />

app/routes/activity/components/components/Transaction/Transaction.js

@@ -11,7 +11,7 @@ import styles from '../Activity.scss'
 const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, currencyName }) => (
   <div
     className={styles.container}
-    onClick={() => showActivityModal('TRANSACTION', { transaction })}
+    onClick={() => showActivityModal('TRANSACTION', transaction.tx_hash)}
   >
     <div className={styles.activityTypeIcon}>
       <section className="hint--bottom" data-hint="On-chain transaction">

app/routes/app/containers/AppContainer.js

@@ -71,7 +71,11 @@ import { fetchDescribeNetwork } from 'reducers/network'
 
 import { clearError } from 'reducers/error'
 
-import { hideActivityModal, setActivityModalCurrencyFilters } from 'reducers/activity'
+import {
+  hideActivityModal,
+  setActivityModalCurrencyFilters,
+  activitySelectors
+} from 'reducers/activity'
 
 import App from '../components/App'
 
@@ -159,6 +163,8 @@ const mapStateToProps = state => ({
 
   network: state.network,
 
+  activityModalItem: activitySelectors.activityModalItem(state),
+
   currentTicker: tickerSelectors.currentTicker(state),
   currentCurrencyFilters: tickerSelectors.currentCurrencyFilters(state),
   currencyName: tickerSelectors.currencyName(state),
@@ -364,8 +370,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   }
 
   const activityModalProps = {
-    modalType: stateProps.activity.modal.modalType,
-    modalProps: stateProps.activity.modal.modalProps,
+    itemType: stateProps.activity.modal.itemType,
+    itemId: stateProps.activity.modal.itemId,
+    item: stateProps.activityModalItem,
+
     ticker: stateProps.ticker,
     currentTicker: stateProps.currentTicker,
     network: stateProps.info.network,