From ab6dd338c91087dfe871d0dac254fed78c677a5e Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 20 Oct 2017 21:55:49 -0500
Subject: [PATCH] feature(refresh peers): ability to refresh peers

---
 app/components/Peers/Peers.js          | 72 ++++++++++++++++++--------
 app/components/Peers/Peers.scss        | 14 +++++
 app/routes/wallet/components/Wallet.js |  2 +
 3 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/app/components/Peers/Peers.js b/app/components/Peers/Peers.js
index 5df2b11e..e90a0cbd 100644
--- a/app/components/Peers/Peers.js
+++ b/app/components/Peers/Peers.js
@@ -1,12 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TiPlus } from 'react-icons/lib/ti'
+import { FaRepeat } from 'react-icons/lib/fa'
 import PeerModal from './PeerModal'
 import PeerForm from './PeerForm'
 import Peer from './Peer'
 import styles from './Peers.scss'
 
 const Peers = ({
+  fetchPeers,
   peersLoading,
   peers,
   setPeer,
@@ -16,30 +18,56 @@ const Peers = ({
   setPeerForm,
   connect,
   disconnect
-}) => (
-  <div className={styles.peers}>
-    <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
-    <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
-    <div className={styles.header}>
-      <h3>Peers</h3>
-      <div
-        className={`${styles.connectPeer} hint--top`}
-        data-hint='Connect to a peer'
-        onClick={() => setPeerForm({ 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 peers
+    fetchPeers()
+    
+    // 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.peers}>
+      <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
+      <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
+      <div className={styles.header}>
+        <h3>Peers</h3>
+        <span
+          className={`${styles.refresh} hint--top`}
+          data-hint='Refresh your peers list'
+          
+        >
+          <FaRepeat
+            style={{ verticalAlign: 'baseline' }}
+            onClick={refreshClicked}
+          />
+        </span>
+        <div
+          className={`${styles.connectPeer} hint--top`}
+          data-hint='Connect to a peer'
+          onClick={() => setPeerForm({ isOpen: true })}
+        >
+          <TiPlus />
+        </div>
       </div>
+      <ul>
+        {
+          !peersLoading ?
+            peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
+            :
+            'Loading...'
+        }
+      </ul>
     </div>
-    <ul>
-      {
-        !peersLoading ?
-          peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
-          :
-          'Loading...'
-      }
-    </ul>
-  </div>
-)
+  )
+}
 
 Peers.propTypes = {
   peersLoading: PropTypes.bool.isRequired,
diff --git a/app/components/Peers/Peers.scss b/app/components/Peers/Peers.scss
index f24f6f70..613ce641 100644
--- a/app/components/Peers/Peers.scss
+++ b/app/components/Peers/Peers.scss
@@ -15,6 +15,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;
+			}
+		}
+
 		.connectPeer {
 			float: right;
 			cursor: pointer;
diff --git a/app/routes/wallet/components/Wallet.js b/app/routes/wallet/components/Wallet.js
index 62081b61..07bc1a09 100644
--- a/app/routes/wallet/components/Wallet.js
+++ b/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 },
+      fetchPeers,
       fetchChannels,
       setPeer,
       setChannel,
@@ -54,6 +55,7 @@ class Wallet extends Component {
         </section>
         <section className={styles.walletData}>
           <Peers
+            fetchPeers={fetchPeers}
             peersLoading={peersLoading}
             peers={peers}
             modalPeer={peer}