Set location.hash to current chain (#63)

packages/frontend/src/Connection.ts

@@ -2,6 +2,7 @@ import { VERSION, timestamp, FeedMessage, Types, Maybe, sleep } from '@dotstats/
 import { sortedInsert, sortedIndexOf } from '@dotstats/common';
 import { State, Update, Node } from './state';
 import { PersistentSet } from './persist';
+import { getHashData, setHashData } from './utils';
 
 const { Actions } = FeedMessage;
 
@@ -62,7 +63,7 @@ export class Connection {
   private pingId = 0;
   private pingTimeout: NodeJS.Timer;
   private pingSent: Maybe<Types.Timestamp> = null;
-  private resubscribeTo: Maybe<Types.ChainLabel> = null;
+  private resubscribeTo: Maybe<Types.ChainLabel> = getHashData().chain;
   private socket: WebSocket;
   private state: Readonly<State>;
   private readonly update: Update;
@@ -76,6 +77,7 @@ export class Connection {
   }
 
   public subscribe(chain: Types.ChainLabel) {
+    setHashData({ chain });
     this.socket.send(`subscribe:${chain}`);
   }
 
@@ -317,8 +319,6 @@ export class Connection {
     }
 
     if (resubscribeTo) {
-      this.resubscribeTo = null;
-
       if (chains.has(resubscribeTo)) {
         this.subscribe(resubscribeTo);
         return;

packages/frontend/src/components/Chain/Chain.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Types, Maybe } from '@dotstats/common';
 import { State as AppState, Node as NodeState } from '../../state';
-import { formatNumber, secondsWithPrecision, viewport } from '../../utils';
+import { formatNumber, secondsWithPrecision, viewport, getHashData } from '../../utils';
 import { Tab, Filter } from './';
 import { Tile, Node, Ago, Setting } from '../';
 import { PersistentObject, PersistentSet } from '../../persist';
@@ -49,11 +49,11 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
 
     let display: Chain.Display = 'list';
 
-    switch (window.location.hash) {
-      case '#map':
+    switch (getHashData().tab) {
+      case 'map':
         display = 'map';
         break;
-      case '#settings':
+      case 'settings':
         display = 'settings';
         break;
     }
@@ -93,9 +93,9 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
           <Tile icon={blockTimeIcon} title="Average Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
           <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
           <div className="Chain-tabs">
-            <Tab icon={listIcon} label="List" display="list" hash="" current={currentTab} setDisplay={this.setDisplay} />
-            <Tab icon={worldIcon} label="Map" display="map" hash="#map" current={currentTab} setDisplay={this.setDisplay} />
-            <Tab icon={settingsIcon} label="Settings" display="settings" hash="#settings" current={currentTab} setDisplay={this.setDisplay} />
+            <Tab icon={listIcon} label="List" display="list" tab="" current={currentTab} setDisplay={this.setDisplay} />
+            <Tab icon={worldIcon} label="Map" display="map" tab="map" current={currentTab} setDisplay={this.setDisplay} />
+            <Tab icon={settingsIcon} label="Settings" display="settings" tab="settings" current={currentTab} setDisplay={this.setDisplay} />
           </div>
         </div>
         <div className="Chain-content-container">

packages/frontend/src/components/Chain/Tab.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Chain } from './';
 import { Icon } from '../';
+import { setHashData } from '../../utils';
 
 import './Tab.css';
 
@@ -10,7 +11,7 @@ export namespace Tab {
     icon: string;
     display: Chain.Display;
     current: string;
-    hash: string;
+    tab: string;
     setDisplay: (display: Chain.Display) => void;
   }
 }
@@ -29,8 +30,8 @@ export class Tab extends React.Component<Tab.Props, {}> {
   }
 
   private onClick = () => {
-    const { hash, display, setDisplay } = this.props;
-    window.location.hash = hash;
+    const { tab, display, setDisplay } = this.props;
+    setHashData({ tab });
     setDisplay(display);
   }
 }

packages/frontend/src/utils.ts

@@ -57,3 +57,29 @@ export function secondsWithPrecision(num: number): string {
     default: return intString + 's';
   }
 }
+
+export interface HashData {
+  tab?: string;
+  chain?: Types.ChainLabel;
+};
+
+export function getHashData(): HashData {
+  const { hash } = window.location;
+
+  if (hash[0] !== '#') {
+    return {};
+  }
+
+  const [tab, rawChain] = hash.substr(1).split('/');
+  const chain = decodeURIComponent(rawChain) as Types.ChainLabel;
+
+  return { tab, chain };
+}
+
+export function setHashData(val: HashData) {
+  const update = Object.assign(getHashData(), val);
+
+  const { tab = '', chain = '' } = update;
+
+  window.location.hash = `#${tab}/${encodeURIComponent(chain)}`;
+}