Merge pull request #184 from LN-Zap/fix/contacts-form

Fix/contacts form

app/components/Contacts/ContactsForm.js

@@ -138,7 +138,7 @@ class ContactsForm extends React.Component {
 
             <ul className={styles.networkResults}>
               {
-                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => (
+                filteredNetworkNodes.map(node => (
                   <li key={node.pub_key}>
                     <section>
                       {
@@ -174,6 +174,15 @@ class ContactsForm extends React.Component {
                   onChange={event => this.setState({ manualFormInput: event.target.value })}
                 />
                 <div className={styles.submit} onClick={manualFormSubmit}>Submit</div>
+
+                {
+                  loadingChannelPubkeys.length > 0 &&
+                  <div className={styles.manualFormSpinner}>
+                    <div className={styles.loading}>
+                      <div className={styles.spinner} />
+                    </div>
+                  </div>
+                }
               </section>
             </div>
           }

app/components/Contacts/ContactsForm.scss

@@ -120,6 +120,7 @@
 }
 
 .manualForm {
+  position: relative;
   background: $lightgrey;
   color: $darkestgrey;
   padding: 30px 15px;
@@ -151,6 +152,13 @@
       color: $main;
     }
   }
+
+  .manualFormSpinner {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    padding: 0 10px;
+  }
 }
 
 .footer {

app/reducers/contactsform.js

@@ -70,7 +70,17 @@ const searchQuerySelector = state => state.contactsform.searchQuery
 contactFormSelectors.filteredNetworkNodes = createSelector(
   networkNodesSelector,
   searchQuerySelector,
-  (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
+  (nodes, searchQuery) => {
+    // If there is no search query default to showing the first 20 nodes from the nodes array
+    // (performance hit to render the entire thing by default)
+    if (!searchQuery.length) { return nodes.slice(0, 20) }
+
+    // if there is an '@' in the search query we are assuming they are using the format pubkey@host
+    // we can ignore the '@' and the host and just grab the pubkey for our search
+    const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery
+
+    return filter(nodes, node => node.alias.includes(query) || node.pub_key.includes(query))
+  }
 )
 
 contactFormSelectors.showManualForm = createSelector(