Allow to pin nodes to top of the list (#48)

* Refactored persistent state a bit
* Allow nodes to be pinned to top

packages/frontend/src/App.tsx

@@ -2,21 +2,21 @@ import * as React from 'react';
 import { Types } from '@dotstats/common';
 import { Chains, Chain, Ago, OfflineIndicator } from './components';
 import { Connection } from './Connection';
-import { Persistent } from './Persistent';
+import { PersistentObject, PersistentSet } from './persist';
 import { State } from './state';
 
 import './App.css';
 
 export default class App extends React.Component<{}, State> {
   public state: State;
-  private connection: Promise<Connection>;
-  private settings: Persistent<State.Settings>;
-  private setSettings: Persistent<State.Settings>['set'];
+  private readonly settings: PersistentObject<State.Settings>;
+  private readonly pins: PersistentSet<Types.NodeId>;
+  private readonly connection: Promise<Connection>;
 
   constructor(props: {}) {
     super(props);
 
-    this.settings = new Persistent(
+    this.settings = new PersistentObject(
       'settings',
       {
         validator: true,
@@ -34,7 +34,15 @@ export default class App extends React.Component<{}, State> {
       (settings) => this.setState({ settings })
     );
 
-    this.setSettings = this.settings.set.bind(this.settings);
+    this.pins = new PersistentSet<Types.NodeId>('pinned', (pins) => {
+      const { nodes } = this.state;
+
+      for (const node of nodes.values()) {
+        node.pinned = pins.has(node.id);
+      }
+
+      this.setState({ nodes, pins });
+    });
 
     this.state = {
       status: 'offline',
@@ -45,10 +53,11 @@ export default class App extends React.Component<{}, State> {
       subscribed: null,
       chains: new Map(),
       nodes: new Map(),
-      settings: this.settings.get(),
+      settings: this.settings.raw(),
+      pins: this.pins.get(),
     };
 
-    this.connection = Connection.create((changes) => {
+    this.connection = Connection.create(this.pins, (changes) => {
       if (changes) {
         this.setState(changes);
       }
@@ -75,7 +84,7 @@ export default class App extends React.Component<{}, State> {
       <div className="App">
         <OfflineIndicator status={status} />
         <Chains chains={chains} subscribed={subscribed} connection={this.connection} />
-        <Chain appState={this.state} setSettings={this.setSettings} />
+        <Chain appState={this.state} settings={this.settings} pins={this.pins} />
       </div>
     );
   }