Merge pull request #374 from LN-Zap/feature/activity-search

Feature/activity search

app/reducers/activity.js

@@ -17,6 +17,7 @@ const initialState = {
     modalProps: {},
     showCurrencyFilters: false
   },
+  searchActive: false,
   searchText: ''
 }
 
@@ -32,6 +33,7 @@ export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'
 
 export const SET_ACTIVITY_MODAL_CURRENCY_FILTERS = 'SET_ACTIVITY_MODAL_CURRENCY_FILTERS'
 
+export const UPDATE_SEARCH_ACTIVE = 'UPDATE_SEARCH_ACTIVE'
 export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
 
 // ------------------------------------
@@ -64,6 +66,13 @@ export function toggleFilterPulldown() {
   }
 }
 
+export function updateSearchActive(searchActive) {
+  return {
+    type: UPDATE_SEARCH_ACTIVE,
+    searchActive
+  }
+}
+
 export function updateSearchText(searchText) {
   return {
     type: UPDATE_SEARCH_TEXT,
@@ -91,6 +100,7 @@ const ACTION_HANDLERS = {
     { ...state, modal: { modalType: state.modal.modalType, modalProps: state.modal.modalProps, showCurrencyFilters } }
   ),
 
+  [UPDATE_SEARCH_ACTIVE]: (state, { searchActive }) => ({ ...state, searchActive }),
   [UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText })
 }
 

app/routes/activity/components/Activity.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
+import searchIcon from 'icons/search.svg'
+import xIcon from 'icons/x.svg'
 
 import Wallet from 'components/Wallet'
 import LoadingBolt from 'components/LoadingBolt'
