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

Feature/activity search
7 years ago · 05a2252ee4
7 changed files with 121 additions and 22 deletions
--- a/app/reducers/activity.js
+++ b/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 })
 }

--- a/app/routes/activity/components/Activity.js
+++ b/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,21 +100,42 @@ class Activity extends Component {
        <Wallet {...walletProps} />

        <div className={styles.activities}>
-          <header className={styles.header}>
-            <section>
-              <ul className={styles.filters}>
-                {
-                  filters.map(f => (
-                    <li key={f.key} className={f.key === filter.key && styles.activeFilter} onClick={() => changeFilter(f)}>
-                      <span>{f.name}</span>
-
-                      <div className={f.key === filter.key && styles.activeBorder} />
-                    </li>
-                  ))
-                }
-              </ul>
-            </section>
-          </header>
+          {
+            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}>
+                    {
+                      filters.map(f => (
+                        <li key={f.key} className={f.key === filter.key && styles.activeFilter} onClick={() => changeFilter(f)}>
+                          <span>{f.name}</span>
+
+                          <div className={f.key === filter.key && styles.activeBorder} />
+                        </li>
+                      ))
+                    }
+                  </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,
--- a/app/routes/activity/components/Activity.scss
+++ b/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 {
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/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
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/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
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/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
--- a/app/utils/btc.js
+++ b/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
 }