Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • cf2023-euro
  • cf2023-offline
  • cf2024
  • cf2025
  • main
5 results

Target

Select target project
  • to/cf-online-ui
  • vpfafrin/cf2021
2 results
Select Git revision
  • master
1 result
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 983 additions and 428 deletions
src/pages/Program.jsx
View file @ 9f9e00fc
import React from "react";
import { Helmet } from "react-helmet-async";
import { Link } from "react-router-dom";
import { format } from "date-fns";
import { activateProgramPoint } from "actions/program";
import Button from "components/Button";
import Chip from "components/Chip";
import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks";
import { AuthStore, ProgramStore } from "stores";
const Schedule = () => {
return <>Schedule</>;
const { isAuthenticated, user } = AuthStore.useState();
const { currentId, scheduleIds, items } = ProgramStore.useState();
const [
entryToActivate,
setEntryToActivate,
onActivateConfirm,
onActivateCancel,
] = useItemActionConfirm(activateProgramPoint);
const [activating, activationError] = useActionState(
activateProgramPoint,
entryToActivate
);
return (
<>
<Helmet>
<title>Program zasedání | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Program zasedání | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
<div class="my-4">
Program zde neobsahuje z technických důvodů všechny podrobnosti. Kompletní program naleznete na <a href="https://cf2024.pirati.cz/program">webu</a>.
</div>
<div className="flex flex-col">
{scheduleIds.map((id) => {
const isCurrent = id === currentId;
const entry = items[id];
const htmlContent = entry.htmlContent
? {
__html: entry.htmlContent,
}
: null;
return (
<div
className="flex flex-col md:flex-row my-4 duration-300 text-black"
key={entry.id}
>
<div className="w-28 md:text-right">
{isCurrent && (
<Chip condensed className="mt-2 mr-2" color="red-600">
Právě probíhá
</Chip>
)}
</div>
<div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8">
<p className="head-allcaps-2xs md:head-heavy-base">
{format(entry.expectedStartAt, "H:mm")}
</p>
<p className="ml-auto md:ml-0 head-allcaps-2xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
{format(entry.expectedStartAt, "d. M. Y")}
</p>
</div>
<div className="flex-grow w-full">
<h2 className="head-heavy-xs md:head-heavy-base mb-2">
{isCurrent && <Link to="/">{entry.fullTitle}</Link>}
{!isCurrent && entry.fullTitle}
</h2>
<div className="leading-snug">
<div className="space-x-2">
<strong>Navrhovatel:</strong>
<span>{entry.proposer}</span>
</div>
{entry.speakers && (
<div className="space-x-2">
<strong>Řečníci:</strong>
<span>{entry.speakers}</span>
</div>
)}
</div>
{htmlContent && (
<div
className="mt-2 leading-snug max-w-3xl content-block"
dangerouslySetInnerHTML={htmlContent}
/>
)}
{isAuthenticated &&
user.role === "chairman" &&
entry.id !== currentId && (
<div className="mt-4">
<Button
onClick={() => setEntryToActivate(entry)}
color="grey-125"
className="text-xs"
fullwidth
>
Aktivovat tento bod programu
</Button>
</div>
)}
</div>
</div>
);
})}
</div>
<ModalConfirm
isOpen={!!entryToActivate}
onConfirm={onActivateConfirm}
onCancel={onActivateCancel}
confirming={activating}
error={activationError}
title="Aktivovat bod programu?"
yesActionLabel="Aktivovat"
>
Pogramovaný bod{" "}
<strong>{entryToActivate && entryToActivate.title}</strong> bude
aktivován. Chcete pokračovat?
</ModalConfirm>
</article>
</>
);
};
export default Schedule;
src/pages/Protocol.jsx 0 → 100644
View file @ 9f9e00fc
import React, { useCallback, useState } from "react";
import { Helmet } from "react-helmet-async";
import useInterval from "@rooks/use-interval";
import { loadProtocol } from "actions/global-info";
import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage";
import { useActionState } from "hooks";
import { GlobalInfoStore } from "stores";
const Protocol = () => {
const { protocolUrl, protocol } = GlobalInfoStore.useState();
const [protocolLoading, protocolLoadError] = useActionState(loadProtocol);
const [progressPercent, setProgressPercent] = useState(0);
const [paused, setPaused] = useState(false);
const forceLoad = useCallback(async () => {
try {
setPaused(true);
setProgressPercent(1);
await loadProtocol.run();
} finally {
setPaused(false);
}
}, [setPaused, setProgressPercent]);
const tick = useCallback(async () => {
if (paused) {
return;
}
if (progressPercent % 100 === 0) {
forceLoad();
} else {
setProgressPercent(progressPercent + 1);
}
}, [forceLoad, paused, progressPercent, setProgressPercent]);
useInterval(tick, 100, true);
const htmlContent = protocol
? {
__html: protocol,
}
: null;
const progressStyle = {
position: "absolute",
width: `${progressPercent}%`,
height: "100%",
left: "0",
background:
"linear-gradient(142deg, rgba(2,0,36,1) 0%, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%)",
opacity: "0.4",
};
return (
<>
<Helmet>
<title>Zápis ze zasedání | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Zápis ze zasedání | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Zápis z jednání</h1>
<div className="flex items-start">
<div className="lg:w-2/3">
{!protocolUrl && (
<ErrorMessage>Zápis momentálně není k dispozici.</ErrorMessage>
)}
{protocolLoadError && (
<ErrorMessage>
Při stahování záznamu z jednání došlo k problému:{" "}
{protocolLoadError.toString()}
</ErrorMessage>
)}
{protocolUrl && <></>}
{htmlContent && (
<div
className="leading-tight text-sm lg:text-base content-block"
dangerouslySetInnerHTML={htmlContent}
></div>
)}
</div>
<div className="hidden lg:block card elevation-10 w-1/3">
<div className="lg:card__body content-block">
<h2>Jak to funguje?</h2>
<p>
Zápis se aktualizuje automaticky každých 10 sekund. Pokud chceš
aktualizaci vynutit ručně, můžeš využít tlačítko níže.
</p>
<Button
icon="ico--refresh"
loading={protocolLoading}
className="btn--fullwidth"
onClick={forceLoad}
color="black"
bodyProps={{
style: {
position: "relative",
},
}}
>
<span style={progressStyle}></span>
<span style={{ position: "relative" }}>
{protocolLoading ? "Aktualizace..." : "Aktualizovat"}
</span>
</Button>
</div>
</div>
</div>
</article>
</>
);
};
export default Protocol;
src/serviceWorker.js
View file @ 9f9e00fc
......@@ -16,8 +16,8 @@ const isLocalhost = Boolean(
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
),
);
export function register(config) {
......@@ -43,7 +43,7 @@ export function register(config) {
navigator.serviceWorker.ready.then(() => {
console.log(
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://bit.ly/CRA-PWA"
"worker. To learn more, visit https://bit.ly/CRA-PWA",
);
});
} else {
......@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
// content until all client tabs are closed.
console.log(
"New content is available and will be used when all " +
"tabs for this page are closed. See https://bit.ly/CRA-PWA."
"tabs for this page are closed. See https://bit.ly/CRA-PWA.",
);
// Execute callback
......@@ -123,7 +123,7 @@ function checkValidServiceWorker(swUrl, config) {
})
.catch(() => {
console.log(
"No internet connection found. App is running in offline mode."
"No internet connection found. App is running in offline mode.",
);
});
}
......
src/stores.js
View file @ 9f9e00fc
import keyBy from "lodash/keyBy";
import memoize from "lodash/memoize";
import property from "lodash/property";
import { Store } from "pullstate";
import { filterPosts } from "utils";
/** @type {CF2021.GlobalInfoStorePayload} */
const globalInfoStoreInitial = {
connectionState: "connecting",
onlineMembers: 0,
onlineUsers: 0,
groupSizeHalf: null,
websocketUrl: null,
streamUrl: null,
protocolUrl: null,
protocol: null,
};
export const GlobalInfoStore = new Store(globalInfoStoreInitial);
/** @type {CF2021.AuthStorePayload} */
const authStoreInitial = {
isAuthenticated: false,
groupMappings: [],
showJitsiInvitePopup: false,
jitsiPopupDismissed: false,
};
export const AuthStore = new Store(authStoreInitial);
/** @type {CF2021.AnnouncementStorePayload} */
const announcementStoreInitial = {
items: [
{
id: "1",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: false,
type: "rejected-procedure-proposal",
},
{
id: "2",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: false,
type: "accepted-procedure-proposal",
},
{
id: "3",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: true,
type: "suggested-procedure-proposal",
},
{
id: "4",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: true,
type: "voting",
},
{
id: "5",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: true,
type: "announcement",
},
{
id: "6",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
seen: true,
type: "user-ban",
},
],
/** @type {CF2021.ProgramStorePayload} */
const programStoreInitial = {
items: {},
currentId: undefined,
scheduleIds: [],
};
export const AnnouncementStore = new Store(announcementStoreInitial);
const allPosts = [
{
id: "1",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "cf",
},
ranking: {
likes: 0,
dislikes: 0,
score: 0,
myVote: "none",
},
seen: false,
archived: false,
type: "post",
},
{
id: "2",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "cf",
},
ranking: {
likes: 1,
dislikes: 0,
score: 1,
myVote: "none",
},
seen: false,
archived: false,
type: "post",
},
{
id: "3",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "cf",
},
ranking: {
likes: 5,
dislikes: 5,
score: 0,
myVote: "none",
},
seen: true,
archived: false,
type: "post",
},
{
id: "4",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 0,
dislikes: 10,
score: -10,
myVote: "none",
},
seen: true,
archived: false,
type: "post",
},
{
id: "5",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 1,
dislikes: 1,
score: 0,
myVote: "none",
},
seen: true,
archived: false,
type: "post",
},
{
id: "6",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 5,
dislikes: 3,
score: 2,
myVote: "none",
},
seen: true,
archived: true,
type: "post",
},
{
id: "7",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 5,
dislikes: 8,
score: -3,
myVote: "none",
},
seen: true,
archived: true,
type: "procedure-proposal",
state: "pending",
},
{
id: "8",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 2,
dislikes: 1,
score: 1,
myVote: "like",
},
seen: true,
archived: false,
type: "procedure-proposal",
state: "announced",
historyLog: [
{
attribute: "content",
datetime: new Date(),
newValue: "Lemme know",
originator: "chairman",
},
],
},
{
id: "9",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 5,
dislikes: 0,
score: 5,
myVote: "dislike",
},
seen: true,
archived: false,
type: "procedure-proposal",
state: "accepted",
},
{
id: "10",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 5,
dislikes: 8,
score: -3,
myVote: "none",
},
seen: true,
archived: false,
type: "procedure-proposal",
state: "rejected",
},
{
id: "11",
content:
"Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
datetime: new Date(),
author: {
name: "John Doe",
group: "KS Pardubický kraj",
},
ranking: {
likes: 10,
dislikes: 1,
score: 9,
myVote: "none",
},
seen: true,
archived: true,
type: "procedure-proposal",
state: "rejected-by-chairman",
},
];
export const ProgramStore = new Store(programStoreInitial);
const initialPostFilters = {
flags: "all",
sort: "byDate",
type: "all",
/** @type {CF2021.AnnouncementStorePayload} */
const announcementStoreInitial = {
items: {},
itemIds: [],
};
const filteredPosts = filterPosts(initialPostFilters, allPosts);
export const AnnouncementStore = new Store(announcementStoreInitial);
/** @type {CF2021.PostStorePayload} */
const postStoreInitial = {
items: keyBy(allPosts, property("id")),
itemCount: allPosts.length,
items: {},
itemCount: 0,
window: {
items: filteredPosts.map(property("id")),
itemCount: filteredPosts.length,
page: 1,
perPage: 5,
items: [],
itemCount: 0,
},
filters: {
flags: "active",
sort: "byScore",
type: "all",
showPendingProposals: false,
},
filters: initialPostFilters,
};
export const PostStore = new Store(postStoreInitial);
......@@ -321,7 +63,7 @@ export const getGroupByCode = memoize(
(groupMappings, groupCode) => {
return groupMappings.find((gm) => gm.code === groupCode);
},
(groupMappings, groupCode) => [groupMappings, groupCode]
(groupMappings, groupCode) => [groupMappings, groupCode],
);
export const getGroupsByCode = memoize((groupMappings, groupCodes) => {
......
src/utils.js
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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 0 → 100644
View file @ 9f9e00fc
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
View file @ 9f9e00fc
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: string;
id: number;
number: string;
title: string;
fullTitle: string;
proposer: string;
speakers: string;
discussionOpened: boolean;
description?: string;
htmlContent?: string;
expectedStartAt: Date;
expectedFinishAt: Date;
expectedFinishAt?: Date;
}
export interface ProgramStorePayload {
current: ProgramScheduleEntry & {
discussionOpened: boolean;
}
schedule: ProgramScheduleEntry[];
items: {
[key: number]: ProgramScheduleEntry;
};
currentId?: number;
scheduleIds: number[];
}
interface GroupMapping {
......@@ -21,7 +40,6 @@ declare namespace CF2021 {
export interface AnonymousAuthStorePayload {
isAuthenticated: false;
groupMappings: GroupMapping[];
}
export interface UserAuthStorePayload extends AnonymousAuthStorePayload {
......@@ -29,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 =
......@@ -47,30 +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;
......@@ -83,6 +117,7 @@ declare namespace CF2021 {
datetime: Date;
originator: "self" | "chairman";
}[];
modified: boolean;
archived: boolean;
hidden: boolean;
seen: boolean;
......@@ -92,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;
......@@ -112,6 +149,7 @@ declare namespace CF2021 {
flags: "all" | "active" | "archived";
sort: "byDate" | "byScore";
type: "all" | "proposalsOnly" | "discussionOnly";
showPendingProposals: boolean;
}
export interface PostStorePayload {
......@@ -120,8 +158,6 @@ declare namespace CF2021 {
window: {
items: string[];
itemCount: number;
page: number;
perPage: number;
};
filters: PostStoreFilters;
}
......

Pirátský GitLab - Home of the CopyLeft