fix(payment, invoice): refactor reducers so data is organized by model

app/reducers/activity.js

@@ -17,8 +17,8 @@ export function getActivity() {
 export function receiveActvity(data) {
   return {
     type: RECEIVE_ACTIVITY,
-    payments: data[0].data.payments,
-    invoices: data[1].data.invoices 
+    payments: data[0].data.payments.reverse(),
+    invoices: data[1].data.invoices.reverse() 
   }
 }
 

app/reducers/invoice.js

@@ -5,8 +5,13 @@ import { btc, usd } from '../utils'
 // ------------------------------------
 export const GET_INVOICE = 'GET_INVOICE'
 export const RECEIVE_INVOICE = 'RECEIVE_INVOICE'
+
+export const GET_INVOICES = 'GET_INVOICES'
+export const RECEIVE_INVOICES = 'RECEIVE_INVOICES'
+
 export const SEND_INVOICE = 'SEND_INVOICE'
 export const INVOICE_SUCCESSFUL = 'INVOICE_SUCCESSFUL'
+
 export const INVOICE_FAILED = 'INVOICE_FAILED'
 
 // ------------------------------------
@@ -25,6 +30,19 @@ export function receiveInvoice(data) {
   }
 }
 
+export function getInvoices() {
+  return {
+    type: GET_INVOICES
+  }
+}
+
+export function receiveInvoices(data) {
+  return {
+    type: RECEIVE_INVOICES,
+    invoices: data.invoices.reverse()
+  }
+}
+
 export function sendInvoice() {
   return {
     type: SEND_INVOICE
@@ -38,12 +56,6 @@ export function invoiceSuccessful(data) {
   }
 }
 
-export function invoiceFailed() {
-  return {
-    type: SEND_PAYMENT
-  }
-}
-
 export const fetchInvoice = (r_hash) => async (dispatch) => {
   dispatch(getInvoice())
   const invoice = await callApi(`invoice/${r_hash}`, 'get')
@@ -51,11 +63,22 @@ export const fetchInvoice = (r_hash) => async (dispatch) => {
   invoice ?
     dispatch(receiveInvoice(invoice.data))
   :
-    dispatch(invoiceFailed())
+    dispatch(invoicesFailed())
 
   return invoice
 }
 
+export const fetchInvoices = () => async (dispatch) => {
+  dispatch(getInvoice())
+  const invoices = await callApi('invoices')
+  invoices ?
+    dispatch(receiveInvoices(invoices.data))
+  :
+    dispatch(invoiceFailed())
+
+  return invoices
+}
+
 export const createInvoice = (amount, memo, currency, rate) => async (dispatch) => {
   const value = currency === 'btc' ? btc.btcToSatoshis(amount) : btc.btcToSatoshis(usd.usdToBtc(amount, rate))
 
@@ -71,22 +94,34 @@ export const createInvoice = (amount, memo, currency, rate) => async (dispatch)
   return invoice
 }
 
+
+export function invoiceFailed() {
+  return {
+    type: INVOICE_FAILED
+  }
+}
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [GET_INVOICE]: (state) => ({ ...state, loading: true }),
-  [RECEIVE_INVOICE]: (state, { data }) => ({ ...state, loading: false, data }),
-  [SEND_INVOICE]: (state) => ({ ...state, loading: true }),
-  [INVOICE_SUCCESSFUL]: (state, { data }) => ({ ...state, loading: false, data }),
-  [INVOICE_FAILED]: (state) => ({ ...state, loading: false, data: null })
+  [GET_INVOICE]: (state) => ({ ...state, invoiceLoading: true }),
+  [RECEIVE_INVOICE]: (state, { data }) => ({ ...state, invoiceLoading: false, data }),
+
+  [GET_INVOICES]: (state) => ({ ...state, invoiceLoading: true }),
+  [RECEIVE_INVOICES]: (state, { invoices }) => ({ ...state, invoiceLoading: false, invoices }),
+
+  [SEND_INVOICE]: (state) => ({ ...state, invoiceLoading: true }),
+  [INVOICE_SUCCESSFUL]: (state, { data }) => ({ ...state, invoiceLoading: false, data }),
+  [INVOICE_FAILED]: (state) => ({ ...state, invoiceLoading: false, data: null })
 }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
-  loading: false,
+  invoiceLoading: false,
+  invoices: [],
+  invoice: {},
   data: {}
 }
 

app/reducers/payment.js

@@ -3,6 +3,9 @@ import { btc } from '../utils'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const GET_PAYMENTS = 'GET_PAYMENTS'
+export const RECEIVE_PAYMENTS = 'RECEIVE_PAYMENTS'
+
 export const SEND_PAYMENT = 'SEND_PAYMENT'
 export const PAYMENT_SUCCESSFULL = 'PAYMENT_SUCCESSFULL'
 export const PAYMENT_FAILED = 'PAYMENT_FAILED'
@@ -10,6 +13,19 @@ export const PAYMENT_FAILED = 'PAYMENT_FAILED'
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function getPayments() {
+  return {
+    type: GET_PAYMENTS
+  }
+}
+
+export function receivePayments(data) {
+  return {
+    type: RECEIVE_PAYMENTS,
+    payments: data.payments.reverse()
+  }
+}
+
 export function sendPayment() {
   return {
     type: SEND_PAYMENT
@@ -29,6 +45,17 @@ export function paymentFailed() {
   }
 }
 
+export const fetchPayments = () => async (dispatch) => {
+  dispatch(getPayments())
+  const payments = await callApi('payments')
+  payments ?
+    dispatch(receivePayments(payments.data))
+  :
+    dispatch(paymentFailed())
+
+  return payments
+}
+
 export const makePayment = (dest_string, btc_amount) => async (dispatch) => {
   const amt = btc.btcToSatoshis(btc_amount)
 
@@ -47,13 +74,16 @@ export const makePayment = (dest_string, btc_amount) => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [GET_PAYMENTS]: (state) => ({ ...state, paymentLoading: true }),
+  [RECEIVE_PAYMENTS]: (state, { payments }) => ({ ...state, paymentLoading: false, payments }),
 }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
-  paymentLoading: false
+  paymentLoading: false,
+  payments: []
 }
 
 export default function paymentReducer(state = initialState, action) {

app/routes/activity/components/Activity.js

@@ -15,14 +15,21 @@ class Activity extends Component {
   }
 
   componentWillMount() {
-    this.props.fetchActivity()
+    const { fetchPayments, fetchInvoices } = this.props
+
+    fetchPayments()
+    fetchInvoices()
   }
 
   render() {
     const { tab } = this.state
-    const { ticker, activity: { activityLoading, payments, invoices } } = this.props
+    const { 
+      ticker,
+      invoice: { invoices, invoiceLoading },
+      payment: { payments, paymentLoading }
+    } = this.props
     
-    if (activityLoading) { return <div>Loading...</div> }
+    if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
     return (
       <div>
         <div className={styles.search}>

app/routes/activity/containers/ActivityContainer.js

@@ -1,13 +1,17 @@
 import { connect } from 'react-redux'
-import { fetchActivity } from '../../../reducers/activity'
+import { fetchInvoices } from '../../../reducers/invoice'
+import { fetchPayments } from '../../../reducers/payment'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
-	fetchActivity
+	fetchPayments,
+	fetchInvoices
 }
 
 const mapStateToProps = (state) => ({
 	activity: state.activity,
+	payment: state.payment,
+	invoice: state.invoice,
 	ticker: state.ticker
 })