First pass at refresh on every websocket reconnect

Author: reedspool

html.js

@@ -65,9 +65,11 @@ export const Page = ({ body, title, mixpanelToken, myRcUserId }) => html`
   </html>
 `;
 
-export const RootBody = ({ rooms, whoIsInTheHub, personalizations }) => {
+export const RootBody = ({ roomListContent, personalizations, sort }) => {
   let body = "";
-  body += `<main hx-ext="ws" ws-connect="/websocket">`;
+  // Propogate settings back to the websocket connection which are not stored in
+  // a cookie or are otherwise stateless
+  body += `<main hx-ext="ws" ws-connect="/websocket?sort=${escapeHtml(sort ?? "")}" id="main">`;
   body += html`<h1>RCVerse</h1>`;
   body += useSnippet("./html/about.snippet.html");
   body += `<details>`;
@@ -141,10 +143,7 @@ export const RootBody = ({ rooms, whoIsInTheHub, personalizations }) => {
   </script>`;
   body += `</details>`;
   body += html`
-    <dl class="room-list">
-      ${WhoIsInTheHub(whoIsInTheHub)} ${rooms.map(Room).join("\n")}
-    </dl>
-
+    ${roomListContent}
     <hl />
     <p>You're logged in! - <a href="/logout">log out</a></p>
   `;
@@ -154,6 +153,12 @@ export const RootBody = ({ rooms, whoIsInTheHub, personalizations }) => {
   return body;
 };
 
+export const RoomList = ({ whoIsInTheHub, rooms }) => html`
+  <dl class="room-list" id="room-list">
+    ${WhoIsInTheHub(whoIsInTheHub)} ${rooms.map(Room).join("\n")}
+  </dl>
+`;
+
 export const JSInclude = ({ url }) => html`<script src="${url}"></script>`;
 export const CSSInclude = ({ url }) =>
   html`<link rel="stylesheet" type="text/css" href="${url}" />`;

index.js

@@ -23,6 +23,7 @@ import {
   Login,
   Personalization,
   escapeHtml,
+  RoomList,
 } from "./html.js";
 import expressWebsockets from "express-ws";
 import ical from "node-ical";
@@ -634,14 +635,18 @@ app.get(
         title: "RCVerse",
         body: RootBody(
           mungeRootBody({
-            zoomRooms,
-            roomNameToParticipantNames,
-            participantNameToEntity,
-            roomNameToNote,
-            myParticipantName: req.locals.rcPersonName,
-            inTheHubParticipantNames,
-            sortRooms,
-            locationToNowAndNextEvents,
+            roomListContent: RoomList(
+              mungeRoomList({
+                zoomRooms,
+                roomNameToParticipantNames,
+                participantNameToEntity,
+                roomNameToNote,
+                myParticipantName: req.locals.rcPersonName,
+                inTheHubParticipantNames,
+                sortRooms,
+                locationToNowAndNextEvents,
+              }),
+            ),
             personalizations,
           }),
         ),
@@ -683,6 +688,33 @@ app.ws("/websocket", async function (ws, req) {
 
   await getRcUserMiddleware(req, { appendHeader: () => {} }, () => {});
 
+  let { sort } = req.query;
+
+  // `?sort=none` uses the default ordering instead of sort by count
+  // TODO: This logic is repeated from above, move into munge
+  const sortRooms = sort !== "none";
+
+  // TODO: Somehow distinguish between the first connection on page load and
+  //       a reconnection, and don't send this on the first connection
+  // TODO: Somehow distinguish if any messages were actually missed on reconnection
+  //       and only do this if any missed messages
+  // TODO: Add more complicated solution which replays chunks of missed messages
+  //       instead of refreshing so much of the page
+  ws.send(
+    RoomList(
+      mungeRoomList({
+        zoomRooms,
+        roomNameToParticipantNames,
+        participantNameToEntity,
+        roomNameToNote,
+        myParticipantName: req.locals.rcPersonName,
+        inTheHubParticipantNames,
+        sortRooms,
+        locationToNowAndNextEvents,
+      }),
+    ),
+  );
+
   // NOTE: Only use async listeners, so that each listener doesn't block.
   const roomListener = async (participantName, action, roomName) => {
     ws.send(
@@ -1122,7 +1154,14 @@ app.post(
 
 // Data mungers take the craziness of the internal data structures
 // and make them peaceful and clean for the HTML generator
-const mungeRootBody = ({
+const mungeRootBody = ({ roomListContent, personalizations }) => {
+  return {
+    roomListContent,
+    personalizations,
+  };
+};
+
+const mungeRoomList = ({
   zoomRooms,
   roomNameToParticipantNames,
   participantNameToEntity,
@@ -1131,7 +1170,6 @@ const mungeRootBody = ({
   inTheHubParticipantNames,
   sortRooms,
   locationToNowAndNextEvents,
-  personalizations,
 }) => {
   const whoIsInTheHub = mungeWhoIsInTheHub({
     inTheHubParticipantNames,
@@ -1179,7 +1217,6 @@ const mungeRootBody = ({
   return {
     whoIsInTheHub,
     rooms,
-    personalizations,
   };
 };