feature(refresh channels): ability to refresh channels

app/app.global.scss

@@ -67,3 +67,9 @@ body {
     stroke: darken($main, 10%);
   }
 }
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/components/Channels/Channels.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TiPlus } from 'react-icons/lib/ti'
+import { FaRepeat } from 'react-icons/lib/fa'
 import ChannelModal from './ChannelModal'
 import ChannelForm from './ChannelForm'
 import Channel from './Channel'
@@ -9,6 +10,7 @@ import ClosedPendingChannel from './ClosedPendingChannel'
 import styles from './Channels.scss'
 
 const Channels = ({
+  fetchChannels,
   ticker,
   peers,
   channelsLoading,
@@ -22,67 +24,93 @@ const Channels = ({
   closeChannel,
   currentTicker,
   explorerLinkBase
-}) => (
-  <div className={styles.channels}>
-    <ChannelModal
-      isOpen={channelModalOpen}
-      resetChannel={setChannel}
-      channel={modalChannel}
-      explorerLinkBase={explorerLinkBase}
-      closeChannel={closeChannel}
-    />
-    <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} currentTicker={currentTicker} />
-    <div className={styles.header}>
-      <h3>Channels</h3>
-      <div
-        className={`${styles.openChannel} hint--top`}
-        data-hint='Open a channel'
-        onClick={() => setChannelForm({ isOpen: true })}
-      >
-        <TiPlus />
+}) => {
+  const refreshClicked = (event) => {
+    // store event in icon so we dont get an error when react clears it
+    let icon = event.currentTarget
+
+    // fetch channels 
+    fetchChannels()
+    
+    // clear animation after the second so we can reuse it
+    setTimeout(() => icon.style.animation = '', 1000)
+
+   // spin icon for 1 sec
+    icon.style.animation = 'spin 1000ms linear 1'
+  }
+
+  return (
+    <div className={styles.channels}>
+      <ChannelModal
+        isOpen={channelModalOpen}
+        resetChannel={setChannel}
+        channel={modalChannel}
+        explorerLinkBase={explorerLinkBase}
+        closeChannel={closeChannel}
+      />
+      <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} currentTicker={currentTicker} />
+      <div className={styles.header}>
+        <h3>Channels</h3>
+        <span
+          className={`${styles.refresh} hint--top`}
+          data-hint='Refresh your channels list'
+          
+        >
+          <FaRepeat
+            style={{ verticalAlign: 'baseline' }}
+            onClick={refreshClicked}
+          />
+        </span>
+        <div
+          className={`${styles.openChannel} hint--top`}
+          data-hint='Open a channel'
+          onClick={() => setChannelForm({ isOpen: true })}
+        >
+          <TiPlus />
+        </div>
       </div>
-    </div>
-    <ul>
-      {
-        !channelsLoading ?
-          allChannels.map((channel, index) => {
-            if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+      <ul>
+        {
+          !channelsLoading ?
+            allChannels.map((channel, index) => {
+              if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+                return (
+                  <OpenPendingChannel
+                    key={index}
+                    channel={channel}
+                    ticker={ticker}
+                    currentTicker={currentTicker}
+                    explorerLinkBase={explorerLinkBase}
+                  />
+                )
+              } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
+                return (
+                  <ClosedPendingChannel
+                    key={index}
+                    channel={channel}
+                    ticker={ticker}
+                    currentTicker={currentTicker}
+                    explorerLinkBase={explorerLinkBase}
+                  />
+                )
+              }
               return (
-                <OpenPendingChannel
-                  key={index}
-                  channel={channel}
+                <Channel
+                  key={channel.chan_id}
                   ticker={ticker}
-                  currentTicker={currentTicker}
-                  explorerLinkBase={explorerLinkBase}
-                />
-              )
-            } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
-              return (
-                <ClosedPendingChannel
-                  key={index}
                   channel={channel}
-                  ticker={ticker}
+                  setChannel={setChannel}
                   currentTicker={currentTicker}
-                  explorerLinkBase={explorerLinkBase}
                 />
               )
-            }
-            return (
-              <Channel
-                key={channel.chan_id}
-                ticker={ticker}
-                channel={channel}
-                setChannel={setChannel}
-                currentTicker={currentTicker}
-              />
-            )
-          })
-          :
-          'Loading...'
-      }
-    </ul>
-  </div>
-)
+            })
+            :
+            'Loading...'
+        }
+      </ul>
+    </div>
+  )
+}
 
 Channels.propTypes = {
   ticker: PropTypes.object.isRequired,

app/components/Channels/Channels.scss

@@ -1,5 +1,15 @@
 @import '../../variables.scss';
 
+@keyframes spin {
+    from {
+      transform: rotate(0deg)
+    }
+    
+    to {
+      transform: rotate(360deg);
+    }
+}
+
 .channels {
 	width: 75%;
 	margin: 50px auto;
@@ -15,6 +25,20 @@
 			text-align: left;
 		}
 
+		.refresh {
+			cursor: pointer;
+			margin-left: 5px;
+			font-size: 12px;
+			vertical-align: top;
+			color: $darkestgrey;
+			line-height: 14px;
+			transition: color 0.25s;
+
+			&:hover {
+				color: $main;
+			}
+		}
+
 		.openChannel {
 			float: right;
 			cursor: pointer;

app/keyframes.scss

@@ -31,3 +31,13 @@
   75%  { color: $gold; }
   100% { color: $white; }
 }
+
+@keyframes spin {
+    from {
+      transform:rotate(0deg)
+    }
+    
+    to {
+      transform:rotate(360deg);
+    }
+}

app/routes/wallet/components/Wallet.js

@@ -21,6 +21,7 @@ class Wallet extends Component {
       ticker,
       peers: { peersLoading, peers, peer, peerForm },
       channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
+      fetchChannels,
       setPeer,
       setChannel,
       peerModalOpen,
@@ -64,6 +65,7 @@ class Wallet extends Component {
             disconnect={disconnectRequest}
           />
           <Channels
+            fetchChannels={fetchChannels}
             ticker={ticker}
             peers={peers}
             channelsLoading={channelsLoading}