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 {
+    items: {
+      [key: number]: ProgramScheduleEntry;
+    };
+    currentId?: number;
+    scheduleIds: number[];
+  }
+
+  interface GroupMapping {
+    id: number;
+    code: string;
+    name: string;
+  }
+
+  export interface AnonymousAuthStorePayload {
+    isAuthenticated: false;
+  }
+
+  export interface UserAuthStorePayload extends AnonymousAuthStorePayload {
+    isAuthenticated: true;
+    user: {
+      name: string;
+      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 =
+    | AnonymousAuthStorePayload
+    | UserAuthStorePayload;
+
+  export type AnnouncementType =
+    | "rejected-procedure-proposal"
+    | "accepted-procedure-proposal"
+    | "suggested-procedure-proposal"
+    | "voting"
+    | "announcement"
+    | "user-ban";
+
+  export interface Announcement {
+    id: number;
+    datetime: Date;
+    type: AnnouncementType;
+    content: string;
+    contentHtml: string;
+    link?: string;
+    relatedPostId: string;
+    seen: boolean;
+  }
+
+  export interface AnnouncementStorePayload {
+    items: {
+      [key: number]: Announcement;
+    };
+    itemIds: number[];
+  }
+
+  export type PostType = "post" | "procedure-proposal";
+
+  export interface AbstractPost {
+    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;
+      dislikes: number;
+      myVote: "like" | "dislike" | "none";
+    };
+    historyLog: {
+      attribute: string;
+      newValue: string;
+      datetime: Date;
+      originator: "self" | "chairman";
+    }[];
+    modified: boolean;
+    archived: boolean;
+    hidden: boolean;
+    seen: boolean;
+  }
+
+  export interface DiscussionPost extends AbstractPost {
+    type: "post";
+  }
+
+  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;
+
+  export interface PostStoreItems {
+    [key: string]: Post;
+  }
+
+  export interface PostStoreFilters {
+    flags: "all" | "active" | "archived";
+    sort: "byDate" | "byScore";
+    type: "all" | "proposalsOnly" | "discussionOnly";
+    showPendingProposals: boolean;
+  }
+
+  export interface PostStorePayload {
+    items: PostStoreItems;
+    itemCount: number;
+    window: {
+      items: string[];
+      itemCount: number;
+    };
+    filters: PostStoreFilters;
+  }
+}