@@ -48,7 +51,15 @@ class Activity extends Component {
       )
     } else if (Object.prototype.hasOwnProperty.call(activity, 'payment_request')) {
       // activity is an LN invoice
-      return <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} />
+      return (
+        <Invoice
+          invoice={activity}
+          ticker={ticker}
+          currentTicker={currentTicker}
+          showActivityModal={showActivityModal}
+          currencyName={currencyName}
+        />
+      )
     }
     // activity is an LN payment
     return (
@@ -69,11 +80,16 @@ class Activity extends Component {
       activity: {
         filters,
         filter,
-        filterPulldown
+        filterPulldown,
+        searchActive,
+        searchText
       },
       changeFilter,
       currentActivity,
 
+      updateSearchActive,
+      updateSearchText,
+
       walletProps
     } = this.props
 
@@ -84,6 +100,23 @@ class Activity extends Component {
         <Wallet {...walletProps} />
 
         <div className={styles.activities}>
+          {
+            searchActive ?
+              <header className={`${styles.header} ${styles.search}`}>
+                <section>
+                  <input
+                    placeholder='Search'
+                    value={searchText}
+                    onChange={event => updateSearchText(event.target.value)}
+                  />
+                </section>
+                <section onClick={() => { updateSearchActive(false); updateSearchText('') }}>
+                  <span className={styles.xIcon}>
+                    <Isvg src={xIcon} />
+                  </span>
+                </section>
+              </header>
+              :
               <header className={styles.header}>
                 <section>
                   <ul className={styles.filters}>
@@ -98,7 +131,11 @@ class Activity extends Component {
                     }
                   </ul>
                 </section>
+                <section onClick={() => updateSearchActive(true)}>
+                  <Isvg src={searchIcon} />
+                </section>
               </header>
+          }
           <ul className={`${styles.activityContainer} ${filterPulldown && styles.pulldown}`}>
             {
               currentActivity.map((activityBlock, index) => (
@@ -131,6 +168,8 @@ Activity.propTypes = {
 
   showActivityModal: PropTypes.func.isRequired,
   changeFilter: PropTypes.func.isRequired,
+  updateSearchActive: PropTypes.func.isRequired,
+  updateSearchText: PropTypes.func.isRequired,
 
   activity: PropTypes.object.isRequired,
   currentActivity: PropTypes.array.isRequired,

app/routes/activity/components/Activity.scss

@@ -39,6 +39,51 @@
 	  margin: 0 auto;
 	  padding: 0 40px;
 	  border-bottom: 1px solid $spaceborder;
+	  display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 55px;
+    transition: all 0.25s;
+
+    &.search {
+    	background: linear-gradient(270deg, #868B9F 0%, #333C5E 100%);
+
+    	section {
+    		&:nth-child(1) {
+    			width: 90%;
+    		}
+    	}
+
+    	input {
+    		background: transparent;
+  			outline: none;
+  			border: 0;
+  			font-size: 20px;
+  			line-height: 24px;
+  			letter-spacing: 1px;
+  			color: $white;
+  			width: 100%;
+    	}
+
+    	.xIcon svg {
+    		width: 25px;
+    		height: 25px;
+    	}
+    }
+
+    section svg {
+    	width: 14px;
+    	height: 14px;
+    	color: $white;
+    	opacity: 0.5;
+    	cursor: pointer;
+  		transition: all 0.25s;
+
+    	&:hover {
+    		opacity: 1;
+    	}
+    }
 
 
 	  .filters {

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

@@ -10,7 +10,7 @@ import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'
 
 const Invoice = ({
-  invoice, ticker, currentTicker, showActivityModal
+  invoice, ticker, currentTicker, showActivityModal, currencyName
 }) => (
   <div className={`${styles.container} ${!invoice.settled && styles.unpaid}`} onClick={() => showActivityModal('INVOICE', { invoice })}>
     {
@@ -39,6 +39,7 @@ const Invoice = ({
           currency={ticker.currency}
           currentTicker={currentTicker}
         />
+        <i> {currencyName}</i>
       </span>
       <span>
         <span>
@@ -53,7 +54,8 @@ Invoice.propTypes = {
   invoice: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
-  showActivityModal: PropTypes.func.isRequired
+  showActivityModal: PropTypes.func.isRequired,
+  currencyName: PropTypes.string.isRequired
 }
 
 export default Invoice

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

@@ -8,7 +8,7 @@ import Value from 'components/Value'
 import styles from '../Activity.scss'
 
 const Transaction = ({
-  transaction, ticker, currentTicker, showActivityModal
+  transaction, ticker, currentTicker, showActivityModal, currencyName
 }) => (
   <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
     <div className={styles.data}>
@@ -29,6 +29,7 @@ const Transaction = ({
           currency={ticker.currency}
           currentTicker={currentTicker}
         />
+        <i> {currencyName}</i>
       </span>
       <span className='hint--bottom' data-hint='Transaction fee'>
         ${btc.convert('sats', 'usd', transaction.amount, currentTicker.price_usd)}
@@ -41,7 +42,8 @@ Transaction.propTypes = {
   transaction: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
-  showActivityModal: PropTypes.func.isRequired
+  showActivityModal: PropTypes.func.isRequired,
+  currencyName: PropTypes.string.isRequired
 }
 
 export default Transaction

app/routes/activity/containers/ActivityContainer.js

@@ -18,6 +18,7 @@ import {
   changeFilter,
   toggleFilterPulldown,
   activitySelectors,
+  updateSearchActive,
   updateSearchText
 } from 'reducers/activity'
 import { newAddress, openWalletModal } from 'reducers/address'
@@ -43,6 +44,7 @@ const mapDispatchToProps = {
   newAddress,
   openWalletModal,
   fetchBalance,
+  updateSearchActive,
   updateSearchText,
   setFormType,
   setWalletCurrencyFilters

app/utils/btc.js

@@ -52,7 +52,6 @@ export function bitsToUsd(bits, price) {
 export function satoshisToBtc(satoshis) {
   if (satoshis === undefined || satoshis === null || satoshis === '') return null
 
-  console.log('satoshis: ', satoshis)
   const btcAmount = sb.toBitcoin(satoshis).toFixed(8)
   return btcAmount > 0 ? btcAmount : btcAmount * -1
 }