fix(ui): add missing channel search cancel button

Fix LN-Zap#1517
mrfelton · Feb 7, 2019 · 14d06bf · 14d06bf
1 parent a69bc14
commit 14d06bf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 27 deletions.
diff --git a/app/components/Contacts/Network/Network.js b/app/components/Contacts/Network/Network.js
@@ -9,6 +9,7 @@ import SuggestedNodes from 'containers/Contacts/SuggestedNodes'
 import ExternalLink from 'components/Icon/ExternalLink'
 import PlusCircle from 'components/Icon/PlusCircle'
 import Search from 'components/Icon/Search'
+import X from 'components/Icon/X'
 import {
   Bar,
   Button,
@@ -26,8 +27,7 @@ import messages from './messages'
 
 class Network extends Component {
   state = {
-    refreshing: false,
-    searchQuery: ''
+    refreshing: false
   }
 
   /*eslint-disable react/destructuring-assignment*/
@@ -41,18 +41,23 @@ class Network extends Component {
     }
   }
 
-  onSearchTextChange = event => {
-    const { value } = event.target
-    this.setState({
-      searchQuery: value
-    })
+  onSearchTextChange = value => {
     this.updateChannelSearchQuery(value)
   }
 
+  clearSearchQuery = () => {
+    this.updateChannelSearchQuery(null)
+    this.formApi.setValue('search', '')
+  }
+
   clearRefreshing = () => {
     this.setState({ refreshing: false })
   }
 
+  setFormApi = formApi => {
+    this.formApi = formApi
+  }
+
   render() {
     const {
       channels: {
@@ -66,6 +71,7 @@ class Network extends Component {
       },
       currentChannels,
       channelBalance,
+      searchQuery,
       ticker,
       currentTicker,
       nodes,
@@ -79,8 +85,6 @@ class Network extends Component {
       intl
     } = this.props
 
-    const { searchQuery } = this.state
-
     if (!currentTicker || !currencyName) {
       return null
     }
@@ -407,23 +411,37 @@ class Network extends Component {
           <>
             <Bar mt={3} borderColor="gray" css={{ opacity: 0.3 }} />
             <Panel.Footer as="footer" px={3} py={3}>
-              <Flex alignItems="center" width={1}>
-                <Text fontSize="l" css={{ opacity: 0.5 }} mt={2}>
-                  {!searchQuery && <Search />}
-                </Text>
-                <Form width={1}>
-                  <Input
-                    field="search"
-                    id="search"
-                    type="text"
-                    variant="thin"
-                    border={0}
-                    placeholder={intl.formatMessage({ ...messages.search_placeholder })}
-                    value={searchQuery}
-                    onChange={this.onSearchTextChange}
-                  />
-                </Form>
-              </Flex>
+              <Form width={1} getApi={this.setFormApi}>
+                {({ formState }) => (
+                  <Flex alignItems="center" justifyContet="space-between" width={1}>
+                    <Text fontSize="l" css={{ opacity: 0.5 }} mt={2}>
+                      <Search />
+                    </Text>
+                    <Input
+                      field="search"
+                      id="search"
+                      type="text"
+                      variant="thin"
+                      border={0}
+                      placeholder={intl.formatMessage({ ...messages.search_placeholder })}
+                      initialValue={searchQuery}
+                      onValueChange={this.onSearchTextChange}
+                      width={1}
+                    />
+                    {formState.values.search && (
+                      <Button
+                        variant="secondary"
+                        size="small"
+                        type="button"
+                        onClick={this.clearSearchQuery}
+                        ml="auto"
+                      >
+                        <X />
+                      </Button>
+                    )}
+                  </Flex>
+                )}
+              </Form>
             </Panel.Footer>
           </>
         )}
@@ -438,6 +456,7 @@ Network.propTypes = {
   channels: PropTypes.object.isRequired,
   channelBalance: PropTypes.number,
   currentTicker: PropTypes.object,
+  searchQuery: PropTypes.string,
   ticker: PropTypes.object.isRequired,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,

diff --git a/app/containers/App.js b/app/containers/App.js
@@ -123,6 +123,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     currentTicker: stateProps.currentTicker,
     contactsform: stateProps.contactsform,
     nodes: stateProps.network.nodes,
+    searchQuery: stateProps.channels.searchQuery,
     ticker: stateProps.ticker,
     networkInfo: stateProps.networkInfo,
     currencyName: stateProps.currencyName,

diff --git a/app/reducers/channels.js b/app/reducers/channels.js
@@ -426,6 +426,10 @@ const filterSelector = state => state.channels.filter
 const nodesSelector = state => state.network.nodes
 
 const channelMatchesQuery = (channel, nodes, searchQuery) => {
+  if (!searchQuery) {
+    return true
+  }
+
   const node = nodes.find(n => channel.remote_pubkey === n.pub_key)
   const query = searchQuery.toLowerCase()
 
@@ -615,7 +619,7 @@ const initialState = {
   },
   openingChannel: false,
   closingChannel: false,
-  searchQuery: '',
+  searchQuery: null,
   viewType: 0,
 
   filter: { key: 'ALL_CHANNELS', name: 'All' },