Sort by column (#198)

* chore: Split HeaderCell out of Row.tsx

* feat: toggle and highlight selected column header

* feat: Fixed sorting, added stylized headers

* fix: Performance and hardware column sorting

* fix: Rebuild the sorted list when changing the comparator

packages/frontend/src/state.ts

@@ -1,4 +1,5 @@
 import { Types, Maybe, SortedCollection } from '@dotstats/common';
+import { Column } from './components/List';
 
 export const PINNED_CHAIN = 'Kusama CC2';
 
@@ -31,6 +32,9 @@ export class Node {
   public readonly networkId: Maybe<Types.NetworkId>;
   public readonly connectedAt: Types.Timestamp;
 
+  public readonly sortableName: string;
+  public readonly sortableVersion: number;
+
   public stale: boolean;
   public pinned: boolean;
   public peers: Types.PeerCount;
@@ -79,6 +83,11 @@ export class Node {
     this.networkId = networkId;
     this.connectedAt = connectedAt;
 
+    const [major = 0, minor = 0, patch = 0] = (version || '0.0.0').split('.').map((n) => parseInt(n, 10) | 0);
+
+    this.sortableName = name.toLocaleLowerCase();
+    this.sortableVersion = (major * 1000 + minor * 100 + patch) | 0;
+
     this.updateStats(nodeStats);
     this.updateHardware(nodeHardware);
     this.updateBlock(blockDetails);
@@ -203,6 +212,11 @@ export namespace State {
     uptime: boolean;
     networkstate: boolean;
   }
+
+  export interface SortBy {
+    column: string;
+    reverse: boolean;
+  }
 }
 
 export interface State {
@@ -223,6 +237,8 @@ export interface State {
   nodes: SortedCollection<Node>;
   settings: Readonly<State.Settings>;
   pins: Readonly<Set<Types.NodeName>>;
+  sortBy: Readonly<Maybe<number>>;
+  selectedColumns: Column[];
 }
 
 export type Update = <K extends keyof State>(changes: Pick<State, K> | null) => Readonly<State>;