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 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.
@@ -27,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);
   }
@@ -40,6 +56,152 @@ 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",
+  [-1]: "dislike",
+};
+
+export const postsTypeMapping = {
+  0: "procedure-proposal",
+  1: "post",
+};
+
+export const postsTypeMappingRev = {
+  post: 1,
+  "procedure-proposal": 0,
+};
+
+export const postsStateMapping = {
+  0: "pending",
+  1: "announced",
+  2: "accepted",
+  3: "rejected",
+  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.
+ *
+ * @param {any} rawPost
+ * @returns {CF2021.Post}
+ */
+export const parseRawPost = (rawPost) => {
+  const post = {
+    ...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,
+      likes: rawPost.ranking.likes,
+      score: rawPost.ranking.score,
+      myVote: postsMyVoteMapping[rawPost.ranking.my_vote],
+    },
+    type: postsTypeMapping[rawPost.type],
+    modified: Boolean(rawPost.is_changed),
+    archived: Boolean(rawPost.is_archived),
+    hidden: false,
+    seen: isSeen(seenPostsLSKey, rawPost.id),
+  };
+
+  if (post.type === "procedure-proposal") {
+    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 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() {
+  const queue = new WaitQueue();
+
+  const doLoop = async () => {
+    const event = await queue.shift();
+    messageRouter(event);
+    setTimeout(doLoop);
+  };
+
+  const messageRouter = (event) => {
+    console.debug("[ws][worker] New message", event.data);
+
+    try {
+      const data = JSON.parse(event.data);
+
+      if (!data.event) {
+        return console.error("[ws][worker] Missing `event` field");
+      }
+
+      const handlerFn = handlers[data.event];
+
+      if (!handlerFn) {
+        return console.warn(`[ws][worker] Can't handle event '${data.event}'`);
+      }
+
+      handlerFn(data.payload || {});
+    } catch (err) {
+      console.error("[ws][worker] Could not parse message.", err);
+    }
+  };
+
+  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 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.");
+
+      const sendKeepalive = async () => {
+        ws.send(JSON.stringify(await buildKeepalivePayload()));
+        console.debug("[ws] Sending keepalive.");
+      };
+
+      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,
+      );
+
+      clearInterval(keepAliveInterval);
+      setTimeout(() => connect({ url, onConnect }), 1000);
+    };
+
+    ws.onerror = (err) => {
+      console.error(
+        "[ws] Socket encountered error: ",
+        err.message,
+        "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

+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, 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]) {
+      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;
+    }
+  });
+
+  // Run sorting in a throttled manner.
+  sortOnRankThrottled();
+};
+
+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 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,31 +73,38 @@ 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";
 
   export interface AbstractPost {
-        id: string;
+    id: number;
     datetime: Date;
     author: {
       id: number;
       name: string;
+      username: string;
       group: string;
+      isBanned: boolean;
     };
     type: PostType;
     content: string;
+    contentHtml: string;
     ranking: {
       score: number;
       likes: number;
@@ -87,6 +117,7 @@ declare namespace CF2021 {
       datetime: Date;
       originator: "self" | "chairman";
     }[];
+    modified: boolean;
     archived: boolean;
     hidden: boolean;
     seen: boolean;
@@ -96,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;
@@ -116,6 +149,7 @@ declare namespace CF2021 {
     flags: "all" | "active" | "archived";
     sort: "byDate" | "byScore";
     type: "all" | "proposalsOnly" | "discussionOnly";
+    showPendingProposals: boolean;
   }
 
   export interface PostStorePayload {
@@ -124,8 +158,6 @@ declare namespace CF2021 {
     window: {
       items: string[];
       itemCount: number;
-          page: number;
-          perPage: number;
     };
     filters: PostStoreFilters;
   }