feature(SuggestedNodes): create suggested nodes component

app/components/Contacts/Network.js

@@ -8,6 +8,7 @@ import plus from 'icons/plus.svg'
 import search from 'icons/search.svg'
 
 import Value from 'components/Value'
+import SuggestedNodes from './SuggestedNodes'
 
 import styles from './Network.scss'
 
@@ -139,6 +140,13 @@ class Network extends Component {
         </header>
 
         <div className={styles.channels}>
+        {
+          !loadingChannelPubkeys.length && !currentChannels.length &&
+          <SuggestedNodes />
+        }
+
+        {
+          loadingChannelPubkeys.length > 0 && currentChannels.length > 0 &&
           <header className={styles.listHeader}>
             <section>
               <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
@@ -154,22 +162,22 @@ class Network extends Component {
                 }
               </ul>
             </section>
-
+              <section className={styles.refreshContainer}>
-            <section className={styles.refreshContainer}>
+                <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
-              <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
+                  {
-                {
+                    this.state.refreshing ?
-                  this.state.refreshing ?
+                      <FaRepeat />
-                    <FaRepeat />
+                      :
-                    :
+                      'Refresh'
-                    'Refresh'
+                  }
-                }
+                </span>
-              </span>
+              </section>
-            </section>
           </header>
+        }
 
           <ul className={filterPulldown && styles.fade}>
             {
-              loadingChannelPubkeys.map((loadingPubkey) => {
+              loadingChannelPubkeys.length > 0 && loadingChannelPubkeys.map((loadingPubkey) => {
                 // TODO(jimmymow): refactor this out. same logic is in displayNodeName above
                 const node = find(nodes, n => loadingPubkey === n.pub_key)
                 const nodeDisplay = () => {
@@ -264,20 +272,22 @@ class Network extends Component {
             }
           </ul>
         </div>
-
+        {
-        <footer className={styles.search}>
+          loadingChannelPubkeys.length > 0 && currentChannels.length > 0 &&
-          <label htmlFor='search' className={`${styles.label} ${styles.input}`}>
+          <footer className={styles.search}>
-            <Isvg src={search} />
+            <label htmlFor='search' className={`${styles.label} ${styles.input}`}>
-          </label>
+              <Isvg src={search} />
-          <input
+            </label>
-            id='search'
+            <input
-            type='text'
+              id='search'
-            className={`${styles.text} ${styles.input}`}
+              type='text'
-            placeholder='search by alias or pubkey'
+              className={`${styles.text} ${styles.input}`}
-            value={searchQuery}
+              placeholder='search by alias or pubkey'
-            onChange={event => updateChannelSearchQuery(event.target.value)}
+              value={searchQuery}
-          />
+              onChange={event => updateChannelSearchQuery(event.target.value)}
-        </footer>
+            />
+          </footer>
+        }
       </div>
     )
   }

app/components/Contacts/SuggestedNodes.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './SuggestedNodes.scss'
+
+const SuggestedNodes = ({}) => {
+  console.log('yo')
+  return (
+    <div>suggested nodes</div>
+  )
+}
+
+SuggestedNodes.propTypes = {}
+
+export default SuggestedNodes