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
Showing
with 1151 additions and 366 deletions
import React from "react";
import Button from "components/Button";
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>
);
export default BreakInProgress;
import React from "react";
import { format } from "date-fns";
import Button from "components/Button";
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>
);
export default NotYetStarted;
export { default as AlreadyFinished } from "./AlreadyFinished";
export { default as BreakInProgress } from "./BreakInProgress";
export { default as NotYetStarted } from "./NotYetStarted";
......@@ -7,13 +7,10 @@ import { markdownConverter } from "markdown";
import "react-mde/lib/styles/css/react-mde-toolbar.css";
import "./MarkdownEditor.css";
const MarkdownEditor = ({
value,
onChange,
error,
placeholder = "",
...props
}) => {
const MarkdownEditor = (
{ value, onChange, error, placeholder = "", ...props },
ref
) => {
const [selectedTab, setSelectedTab] = useState("write");
const classes = {
......@@ -36,6 +33,7 @@ const MarkdownEditor = ({
return (
<div className={classNames("form-field", { "form-field--error": !!error })}>
<ReactMde
ref={ref}
value={value}
onChange={onChange}
selectedTab={selectedTab}
......@@ -53,4 +51,4 @@ const MarkdownEditor = ({
);
};
export default MarkdownEditor;
export default React.forwardRef(MarkdownEditor);
import React from "react";
import Button from "components/Button";
import {
Card,
CardActions,
CardBody,
CardBodyText,
CardHeadline,
} from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import Modal from "./Modal";
import ModalWithActions from "./ModalWithActions";
const ModalConfirm = ({
title,
......@@ -23,24 +15,8 @@ const ModalConfirm = ({
error,
...props
}) => {
return (
<Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
<Card>
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>{title}</CardHeadline>
<button onClick={onCancel}>
<i className="ico--close"></i>
</button>
</div>
<CardBodyText>{children}</CardBodyText>
{error && (
<ErrorMessage className="mt-2">
Při provádění akce došlo k problému: {error}
</ErrorMessage>
)}
</CardBody>
<CardActions right className="space-x-1">
const actions = (
<>
<Button
hoverActive
color="blue-300"
......@@ -52,15 +28,26 @@ const ModalConfirm = ({
</Button>
<Button
hoverActive
color="red-600"
color="grey-125"
className="text-sm"
onClick={onCancel}
>
{cancelActionLabel}
</Button>
</CardActions>
</Card>
</Modal>
</>
);
return (
<ModalWithActions
onClose={onCancel}
title={title}
error={error}
actions={actions}
containerClassName="max-w-md"
{...props}
>
{children}
</ModalWithActions>
);
};
......
import React from "react";
import {
Card,
CardActions,
CardBody,
CardBodyText,
CardHeadline,
} from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import Modal from "./Modal";
const ModalConfirm = ({
title,
children,
actions,
error,
onClose,
...props
}) => {
return (
<Modal onRequestClose={onClose} {...props}>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>{title}</CardHeadline>
<button
onClick={onClose}
type="button"
data-tip="Zavřít"
aria-label="Zavřít"
>
<i className="ico--cross"></i>
</button>
</div>
<CardBodyText>{children}</CardBodyText>
{error && (
<ErrorMessage className="mt-2">
Při provádění akce došlo k problému: {error}
</ErrorMessage>
)}
</CardBody>
<CardActions right className="space-x-1">
{actions}
</CardActions>
</Card>
</Modal>
);
};
export default React.memo(ModalConfirm);
import React from "react";
const Beacon = React.forwardRef(({ onClick }, ref) => (
<span
className="relative inline-flex h-8 w-8"
title="Jsi online"
ref={ref}
onClick={onClick}
>
<span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-red-600"></span>
<span className="inline-flex rounded-full w-8 h-8 bg-red-600"></span>
</span>
));
export default Beacon;
import React from "react";
// import Chip from "components/Chip";
export { default as Beacon } from "./Beacon";
export const steps = [
{
target: "body",
content: (
<>
<h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2024</h1>
<p className="leading-snug text-base">
Víme, že volebního zasedání se nemohou zúčastnit všichni.
Abychom nepřítomným umožnili zasedání lépe sledovat, připravili
jsme tuhle aplikaci, která umožňuje zasáhnout do rozpravy.
Nejprve si vysvětlíme, jak funguje.
</p>
</>
),
placement: "center",
disableBeacon: true,
},
{
target: ".joyride-login",
content: (
<>
<h1 className="head-alt-sm mb-4">Jsi člen či příznivec? Přihlaš se</h1>
<p className="leading-snug text-base">
Pokud jsi člen strany nebo registrovaný příznivec, je rozhodně dobrý
nápad se přihlásit. Budeš tak moci přidávat příspěvky v rozpravě a
palcovat je.
</p>
</>
),
},
{
target: ".joyride-player",
content: (
<>
<h1 className="head-alt-sm mb-4">Video stream</h1>
<p className="leading-snug text-base">
Zde můžeš sledovat přímý přenos z jednání. Přenos má drobné zpoždění,
tak s tím počítej.
</p>
</>
),
placement: "bottom",
},
{
target: ".joyride-posts",
content: (
<>
<h1 className="head-alt-sm mb-4">Příspěvky v rozpravě</h1>
<div className="leading-snug text-base space-y-2">
<p>
Předsedající pro každý bod programu může otevřít či uzavřít
rozpravu. V rámci rozpravy je možné přidávat běžné diskusní
příspěvky, nebo návrhy postupu.
</p>
<p>
<strong>Běžné příspěvky</strong> se zobrazí ihned po přidání.
</p>
<p>
U příspěvků se též zobrazuje celková míra podpory. Legenda barevného
odlišení je následující:
</p>
<ul className="unordered-list unordered-list--dense">
<li>
<div className="px-1 text-sm font-bold inline-block bg-green-400 text-white">
Zelenou
</div>{" "}
je označen příspěvek, na kterém je konsensus, nebo takový, který
získal podporu skupiny členů.
</li>
<li>
<div className="px-1 text-sm font-bold inline-block bg-yellow-400 text-grey-300">
Žlutou
</div>{" "}
je označen příspěvek, který podporu teprve sbírá.
</li>
<li>
<div className="px-1 text-sm font-bold inline-block bg-red-600 text-white">
Červeně
</div>{" "}
je označen příspěvek, který má spíše negativní odezvu.
</li>
<li>
<div className="px-1 text-sm font-bold inline-block bg-grey-125 text-grey-200">
Šedivě
</div>{" "}
je označen příspěvek, který zatím není ohodnocen.
</li>
</ul>
<p>
<strong>Návrhy postupui</strong> po přidání nejprve zkontroluje předsedající a pokud sezná,
že je takový návrh přípusný, prohlásí ho za hlasovatelný a předloží k hlasování
v plénu. Na základě toho návrh předsedající označí za schválený, nebo za zamítnutý.
</p>
</div>
</>
),
placement: "center",
},
{
target: ".joyride-filters",
content: (
<>
<h1 className="head-alt-sm mb-4">Filtrování a řazení příspěvků</h1>
<div className="leading-snug text-base space-y-2">
<p>
Příspěvky v rozpravě můžeš filtrovat <strong>podle typu</strong>{" "}
(návrhy/příspěvky), <strong>podle stavu</strong>{" "}
(aktivní/archivované) a můžeš taky přepínat jejich{" "}
<strong>řazení</strong> (podle podpory, podle času přidání).
</p>
</div>
</>
),
placement: "bottom",
},
{
target: ".joyride-announcements",
content: (
<>
<h1 className="head-alt-sm mb-4">Oblast pro oznámení</h1>
<p className="leading-snug text-base">
V této oblasti se zobrazují oznámení podstatných událostí v rámci
jednání, jako například nové rozhodující hlasování, nebo třeba nový
hlasovatelný návrh postupu.
</p>
</>
),
placement: "left",
},
{
target: "body",
content: (
<>
<h1 className="head-alt-sm mb-4">To je vše!</h1>
<p className="leading-snug text-base">
Ať se ti letošní „CFko“ líbí.
</p>
</>
),
placement: "center",
},
];
......@@ -5,6 +5,7 @@ import { format, isToday } from "date-fns";
import Chip from "components/Chip";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import PostScore from "components/posts/PostScore";
import Thumbs from "components/Thumbs";
const Post = ({
......@@ -19,13 +20,16 @@ const Post = ({
archived,
state,
dimIfArchived = true,
currentUser,
supportThreshold,
canThumb,
canRunActions,
reportSeen = true,
onLike,
onDislike,
onHide,
onBanUser,
onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal,
onAcceptProcedureProposal,
onRejectProcedureProposal,
......@@ -33,20 +37,21 @@ const Post = ({
onEdit,
onArchive,
onSeen,
...props
}) => {
const { ref, inView } = useInView({
threshold: 0.9,
threshold: 0.8,
trackVisibility: true,
delay: 1500,
skip: seen,
delay: 1000,
skip: !reportSeen,
triggerOnce: true,
});
useEffect(() => {
if (!seen && inView && onSeen) {
if (inView && onSeen) {
onSeen();
}
});
}, [inView, onSeen]);
const wrapperClassName = classNames(
"flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
......@@ -82,28 +87,53 @@ const Post = ({
labels.push(
{
pending: (
<Chip key="state__pending" condensed color="grey-500">
<Chip
key="state__pending"
condensed
color="grey-500"
aria-label="Návrh čekající na zpracování"
>
Čeká na zpracování
</Chip>
),
announced: (
<Chip key="state__announced" condensed color="blue-300">
Vyhlášený
<Chip
key="state__announced"
condensed
color="blue-300"
aria-label="Návrh k hlasování"
>
K hlasování
</Chip>
),
accepted: (
<Chip key="state__accepted" condensed color="green-400">
<Chip
key="state__accepted"
condensed
color="green-400"
aria-label="Schválený návrh"
>
Schválený
</Chip>
),
rejected: (
<Chip key="state__rejected" condensed color="red-600">
<Chip
key="state__rejected"
condensed
color="red-600"
aria-label="Zamítnutý návrh"
>
Zamítnutý
</Chip>
),
"rejected-by-chairman": (
<Chip key="state__rejected-by-chairmen" condensed color="red-600">
Zamítnutý předsedajícím
<Chip
key="state__rejected-by-chairmen"
condensed
color="red-600"
aria-label="Návrh zamítnutý předsedajícím"
>
Zamítnutý předs.
</Chip>
),
}[state]
......@@ -123,47 +153,72 @@ const Post = ({
);
}
const isChairman = currentUser && currentUser.role === "chairman";
const showAnnounceAction =
type === "procedure-proposal" && state === "pending";
isChairman && type === "procedure-proposal" && state === "pending";
const showAcceptAction =
type === "procedure-proposal" && state === "announced";
isChairman && type === "procedure-proposal" && state === "announced";
const showRejectAction =
type === "procedure-proposal" && state === "announced";
isChairman && type === "procedure-proposal" && state === "announced";
const showRejectByChairmanAction =
type === "procedure-proposal" && ["announced", "pending"].includes(state);
const showEditAction = true;
const showBanAction = !author.isBanned;
const showUnbanAction = author.isBanned;
const showHideAction = !archived;
const showArchiveAction = !archived;
isChairman &&
type === "procedure-proposal" &&
["announced", "pending"].includes(state);
const showEditAction =
isChairman ||
(currentUser && currentUser.id === author.id && !currentUser.isBanned);
const showBanAction = isChairman && !author.isBanned;
const showUnbanAction = isChairman && author.isBanned;
const showInviteAction = isChairman;
const showHideAction = isChairman && !archived;
const showArchiveAction = isChairman && !archived;
// Show actions dropdown if any of actions is available.
const showActions = [
showAnnounceAction,
showAcceptAction,
showRejectAction,
showRejectByChairmanAction,
showEditAction,
showBanAction,
showUnbanAction,
showInviteAction,
showHideAction,
showArchiveAction,
].some((item) => !!item);
const htmlContent = {
__html: content,
};
const thumbsVisible = !archived && (type === "post" || state === "announced");
return (
<div className={wrapperClassName} ref={ref}>
<div className={wrapperClassName} ref={ref} {...props}>
<img
src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3 object-cover"
className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
alt={author.name}
/>
<div className="flex-1">
<div className="flex-1 overflow-hidden">
<div className="mb-1">
<div className="flex justify-between items-start xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center">
<span className="font-bold">{author.name}</span>
<div className="mt-1 xl:mt-0 xl:ml-2 leading-tight">
<span className="text-grey-200 text-sm">{author.group}</span>
<span className="text-grey-200 ml-1 text-sm">
<span className="text-grey-200 text-xs sm:text-sm">
{author.group}
</span>
<span className="text-grey-200 ml-1 text-xs sm:text-sm">
@{" "}
{format(
datetime,
isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
)}
{modified && (
<span className="text-grey-200 text-sm block md:inline md:ml-2 underline">
<span className="text-grey-200 text-xs block md:inline md:ml-2">
(upraveno)
</span>
)}
......@@ -175,6 +230,7 @@ const Post = ({
</div>
</div>
<div className="flex items-center">
{thumbsVisible && (
<Thumbs
likes={ranking.likes}
dislikes={ranking.dislikes}
......@@ -183,8 +239,16 @@ const Post = ({
onDislike={onDislike}
myVote={ranking.myVote}
/>
{canRunActions && (
<DropdownMenu right className="pl-4">
)}
<PostScore
className="ml-2"
postType={type}
ranking={ranking}
rankingReadonly={!thumbsVisible}
supportThreshold={supportThreshold}
/>
{showActions && (
<DropdownMenu right className="pl-4 static">
{showAnnounceAction && (
<DropdownMenuItem
onClick={onAnnounceProcedureProposal}
......@@ -216,7 +280,7 @@ const Post = ({
{showEditAction && (
<DropdownMenuItem
onClick={onEdit}
icon="ico--edit-pencil"
icon="ico--pencil"
title="Upravit příspěvek"
/>
)}
......@@ -234,6 +298,13 @@ const Post = ({
title="Odblokovat uživatele"
/>
)}
{showInviteAction && (
<DropdownMenuItem
onClick={onInviteUser}
icon="ico--phone"
title="Pozvat uživatele do Jitsi"
/>
)}
{showHideAction && (
<DropdownMenuItem
onClick={onHide}
......@@ -257,7 +328,7 @@ const Post = ({
{labels}
</div>
<div
className="text-sm lg:text-base text-black leading-normal content-block"
className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
dangerouslySetInnerHTML={htmlContent}
></div>
</div>
......@@ -265,4 +336,4 @@ const Post = ({
);
};
export default Post;
export default React.memo(Post);
......@@ -15,46 +15,49 @@ const PostEditModal = ({
...props
}) => {
const [text, setText] = useState(post.content);
const [noTextError, setNoTextError] = useState(false);
const [textError, setTextError] = useState(null);
const onTextInput = (newText) => {
setText(newText);
if (newText !== "") {
setNoTextError(false);
if (newText.length >= 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
}
};
const confirm = (evt) => {
evt.preventDefault();
if (!!text) {
onConfirm(text);
} else {
setNoTextError(true);
setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
}
};
return (
<Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
<Card>
<form onSubmit={confirm}>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit text příspěvku</CardHeadline>
<button onClick={onCancel}>
<i className="ico--close"></i>
<button onClick={onCancel} type="button">
<i className="ico--cross"></i>
</button>
</div>
<MarkdownEditor
value={text}
onChange={onTextInput}
error={
noTextError
? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
error={textError}
placeholder="Vyplňte text příspěvku"
toolbarCommands={[
["header", "bold", "italic", "strikethrough"],
["link", "quote", "image"],
["link", "quote"],
["unordered-list", "ordered-list"],
]}
/>
......@@ -69,6 +72,7 @@ const PostEditModal = ({
hoverActive
color="blue-300"
className="text-sm"
disabled={textError || confirming}
loading={confirming}
onClick={confirm}
>
......@@ -84,6 +88,7 @@ const PostEditModal = ({
</Button>
</CardActions>
</Card>
</form>
</Modal>
);
};
......
import React from "react";
import React, { useCallback, useMemo, useState } from "react";
import classNames from "classnames";
import Post from "./Post";
......@@ -6,13 +6,17 @@ import Post from "./Post";
const PostList = ({
className,
items,
showAddPostCta,
currentUser,
supportThreshold,
canThumb,
canRunActions,
dimArchived,
onLike,
onDislike,
onHide,
onBanUser,
onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal,
onAcceptProcedureProposal,
onRejectProcedureProposal,
......@@ -20,19 +24,22 @@ const PostList = ({
onEdit,
onArchive,
onSeen,
dimArchived,
}) => {
const buildHandler = (responderFn) => (post) => (evt) => {
evt.preventDefault();
responderFn(post);
};
const windowSize = 20;
const [window, setWindow] = useState(windowSize);
const onPostLike = buildHandler(onLike);
const onPostDislike = buildHandler(onDislike);
const onPostEdit = buildHandler(onEdit);
const onPostHide = buildHandler(onHide);
const onPostBanUser = buildHandler(onBanUser);
const onPostUnbanUser = buildHandler(onUnbanUser);
const onPostInviteUser = buildHandler(onInviteUser);
const onPostArchive = buildHandler(onArchive);
const onPostAnnounceProcedureProposal = buildHandler(
onAnnounceProcedureProposal
......@@ -43,15 +50,27 @@ const PostList = ({
onRejectProcedureProposalByChairman
);
const onPostSeen = (post) => () => {
const onPostSeen = useCallback(
(post) => () => {
if (!post.seen) {
onSeen(post);
};
}
// Once last post in window is reached, attempt show more.
if (items.indexOf(post) === window - 1) {
setWindow(window + windowSize);
}
},
[items, onSeen, window]
);
const windowItems = useMemo(() => {
return items.slice(0, window).filter((item) => !item.hidden);
}, [items, window]);
return (
<div className={classNames("space-y-px", className)}>
{items
.filter((item) => !item.hidden)
.map((item) => (
{windowItems.map((item, idx) => (
<Post
key={item.id}
datetime={item.datetime}
......@@ -60,18 +79,20 @@ const PostList = ({
state={item.state}
content={item.contentHtml}
ranking={item.ranking}
historyLog={item.historyLog}
modified={item.modified}
seen={item.seen}
reportSeen={!item.seen || idx === window - 1}
archived={item.archived}
dimIfArchived={dimArchived}
currentUser={currentUser}
supportThreshold={supportThreshold}
canThumb={canThumb}
canRunActions={canRunActions}
onLike={onPostLike(item)}
onDislike={onPostDislike(item)}
onHide={onPostHide(item)}
onBanUser={onPostBanUser(item)}
onUnbanUser={onPostUnbanUser(item)}
onInviteUser={onPostInviteUser(item)}
onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)}
onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)}
onRejectProcedureProposal={onPostRejectProcedureProposal(item)}
......@@ -83,9 +104,10 @@ const PostList = ({
onSeen={onPostSeen(item)}
/>
))}
{!items.length && (
<p className="p-4 lg:p-0 lg:py-3 ">
Nikdo zatím žádný příspěvek do rozpravy nepřidal. Budeš první?
{showAddPostCta && !items.length && (
<p className="p-4 lg:p-0 lg:py-3 leading-snug text-sm md:text-base">
Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
první?
</p>
)}
</div>
......
import React from "react";
import classNames from "classnames";
const PostScore = ({
postType,
ranking,
supportThreshold,
rankingReadonly,
className,
}) => {
const { score, dislikes } = ranking;
const highlight = postType === "procedure-proposal" && !rankingReadonly;
const coloring = highlight
? {
"bg-red-600 text-white": score < 0,
"bg-grey-125 text-grey-200": score === 0 && score < supportThreshold,
"bg-yellow-400 text-grey-300":
score > 0 && dislikes > 0 && score < supportThreshold,
"bg-green-400 text-white":
score >= supportThreshold || (score > 0 && dislikes <= 0),
}
: "bg-grey-125 text-grey-200";
let title;
if (postType === "procedure-proposal") {
if (rankingReadonly) {
title = `Návrh postupu získal podporu ${score} hlasů.`;
} else if (dislikes > 0) {
if (score < supportThreshold) {
title = `Aktuální podpora je ${score} hlasů, pro získání podpory skupiny členů chybí ještě ${
supportThreshold - score
}.`;
} else {
title = `Aktuální podpora je ${score} hlasů, což je dostatek pro získání podpory skupiny členů (vyžaduje alespoň ${supportThreshold} hlasů).`;
}
} else {
title = `Příspěvek získal ${score} hlasů bez jakýchkoliv hlasů proti a má tedy konkludentní podporu.`;
}
} else {
title = `Příspěvek získal podporu ${score} hlasů.`;
}
return (
<span
className={classNames(
"p-1 text-sm flex items-center space-x-1",
coloring,
className
)}
style={{ cursor: "help" }}
aria-label={title}
data-tip={title}
data-type="dark"
data-place="top"
>
<i className="ico--power" />
<span className="font-bold">{score}</span>
</span>
);
};
export default React.memo(PostScore);
import React from "react";
import Button from "components/Button";
import {
Card,
CardActions,
CardBody,
CardBodyText,
CardHeadline,
} from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import Modal from "./Modal";
const RejectPostModalConfirm = ({
title,
children,
yesActionLabel = "OK",
yesAndArchiveActionLabel = "OK",
cancelActionLabel = "Zrušit",
onCancel,
onConfirm,
onConfirmAndArchive,
confirming,
error,
...props
}) => {
return (
<Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>{title}</CardHeadline>
<button onClick={onCancel} type="button">
<i className="ico--cross"></i>
</button>
</div>
<CardBodyText>{children}</CardBodyText>
{error && (
<ErrorMessage className="mt-2">
Při provádění akce došlo k problému: {error}
</ErrorMessage>
)}
</CardBody>
<CardActions right className="space-x-1">
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={onConfirm}
loading={confirming}
>
{yesActionLabel}
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={onConfirm}
loading={confirming}
>
{yesAndArchiveActionLabel}
</Button>
<Button
hoverActive
color="red-600"
className="text-sm"
onClick={onCancel}
>
{cancelActionLabel}
</Button>
</CardActions>
</Card>
</Modal>
);
};
export default React.memo(RejectPostModalConfirm);
......@@ -24,12 +24,12 @@ const ProgramEntryEditModal = ({
return (
<Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
<Card>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit název programového bodu</CardHeadline>
<button onClick={onCancel}>
<i className="ico--close"></i>
<i className="ico--cross"></i>
</button>
</div>
<div className="form-field">
......
export default {
styleguideUrl: "https://styleguide.pir-test.eu/latest",
};
......@@ -6,14 +6,13 @@ import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks";
const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
import { urlRegex } from "utils";
const AddAnnouncementForm = ({ className }) => {
const [text, setText] = useState("");
const [link, setLink] = useState("");
const [linkValid, setLinkValid] = useState(null);
const [noTextError, setNoTextError] = useState(false);
const [textError, setTextError] = useState(null);
const [linkError, setLinkError] = useState(null);
const [type, setType] = useState("announcement");
const [adding, addingError] = useActionState(addAnnouncement, {
......@@ -26,39 +25,66 @@ const AddAnnouncementForm = ({ className }) => {
setText(newText);
if (newText !== "") {
setNoTextError(false);
if (newText.length > 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
}
};
const onLinkInput = (evt) => {
setLink(evt.target.value);
const onLinkInput = (newLink) => {
setLink(newLink);
if (!!evt.target.value) {
setLinkValid(!!evt.target.value.match(urlRegex));
if (!!newLink) {
if (newLink.length > 1024) {
setLinkError("Maximální délka URL je 256 znaků.");
} else {
setLinkError(urlRegex.test(newLink) ? null : "Zadejte platnou URL.");
}
}
};
const onAdd = async (evt) => {
if (!link) {
setLinkValid(false);
evt.preventDefault();
let preventAction = false;
const payload = {
content: text,
type,
};
if (!text) {
setTextError("Před přidáním oznámení nezapomeňte vyplnit jeho obsah.");
preventAction = true;
} else if (!!text && text.length > 1024) {
setTextError("Maximální délka oznámení je 1024 znaků.");
preventAction = true;
}
if (type === "voting" && !link) {
setLinkError("Zadejte platnou URL.");
preventAction = true;
} else {
payload.link = link;
}
if (preventAction) {
return;
}
if (!!text) {
if (type === "voting" && link && linkValid) {
const result = await addAnnouncement.run({ content: text, link, type });
if (!result.error) {
setText("");
setLink("");
}
}
} else {
setNoTextError(true);
setTextError(null);
setLinkError(null);
}
};
return (
<div className={className}>
<form className={className} onSubmit={onAdd}>
{addingError && (
<ErrorMessage>
Při přidávání oznámení došlo k problému: {addingError}.
......@@ -74,7 +100,7 @@ const AddAnnouncementForm = ({ className }) => {
<label>
<input
type="radio"
name="type"
name="announcementType"
value="announcement"
defaultChecked
/>
......@@ -84,7 +110,7 @@ const AddAnnouncementForm = ({ className }) => {
<div className="radio form-field__control">
<label>
<input type="radio" name="type" value="voting" />
<input type="radio" name="announcementType" value="voting" />
<span>Rozhodující hlasování</span>
</label>
</div>
......@@ -94,11 +120,7 @@ const AddAnnouncementForm = ({ className }) => {
<MarkdownEditor
value={text}
onChange={onTextInput}
error={
noTextError
? "Před přidáním oznámení nezapomeňte vyplnit jeho obsah."
: null
}
error={textError}
placeholder="Vyplňte text oznámení"
toolbarCommands={[
["bold", "italic", "strikethrough"],
......@@ -110,7 +132,7 @@ const AddAnnouncementForm = ({ className }) => {
<div
className={classNames("form-field", {
hidden: type !== "voting",
"form-field--error": linkValid === false,
"form-field--error": !!linkError,
})}
>
<div className="form-field__wrapper form-field__wrapper--shadowed">
......@@ -119,29 +141,27 @@ const AddAnnouncementForm = ({ className }) => {
className="text-input text-sm text-input--has-addon-l form-field__control"
value={link}
placeholder="URL hlasování"
onChange={onLinkInput}
onChange={(evt) => onLinkInput(evt.target.value)}
/>
<div className="text-input-addon text-input-addon--l order-first">
<i className="ico--link1"></i>
<i className="ico--link"></i>
</div>
</div>
{linkValid === false && (
<div className="form-field__error">Zadejte platnou URL.</div>
)}
{!!linkError && <div className="form-field__error">{linkError}</div>}
</div>
</div>
<Button
onClick={onAdd}
type="submit"
className="text-sm mt-4"
hoverActive
loading={adding}
disabled={adding}
disabled={textError || linkError || adding}
fullwidth
>
Přidat oznámení
</Button>
</div>
</form>
);
};
......
import React, { useState } from "react";
import React, { useCallback, useRef, useState } from "react";
import useOutsideClick from "@rooks/use-outside-click";
import useTimeout from "@rooks/use-timeout";
import classNames from "classnames";
import { addPost, addProposal } from "actions/posts";
import { DropdownButton, DropdownButtonItem } from "components/dropdown-button";
import Button from "components/Button";
import { Card, CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks";
const AddPostForm = ({ className }) => {
const AddPostForm = ({ className, canAddProposal }) => {
const cardRef = useRef();
const editorRef = useRef();
const [expanded, setExpanded] = useState(false);
const [text, setText] = useState("");
const [showAddConfirm, setShowAddConfirm] = useState(false);
const [type, setType] = useState("post");
const [noTextError, setNoTextError] = useState(false);
const [error, setError] = useState(null);
const [addingPost, addingPostError] = useActionState(addPost, {
content: text,
});
const [addingProposal, addingProposalError] = useActionState(addPost, {
const [addingProposal, addingProposalError] = useActionState(addProposal, {
content: text,
});
const apiError = addingPostError || addingProposalError;
const is429ApiError =
apiError &&
apiError.toString().indexOf("Unexpected status code 429") !== -1;
const onOutsideClick = useCallback(() => {
setExpanded(false);
}, [setExpanded]);
const onWrite = useCallback(
(evt) => {
setShowAddConfirm(false);
if (!expanded) {
setExpanded(true);
setTimeout(() => {
if (
editorRef.current &&
editorRef.current.finalRefs.textarea.current
) {
editorRef.current.finalRefs.textarea.current.focus();
}
}, 0);
}
},
[setExpanded, expanded, setShowAddConfirm]
);
const hideAddConfirm = useCallback(() => {
setShowAddConfirm(false);
}, [setShowAddConfirm]);
useOutsideClick(cardRef, onOutsideClick);
const { start: enqueueHideAddConfirm } = useTimeout(hideAddConfirm, 2000);
const onTextInput = (newText) => {
setText(newText);
if (newText !== "") {
setNoTextError(false);
if (newText.length >= 1024) {
setError("Maximální délka příspěvku je 1024 znaků.");
} else {
setError(null);
}
}
};
const onAdd = async (evt) => {
evt.preventDefault();
if (!!text) {
if (!error) {
const result = await (type === "post" ? addPost : addProposal).run({
content: text,
});
if (!result.error) {
setText("");
setExpanded(false);
setShowAddConfirm(true);
enqueueHideAddConfirm();
}
}
} else {
setNoTextError(true);
setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
}
};
const setTypePost = (evt) => {
evt.preventDefault();
evt.stopPropagation();
setType("post");
};
const setTypeProposal = (evt) => {
evt.preventDefault();
evt.stopPropagation();
setType("procedure-proposal");
};
const wrapperClass = classNames(
className,
"hover:elevation-16 transition duration-500",
{
"elevation-4 cursor-text": !expanded && !showAddConfirm,
"lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
}
);
return (
<div className={className}>
{addingPostError && (
<ErrorMessage>
Při přidávání příspěvku došlo k problému: {addingPostError}.
</ErrorMessage>
<Card className={wrapperClass} ref={cardRef}>
<span
className={classNames("alert items-center transition duration-500", {
"alert--success": showAddConfirm,
"alert--light": !showAddConfirm,
hidden: expanded,
})}
onClick={onWrite}
>
<i
className={classNames("alert__icon text-lg mr-4", {
"ico--checkmark": showAddConfirm,
"ico--pencil": !showAddConfirm,
})}
/>
{showAddConfirm && <span>Příspěvek byl přidán.</span>}
{!showAddConfirm && <span>Napiš nový příspěvek ...</span>}
</span>
<CardBody
className={
"p-4 lg:p-8 " + (showAddConfirm || !expanded ? "hidden" : "")
}
>
<form className="space-y-4" onSubmit={onAdd}>
{apiError && is429ApiError && (
<div className="alert alert--warning">
<i className="alert__icon ico--clock text-lg" />
<span>
<strong>Zpomal!</strong> Další příspěvek můžeš přidat nejdříve
po 1 minutě od přidání posledního.
</span>
</div>
)}
{addingProposalError && (
{apiError && !is429ApiError && (
<ErrorMessage>
Při přidávání příspěvku došlo k problému: {addingProposalError}.
Při přidávání příspěvku došlo k problému: {apiError}.
</ErrorMessage>
)}
<MarkdownEditor
ref={editorRef}
value={text}
onChange={onTextInput}
error={
noTextError
? "Před přidáním příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
error={error}
placeholder="Vyplňte text vašeho příspěvku"
toolbarCommands={[
["header", "bold", "italic", "strikethrough"],
["link", "quote", "image"],
["link", "quote"],
["unordered-list", "ordered-list"],
]}
/>
<div className="space-x-4">
<DropdownButton
onClick={onAdd}
disabled={addingPost || addingProposal}
loading={addingPost || addingProposal}
fullwidth
items={
<>
{type === "post" && (
<DropdownButtonItem onClick={setTypeProposal}>
Navrhnout postup
</DropdownButtonItem>
{canAddProposal && (
<div
className="form-field"
onChange={(evt) => setType(evt.target.value)}
>
<div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
<div className="radio form-field__control">
<label>
<input
type="radio"
name="postType"
value="post"
defaultChecked
/>
<span className="text-sm sm:text-base">
Přidávám <strong>běžný příspěvek</strong>
</span>
</label>
</div>
<div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
<label>
<input
type="radio"
name="postType"
value="procedure-proposal"
/>
<span className="text-sm sm:text-base">
Přidávám <strong>návrh postupu</strong>
</span>
</label>
</div>
</div>
</div>
)}
{type === "procedure-proposal" && (
<DropdownButtonItem onClick={setTypePost}>
Přidat příspěvek
</DropdownButtonItem>
<p className="alert alert--light text-sm">
<i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
<span>
Návrh postupu se v rozpravě zobrazí až poté, co předsedající{" "}
<strong>posoudí jeho přijatelnost</strong>. Po odeslání proto
nepanikař, že jej hned nevidíš.
</span>
</p>
)}
</>
}
<div className="space-x-4">
<Button
type="submit"
disabled={error || addingPost || addingProposal}
loading={addingPost || addingProposal}
fullwidth
hoverActive
className="text-sm xl:text-base"
>
{type === "post" && "Přidat příspěvek"}
{type === "procedure-proposal" && "Navrhnout postup"}
</DropdownButton>
</Button>
<span className="text-sm text-grey-200 hidden lg:inline">
Pro pokročilejší formátování můžete používat{" "}
......@@ -117,7 +229,9 @@ const AddPostForm = ({ className }) => {
.
</span>
</div>
</div>
</form>
</CardBody>
</Card>
);
};
......
import React, { useCallback, useState } from "react";
import React from "react";
import {
deleteAnnouncement,
loadAnnouncements,
markSeen,
updateAnnouncementContent,
updateAnnouncement,
} from "actions/announcements";
import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
import AnnouncementList from "components/annoucements/AnnouncementList";
import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks";
import { useItemActionConfirm } from "hooks";
import { AnnouncementStore, AuthStore } from "stores";
const AnnoucementsContainer = () => {
const [itemToEdit, setItemToEdit] = useState(null);
const [confirmingEdit, setConfirmingEdit] = useState(false);
const [editError, setEditError] = useState(null);
const AnnoucementsContainer = ({ className }) => {
const { 2: loadResult } = loadAnnouncements.useWatch();
const [
......@@ -25,47 +22,27 @@ const AnnoucementsContainer = () => {
setItemToDelete,
onDeleteConfirm,
onDeleteCancel,
deleteState,
] = useItemActionConfirm(deleteAnnouncement);
const [deletingAnnouncement, deletingAnnouncementError] = useActionState(
deleteAnnouncement,
itemToDelete
);
const [
itemToEdit,
setItemToEdit,
onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
item,
payload,
}));
const { isAuthenticated, user } = AuthStore.useState();
const items = AnnouncementStore.useState((state) =>
state.itemIds.map((id) => state.items[id])
);
const confirmEdit = useCallback(
async (newContent) => {
if (itemToEdit && newContent) {
setConfirmingEdit(true);
const result = await updateAnnouncementContent.run({
item: itemToEdit,
newContent,
});
if (!result.error) {
setItemToEdit(null);
setEditError(null);
} else {
setEditError(result.message);
}
setConfirmingEdit(false);
}
},
[itemToEdit, setItemToEdit]
);
const cancelEdit = useCallback(() => {
setItemToEdit(null);
}, [setItemToEdit]);
return (
<>
<div className={className}>
{loadResult && loadResult.error && (
<CardBody>
<ErrorMessage>
......@@ -84,8 +61,8 @@ const AnnoucementsContainer = () => {
isOpen={!!itemToDelete}
onConfirm={onDeleteConfirm}
onCancel={onDeleteCancel}
confirming={deletingAnnouncement}
error={deletingAnnouncementError}
confirming={deleteState.loading}
error={deleteState.error}
title="Opravdu smazat?"
yesActionLabel="Smazat"
>
......@@ -95,13 +72,13 @@ const AnnoucementsContainer = () => {
<AnnouncementEditModal
isOpen={true}
announcement={itemToEdit}
onConfirm={confirmEdit}
onCancel={cancelEdit}
confirming={confirmingEdit}
error={editError}
onConfirm={onEditConfirm}
onCancel={onEditCancel}
confirming={editState.loading}
error={editState.error}
/>
)}
</>
</div>
);
};
......
import React from "react";
import { Link } from "react-router-dom";
import { format, isToday } from "date-fns";
import pick from "lodash/pick";
import { GlobalInfoStore, ProgramStore } from "stores";
const GlobalStats = () => {
const {
onlineUsers,
onlineMembers,
groupSizeHalf,
} = GlobalInfoStore.useState((state) =>
pick(state, ["onlineUsers", "onlineMembers", "groupSizeHalf"])
);
const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
pick(state, ["currentId", "scheduleIds", "items"])
);
const nextProgramEntryId = scheduleIds
? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
: null;
const nextProgramEntry = nextProgramEntryId
? items[nextProgramEntryId]
: null;
const nextProgramEntryCaption = nextProgramEntry
? `${nextProgramEntry.title} @ ${format(
nextProgramEntry.expectedStartAt,
isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
)}`
: null;
return (
<div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap">
<div
data-tip="Počet přihlášených členů Pirátské strany."
data-tip-at="bottom"
>
<strong>{onlineMembers}</strong>{" "}
<span>
{onlineMembers === 1 && "člen online"}
{onlineMembers > 1 && onlineMembers <= 4 && "členové online"}
{(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
</span>
</div>
<div
data-tip="Celkový počet osob, které mají tuto stránku otevřenou."
data-tip-at="bottom"
>
<strong>{onlineUsers}</strong> <span>online celkem</span>
</div>
{groupSizeHalf !== null && (
<div
data-tip="Velikost skupiny členů je důležitá při posuzování podpory návrhů postupu."
data-tip-at="bottom"
>
<span>Vel. skupiny členů je</span> <strong>{groupSizeHalf}</strong>
</div>
)}
{nextProgramEntry && (
<div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
Následuje:{" "}
<Link
to="/program"
className="font-bold"
aria-label={nextProgramEntryCaption}
data-tip={"Následuje bod " + nextProgramEntryCaption}
data-tip-at="bottom"
>
{nextProgramEntryCaption}
</Link>
</div>
)}
</div>
);
};
export default GlobalStats;
import React from "react";
import { loadMe } from "actions/users";
import Button from "components/Button";
import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import { useActionState } from "hooks";
import { AuthStore } from "stores";
const JitsiInviteCard = () => {
// docasne zablokovano
return null;
const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
const [loading, errorMessage] = useActionState(loadMe);
const openJitsiWindow = async () => {
const result = await loadMe.run();
if (!result.error) {
window.open(result.payload.jitsi_url);
}
AuthStore.update((state) => {
state.jitsiPopupDismissed = true;
});
};
const dismissPopup = () => {
AuthStore.update((state) => {
state.jitsiPopupDismissed = true;
});
};
if (!showJitsiInvitePopup) {
return null;
}
if (jitsiPopupDismissed) {
return (
<Button
color="violet-500"
className="btn--fullwidth"
onClick={openJitsiWindow}
loading={loading}
icon="ico--jitsi"
>
Připojit se k Jitsi
</Button>
);
}
return (
<div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
<i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
<CardBody className="p-4 lg:p-8 text-white relative z-10">
<div className="flex items-center justify-between mb-4">
<h2 className="head-heavy-xs">
<span>Pozvánka do Jitsi</span>
</h2>
<button
type="button"
onClick={dismissPopup}
aria-label="Zavřít"
data-tip="Zavřít"
>
<i className="ico--cross"></i>
</button>
</div>
{errorMessage && (
<ErrorMessage>
Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
</ErrorMessage>
)}
<p className="leading-snug text-sm mb-4">
Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
</p>
<Button
color="violet-500"
className="btn--fullwidth"
onClick={openJitsiWindow}
loading={loading}
>
Připojit se k Jitsi
</Button>
</CardBody>
</div>
);
};
export default JitsiInviteCard;