fix(ui): don't disable sent filter after sending payment

renderer/components/Pay/Pay.js

@@ -14,9 +14,9 @@ import { intlShape } from '@zap/i18n'
 
 class Pay extends React.Component {
   static propTypes = {
+    addFilter: PropTypes.func.isRequired,
     chain: PropTypes.string.isRequired,
     chainName: PropTypes.string.isRequired,
-    changeFilter: PropTypes.func.isRequired,
     channelBalance: PropTypes.number.isRequired,
     closeModal: PropTypes.func.isRequired,
     cryptoUnit: PropTypes.string.isRequired,
@@ -208,7 +208,7 @@ class Pay extends React.Component {
       routes,
       sendCoins,
       setRedirectPayReq,
-      changeFilter,
+      addFilter,
       closeModal,
     } = this.props
     const { isOnchain } = this.state
@@ -237,8 +237,9 @@ class Pay extends React.Component {
       setRedirectPayReq(null)
     }
 
-    // Change the transaction filter to ALL transactions
-    changeFilter('SENT_ACTIVITY')
+    // Change the transaction filter to include sent and pending transactions
+    // to ensure user sees freshly added payment
+    addFilter('SENT_ACTIVITY', 'PENDING_ACTIVITY')
     // Close the form modal once the transaction has been sent
     closeModal()
   }
@@ -338,7 +339,7 @@ class Pay extends React.Component {
     const {
       chain,
       chainName,
-      changeFilter,
+      addFilter,
       channelBalance,
       closeModal,
       cryptoUnit,

renderer/containers/Pay.js

@@ -3,7 +3,7 @@ import { Pay } from 'components/Pay'
 import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { setRedirectPayReq, queryFees, queryRoutes } from 'reducers/pay'
 import { balanceSelectors } from 'reducers/balance'
-import { changeFilter } from 'reducers/activity'
+import { addFilter } from 'reducers/activity'
 import { channelsSelectors } from 'reducers/channels'
 import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
@@ -28,7 +28,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = {
-  changeFilter,
+  addFilter,
   closeModal,
   fetchTickers,
   payInvoice,

renderer/reducers/activity.js

@@ -56,6 +56,7 @@ const initialState = {
 export const SHOW_ACTIVITY_MODAL = 'SHOW_ACTIVITY_MODAL'
 export const HIDE_ACTIVITY_MODAL = 'HIDE_ACTIVITY_MODAL'
 export const CHANGE_FILTER = 'CHANGE_FILTER'
+export const ADD_FILTER = 'ADD_FILTER'
 export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
 export const FETCH_ACTIVITY_HISTORY = 'FETCH_ACTIVITY_HISTORY'
 export const FETCH_ACTIVITY_HISTORY_SUCCESS = 'FETCH_ACTIVITY_HISTORY_SUCCESS'
@@ -269,15 +270,27 @@ export const hideActivityModal = () => dispatch => {
 }
 
 /**
- * changeFilter - Set the current activity filter.
+ * changeFilter - Toggle specified activity filter.
  *
- * @param {string} filter Filter to apply
+ * @param {...string} filterList Filter to apply
  * @returns {object} Action
  */
-export function changeFilter(filter) {
+export function changeFilter(...filterList) {
   return {
     type: CHANGE_FILTER,
-    filter,
+    filterList,
+  }
+}
+/**
+ * addFilter - Enable specified activity filters.
+ *
+ * @param {...string} filterList Filters to apply
+ * @returns {object} Action
+ */
+export function addFilter(...filterList) {
+  return {
+    type: ADD_FILTER,
+    filterList,
   }
 }
 
@@ -397,12 +410,21 @@ const ACTION_HANDLERS = {
   [HIDE_ACTIVITY_MODAL]: state => {
     state.modal = { itemType: null, itemId: null }
   },
-  [CHANGE_FILTER]: (state, { filter }) => {
-    const { filter: allFilters } = state
-    if (allFilters.has(filter)) {
-      allFilters.delete(filter)
-    } else {
-      allFilters.add(filter)
+  [CHANGE_FILTER]: (state, { filterList }) => {
+    const { filter } = state
+    filterList.forEach(item => {
+      if (filter.has(item)) {
+        filter.delete(item)
+      } else {
+        filter.add(item)
+      }
+    })
+  },
+  [ADD_FILTER]: (state, { filterList }) => {
+    const { filter } = state
+    // No filters means all filters are active so no need to add anything
+    if (filter.size > 0) {
+      filterList.forEach(item => filter.add(item))
     }
   },
   [UPDATE_SEARCH_TEXT]: (state, { searchText }) => {