src/utils.js

+import { parse } from "date-fns";
 import filter from "lodash/filter";
+import pick from "lodash/pick";
 import property from "lodash/property";
 import values from "lodash/values";
-import pick from "lodash/pick";
+import WaitQueue from "wait-queue";
+
+import { markdownConverter } from "markdown";
+
+export const urlRegex =
+  /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+export const seenPostsLSKey = "cf2021_seen_posts";
+export const seenAnnouncementsLSKey = "cf2021_seen_announcements";
 
 /**
  * Filter & sort collection of posts.
@@ -28,6 +37,12 @@ export const filterPosts = (filters, allItems) => {
 
   let filteredItems = filter(allItems, predicate);
 
+  if (!filters.showPendingProposals) {
+    filteredItems = filteredItems.filter(
+      (item) => item.type === "post" || item.state !== "pending",
+    );
+  }
+
   if (filters.sort === "byDate") {
     return filteredItems.sort((a, b) => b.datetime - a.datetime);
   }
@@ -41,10 +56,20 @@ export const filterPosts = (filters, allItems) => {
  */
 export const updateWindowPosts = (state) => {
   state.window.items = filterPosts(state.filters, values(state.items)).map(
-    property("id")
+    property("id"),
   );
 };
 
+/**
+ * Update itemIds from items.
+ * @param {CF2021.AnnouncementStorePayload} state
+ */
+export const syncAnnoucementItemIds = (state) => {
+  state.itemIds = values(state.items)
+    .sort((a, b) => b.datetime - a.datetime)
+    .map((announcement) => announcement.id);
+};
+
 export const postsMyVoteMapping = {
   0: "none",
   1: "like",
@@ -52,13 +77,13 @@ export const postsMyVoteMapping = {
 };
 
 export const postsTypeMapping = {
-  0: "post",
-  1: "procedure-proposal",
+  0: "procedure-proposal",
+  1: "post",
 };
 
 export const postsTypeMappingRev = {
-  post: 0,
-  "procedure-proposal": 1,
+  post: 1,
+  "procedure-proposal": 0,
 };
 
 export const postsStateMapping = {
@@ -69,6 +94,32 @@ export const postsStateMapping = {
   4: "rejected-by-chairman",
 };
 
+export const postsStateMappingRev = {
+  pending: 0,
+  announced: 1,
+  accepted: 2,
+  rejected: 3,
+  "rejected-by-chairman": 4,
+};
+
+export const announcementTypeMapping = {
+  0: "rejected-procedure-proposal",
+  1: "accepted-procedure-proposal",
+  2: "suggested-procedure-proposal",
+  3: "voting",
+  4: "announcement",
+  5: "user-ban",
+};
+
+export const announcementTypeMappingRev = {
+  "rejected-procedure-proposal": 0,
+  "accepted-procedure-proposal": 1,
+  "suggested-procedure-proposal": 2,
+  voting: 3,
+  announcement: 4,
+  "user-ban": 5,
+};
+
 /**
  * Parse single post from the API.
  *
@@ -77,8 +128,13 @@ export const postsStateMapping = {
  */
 export const parseRawPost = (rawPost) => {
   const post = {
-    ...pick(rawPost, ["id", "content", "author"]),
-    datetime: new Date(rawPost.datetime),
+    ...pick(rawPost, ["id", "content"]),
+    author: {
+      ...pick(rawPost.author, ["id", "name", "username", "group"]),
+      isBanned: rawPost.author.is_banned === 1,
+    },
+    contentHtml: markdownConverter.makeHtml(rawPost.content),
+    datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()),
     historyLog: rawPost.history_log,
     ranking: {
       dislikes: rawPost.ranking.dislikes,
@@ -90,12 +146,62 @@ export const parseRawPost = (rawPost) => {
     modified: Boolean(rawPost.is_changed),
     archived: Boolean(rawPost.is_archived),
     hidden: false,
-    seen: false,
+    seen: isSeen(seenPostsLSKey, rawPost.id),
   };
 
   if (post.type === "procedure-proposal") {
-    post.state = postsStateMapping[post.state];
+    post.state = postsStateMapping[rawPost.state];
   }
 
   return post;
 };
+
+/**
+ * Parse single announcement from the API.
+ *
+ * @param {any} rawAnnouncement
+ * @returns {CF2021.Announcement}
+ */
+export const parseRawAnnouncement = (rawAnnouncement) => {
+  const announcement = {
+    ...pick(rawAnnouncement, ["id", "content", "link"]),
+    contentHtml: markdownConverter.makeHtml(rawAnnouncement.content),
+    datetime: parse(
+      rawAnnouncement.datetime,
+      "yyyy-MM-dd HH:mm:ss",
+      new Date(),
+    ),
+    type: announcementTypeMapping[rawAnnouncement.type],
+    seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
+  };
+
+  return announcement;
+};
+
+export const createSeenWriter = (localStorageKey) => {
+  const queue = new WaitQueue();
+
+  const seenWriterWorker = async () => {
+    const id = await queue.shift();
+    const seen = new Set(
+      (localStorage.getItem(localStorageKey) || "").split(","),
+    );
+
+    seen.add(id);
+
+    localStorage.setItem(localStorageKey, Array.from(seen).join(","));
+
+    setTimeout(seenWriterWorker);
+  };
+
+  seenWriterWorker();
+
+  return {
+    markSeen: (id) => queue.push(id),
+  };
+};
+
+export const isSeen = (localStorageKey, id) => {
+  const val = localStorage.getItem(localStorageKey) || "";
+  return val.indexOf(id) !== -1;
+};

src/ws/connection.js

-import { handleRanking } from "./handlers";
+import hex from "crypto-js/enc-hex";
+import hmacSHA1 from "crypto-js/hmac-sha1";
+import WaitQueue from "wait-queue";
 
-const handlerMap = {
-  ranked: handleRanking,
+import { AuthStore, GlobalInfoStore } from "stores";
+
+import { handlers } from "./handlers";
+
+function Worker() {
+  const queue = new WaitQueue();
+
+  const doLoop = async () => {
+    const event = await queue.shift();
+    messageRouter(event);
+    setTimeout(doLoop);
   };
 
   const messageRouter = (event) => {
-  console.debug("[ws] New message", event.data);
+    console.debug("[ws][worker] New message", event.data);
 
     try {
       const data = JSON.parse(event.data);
 
       if (!data.event) {
-      return console.error("[ws] Missing `event` field");
+        return console.error("[ws][worker] Missing `event` field");
       }
 
-    const handlerFn = handlerMap[data.event];
+      const handlerFn = handlers[data.event];
 
       if (!handlerFn) {
-      console.warn(`[ws] Can't handle event '${data.event}'`);
+        return console.warn(`[ws][worker] Can't handle event '${data.event}'`);
       }
 
-    handlerFn(data.payload);
+      handlerFn(data.payload || {});
     } catch (err) {
-    console.error("[ws] Could not parse message as JSON.");
+      console.error("[ws][worker] Could not parse message.", err);
     }
   };
 
-export const connect = () => {
+  return {
+    queue,
+    start: () => {
+      console.debug("[ws][worker] Start processing messages.");
+      doLoop();
+    },
+  };
+}
+
+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 ws = new WebSocket(process.env.REACT_APP_WS_BASE_URL);
-    let keepAlive;
+    const worker = Worker();
+
+    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.");
-      resolve(ws);
 
-      keepAlive = setInterval(() => {
-        ws.send("KEEPALIVE");
+      const sendKeepalive = async () => {
+        ws.send(JSON.stringify(await buildKeepalivePayload()));
         console.debug("[ws] Sending keepalive.");
-      }, 30 * 1000);
       };
 
-    ws.onmessage = messageRouter;
+      sendKeepalive();
+
+      keepAliveInterval = setInterval(sendKeepalive, 15 * 1000);
+
+      const self = { ws, worker, sendKeepalive };
+
+      if (onConnect) {
+        return onConnect(self).then(() => resolve(self));
+      }
+
+      return resolve(self);
+    };
+
+    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(keepAlive);
-      setTimeout(connect, 1000);
+      clearInterval(keepAliveInterval);
+      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";
+
+export const handleAnnouncementChanged = (payload) => {
+  AnnouncementStore.update((state) => {
+    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;
+      }
+    }
+  });
+};
+
+export const handleAnnouncementCreated = (payload) => {
+  AnnouncementStore.update((state) => {
+    state.items[payload.id] = parseRawAnnouncement(payload);
+    syncAnnoucementItemIds(state);
+  });
+};
+
+export const handleAnnouncementDeleted = (payload) => {
+  AnnouncementStore.update((state) => {
+    delete state.items[payload.id];
+    syncAnnoucementItemIds(state);
+  });
+};

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

-export * from "./posts";
+import {
+  handleAnnouncementChanged,
+  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,
+  announcement_created: handleAnnouncementCreated,
+  announcement_deleted: handleAnnouncementDeleted,
+  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, updateWindowPosts } from "utils";
+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 handleRanking = (payload) => {
+export const handlePostRanked = (payload) => {
   PostStore.update((state) => {
+    if (state.items[payload.id]) {
       state.items[payload.id].ranking.likes = payload["ranking_likes"];
       state.items[payload.id].ranking.dislikes = payload["ranking_dislikes"];
       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 handleChanged = (payload) => {
+export const handlePostChanged = (payload) => {
   PostStore.update((state) => {
+    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);
+      }
+    }
   });
 };
 
-export const handleCreated = (payload) => {
+export const handlePostCreated = (payload) => {
   PostStore.update((state) => {
     state.items[payload.id] = parseRawPost(payload);
+    state.itemCount = Object.keys(state.items).length;
+    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) => {
+    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;
   }
 
   export interface ProgramStorePayload {
-        current?: ProgramScheduleEntry & {
-            discussionOpened: boolean;
-        }
-        schedule: ProgramScheduleEntry[];
+    items: {
+      [key: number]: ProgramScheduleEntry;
+    };
+    currentId?: number;
+    scheduleIds: number[];
   }
 
   interface GroupMapping {
@@ -24,7 +40,6 @@ declare namespace CF2021 {
 
   export interface AnonymousAuthStorePayload {
     isAuthenticated: false;
-        groupMappings: GroupMapping[];
   }
 
   export interface UserAuthStorePayload extends AnonymousAuthStorePayload {
@@ -32,9 +47,17 @@ declare namespace CF2021 {
     user: {
       name: string;
       username: string;
-            groups: 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 =
@@ -50,17 +73,21 @@ declare namespace CF2021 {
     | "user-ban";
 
   export interface Announcement {
-        id: string;
+    id: number;
     datetime: Date;
     type: AnnouncementType;
     content: string;
+    contentHtml: string;
     link?: string;
     relatedPostId: string;
     seen: boolean;
   }
 
   export interface AnnouncementStorePayload {
-        items: Announcement[];
+    items: {
+      [key: number]: Announcement;
+    };
+    itemIds: number[];
   }
 
   export type PostType = "post" | "procedure-proposal";
@@ -73,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;
@@ -98,14 +127,16 @@ declare namespace CF2021 {
     type: "post";
   }
 
-    export interface ProposalPost extends AbstractPost {
-        type: "procedure-proposal";
-        state:
+  export type ProposalPostState =
     | "pending"
     | "announced"
     | "accepted"
     | "rejected"
     | "rejected-by-chairman";
+
+  export interface ProposalPost extends AbstractPost {
+    type: "procedure-proposal";
+    state: ProposalPostState;
   }
 
   export type Post = ProposalPost | DiscussionPost;
@@ -118,6 +149,7 @@ declare namespace CF2021 {
     flags: "all" | "active" | "archived";
     sort: "byDate" | "byScore";
     type: "all" | "proposalsOnly" | "discussionOnly";
+    showPendingProposals: boolean;
   }
 
   export interface PostStorePayload {
@@ -126,8 +158,6 @@ declare namespace CF2021 {
     window: {
       items: string[];
       itemCount: number;
-          page: number;
-          perPage: number;
     };
     filters: PostStoreFilters;
   }