Pin using names (#49 again) (#51)

packages/frontend/src/App.tsx

@@ -10,7 +10,7 @@ import './App.css';
 export default class App extends React.Component<{}, State> {
   public state: State;
   private readonly settings: PersistentObject<State.Settings>;
-  private readonly pins: PersistentSet<Types.NodeId>;
+  private readonly pins: PersistentSet<Types.NodeName>;
   private readonly connection: Promise<Connection>;
 
   constructor(props: {}) {
@@ -34,11 +34,11 @@ export default class App extends React.Component<{}, State> {
       (settings) => this.setState({ settings })
     );
 
-    this.pins = new PersistentSet<Types.NodeId>('pinned', (pins) => {
+    this.pins = new PersistentSet<Types.NodeName>('pinned_names', (pins) => {
       const { nodes } = this.state;
 
       for (const node of nodes.values()) {
-        node.pinned = pins.has(node.id);
+        node.pinned = pins.has(node.nodeDetails[0]);
       }
 
       this.setState({ nodes, pins });

packages/frontend/src/Connection.ts

@@ -8,7 +8,7 @@ const TIMEOUT_BASE = (1000 * 5) as Types.Milliseconds; // 5 seconds
 const TIMEOUT_MAX = (1000 * 60 * 5) as Types.Milliseconds; // 5 minutes
 
 export class Connection {
-  public static async create(pins: PersistentSet<Types.NodeId>, update: Update): Promise<Connection> {
+  public static async create(pins: PersistentSet<Types.NodeName>, update: Update): Promise<Connection> {
     return new Connection(await Connection.socket(), update, pins);
   }
 
@@ -65,9 +65,9 @@ export class Connection {
   private socket: WebSocket;
   private state: Readonly<State>;
   private readonly update: Update;
-  private readonly pins: PersistentSet<Types.NodeId>;
+  private readonly pins: PersistentSet<Types.NodeName>;
 
-  constructor(socket: WebSocket, update: Update, pins: PersistentSet<Types.NodeId>) {
+  constructor(socket: WebSocket, update: Update, pins: PersistentSet<Types.NodeName>) {
     this.socket = socket;
     this.update = update;
     this.pins = pins;
@@ -172,7 +172,7 @@ export class Connection {
 
         case Actions.AddedNode: {
           const [id, nodeDetails, nodeStats, blockDetails, location] = message.payload;
-          const pinned = this.pins.has(id);
+          const pinned = this.pins.has(nodeDetails[0]);
           const node = { pinned, id, nodeDetails, nodeStats, blockDetails, location };
 
           nodes.set(id, node);

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

@@ -25,7 +25,7 @@ export namespace Chain {
   export interface Props {
     appState: Readonly<AppState>;
     settings: PersistentObject<AppState.Settings>;
-    pins: PersistentSet<Types.NodeId>;
+    pins: PersistentSet<Types.NodeName>;
   }
 
   export interface State {

packages/frontend/src/components/Node/Row.tsx

@@ -28,7 +28,7 @@ import './Row.css';
 interface RowProps {
   node: AppState.Node;
   settings: AppState.Settings;
-  pins: PersistentSet<Types.NodeId>;
+  pins: PersistentSet<Types.NodeName>;
 };
 
 interface HeaderProps {
@@ -201,11 +201,12 @@ export default class Row extends React.Component<RowProps, {}> {
 
   public toggle = () => {
     const { pins, node } = this.props;
+    const name = node.nodeDetails[0];
 
     if (node.pinned) {
-      pins.delete(node.id)
+      pins.delete(name)
     } else {
-      pins.add(node.id);
+      pins.add(name);
     }
   }
 }

packages/frontend/src/state.ts

@@ -35,7 +35,7 @@ export interface State {
   chains: Map<Types.ChainLabel, Types.NodeCount>;
   nodes: Map<Types.NodeId, State.Node>;
   settings: Readonly<State.Settings>;
-  pins: Readonly<Set<Types.NodeId>>;
+  pins: Readonly<Set<Types.NodeName>>;
 }
 
 export type Update = <K extends keyof State>(changes: Pick<State, K> | null) => Readonly<State>;