feature(invoices): basic invoices search by memo

app/reducers/invoice.js

@@ -4,6 +4,8 @@ import { btc, usd } from '../utils'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SEARCH_INVOICES = 'SEARCH_INVOICES'
+
 export const SET_INVOICE = 'SET_INVOICE'
 
 export const GET_INVOICE = 'GET_INVOICE'
@@ -20,6 +22,13 @@ export const INVOICE_FAILED = 'INVOICE_FAILED'
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function searchInvoices(invoicesSearchText) {
+  return {
+    type: SEARCH_INVOICES,
+    invoicesSearchText
+  }
+}
+
 export function setInvoice(invoice) {
   return {
     type: SET_INVOICE,
@@ -114,6 +123,8 @@ export function invoiceFailed() {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SEARCH_INVOICES]: (state, { invoicesSearchText }) => ({ ...state, invoicesSearchText }),
+
   [SET_INVOICE]: (state, { invoice }) => ({ ...state, invoice }),
 
   [GET_INVOICE]: (state) => ({ ...state, invoiceLoading: true }),
@@ -128,13 +139,21 @@ const ACTION_HANDLERS = {
 }
 
 const invoiceSelectors = {}
-const modalInvoiceSelector = state => state.invoice.invoice
+const invoiceSelector = state => state.invoice.invoice
+const invoicesSelector = state => state.invoice.invoices
+const invoicesSearchTextSelector = state => state.invoice.invoicesSearchText
 
 invoiceSelectors.invoiceModalOpen = createSelector(
-  modalInvoiceSelector,
+  invoiceSelector,
   invoice => invoice ? true : false
 )
 
+invoiceSelectors.invoices = createSelector(
+  invoicesSelector,
+  invoicesSearchTextSelector,
+  (invoices, invoicesSearchText) => invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
+)
+
 export { invoiceSelectors }
 
 // ------------------------------------
@@ -144,6 +163,7 @@ const initialState = {
   invoiceLoading: false,
   invoices: [],
   invoice: null,
+  invoicesSearchText: '',
   data: {}
 }
 

app/routes/activity/components/Activity.js

@@ -25,7 +25,9 @@ class Activity extends Component {
     const { tab } = this.state
     const { 
       ticker,
-      invoice: { invoice, invoices, invoiceLoading },
+      searchInvoices,
+      invoices,
+      invoice: { invoicesSearchText, invoice, invoiceLoading },
       payment: { payment, payments, paymentLoading },
       setPayment,
       setInvoice,
@@ -40,7 +42,13 @@ class Activity extends Component {
         	<label className={`${styles.label} ${styles.input}`}>
         		<MdSearch />
         	</label>
-        	<input className={`${styles.text} ${styles.input}`} placeholder='Search transactions by amount, public key, channel' type='text' />
+        	<input
+            value={invoicesSearchText}
+            onChange={event => tab === 1 ? null : searchInvoices(event.target.value)}
+            className={`${styles.text} ${styles.input}`}
+            placeholder={tab === 1 ? 'Search transactions by amount, public key, channel' : 'Search requests by memo'}
+            type='text'
+          />
         </div>
 
         <div className={styles.activities}>
@@ -92,5 +100,4 @@ class Activity extends Component {
   }
 }
 
-
-export default Activity
+export default Activity

app/routes/activity/containers/ActivityContainer.js

@@ -1,20 +1,35 @@
 import { connect } from 'react-redux'
-import { fetchInvoices, setInvoice, invoiceSelectors } from '../../../reducers/invoice'
-import { setPayment, fetchPayments, paymentSelectors } from '../../../reducers/payment'
+import { 
+	fetchInvoices,
+	searchInvoices,
+	setInvoice,
+	invoiceSelectors
+} from '../../../reducers/invoice'
+import {
+	setPayment,
+	fetchPayments,
+	paymentSelectors
+} from '../../../reducers/payment'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
 	setPayment,
 	setInvoice,
 	fetchPayments,
-	fetchInvoices
+	fetchInvoices,
+	searchInvoices
 }
 
 const mapStateToProps = (state) => ({
 	activity: state.activity,
+
 	payment: state.payment,
+
 	invoice: state.invoice,
+	invoices: invoiceSelectors.invoices(state),
+
 	ticker: state.ticker,
+
 	paymentModalOpen: paymentSelectors.paymentModalOpen(state),
 	invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state)
 })

app/routes/app/components/App.js

@@ -30,7 +30,6 @@ class App extends Component {
       children
     } = this.props
     
-    console.log('children: ', this.props.children)
     return (
       <div>
         <Form