src/ws/connection.js

+import hex from "crypto-js/enc-hex";
+import hmacSHA1 from "crypto-js/hmac-sha1";
 import WaitQueue from "wait-queue";
 
+import { AuthStore, GlobalInfoStore } from "stores";
+
 import { handlers } from "./handlers";
 
 function Worker() {
@@ -42,23 +46,47 @@ function Worker() {
   };
 }
 
-export const connect = ({ onConnect }) => {
+const buildKeepalivePayload = async () => {
+  const { user } = AuthStore.getRawState();
+  const payload = user && user.id ? user.id.toString() : "";
+  const signature =
+    user && !!user.secret ? hmacSHA1(payload, user.secret) : null;
+
+  return {
+    event: "KEEPALIVE",
+    payload,
+    sig: signature ? hex.stringify(signature) : null,
+  };
+};
+
+export const connect = ({ url, onConnect }) => {
   return new Promise((resolve, reject) => {
     const worker = Worker();
 
-    const ws = new WebSocket(process.env.REACT_APP_WS_BASE_URL);
+    GlobalInfoStore.update((state) => {
+      state.connectionState = "connecting";
+    });
+    const ws = new WebSocket(url);
+
     let keepAliveInterval;
     console.log("[ws] Connecting ...");
 
     ws.onopen = () => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "connected";
+      });
       console.log("[ws] Connected.");
 
-      keepAliveInterval = setInterval(() => {
-        ws.send("KEEPALIVE");
+      const sendKeepalive = async () => {
+        ws.send(JSON.stringify(await buildKeepalivePayload()));
         console.debug("[ws] Sending keepalive.");
-      }, 30 * 1000);
+      };
 
-      const self = { ws, worker };
+      sendKeepalive();
+
+      keepAliveInterval = setInterval(sendKeepalive, 15 * 1000);
+
+      const self = { ws, worker, sendKeepalive };
 
       if (onConnect) {
         return onConnect(self).then(() => resolve(self));
@@ -70,20 +98,23 @@ export const connect = ({ onConnect }) => {
     ws.onmessage = worker.queue.push.bind(worker.queue);
 
     ws.onclose = (event) => {
+      GlobalInfoStore.update((state) => {
+        state.connectionState = "offline";
+      });
       console.log(
         "[ws] Socket is closed. Reconnect will be attempted in 1 second.",
-        event.reason
+        event.reason,
       );
 
       clearInterval(keepAliveInterval);
-      setTimeout(() => connect({ onConnect }), 1000);
+      setTimeout(() => connect({ url, onConnect }), 1000);
     };
 
     ws.onerror = (err) => {
       console.error(
         "[ws] Socket encountered error: ",
         err.message,
-        "Closing socket"
+        "Closing socket",
       );
       ws.close();
       reject(err);

src/ws/handlers/announcements.js

 import has from "lodash/has";
 
+import { markdownConverter } from "markdown";
 import { AnnouncementStore } from "stores";
 import { parseRawAnnouncement, syncAnnoucementItemIds } from "utils";
 
@@ -8,6 +9,12 @@ export const handleAnnouncementChanged = (payload) => {
     if (state.items[payload.id]) {
       if (has(payload, "content")) {
         state.items[payload.id].content = payload.content;
+        state.items[payload.id].contentHtml = markdownConverter.makeHtml(
+          payload.content,
+        );
+      }
+      if (has(payload, "link")) {
+        state.items[payload.id].link = payload.link;
       }
     }
   });

src/ws/handlers/global.js

+import isNumber from "lodash/isNumber";
+
+import { GlobalInfoStore } from "stores";
+
+export const handleOnlineUsersUpdated = (payload) => {
+  GlobalInfoStore.update((state) => {
+    state.onlineUsers = isNumber(payload.all) ? payload.all : 0;
+    state.onlineMembers = isNumber(payload.members) ? payload.members : 0;
+    state.groupSizeHalf = isNumber(payload.group_size_half)
+      ? payload.group_size_half
+      : null;
+  });
+};

src/ws/handlers/index.js

@@ -3,12 +3,19 @@ import {
   handleAnnouncementCreated,
   handleAnnouncementDeleted,
 } from "./announcements";
+import { handleOnlineUsersUpdated } from "./global";
 import {
   handlePostChanged,
   handlePostCreated,
+  handlePostDeleted,
   handlePostRanked,
 } from "./posts";
 import { handleProgramEntryChanged } from "./program";
+import {
+  handleUserBanned,
+  handleUserStatus,
+  handleUserUnbanned,
+} from "./users";
 
 export const handlers = {
   announcement_changed: handleAnnouncementChanged,
@@ -17,5 +24,10 @@ export const handlers = {
   post_ranked: handlePostRanked,
   post_changed: handlePostChanged,
   post_created: handlePostCreated,
+  post_deleted: handlePostDeleted,
   program_entry_changed: handleProgramEntryChanged,
+  user_banned: handleUserBanned,
+  user_unbanned: handleUserUnbanned,
+  user_status: handleUserStatus,
+  online_users_updated: handleOnlineUsersUpdated,
 };

src/ws/handlers/posts.js

 import has from "lodash/has";
+import throttle from "lodash/throttle";
 
+import { markdownConverter } from "markdown";
 import { PostStore } from "stores";
 import { parseRawPost, postsStateMapping, updateWindowPosts } from "utils";
 
+/**
+ * Re-apply sorting by rank but no more than once every 3 seconds.
+ */
+const sortOnRankThrottled = throttle(() => {
+  PostStore.update((state) => {
+    if (state.filters.sort === "byScore") {
+      updateWindowPosts(state);
+    }
+  });
+}, 5000);
+
 export const handlePostRanked = (payload) => {
   PostStore.update((state) => {
     if (state.items[payload.id]) {
@@ -11,12 +24,11 @@ export const handlePostRanked = (payload) => {
       state.items[payload.id].ranking.score =
         state.items[payload.id].ranking.likes -
         state.items[payload.id].ranking.dislikes;
-
-      if (state.filters.sort === "byScore") {
-        updateWindowPosts(state);
-      }
     }
   });
+
+  // Run sorting in a throttled manner.
+  sortOnRankThrottled();
 };
 
 export const handlePostChanged = (payload) => {
@@ -24,15 +36,20 @@ export const handlePostChanged = (payload) => {
     if (state.items[payload.id]) {
       if (has(payload, "content")) {
         state.items[payload.id].content = payload.content;
+        state.items[payload.id].contentHtml = markdownConverter.makeHtml(
+          payload.content,
+        );
         state.items[payload.id].modified = true;
       }
 
       if (has(payload, "state")) {
         state.items[payload.id].state = postsStateMapping[payload.state];
+        updateWindowPosts(state);
       }
 
       if (has(payload, "is_archived")) {
         state.items[payload.id].archived = payload.is_archived;
+        updateWindowPosts(state);
       }
     }
   });
@@ -45,3 +62,10 @@ export const handlePostCreated = (payload) => {
     updateWindowPosts(state);
   });
 };
+
+export const handlePostDeleted = (payload) => {
+  PostStore.update((state) => {
+    delete state.items[payload.id];
+    updateWindowPosts(state);
+  });
+};

src/ws/handlers/program.js

 import has from "lodash/has";
 
+import { loadPosts } from "actions/posts";
+import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
 export const handleProgramEntryChanged = (payload) => {
   ProgramStore.update((state) => {
-    if (state.items[payload.id]) {
+    const entry = state.items[payload.id];
+
+    if (entry) {
       if (has(payload, "discussion_opened")) {
         state.items[payload.id].discussionOpened = payload.discussion_opened;
       }
       if (has(payload, "title")) {
         state.items[payload.id].title = payload.title;
+        state.items[payload.id].fullTitle =
+          entry.number !== "" ? `${entry.number}. ${entry.title}` : entry.title;
+      }
+      if (has(payload, "description")) {
+        state.items[payload.id].description = payload.description;
+        state.items[payload.id].htmlContent = markdownConverter.makeHtml(
+          payload.description,
+        );
+      }
+
+      if (has(payload, "is_live") && payload.is_live) {
+        state.currentId = payload.id;
       }
     }
   });
+
+  if (has(payload, "is_live") && payload.is_live) {
+    // Re-load posts - these are bound directly to the program schedule entry.
+    loadPosts.run({}, { respectCache: false });
+  }
 };

src/ws/handlers/users.js

+import has from "lodash/has";
+
+import { AuthStore, PostStore } from "stores";
+
+export const handleUserBanned = (payload) => {
+  AuthStore.update((state) => {
+    if (state.user && state.user.id && payload.id === state.user.id) {
+      state.user.isBanned = true;
+    }
+  });
+
+  PostStore.update((state) => {
+    Object.keys(state.items).forEach((key) => {
+      if (state.items[key].author.id === payload.id) {
+        state.items[key].author.isBanned = true;
+      }
+    });
+  });
+};
+
+export const handleUserUnbanned = (payload) => {
+  AuthStore.update((state) => {
+    if (state.user && state.user.id && payload.id === state.user.id) {
+      state.user.isBanned = false;
+    }
+  });
+
+  PostStore.update((state) => {
+    Object.keys(state.items).forEach((key) => {
+      if (state.items[key].author.id === payload.id) {
+        state.items[key].author.isBanned = false;
+      }
+    });
+  });
+};
+
+export const handleUserStatus = (payload) => {
+  AuthStore.update((state) => {
+    if (has(payload, "jitsi_allowed")) {
+      state.showJitsiInvitePopup = payload.jitsi_allowed;
+    }
+  });
+};

typings/cf2021.d.ts

 declare namespace CF2021 {
+  export interface GlobalInfoStorePayload {
+    connectionState: "connected" | "offline" | "connecting";
+    onlineMembers: number;
+    onlineUsers: number;
+    websocketUrl: string;
+    groupSizeHalf?: number;
+    streamUrl?: string;
+    protocolUrl?: string;
+    protocol?: string;
+  }
+
   interface ProgramScheduleEntry {
     id: number;
     number: string;
     title: string;
+    fullTitle: string;
     proposer: string;
+    speakers: string;
     discussionOpened: boolean;
     description?: string;
+    htmlContent?: string;
     expectedStartAt: Date;
     expectedFinishAt?: Date;
   }
@@ -35,7 +49,15 @@ declare namespace CF2021 {
       username: string;
       role: "regp" | "member" | "chairman";
       accessToken: string;
+
+      // These are optional as they're loaded separately.
+      id?: number;
+      isBanned?: boolean;
+      group?: string;
+      secret?: string;
     };
+    showJitsiInvitePopup: boolean;
+    jitsiPopupDimissed: boolean;
   }
 
   export type AuthStorePayload =
@@ -55,6 +77,7 @@ declare namespace CF2021 {
     datetime: Date;
     type: AnnouncementType;
     content: string;
+    contentHtml: string;
     link?: string;
     relatedPostId: string;
     seen: boolean;
@@ -77,9 +100,11 @@ declare namespace CF2021 {
       name: string;
       username: string;
       group: string;
+      isBanned: boolean;
     };
     type: PostType;
     content: string;
+    contentHtml: string;
     ranking: {
       score: number;
       likes: number;
@@ -124,6 +149,7 @@ declare namespace CF2021 {
     flags: "all" | "active" | "archived";
     sort: "byDate" | "byScore";
     type: "all" | "proposalsOnly" | "discussionOnly";
+    showPendingProposals: boolean;
   }
 
   export interface PostStorePayload {
@@ -132,8 +158,6 @@ declare namespace CF2021 {
     window: {
       items: string[];
       itemCount: number;
-      page: number;
-      perPage: number;
     };
     filters: PostStoreFilters;
   }