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 566 additions and 234 deletions
src/pages/Home.jsx
View file @ 9f9e00fc
import React, { useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import Joyride, { EVENTS } from "react-joyride";
import ReactPlayer from "react-player/lazy";
import { format } from "date-fns";
import { useKeycloak } from "@react-keycloak/web";
import useWindowSize from "@rooks/use-window-size";
import {
closeDiscussion,
......@@ -8,10 +11,14 @@ import {
openDiscussion,
renameProgramPoint,
} from "actions/program";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import ErrorMessage from "components/ErrorMessage";
import {
AlreadyFinished,
BreakInProgress,
NotYetStarted,
} from "components/home";
import ModalConfirm from "components/modals/ModalConfirm";
import { Beacon, steps } from "components/onboarding";
import ProgramEntryEditModal from "components/program/ProgramEntryEditModal";
import AddAnnouncementForm from "containers/AddAnnouncementForm";
import AddPostForm from "containers/AddPostForm";
......@@ -25,73 +32,7 @@ import { AuthStore, GlobalInfoStore, ProgramStore } from "stores";
import "./Home.css";
const NotYetStarted = ({ startAt }) => (
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
Jejda ...
</div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Jednání ještě nebylo zahájeno :(
</h1>
<p className="text-xl leading-snug mb-8">
<span>Jednání celostátního fóra ještě nezačalo. </span>
{startAt && (
<span>
Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
<strong>{format(startAt, "H:mm")}</strong>.{" "}
</span>
)}
<span>Můžete si ale zobrazit program.</span>
</p>
<Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
Zobrazit program
</Button>
</article>
);
const AlreadyFinished = () => (
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="flex">
<div>
<i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
</div>
<div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Jednání už skočilo!
</h1>
<p className="text-xl leading-snug">
Oficiální program již skončil. Těšíme se na viděnou zase příště.
</p>
</div>
</div>
</article>
);
const BreakInProgress = () => (
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="flex">
<div>
<i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
</div>
<div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Probíhá přestávka ...
</h1>
<p className="text-xl leading-snug mb-8">
Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
zobrazit program.
</p>
<Button
routerTo="/program"
className="md:text-lg lg:text-xl"
hoverActive
>
Zobrazit program
</Button>
</div>
</div>
</article>
);
const tourLSKey = "cf2021__tour";
const Home = () => {
const {
......@@ -103,6 +44,11 @@ const Home = () => {
const { streamUrl } = GlobalInfoStore.useState();
const programEntry = currentId ? programEntries[currentId] : null;
const [showProgramEditModal, setShowProgramEditModal] = useState(false);
const [runJoyRide, setRunJoyride] = useState(false);
// The easiest way to restart the joyride tour is by simply re-rendering the component.
const [joyrideRenderKey, setJoyrideRenderKey] = useState(0);
const { innerWidth } = useWindowSize();
const isLg = innerWidth >= 1024;
const [
showCloseDiscussion,
setShowCloseDiscussion,
......@@ -121,6 +67,17 @@ const Home = () => {
onEndProgramPointConfirm,
onEndProgramPointCancel,
] = useActionConfirm(endProgramPoint, programEntry);
const { keycloak } = useKeycloak();
const login = useCallback(() => {
keycloak.login();
}, [keycloak]);
useEffect(() => {
if (isLg && !localStorage.getItem(tourLSKey)) {
setRunJoyride(true);
}
}, [isLg, setRunJoyride]);
const onEditProgramConfirm = async (newTitle) => {
await renameProgramPoint.run({ programEntry, newTitle });
......@@ -130,6 +87,17 @@ const Home = () => {
setShowProgramEditModal(false);
};
const showTutorial = useCallback(() => {
setRunJoyride(true);
setJoyrideRenderKey(joyrideRenderKey + 1);
}, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
const handleJoyrideCallback = ({ action, index, status, type }) => {
if (type === EVENTS.TOUR_END) {
localStorage.setItem(tourLSKey, "COMPLETED");
}
};
const firstProgramEntry = scheduleIds.length
? programEntries[scheduleIds[0]]
: null;
......@@ -138,11 +106,24 @@ const Home = () => {
? programEntries[scheduleIds[0]]
: null;
if (!programEntry && new Date() < firstProgramEntry.expectedStartAt) {
return <NotYetStarted startAt={firstProgramEntry.expectedStartAt} />;
if (
!programEntry &&
(!firstProgramEntry || new Date() < firstProgramEntry.expectedStartAt)
) {
return (
<NotYetStarted
startAt={
firstProgramEntry ? firstProgramEntry.expectedStartAt : undefined
}
/>
);
}
if (!programEntry && new Date() > lastProgramEntry.expectedStartAt) {
if (
!programEntry &&
lastProgramEntry &&
new Date() > lastProgramEntry.expectedStartAt
) {
return <AlreadyFinished />;
}
......@@ -154,13 +135,92 @@ const Home = () => {
return (
<>
<article className="container container--wide py-8 lg:py-24 cf2021">
<Helmet>
<title>Přímý přenos | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Přímý přenos | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
</Helmet>
<Joyride
beaconComponent={Beacon}
continuous={true}
locale={{
back: "Zpět",
close: "Zavřít",
last: "Poslední",
next: "Další",
skip: "Přeskočit intro",
}}
key={joyrideRenderKey}
run={runJoyRide}
showProgress={true}
showSkipButton={true}
scrollToFirstStep={true}
callback={handleJoyrideCallback}
steps={steps}
styles={{
options: {
arrowColor: "#fff",
backgroundColor: "#fff",
overlayColor: "rgba(255, 255, 255, 0.75)",
primaryColor: "#000",
textColor: "#000",
textAlign: "left",
outline: "none",
zIndex: 1000,
borderRadius: 0,
},
tooltip: {
borderRadius: 0,
},
tooltipContent: {
textAlign: "left",
},
buttonClose: {
borderRadius: 0,
fontSize: "0.875rem",
},
buttonNext: {
borderRadius: 0,
padding: ".75em 2em",
fontSize: "0.875rem",
},
buttonBack: {
color: "#4c4c4c",
fontSize: "0.875rem",
},
buttonSkip: {
color: "#4c4c4c",
fontSize: "0.875rem",
},
}}
/>
<article className="container container--wide py-8 lg:py-24 cf2021 bg-white">
<div className="cf2021__title flex justify-between">
<h1 className="head-alt-base lg:head-alt-lg">
Bod č. {programEntry.number}: {programEntry.title}
{programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
{programEntry.title}
</h1>
<div className="pl-4 pt-1 lg:pt-5">
<div className="space-x-4 inline-flex items-center">
<button
className="ico--question text-grey-200 hidden lg:block hover:text-black text-lg"
aria-label="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
data-tip="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
data-tip-at="top"
onClick={showTutorial}
/>
{displayActions && (
<DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5">
<DropdownMenu right triggerSize="lg" className="z-20">
<DropdownMenuItem
onClick={() => setShowProgramEditModal(true)}
icon="ico--pencil"
......@@ -196,10 +256,16 @@ const Home = () => {
</DropdownMenu>
)}
</div>
<section className="cf2021__video">
</div>
</div>
<section
className="cf2021__video"
// This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
style={{ maxWidth: "calc(100vw - 2rem)" }}
>
<div className="container-padding--zero md:container-padding--auto">
{streamUrl && (
<div className="iframe-container">
<div className="iframe-container joyride-player">
<ReactPlayer
url={streamUrl}
title="Video stream"
......@@ -212,10 +278,12 @@ const Home = () => {
</div>
)}
{!streamUrl && (
<p>
Server neposlal informaci o aktuálním streamu. Vyčkejte na
aktualizaci.
</p>
<div className="px-4 py-16 lg:py-48 flex items-center justify-center bg-grey-400 text-center">
<span className="text-lg lg:text-xl text-grey-200">
<i className="ico--warning mr-2" /> Stream teď není k
dispozici. Vyčkej na aktualizaci.
</span>
</div>
)}
<GlobalStats />
</div>
......@@ -224,7 +292,7 @@ const Home = () => {
<section className="cf2021__notifications space-y-8">
<JitsiInviteCard />
<div className="lg:card lg:elevation-10">
<div className="lg:card lg:elevation-10 joyride-announcements">
<AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
{isAuthenticated && user.role === "chairman" && (
<AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
......@@ -232,43 +300,60 @@ const Home = () => {
</div>
</section>
<section className="cf2021__posts">
{/* Relative is for fixing the dropdowns on the right which are detached from their immediate container. */}
<section
className="cf2021__posts relative joyride-posts"
// This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
style={{ maxWidth: "calc(100vw - 2rem)" }}
>
<div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
<span>Příspěvky v rozpravě</span>
{!programEntry.discussionOpened && (
<i
className="ico--lock text-black ml-2 opacity-50 hover:opacity-100 transition duration-500 text-xl"
title="Rozprava je uzavřena"
/>
)}
</h2>
<PostFilters />
</div>
<PostsContainer
className="container-padding--zero lg:container-padding--auto"
showAddPostCta={programEntry.discussionOpened}
/>
{!programEntry.discussionOpened &&
isAuthenticated &&
!user.isBanned && (
<p className="leading-normal">
(!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
<p className="alert alert--light items-center mb-4 elevation-4">
<i className="alert__icon ico--lock text-lg" />
Rozprava je uzavřena - příspěvky teď nelze přidávat.
</p>
)}
{programEntry.discussionOpened && !isAuthenticated && (
<p className="alert alert--light items-center mb-4">
<i className="alert__icon ico--info text-lg" />
<span>
Pokud chceš přidat nový příspěvek,{" "}
<button onClick={login} className="underline cursor-pointer">
přihlaš se pomocí Pirátské identity
</button>
.
</span>
</p>
)}
{programEntry.discussionOpened && isAuthenticated && user.isBanned && (
<p className="alert alert--error items-center mb-4">
<i className="alert__icon ico--warning text-lg" />
Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než ti
ho předsedající odebere.
</p>
)}
{programEntry.discussionOpened &&
isAuthenticated &&
!user.isBanned && <AddPostForm className="my-8 space-y-4" />}
{programEntry.discussionOpened &&
isAuthenticated &&
user.isBanned && (
<ErrorMessage className="mt-8">
Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než
ti ho předsedající odebere.
</ErrorMessage>
!user.isBanned && (
<AddPostForm
className="mb-8"
canAddProposal={
user.role === "member" || user.role === "chairman"
}
/>
)}
<PostsContainer
className="container-padding--zero lg:container-padding--auto"
showAddPostCta={programEntry.discussionOpened}
/>
</section>
</article>
<ProgramEntryEditModal
......
src/pages/NotFound.jsx 0 → 100644
View file @ 9f9e00fc
import React from "react";
import { Helmet } from "react-helmet-async";
import Button from "components/Button";
const NotFound = () => (
<>
<Helmet>
<title>404ka | CF 2024 | Pirátská strana</title>
<meta name="description" content="Tahle stránka tu není." />
<meta property="og:title" content="404ka | CF 2024 | Pirátská strana" />
<meta property="og:description" content="Tahle stránka tu není." />
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-base lg:head-alt-lg mb-8">
404ka: tak tahle stránka tu není
</h1>
<p className="text-base lg:text-xl mb-8">
Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což
znamená, že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu
není. Zkontroluj, zda máš správný odkaz.
</p>
<Button
routerTo="/"
className="text-base lg:text-xl"
hoverActive
fullwidth
>
Přejít na hlavní stránku
</Button>
</article>
</>
);
export default NotFound;
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";
......@@ -25,12 +26,36 @@ const Schedule = () => {
);
return (
<article className="container container--wide py-8 lg:py-24">
<>
<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"
......@@ -44,26 +69,35 @@ const Schedule = () => {
)}
</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-heavy-xs md:head-heavy-base">
<p className="head-allcaps-2xs md:head-heavy-base">
{format(entry.expectedStartAt, "H:mm")}
</p>
<p className="ml-auto md:ml-0 head-heavy-xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
<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-1">
{isCurrent && <Link to="/">{entry.title}</Link>}
{!isCurrent && entry.title}
<h2 className="head-heavy-xs md:head-heavy-base mb-2">
{isCurrent && <Link to="/">{entry.fullTitle}</Link>}
{!isCurrent && entry.fullTitle}
</h2>
<div className="flex space-x-2">
<div className="leading-snug">
<div className="space-x-2">
<strong>Navrhovatel:</strong>
<span>{entry.proposer}</span>
</div>
{entry.description && (
<p className="mt-2 leading-tight max-w-3xl">
{entry.description}
</p>
{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" &&
......@@ -73,6 +107,7 @@ const Schedule = () => {
onClick={() => setEntryToActivate(entry)}
color="grey-125"
className="text-xs"
fullwidth
>
Aktivovat tento bod programu
</Button>
......@@ -97,6 +132,7 @@ const Schedule = () => {
aktivován. Chcete pokračovat?
</ModalConfirm>
</article>
</>
);
};
......
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
......@@ -6,8 +6,11 @@ const globalInfoStoreInitial = {
connectionState: "connecting",
onlineMembers: 0,
onlineUsers: 0,
groupSizeHalf: null,
websocketUrl: null,
streamUrl: null,
protocolUrl: null,
protocol: null,
};
export const GlobalInfoStore = new Store(globalInfoStoreInitial);
......@@ -45,12 +48,10 @@ const postStoreInitial = {
window: {
items: [],
itemCount: 0,
page: 1,
perPage: 20,
},
filters: {
flags: "all",
sort: "byDate",
flags: "active",
sort: "byScore",
type: "all",
showPendingProposals: false,
},
......@@ -62,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
......@@ -7,7 +7,8 @@ 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 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";
......@@ -38,7 +39,7 @@ export const filterPosts = (filters, allItems) => {
if (!filters.showPendingProposals) {
filteredItems = filteredItems.filter(
(item) => item.type === "post" || item.state !== "pending"
(item) => item.type === "post" || item.state !== "pending",
);
}
......@@ -55,7 +56,7 @@ export const filterPosts = (filters, allItems) => {
*/
export const updateWindowPosts = (state) => {
state.window.items = filterPosts(state.filters, values(state.items)).map(
property("id")
property("id"),
);
};
......@@ -164,10 +165,11 @@ export const parseRawPost = (rawPost) => {
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()
new Date(),
),
type: announcementTypeMapping[rawAnnouncement.type],
seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
......@@ -182,7 +184,7 @@ export const createSeenWriter = (localStorageKey) => {
const seenWriterWorker = async () => {
const id = await queue.shift();
const seen = new Set(
(localStorage.getItem(localStorageKey) || "").split(",")
(localStorage.getItem(localStorageKey) || "").split(","),
);
seen.add(id);
......
src/ws/connection.js
View file @ 9f9e00fc
......@@ -103,7 +103,7 @@ export const connect = ({ url, onConnect }) => {
});
console.log(
"[ws] Socket is closed. Reconnect will be attempted in 1 second.",
event.reason
event.reason,
);
clearInterval(keepAliveInterval);
......@@ -114,7 +114,7 @@ export const connect = ({ url, onConnect }) => {
console.error(
"[ws] Socket encountered error: ",
err.message,
"Closing socket"
"Closing socket",
);
ws.close();
reject(err);
......
src/ws/handlers/announcements.js
View file @ 9f9e00fc
import has from "lodash/has";
import { markdownConverter } from "markdown";
import { AnnouncementStore } from "stores";
import { parseRawAnnouncement, syncAnnoucementItemIds } from "utils";
......@@ -8,6 +9,9 @@ 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
View file @ 9f9e00fc
......@@ -6,5 +6,8 @@ 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/posts.js
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]) {
......@@ -12,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) => {
......@@ -26,21 +37,21 @@ export const handlePostChanged = (payload) => {
if (has(payload, "content")) {
state.items[payload.id].content = payload.content;
state.items[payload.id].contentHtml = markdownConverter.makeHtml(
payload.content
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);
}
}
});
};
......
src/ws/handlers/program.js
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) => {
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 });
}
};
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: number;
number: string;
title: string;
fullTitle: string;
proposer: string;
speakers: string;
discussionOpened: boolean;
description?: string;
htmlContent?: string;
expectedStartAt: Date;
expectedFinishAt?: Date;
}
......@@ -70,6 +77,7 @@ declare namespace CF2021 {
datetime: Date;
type: AnnouncementType;
content: string;
contentHtml: string;
link?: string;
relatedPostId: string;
seen: boolean;
......@@ -150,8 +158,6 @@ declare namespace CF2021 {
window: {
items: string[];
itemCount: number;
page: number;
perPage: number;
};
filters: PostStoreFilters;
}
......

Pirátský GitLab - Home of the CopyLeft