chore(connections): sort by id to maintain a more stable ordering

1 files changed, 20 insertions, 2 deletions

diff --git a/src/components/ConnectionTable.js b/src/components/ConnectionTable.js
index 2e7ba7f..9a962b1 100644
--- a/src/components/ConnectionTable.js
+++ b/src/components/ConnectionTable.js
@@ -8,6 +8,7 @@ import { useTable, useSortBy } from 'react-table';
 import s from './ConnectionTable.module.css';
 
 const columns = [
+  { accessor: 'id', show: false },
   { Header: 'Host', accessor: 'host' },
   { Header: 'Download', accessor: 'download' },
   { Header: 'Upload', accessor: 'upload' },
@@ -34,13 +35,29 @@ function renderCell(cell, now) {
   }
 }
 
+const sortById = { id: 'id', desc: true };
+// const sortByStart = { id: 'start', desc: true };
 const tableState = {
   sortBy: [
     // maintain a more stable order
-    { id: 'start', desc: true }
+    sortById
   ]
 };
 
+function tableReducer(newState, action, _prevState) {
+  const { type } = action;
+  if (type === 'toggleSortBy') {
+    const { sortBy = [] } = newState;
+    if (sortBy.length === 0) {
+      return {
+        ...newState,
+        sortBy: [sortById]
+      };
+    }
+  }
+  return newState;
+}
+
 function Table({ data }) {
   const now = new Date();
   const {
@@ -53,7 +70,8 @@ function Table({ data }) {
     {
       columns,
       data,
-      initialState: tableState
+      initialState: tableState,
+      reducer: tableReducer
     },
     useSortBy
   );