Sort all streams, including custom ones, upon render

src/node/data.js

@@ -7,16 +7,6 @@ function filterLive(data) {
   return data.filter(({ status }) => status === 'Live' || status === 'Unknown')
 }
 
-function compareStrings(a, b) {
-  if (a < b) {
-    return -1
-  } else if (b < a) {
-    return 1
-  } else {
-    return 0
-  }
-}
-
 export async function* pollPublicData() {
   const publicDataURL = 'https://woke.net/api/streams.json'
   const refreshInterval = 5 * 1000
@@ -70,7 +60,6 @@ export class StreamIDGenerator {
       }
       stream._id = idMap.get(link)
     }
-    streams.sort((a, b) => compareStrings(a._id, b._id))
     return streams
   }
 }

src/web/control.js

@@ -1,4 +1,5 @@
 import range from 'lodash/range'
+import sortBy from 'lodash/sortBy'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 import { h, Fragment, render } from 'preact'
 import { useEffect, useState, useCallback, useRef } from 'preact/hooks'
@@ -20,6 +21,7 @@ function App({ wsEndpoint }) {
   const [streams, setStreams] = useState([])
   const [customStreams, setCustomStreams] = useState([])
   const [stateIdxMap, setStateIdxMap] = useState(new Map())
+  const allStreams = sortBy([...streams, ...customStreams], ['_id'])
 
   useEffect(() => {
     const ws = new ReconnectingWebSocket(wsEndpoint, [], {
@@ -230,7 +232,7 @@ function App({ wsEndpoint }) {
         </div>
         <div>
           {isConnected
-            ? [...streams, ...customStreams.values()].map((row) => (
+            ? allStreams.map((row) => (
                 <StreamLine id={row._id} row={row} onClickId={handleClickId} />
               ))
             : 'loading...'}