From efff2991134d6b897e42d4e3dda2d0fa3cacdda4 Mon Sep 17 00:00:00 2001
From: maciejhirsz <maciej.hirsz@gmail.com>
Date: Mon, 16 Jul 2018 16:39:18 +0200
Subject: [PATCH] Map toggle, fix selecting chain

---
 packages/frontend/src/Connection.ts        |  4 ++--
 packages/frontend/src/components/Chain.css | 17 +++++++++++++++++
 packages/frontend/src/components/Chain.tsx | 22 +++++++++++++++++++---
 packages/frontend/src/components/Icon.tsx  | 11 ++++++-----
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/Connection.ts b/packages/frontend/src/Connection.ts
index 37ac85c..631df79 100644
--- a/packages/frontend/src/Connection.ts
+++ b/packages/frontend/src/Connection.ts
@@ -188,7 +188,6 @@ export class Connection {
         case Actions.AddedChain: {
           const [label, nodeCount] = message.payload;
           chains.set(label, nodeCount);
-          this.autoSubscribe();
 
           break;
         }
@@ -200,7 +199,6 @@ export class Connection {
             nodes.clear();
 
             this.state = this.update({ subscribed: null, nodes, chains });
-            this.autoSubscribe();
 
             continue messages;
           }
@@ -230,6 +228,8 @@ export class Connection {
     }
 
     this.state = this.update(changes);
+
+    this.autoSubscribe();
   }
 
   private autoSubscribe() {
diff --git a/packages/frontend/src/components/Chain.css b/packages/frontend/src/components/Chain.css
index 44c0ab6..aae6b78 100644
--- a/packages/frontend/src/components/Chain.css
+++ b/packages/frontend/src/components/Chain.css
@@ -8,6 +8,23 @@
   position: relative;
 }
 
+.Chain-map-toggle {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  font-size: 32px;
+  padding: 6px;
+  background: #222;
+  color: #aaa;
+  cursor: pointer;
+  border-top: 2px solid #5e5e5e;
+  border-radius: 4px 4px 0 0;
+}
+
+.Chain-map-toggle-on {
+  color: #fff;
+}
+
 .Chain-content-container {
   position: absolute;
   left: 0;
diff --git a/packages/frontend/src/components/Chain.tsx b/packages/frontend/src/components/Chain.tsx
index 27af7b1..11b0dce 100644
--- a/packages/frontend/src/components/Chain.tsx
+++ b/packages/frontend/src/components/Chain.tsx
@@ -13,6 +13,7 @@ import blockHashIcon from '../icons/file-binary.svg';
 import blockTimeIcon from '../icons/history.svg';
 import propagationTimeIcon from '../icons/dashboard.svg';
 import lastTimeIcon from '../icons/watch.svg';
+import worldIcon from '../icons/globe.svg';
 
 const MAP_RATIO = 495 / 266; // width / height
 const HEADER = 148;
@@ -53,7 +54,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     super(props);
 
     this.state = {
-      display: window.location.hash === '#map' ? 'map' : 'table',
+      display: 'table',
       map: {
         width: 0,
         height: 0,
@@ -94,6 +95,13 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
 
   public render() {
     const { best, blockTimestamp, blockAverage } = this.props.appState;
+    const { display } = this.state;
+
+    const toggleClass = ['Chain-map-toggle'];
+
+    if (display === 'map') {
+      toggleClass.push('Chain-map-toggle-on');
+    }
 
     return (
       <div className="Chain">
@@ -101,11 +109,12 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
           <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
           <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
           <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
+          <Icon src={worldIcon} alt="Toggle Map" className={toggleClass.join(' ')} onClick={this.toggleMap} />
         </div>
         <div className="Chain-content-container">
           <div className="Chain-content">
           {
-            this.state.display === 'table'
+            display === 'table'
               ? this.renderTable()
               : this.renderMap()
           }
@@ -115,8 +124,15 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     );
   }
 
+  private toggleMap = () => {
+    if (this.state.display === 'map') {
+      this.setState({ display: 'table' });
+    } else {
+      this.setState({ display: 'map' });
+    }
+  }
+
   private renderMap() {
-    // return <ReactSVG path={worldMap} className="Chain-map" />;
     return (
       <div className="Chain-map">
       {
diff --git a/packages/frontend/src/components/Icon.tsx b/packages/frontend/src/components/Icon.tsx
index 47aaa4b..ec778af 100644
--- a/packages/frontend/src/components/Icon.tsx
+++ b/packages/frontend/src/components/Icon.tsx
@@ -3,9 +3,10 @@ import ReactSVG from 'react-svg';
 import './Icon.css';
 
 export interface Props {
-  src: string,
-  alt: string,
-  className?: string,
+  src: string;
+  alt: string;
+  className?: string;
+  onClick?: () => void;
 };
 
 export class Icon extends React.Component<{}, Props> {
@@ -16,8 +17,8 @@ export class Icon extends React.Component<{}, Props> {
   }
 
   public render() {
-    const { alt, className, src } = this.props;
+    const { alt, className, onClick, src } = this.props;
 
-    return <ReactSVG title={alt} className={`Icon ${ className || '' }`} path={src} />;
+    return <ReactSVG title={alt} className={`Icon ${ className || '' }`} path={src} onClick={onClick} />;
   }
 }