diff --git a/packages/frontend/src/Connection.ts b/packages/frontend/src/Connection.ts index 75fe283..7159dc0 100644 --- a/packages/frontend/src/Connection.ts +++ b/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 = null; - private resubscribeTo: Maybe = null; + private resubscribeTo: Maybe = getHashData().chain; private socket: WebSocket; private state: Readonly; 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; diff --git a/packages/frontend/src/components/Chain/Chain.tsx b/packages/frontend/src/components/Chain/Chain.tsx index 0a9ac5b..b23e959 100644 --- a/packages/frontend/src/components/Chain/Chain.tsx +++ b/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 { 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 { { blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }
- - - + + +
diff --git a/packages/frontend/src/components/Chain/Tab.tsx b/packages/frontend/src/components/Chain/Tab.tsx index 6a8d2e2..ce1e9db 100644 --- a/packages/frontend/src/components/Chain/Tab.tsx +++ b/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 { } private onClick = () => { - const { hash, display, setDisplay } = this.props; - window.location.hash = hash; + const { tab, display, setDisplay } = this.props; + setHashData({ tab }); setDisplay(display); } } diff --git a/packages/frontend/src/utils.ts b/packages/frontend/src/utils.ts index e112053..af28f79 100644 --- a/packages/frontend/src/utils.ts +++ b/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)}`; +}