Update frontend dependencies (#498)

* update npm packages

* update tsconfig

* remove babelrc, babel presets as well as stable package

* fix svg namespace tag syntax errors

* fix reference error due to namespace and class component having same name

* replace tslint with eslint

* make eslint happier

* update .nvmrc to 14

* update node version to 14 in gh workflow

* fix eslint warnings due to warnings treated as errors on CI (process.env.CI = true)

* pretty fix

* bump node version in Dockerfile

* use createRoot instead of react-dom render

* update browsers list in package.json

frontend/src/App.tsx

@@ -27,23 +27,23 @@ import {
   Node,
   ChainData,
   comparePinnedChains,
+  StateSettings,
 } from './state';
 import { getHashData } from './utils';
-import stable from 'stable';
 
 import './App.css';
 
-export default class App extends React.Component<{}, {}> {
+export default class App extends React.Component {
   private chainsCache: ChainData[] = [];
   // Custom state for finer control over updates
   private readonly appState: Readonly<State>;
   private readonly appUpdate: Update;
-  private readonly settings: PersistentObject<State.Settings>;
+  private readonly settings: PersistentObject<StateSettings>;
   private readonly pins: PersistentSet<Types.NodeName>;
   private readonly sortBy: Persistent<Maybe<number>>;
   private readonly connection: Promise<Connection>;
 
-  constructor(props: {}) {
+  constructor(props: Record<string, unknown>) {
     super(props);
 
     this.settings = new PersistentObject(
@@ -225,8 +225,7 @@ export default class App extends React.Component<{}, {}> {
       return this.chainsCache;
     }
 
-    this.chainsCache = stable.inplace(
-      Array.from(this.appState.chains.values()),
+    this.chainsCache = Array.from(this.appState.chains.values()).sort(
       (a, b) => {
         const pinned = comparePinnedChains(a.genesisHash, b.genesisHash);
 
@@ -241,7 +240,7 @@ export default class App extends React.Component<{}, {}> {
     return this.chainsCache;
   }
 
-  private selectedColumns(settings: State.Settings): Column[] {
+  private selectedColumns(settings: StateSettings): Column[] {
     return Row.columns.filter(
       ({ setting }) => setting == null || settings[setting]
     );