feature(activity modal): add activity reducer and basic activity modal functionality

app/reducers/activity.js

@@ -0,0 +1,50 @@
+// ------------------------------------
+// Initial State
+// ------------------------------------
+const initialState = {
+  filter: 'ALL_ACTIVITY',
+  modal: {
+    modalType: null,
+    modalProps: {}
+  }
+}
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const SHOW_ACTIVITY_MODAL = 'SHOW_ACTIVITY_MODAL'
+export const HIDE_ACTIVITY_MODAL = 'HIDE_ACTIVITY_MODAL'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function showActivityModal(modalType, modalProps) {
+  return {
+    type: SHOW_ACTIVITY_MODAL,
+    modalType,
+    modalProps
+  }
+}
+
+export function hideActivityModal() {
+  return {
+    type: HIDE_ACTIVITY_MODAL
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
+  [HIDE_ACTIVITY_MODAL]: (state) => ({ ...state, modal: { modalType: null, modalProps: {} } })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function activityReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/reducers/index.js

@@ -12,6 +12,7 @@ import invoice from './invoice'
 import modal from './modal'
 import address from './address'
 import transaction from './transaction'
+import activity from './activity'
 
 const rootReducer = combineReducers({
   router,
@@ -25,7 +26,8 @@ const rootReducer = combineReducers({
   invoice,
   modal,
   address,
-  transaction
+  transaction,
+  activity
 })
 
 export default rootReducer

app/routes/activity/components/Activity.js

@@ -9,6 +9,8 @@ import Invoice from './components/Invoice'
 import Payment from './components/Payment'
 import Transaction from './components/Transaction'
 
+import Modal from './components/Modal'
+
 import styles from './Activity.scss'
 
 class Activity extends Component {
@@ -30,18 +32,17 @@ class Activity extends Component {
   }
 
   renderActivity(activity) {
-    const { ticker, currentTicker } = this.props
+    const { ticker, currentTicker, showActivityModal } = this.props
 
     if (activity.hasOwnProperty('block_hash')) {
       // activity is an on-chain tx
-      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     } else if (activity.hasOwnProperty('payment_request')) {
       // activity is an LN invoice
-      console.log('activity: ', activity)
-      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     } else {
       // activity is an LN payment
-      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} />
+      return <Payment payment={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
     }
   }
 
@@ -58,11 +59,17 @@ class Activity extends Component {
       paymentModalOpen,
       invoiceModalOpen,
       currentTicker,
-      sortedActivity
+      sortedActivity,
+      activity: { modal },
+      hideActivityModal
     } = this.props
+    
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
+
     return (
       <div>
+        <Modal modalType={modal.modalType} modalProps={modal.modalProps} hideActivityModal={hideActivityModal} />
+        
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>
             <MdSearch />

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

@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Invoice = ({ invoice, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('INVOICE', { invoice })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
         <FaBolt />

app/routes/activity/components/components/Modal.js → app/routes/activity/components/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
-const Modal = ({ isOpen, resetObject, children }) => {
+const Modal = ({ modalType, modalProps, hideActivityModal }) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer'
@@ -16,26 +16,26 @@ const Modal = ({ isOpen, resetObject, children }) => {
       margin: '50px auto'
     }
   }
+  
+  if (!modalType) { return null }
 
   return (
     <ReactModal
-      isOpen={isOpen}
-      contentLabel='No Overlay Click Modal'
+      isOpen
       ariaHideApp
       shouldCloseOnOverlayClick
-      onRequestClose={() => resetObject(null)}
+      contentLabel='No Overlay Click Modal'
+      onRequestClose={() => hideActivityModal()}
       parentSelector={() => document.body}
       style={customStyles}
     >
-      {children}
+      <h1>hi!</h1>
     </ReactModal>
   )
 }
 
 Modal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  resetObject: PropTypes.func.isRequired,
-  children: PropTypes.object
+  modalType: PropTypes.string
 }
 
 export default Modal

app/routes/activity/components/components/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal'
+
+export default Modal

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

@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Payment = ({ payment, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
         <FaBolt />

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

@@ -7,8 +7,8 @@ import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
-const Transaction = ({ transaction, ticker, currentTicker }) => (
-  <div className={styles.container}>
+const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
+  <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
     <div className={styles.label}>
       <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
         <FaChain />

app/routes/activity/containers/ActivityContainer.js

@@ -12,6 +12,7 @@ import {
   paymentSelectors
 } from '../../../reducers/payment'
 import { fetchTransactions } from '../../../reducers/transaction'
+import { showActivityModal, hideActivityModal } from '../../../reducers/activity'
 import { activitySelectors } from '../../../selectors'
 import Activity from '../components/Activity'
 
@@ -21,7 +22,9 @@ const mapDispatchToProps = {
   fetchPayments,
   fetchInvoices,
   fetchTransactions,
-  searchInvoices
+  searchInvoices,
+  showActivityModal,
+  hideActivityModal
 }
 
 const mapStateToProps = state => ({