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 1193 additions and 413 deletions
src/components/modals/ModalWithActions.jsx 0 → 100644
View file @ 9f9e00fc
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);
src/components/onboarding/Beacon.jsx 0 → 100644
View file @ 9f9e00fc
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;
src/components/onboarding/index.jsx 0 → 100644
View file @ 9f9e00fc
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",
},
];
src/components/posts/Post.jsx
View file @ 9f9e00fc
...@@ -5,6 +5,7 @@ import { format, isToday } from "date-fns"; ...@@ -5,6 +5,7 @@ import { format, isToday } from "date-fns";
import Chip from "components/Chip"; import Chip from "components/Chip";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import PostScore from "components/posts/PostScore";
import Thumbs from "components/Thumbs"; import Thumbs from "components/Thumbs";
const Post = ({ const Post = ({
...@@ -20,12 +21,15 @@ const Post = ({ ...@@ -20,12 +21,15 @@ const Post = ({
state, state,
dimIfArchived = true, dimIfArchived = true,
currentUser, currentUser,
supportThreshold,
canThumb, canThumb,
reportSeen = true,
onLike, onLike,
onDislike, onDislike,
onHide, onHide,
onBanUser, onBanUser,
onUnbanUser, onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal, onAnnounceProcedureProposal,
onAcceptProcedureProposal, onAcceptProcedureProposal,
onRejectProcedureProposal, onRejectProcedureProposal,
...@@ -33,20 +37,21 @@ const Post = ({ ...@@ -33,20 +37,21 @@ const Post = ({
onEdit, onEdit,
onArchive, onArchive,
onSeen, onSeen,
...props
}) => { }) => {
const { ref, inView } = useInView({ const { ref, inView } = useInView({
threshold: 0.8, threshold: 0.8,
trackVisibility: true, trackVisibility: true,
delay: 1500, delay: 1000,
skip: seen, skip: !reportSeen,
triggerOnce: true, triggerOnce: true,
}); });
useEffect(() => { useEffect(() => {
if (!seen && inView && onSeen) { if (inView && onSeen) {
onSeen(); onSeen();
} }
}); }, [inView, onSeen]);
const wrapperClassName = classNames( const wrapperClassName = classNames(
"flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500", "flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
...@@ -82,28 +87,53 @@ const Post = ({ ...@@ -82,28 +87,53 @@ const Post = ({
labels.push( labels.push(
{ {
pending: ( 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í Čeká na zpracování
</Chip> </Chip>
), ),
announced: ( announced: (
<Chip key="state__announced" condensed color="blue-300"> <Chip
Vyhlášený key="state__announced"
condensed
color="blue-300"
aria-label="Návrh k hlasování"
>
K hlasování
</Chip> </Chip>
), ),
accepted: ( 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ý Schválený
</Chip> </Chip>
), ),
rejected: ( 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ý Zamítnutý
</Chip> </Chip>
), ),
"rejected-by-chairman": ( "rejected-by-chairman": (
<Chip key="state__rejected-by-chairmen" condensed color="red-600"> <Chip
Zamítnutý předsedajícím key="state__rejected-by-chairmen"
condensed
color="red-600"
aria-label="Návrh zamítnutý předsedajícím"
>
Zamítnutý předs.
</Chip> </Chip>
), ),
}[state] }[state]
...@@ -136,9 +166,11 @@ const Post = ({ ...@@ -136,9 +166,11 @@ const Post = ({
type === "procedure-proposal" && type === "procedure-proposal" &&
["announced", "pending"].includes(state); ["announced", "pending"].includes(state);
const showEditAction = const showEditAction =
isChairman || (currentUser && currentUser.id === author.id); isChairman ||
(currentUser && currentUser.id === author.id && !currentUser.isBanned);
const showBanAction = isChairman && !author.isBanned; const showBanAction = isChairman && !author.isBanned;
const showUnbanAction = isChairman && author.isBanned; const showUnbanAction = isChairman && author.isBanned;
const showInviteAction = isChairman;
const showHideAction = isChairman && !archived; const showHideAction = isChairman && !archived;
const showArchiveAction = isChairman && !archived; const showArchiveAction = isChairman && !archived;
...@@ -151,6 +183,7 @@ const Post = ({ ...@@ -151,6 +183,7 @@ const Post = ({
showEditAction, showEditAction,
showBanAction, showBanAction,
showUnbanAction, showUnbanAction,
showInviteAction,
showHideAction, showHideAction,
showArchiveAction, showArchiveAction,
].some((item) => !!item); ].some((item) => !!item);
...@@ -159,29 +192,33 @@ const Post = ({ ...@@ -159,29 +192,33 @@ const Post = ({
__html: content, __html: content,
}; };
const thumbsVisible = !archived && (type === "post" || state === "announced");
return ( return (
<div className={wrapperClassName} ref={ref}> <div className={wrapperClassName} ref={ref} {...props}>
<img <img
src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`} 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} alt={author.name}
/> />
<div className="flex-1"> <div className="flex-1 overflow-hidden">
<div className="mb-1"> <div className="mb-1">
<div className="flex justify-between items-start xl:items-center"> <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">
<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> <span className="font-bold">{author.name}</span>
<div className="mt-1 xl:mt-0 xl:ml-2 leading-tight"> <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 text-xs sm:text-sm">
<span className="text-grey-200 ml-1 text-sm"> {author.group}
</span>
<span className="text-grey-200 ml-1 text-xs sm:text-sm">
@{" "} @{" "}
{format( {format(
datetime, datetime,
isToday(datetime) ? "H:mm" : "dd. MM. H:mm" isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
)} )}
{modified && ( {modified && (
<span className="text-grey-200 text-sm block md:inline md:ml-2"> <span className="text-grey-200 text-xs block md:inline md:ml-2">
(upraveno) (upraveno)
</span> </span>
)} )}
...@@ -193,6 +230,7 @@ const Post = ({ ...@@ -193,6 +230,7 @@ const Post = ({
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
{thumbsVisible && (
<Thumbs <Thumbs
likes={ranking.likes} likes={ranking.likes}
dislikes={ranking.dislikes} dislikes={ranking.dislikes}
...@@ -201,8 +239,16 @@ const Post = ({ ...@@ -201,8 +239,16 @@ const Post = ({
onDislike={onDislike} onDislike={onDislike}
myVote={ranking.myVote} myVote={ranking.myVote}
/> />
)}
<PostScore
className="ml-2"
postType={type}
ranking={ranking}
rankingReadonly={!thumbsVisible}
supportThreshold={supportThreshold}
/>
{showActions && ( {showActions && (
<DropdownMenu right className="pl-4"> <DropdownMenu right className="pl-4 static">
{showAnnounceAction && ( {showAnnounceAction && (
<DropdownMenuItem <DropdownMenuItem
onClick={onAnnounceProcedureProposal} onClick={onAnnounceProcedureProposal}
...@@ -234,7 +280,7 @@ const Post = ({ ...@@ -234,7 +280,7 @@ const Post = ({
{showEditAction && ( {showEditAction && (
<DropdownMenuItem <DropdownMenuItem
onClick={onEdit} onClick={onEdit}
icon="ico--edit-pencil" icon="ico--pencil"
title="Upravit příspěvek" title="Upravit příspěvek"
/> />
)} )}
...@@ -252,6 +298,13 @@ const Post = ({ ...@@ -252,6 +298,13 @@ const Post = ({
title="Odblokovat uživatele" title="Odblokovat uživatele"
/> />
)} )}
{showInviteAction && (
<DropdownMenuItem
onClick={onInviteUser}
icon="ico--phone"
title="Pozvat uživatele do Jitsi"
/>
)}
{showHideAction && ( {showHideAction && (
<DropdownMenuItem <DropdownMenuItem
onClick={onHide} onClick={onHide}
...@@ -275,7 +328,7 @@ const Post = ({ ...@@ -275,7 +328,7 @@ const Post = ({
{labels} {labels}
</div> </div>
<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} dangerouslySetInnerHTML={htmlContent}
></div> ></div>
</div> </div>
...@@ -283,4 +336,4 @@ const Post = ({ ...@@ -283,4 +336,4 @@ const Post = ({
); );
}; };
export default Post; export default React.memo(Post);
src/components/posts/PostEditModal.jsx
View file @ 9f9e00fc
...@@ -15,13 +15,17 @@ const PostEditModal = ({ ...@@ -15,13 +15,17 @@ const PostEditModal = ({
...props ...props
}) => { }) => {
const [text, setText] = useState(post.content); const [text, setText] = useState(post.content);
const [noTextError, setNoTextError] = useState(false); const [textError, setTextError] = useState(null);
const onTextInput = (newText) => { const onTextInput = (newText) => {
setText(newText); setText(newText);
if (newText !== "") { if (newText !== "") {
setNoTextError(false); if (newText.length >= 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
} }
}; };
...@@ -31,14 +35,14 @@ const PostEditModal = ({ ...@@ -31,14 +35,14 @@ const PostEditModal = ({
if (!!text) { if (!!text) {
onConfirm(text); onConfirm(text);
} else { } else {
setNoTextError(true); setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
} }
}; };
return ( return (
<Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}> <Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
<form onSubmit={confirm}> <form onSubmit={confirm}>
<Card> <Card className="elevation-21">
<CardBody> <CardBody>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit text příspěvku</CardHeadline> <CardHeadline>Upravit text příspěvku</CardHeadline>
...@@ -49,15 +53,11 @@ const PostEditModal = ({ ...@@ -49,15 +53,11 @@ const PostEditModal = ({
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={textError}
noTextError
? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text příspěvku" placeholder="Vyplňte text příspěvku"
toolbarCommands={[ toolbarCommands={[
["header", "bold", "italic", "strikethrough"], ["header", "bold", "italic", "strikethrough"],
["link", "quote", "image"], ["link", "quote"],
["unordered-list", "ordered-list"], ["unordered-list", "ordered-list"],
]} ]}
/> />
...@@ -72,6 +72,7 @@ const PostEditModal = ({ ...@@ -72,6 +72,7 @@ const PostEditModal = ({
hoverActive hoverActive
color="blue-300" color="blue-300"
className="text-sm" className="text-sm"
disabled={textError || confirming}
loading={confirming} loading={confirming}
onClick={confirm} onClick={confirm}
> >
......
src/components/posts/PostList.jsx
View file @ 9f9e00fc
import React from "react"; import React, { useCallback, useMemo, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import Post from "./Post"; import Post from "./Post";
...@@ -8,6 +8,7 @@ const PostList = ({ ...@@ -8,6 +8,7 @@ const PostList = ({
items, items,
showAddPostCta, showAddPostCta,
currentUser, currentUser,
supportThreshold,
canThumb, canThumb,
dimArchived, dimArchived,
onLike, onLike,
...@@ -15,6 +16,7 @@ const PostList = ({ ...@@ -15,6 +16,7 @@ const PostList = ({
onHide, onHide,
onBanUser, onBanUser,
onUnbanUser, onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal, onAnnounceProcedureProposal,
onAcceptProcedureProposal, onAcceptProcedureProposal,
onRejectProcedureProposal, onRejectProcedureProposal,
...@@ -28,12 +30,16 @@ const PostList = ({ ...@@ -28,12 +30,16 @@ const PostList = ({
responderFn(post); responderFn(post);
}; };
const windowSize = 20;
const [window, setWindow] = useState(windowSize);
const onPostLike = buildHandler(onLike); const onPostLike = buildHandler(onLike);
const onPostDislike = buildHandler(onDislike); const onPostDislike = buildHandler(onDislike);
const onPostEdit = buildHandler(onEdit); const onPostEdit = buildHandler(onEdit);
const onPostHide = buildHandler(onHide); const onPostHide = buildHandler(onHide);
const onPostBanUser = buildHandler(onBanUser); const onPostBanUser = buildHandler(onBanUser);
const onPostUnbanUser = buildHandler(onUnbanUser); const onPostUnbanUser = buildHandler(onUnbanUser);
const onPostInviteUser = buildHandler(onInviteUser);
const onPostArchive = buildHandler(onArchive); const onPostArchive = buildHandler(onArchive);
const onPostAnnounceProcedureProposal = buildHandler( const onPostAnnounceProcedureProposal = buildHandler(
onAnnounceProcedureProposal onAnnounceProcedureProposal
...@@ -44,15 +50,27 @@ const PostList = ({ ...@@ -44,15 +50,27 @@ const PostList = ({
onRejectProcedureProposalByChairman onRejectProcedureProposalByChairman
); );
const onPostSeen = (post) => () => { const onPostSeen = useCallback(
(post) => () => {
if (!post.seen) {
onSeen(post); 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 ( return (
<div className={classNames("space-y-px", className)}> <div className={classNames("space-y-px", className)}>
{items {windowItems.map((item, idx) => (
.filter((item) => !item.hidden)
.map((item) => (
<Post <Post
key={item.id} key={item.id}
datetime={item.datetime} datetime={item.datetime}
...@@ -61,18 +79,20 @@ const PostList = ({ ...@@ -61,18 +79,20 @@ const PostList = ({
state={item.state} state={item.state}
content={item.contentHtml} content={item.contentHtml}
ranking={item.ranking} ranking={item.ranking}
historyLog={item.historyLog}
modified={item.modified} modified={item.modified}
seen={item.seen} seen={item.seen}
reportSeen={!item.seen || idx === window - 1}
archived={item.archived} archived={item.archived}
dimIfArchived={dimArchived} dimIfArchived={dimArchived}
currentUser={currentUser} currentUser={currentUser}
supportThreshold={supportThreshold}
canThumb={canThumb} canThumb={canThumb}
onLike={onPostLike(item)} onLike={onPostLike(item)}
onDislike={onPostDislike(item)} onDislike={onPostDislike(item)}
onHide={onPostHide(item)} onHide={onPostHide(item)}
onBanUser={onPostBanUser(item)} onBanUser={onPostBanUser(item)}
onUnbanUser={onPostUnbanUser(item)} onUnbanUser={onPostUnbanUser(item)}
onInviteUser={onPostInviteUser(item)}
onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)} onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)}
onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)} onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)}
onRejectProcedureProposal={onPostRejectProcedureProposal(item)} onRejectProcedureProposal={onPostRejectProcedureProposal(item)}
......
src/components/posts/PostScore.jsx 0 → 100644
View file @ 9f9e00fc
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);
src/components/posts/RejectPostModalConfirm.jsx 0 → 100644
View file @ 9f9e00fc
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);
src/components/program/ProgramEntryEditModal.jsx
View file @ 9f9e00fc
...@@ -24,7 +24,7 @@ const ProgramEntryEditModal = ({ ...@@ -24,7 +24,7 @@ const ProgramEntryEditModal = ({
return ( return (
<Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}> <Modal containerClassName="max-w-md" onRequestClose={onCancel} {...props}>
<Card> <Card className="elevation-21">
<CardBody> <CardBody>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit název programového bodu</CardHeadline> <CardHeadline>Upravit název programového bodu</CardHeadline>
......
src/containers/AddAnnouncementForm.jsx
View file @ 9f9e00fc
...@@ -11,8 +11,8 @@ import { urlRegex } from "utils"; ...@@ -11,8 +11,8 @@ import { urlRegex } from "utils";
const AddAnnouncementForm = ({ className }) => { const AddAnnouncementForm = ({ className }) => {
const [text, setText] = useState(""); const [text, setText] = useState("");
const [link, setLink] = useState(""); const [link, setLink] = useState("");
const [linkValid, setLinkValid] = useState(null); const [textError, setTextError] = useState(null);
const [noTextError, setNoTextError] = useState(false); const [linkError, setLinkError] = useState(null);
const [type, setType] = useState("announcement"); const [type, setType] = useState("announcement");
const [adding, addingError] = useActionState(addAnnouncement, { const [adding, addingError] = useActionState(addAnnouncement, {
...@@ -25,7 +25,11 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -25,7 +25,11 @@ const AddAnnouncementForm = ({ className }) => {
setText(newText); setText(newText);
if (newText !== "") { if (newText !== "") {
setNoTextError(false); if (newText.length > 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
} }
}; };
...@@ -33,11 +37,17 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -33,11 +37,17 @@ const AddAnnouncementForm = ({ className }) => {
setLink(newLink); setLink(newLink);
if (!!newLink) { if (!!newLink) {
setLinkValid(urlRegex.test(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) => { const onAdd = async (evt) => {
evt.preventDefault();
let preventAction = false; let preventAction = false;
const payload = { const payload = {
content: text, content: text,
...@@ -45,12 +55,15 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -45,12 +55,15 @@ const AddAnnouncementForm = ({ className }) => {
}; };
if (!text) { if (!text) {
setNoTextError(true); 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; preventAction = true;
} }
if (type === "voting" && !link) { if (type === "voting" && !link) {
setLinkValid(false); setLinkError("Zadejte platnou URL.");
preventAction = true; preventAction = true;
} else { } else {
payload.link = link; payload.link = link;
...@@ -65,13 +78,13 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -65,13 +78,13 @@ const AddAnnouncementForm = ({ className }) => {
if (!result.error) { if (!result.error) {
setText(""); setText("");
setLink(""); setLink("");
setNoTextError(false); setTextError(null);
setLinkValid(null); setLinkError(null);
} }
}; };
return ( return (
<div className={className}> <form className={className} onSubmit={onAdd}>
{addingError && ( {addingError && (
<ErrorMessage> <ErrorMessage>
Při přidávání oznámení došlo k problému: {addingError}. Při přidávání oznámení došlo k problému: {addingError}.
...@@ -87,7 +100,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -87,7 +100,7 @@ const AddAnnouncementForm = ({ className }) => {
<label> <label>
<input <input
type="radio" type="radio"
name="type" name="announcementType"
value="announcement" value="announcement"
defaultChecked defaultChecked
/> />
...@@ -97,7 +110,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -97,7 +110,7 @@ const AddAnnouncementForm = ({ className }) => {
<div className="radio form-field__control"> <div className="radio form-field__control">
<label> <label>
<input type="radio" name="type" value="voting" /> <input type="radio" name="announcementType" value="voting" />
<span>Rozhodující hlasování</span> <span>Rozhodující hlasování</span>
</label> </label>
</div> </div>
...@@ -107,11 +120,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -107,11 +120,7 @@ const AddAnnouncementForm = ({ className }) => {
<MarkdownEditor <MarkdownEditor
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={textError}
noTextError
? "Před přidáním oznámení nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text oznámení" placeholder="Vyplňte text oznámení"
toolbarCommands={[ toolbarCommands={[
["bold", "italic", "strikethrough"], ["bold", "italic", "strikethrough"],
...@@ -123,7 +132,7 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -123,7 +132,7 @@ const AddAnnouncementForm = ({ className }) => {
<div <div
className={classNames("form-field", { className={classNames("form-field", {
hidden: type !== "voting", hidden: type !== "voting",
"form-field--error": linkValid === false, "form-field--error": !!linkError,
})} })}
> >
<div className="form-field__wrapper form-field__wrapper--shadowed"> <div className="form-field__wrapper form-field__wrapper--shadowed">
...@@ -138,23 +147,21 @@ const AddAnnouncementForm = ({ className }) => { ...@@ -138,23 +147,21 @@ const AddAnnouncementForm = ({ className }) => {
<i className="ico--link"></i> <i className="ico--link"></i>
</div> </div>
</div> </div>
{linkValid === false && ( {!!linkError && <div className="form-field__error">{linkError}</div>}
<div className="form-field__error">Zadejte platnou URL.</div>
)}
</div> </div>
</div> </div>
<Button <Button
onClick={onAdd} type="submit"
className="text-sm mt-4" className="text-sm mt-4"
hoverActive hoverActive
loading={adding} loading={adding}
disabled={adding} disabled={textError || linkError || adding}
fullwidth fullwidth
> >
Přidat oznámení Přidat oznámení
</Button> </Button>
</div> </form>
); );
}; };
......
src/containers/AddPostForm.jsx
View file @ 9f9e00fc
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 { 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 ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor"; import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks"; 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 [text, setText] = useState("");
const [showAddConfirm, setShowAddConfirm] = useState(false);
const [type, setType] = useState("post"); const [type, setType] = useState("post");
const [noTextError, setNoTextError] = useState(false); const [error, setError] = useState(null);
const [addingPost, addingPostError] = useActionState(addPost, { const [addingPost, addingPostError] = useActionState(addPost, {
content: text, content: text,
}); });
const [addingProposal, addingProposalError] = useActionState(addPost, { const [addingProposal, addingProposalError] = useActionState(addProposal, {
content: text, 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) => { const onTextInput = (newText) => {
setText(newText); setText(newText);
if (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) => { const onAdd = async (evt) => {
evt.preventDefault();
if (!!text) { if (!!text) {
if (!error) {
const result = await (type === "post" ? addPost : addProposal).run({ const result = await (type === "post" ? addPost : addProposal).run({
content: text, content: text,
}); });
if (!result.error) { if (!result.error) {
setText(""); setText("");
setExpanded(false);
setShowAddConfirm(true);
enqueueHideAddConfirm();
}
} }
} else { } else {
setNoTextError(true); setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
} }
}; };
const setTypePost = (evt) => { const wrapperClass = classNames(
evt.preventDefault(); className,
evt.stopPropagation(); "hover:elevation-16 transition duration-500",
setType("post"); {
}; "elevation-4 cursor-text": !expanded && !showAddConfirm,
const setTypeProposal = (evt) => { "lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
evt.preventDefault(); }
evt.stopPropagation(); );
setType("procedure-proposal");
};
return ( return (
<div className={className}> <Card className={wrapperClass} ref={cardRef}>
{addingPostError && ( <span
<ErrorMessage> className={classNames("alert items-center transition duration-500", {
Při přidávání příspěvku došlo k problému: {addingPostError}. "alert--success": showAddConfirm,
</ErrorMessage> "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> <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> </ErrorMessage>
)} )}
<MarkdownEditor <MarkdownEditor
ref={editorRef}
value={text} value={text}
onChange={onTextInput} onChange={onTextInput}
error={ error={error}
noTextError
? "Před přidáním příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
placeholder="Vyplňte text vašeho příspěvku" placeholder="Vyplňte text vašeho příspěvku"
toolbarCommands={[ toolbarCommands={[
["header", "bold", "italic", "strikethrough"], ["header", "bold", "italic", "strikethrough"],
["link", "quote", "image"], ["link", "quote"],
["unordered-list", "ordered-list"], ["unordered-list", "ordered-list"],
]} ]}
/> />
<div className="space-x-4"> {canAddProposal && (
<DropdownButton <div
onClick={onAdd} className="form-field"
disabled={addingPost || addingProposal} onChange={(evt) => setType(evt.target.value)}
loading={addingPost || addingProposal} >
fullwidth <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
items={ <div className="radio form-field__control">
<> <label>
{type === "post" && ( <input
<DropdownButtonItem onClick={setTypeProposal}> type="radio"
Navrhnout postup name="postType"
</DropdownButtonItem> 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" && ( {type === "procedure-proposal" && (
<DropdownButtonItem onClick={setTypePost}> <p className="alert alert--light text-sm">
Přidat příspěvek <i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
</DropdownButtonItem> <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 hoverActive
className="text-sm xl:text-base"
> >
{type === "post" && "Přidat příspěvek"} {type === "post" && "Přidat příspěvek"}
{type === "procedure-proposal" && "Navrhnout postup"} {type === "procedure-proposal" && "Navrhnout postup"}
</DropdownButton> </Button>
<span className="text-sm text-grey-200 hidden lg:inline"> <span className="text-sm text-grey-200 hidden lg:inline">
Pro pokročilejší formátování můžete používat{" "} Pro pokročilejší formátování můžete používat{" "}
...@@ -117,7 +229,9 @@ const AddPostForm = ({ className }) => { ...@@ -117,7 +229,9 @@ const AddPostForm = ({ className }) => {
. .
</span> </span>
</div> </div>
</div> </form>
</CardBody>
</Card>
); );
}; };
......
src/containers/AnnoucementsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react"; import React from "react";
import { import {
deleteAnnouncement, deleteAnnouncement,
...@@ -11,13 +11,10 @@ import AnnouncementList from "components/annoucements/AnnouncementList"; ...@@ -11,13 +11,10 @@ import AnnouncementList from "components/annoucements/AnnouncementList";
import { CardBody } from "components/cards"; import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage"; import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks"; import { useItemActionConfirm } from "hooks";
import { AnnouncementStore, AuthStore } from "stores"; import { AnnouncementStore, AuthStore } from "stores";
const AnnoucementsContainer = ({ className }) => { const AnnoucementsContainer = ({ className }) => {
const [itemToEdit, setItemToEdit] = useState(null);
const [confirmingEdit, setConfirmingEdit] = useState(false);
const [editError, setEditError] = useState(null);
const { 2: loadResult } = loadAnnouncements.useWatch(); const { 2: loadResult } = loadAnnouncements.useWatch();
const [ const [
...@@ -25,45 +22,25 @@ const AnnoucementsContainer = ({ className }) => { ...@@ -25,45 +22,25 @@ const AnnoucementsContainer = ({ className }) => {
setItemToDelete, setItemToDelete,
onDeleteConfirm, onDeleteConfirm,
onDeleteCancel, onDeleteCancel,
deleteState,
] = useItemActionConfirm(deleteAnnouncement); ] = useItemActionConfirm(deleteAnnouncement);
const [deletingAnnouncement, deletingAnnouncementError] = useActionState( const [
deleteAnnouncement, itemToEdit,
itemToDelete setItemToEdit,
); onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
item,
payload,
}));
const { isAuthenticated, user } = AuthStore.useState(); const { isAuthenticated, user } = AuthStore.useState();
const items = AnnouncementStore.useState((state) => const items = AnnouncementStore.useState((state) =>
state.itemIds.map((id) => state.items[id]) state.itemIds.map((id) => state.items[id])
); );
const confirmEdit = useCallback(
async (payload) => {
if (itemToEdit && payload) {
setConfirmingEdit(true);
const result = await updateAnnouncement.run({
item: itemToEdit,
payload,
});
if (!result.error) {
setItemToEdit(null);
setEditError(null);
} else {
setEditError(result.message);
}
setConfirmingEdit(false);
}
},
[itemToEdit, setItemToEdit]
);
const cancelEdit = useCallback(() => {
setItemToEdit(null);
}, [setItemToEdit]);
return ( return (
<div className={className}> <div className={className}>
{loadResult && loadResult.error && ( {loadResult && loadResult.error && (
...@@ -84,8 +61,8 @@ const AnnoucementsContainer = ({ className }) => { ...@@ -84,8 +61,8 @@ const AnnoucementsContainer = ({ className }) => {
isOpen={!!itemToDelete} isOpen={!!itemToDelete}
onConfirm={onDeleteConfirm} onConfirm={onDeleteConfirm}
onCancel={onDeleteCancel} onCancel={onDeleteCancel}
confirming={deletingAnnouncement} confirming={deleteState.loading}
error={deletingAnnouncementError} error={deleteState.error}
title="Opravdu smazat?" title="Opravdu smazat?"
yesActionLabel="Smazat" yesActionLabel="Smazat"
> >
...@@ -95,10 +72,10 @@ const AnnoucementsContainer = ({ className }) => { ...@@ -95,10 +72,10 @@ const AnnoucementsContainer = ({ className }) => {
<AnnouncementEditModal <AnnouncementEditModal
isOpen={true} isOpen={true}
announcement={itemToEdit} announcement={itemToEdit}
onConfirm={confirmEdit} onConfirm={onEditConfirm}
onCancel={cancelEdit} onCancel={onEditCancel}
confirming={confirmingEdit} confirming={editState.loading}
error={editError} error={editState.error}
/> />
)} )}
</div> </div>
......
src/containers/GlobalStats.jsx
View file @ 9f9e00fc
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { format, isToday } from "date-fns"; import { format, isToday } from "date-fns";
import pick from "lodash/pick";
import { GlobalInfoStore, ProgramStore } from "stores"; import { GlobalInfoStore, ProgramStore } from "stores";
const GlobalStats = () => { const GlobalStats = () => {
const { onlineUsers, onlineMembers } = GlobalInfoStore.useState(); const {
const { currentId, scheduleIds, items } = ProgramStore.useState(); 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 const nextProgramEntryId = scheduleIds
? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0] ? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
...@@ -16,9 +25,19 @@ const GlobalStats = () => { ...@@ -16,9 +25,19 @@ const GlobalStats = () => {
? items[nextProgramEntryId] ? items[nextProgramEntryId]
: null; : null;
const nextProgramEntryCaption = nextProgramEntry
? `${nextProgramEntry.title} @ ${format(
nextProgramEntry.expectedStartAt,
isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
)}`
: null;
return ( return (
<div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300"> <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> <div
data-tip="Počet přihlášených členů Pirátské strany."
data-tip-at="bottom"
>
<strong>{onlineMembers}</strong>{" "} <strong>{onlineMembers}</strong>{" "}
<span> <span>
{onlineMembers === 1 && "člen online"} {onlineMembers === 1 && "člen online"}
...@@ -26,20 +45,31 @@ const GlobalStats = () => { ...@@ -26,20 +45,31 @@ const GlobalStats = () => {
{(onlineMembers === 0 || onlineMembers > 4) && "členů online"} {(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
</span> </span>
</div> </div>
<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> <strong>{onlineUsers}</strong> <span>online celkem</span>
</div> </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 && ( {nextProgramEntry && (
<div className="flex-grow text-right hidden sm:block lg:hidden xl:block"> <div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
Následuje:{" "} Následuje:{" "}
<Link to="/program" className="font-bold"> <Link
{nextProgramEntry.title} @{" "} to="/program"
{format( className="font-bold"
nextProgramEntry.expectedStartAt, aria-label={nextProgramEntryCaption}
isToday(nextProgramEntry.expectedStartAt) data-tip={"Následuje bod " + nextProgramEntryCaption}
? "H:mm" data-tip-at="bottom"
: "dd. MM. H:mm" >
)} {nextProgramEntryCaption}
</Link> </Link>
</div> </div>
)} )}
......
src/containers/JitsiInviteCard.jsx
View file @ 9f9e00fc
...@@ -8,6 +8,10 @@ import { useActionState } from "hooks"; ...@@ -8,6 +8,10 @@ import { useActionState } from "hooks";
import { AuthStore } from "stores"; import { AuthStore } from "stores";
const JitsiInviteCard = () => { const JitsiInviteCard = () => {
// docasne zablokovano
return null;
const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState(); const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
const [loading, errorMessage] = useActionState(loadMe); const [loading, errorMessage] = useActionState(loadMe);
...@@ -55,7 +59,12 @@ const JitsiInviteCard = () => { ...@@ -55,7 +59,12 @@ const JitsiInviteCard = () => {
<h2 className="head-heavy-xs"> <h2 className="head-heavy-xs">
<span>Pozvánka do Jitsi</span> <span>Pozvánka do Jitsi</span>
</h2> </h2>
<button type="button" onClick={dismissPopup}> <button
type="button"
onClick={dismissPopup}
aria-label="Zavřít"
data-tip="Zavřít"
>
<i className="ico--cross"></i> <i className="ico--cross"></i>
</button> </button>
</div> </div>
......
src/containers/PostFilters.jsx
View file @ 9f9e00fc
import React, { useCallback } from "react"; import React from "react";
import pick from "lodash/pick";
import Chip from "components/Chip";
import Dropdown from "components/Dropdown"; import Dropdown from "components/Dropdown";
import { PostStore } from "stores"; import { PostStore } from "stores";
import { updateWindowPosts } from "utils"; import { updateWindowPosts } from "utils";
const PostFilters = () => { const PostFilters = () => {
const { window, filters } = PostStore.useState((state) => const filters = PostStore.useState((state) => state.filters);
pick(state, ["window", "filters", "items"])
);
const flagsOptions = [ const flagsOptions = [
{ title: "Vše", value: "all" }, { title: "Vše", value: "all" },
...@@ -25,19 +21,13 @@ const PostFilters = () => { ...@@ -25,19 +21,13 @@ const PostFilters = () => {
{ title: "Jen návrhy", value: "proposalsOnly" }, { title: "Jen návrhy", value: "proposalsOnly" },
{ title: "Jen příspěvky", value: "discussionOnly" }, { title: "Jen příspěvky", value: "discussionOnly" },
]; ];
const hasNextPage = window.page * window.perPage < window.itemCount;
const hasPrevPage = window.page > 1;
const setFilter = (prop, newValue, resetPage = true) => { const setFilter = (prop, newValue) => {
PostStore.update((state) => { PostStore.update((state) => {
state.filters[prop] = newValue; state.filters[prop] = newValue;
state.window.itemCount = state.window.items.length; state.window.itemCount = state.window.items.length;
updateWindowPosts(state); updateWindowPosts(state);
if (resetPage) {
state.window.page = 1;
}
}); });
}; };
...@@ -45,27 +35,9 @@ const PostFilters = () => { ...@@ -45,27 +35,9 @@ const PostFilters = () => {
const onSortChange = (newValue) => setFilter("sort", newValue, false); const onSortChange = (newValue) => setFilter("sort", newValue, false);
const onTypeChange = (newValue) => setFilter("type", newValue); const onTypeChange = (newValue) => setFilter("type", newValue);
const onNextPage = useCallback(() => {
if (hasNextPage) {
PostStore.update((state) => {
state.window.page = state.window.page + 1;
});
}
}, [hasNextPage]);
const onPrevPage = useCallback(() => {
if (hasPrevPage) {
PostStore.update((state) => {
state.window.page = state.window.page - 1;
});
}
}, [hasPrevPage]);
const enabledPaginatorClass = "cursor-pointer text-xs";
const disabledPaginatorClass = "opacity-25 cursor-not-allowed text-xs";
return ( return (
<div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center"> <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div className="-mx-1"> <div className="-mx-1 joyride-filters">
<Dropdown <Dropdown
value={filters.flags} value={filters.flags}
onChange={onFlagsChange} onChange={onFlagsChange}
...@@ -85,29 +57,6 @@ const PostFilters = () => { ...@@ -85,29 +57,6 @@ const PostFilters = () => {
className="text-xs ml-1 mt-2 xl:mt-0" className="text-xs ml-1 mt-2 xl:mt-0"
/> />
</div> </div>
<div>
<Chip
color="grey-125"
className={
hasPrevPage ? enabledPaginatorClass : disabledPaginatorClass
}
hoveractive
onClick={onPrevPage}
>
<span className="ico--chevron-left"></span>
</Chip>
<Chip
color="grey-125"
className={
hasNextPage ? enabledPaginatorClass : disabledPaginatorClass
}
hoveractive
onClick={onNextPage}
>
<span className="ico--chevron-right"></span>
</Chip>
</div>
</div> </div>
); );
}; };
......
src/containers/PostsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react"; import React, { useCallback, useMemo } from "react";
import pick from "lodash/pick"; import pick from "lodash/pick";
import { import {
...@@ -14,147 +14,186 @@ import { ...@@ -14,147 +14,186 @@ import {
rejectProposal, rejectProposal,
rejectProposalByChairman, rejectProposalByChairman,
} from "actions/posts"; } from "actions/posts";
import { ban, unban } from "actions/users"; import { ban, inviteToJitsi, unban } from "actions/users";
import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage"; import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import ModalWithActions from "components/modals/ModalWithActions";
import PostEditModal from "components/posts/PostEditModal"; import PostEditModal from "components/posts/PostEditModal";
import PostList from "components/posts/PostList"; import PostList from "components/posts/PostList";
import { useActionState, useItemActionConfirm } from "hooks"; import { useActionState, useItemActionConfirm } from "hooks";
import { AuthStore, PostStore } from "stores"; import { AuthStore, GlobalInfoStore, PostStore } from "stores";
const PostsContainer = ({ className, showAddPostCta }) => { const PostsContainer = ({ className, showAddPostCta }) => {
const [postToEdit, setPostToEdit] = useState(null);
const [confirmingEdit, setConfirmingEdit] = useState(false);
const [editError, setEditError] = useState(null);
const [ const [
userToBan, userToBan,
setUserToBan, setUserToBan,
onBanUserConfirm, onBanUserConfirm,
onBanUserCancel, onBanUserCancel,
banUserState,
] = useItemActionConfirm(ban); ] = useItemActionConfirm(ban);
const [ const [
userToUnban, userToUnban,
setUserToUnban, setUserToUnban,
onUnbanUserConfirm, onUnbanUserConfirm,
onUnbanUserCancel, onUnbanUserCancel,
unbanUserState,
] = useItemActionConfirm(unban); ] = useItemActionConfirm(unban);
const [
userToInvite,
setUserToInvite,
onInviteUserConfirm,
onInviteUserCancel,
inviteUserState,
] = useItemActionConfirm(inviteToJitsi);
const [ const [
postToHide, postToHide,
setPostToHide, setPostToHide,
onPostHideConfirm, onPostHideConfirm,
onPostHideCancel, onPostHideCancel,
postHideState,
] = useItemActionConfirm(hide); ] = useItemActionConfirm(hide);
const [ const [
postToArchive, postToArchive,
setPostToArchive, setPostToArchive,
onPostArchiveConfirm, onPostArchiveConfirm,
onPostArchiveCancel, onPostArchiveCancel,
postArchiveState,
] = useItemActionConfirm(archive); ] = useItemActionConfirm(archive);
const [ const [
postToAnnounce, postToAnnounce,
setPostToAnnounce, setPostToAnnounce,
onAnnounceConfirm, onAnnounceConfirm,
onAnnounceCancel, onAnnounceCancel,
announceState,
] = useItemActionConfirm(announceProposal); ] = useItemActionConfirm(announceProposal);
const [ const [
postToAccept, postToAccept,
setPostToAccept, setPostToAccept,
onAcceptConfirm, onAcceptConfirm,
onAcceptCancel, onAcceptCancel,
] = useItemActionConfirm(acceptProposal); ] = useItemActionConfirm(acceptProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [
postToEdit,
setPostToEdit,
onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(edit, (item, newContent) => ({
post: item,
newContent,
}));
const [ const [
postToReject, postToReject,
setPostToReject, setPostToReject,
onRejectConfirm, onRejectConfirm,
onRejectCancel, onRejectCancel,
] = useItemActionConfirm(rejectProposal); ] = useItemActionConfirm(rejectProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [ const [
postToRejectByChairman, postToRejectByChairman,
setPostToRejectByChairman, setPostToRejectByChairman,
onRejectByChairmanConfirm, onRejectByChairmanConfirm,
onRejectByChairmanCancel, onRejectByChairmanCancel,
] = useItemActionConfirm(rejectProposalByChairman); ] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
proposal: item,
archive,
}));
const { isAuthenticated, user } = AuthStore.useState(); const { isAuthenticated, user } = AuthStore.useState((state) =>
pick(state, ["isAuthenticated", "user"])
);
const { window, items } = PostStore.useState((state) => const { window, items } = PostStore.useState((state) =>
pick(state, ["window", "items"]) pick(state, ["window", "items"])
); );
const showingArchivedOnly = PostStore.useState( const showingArchivedOnly = PostStore.useState(
(state) => state.filters.flags === "archived" (state) => state.filters.flags === "archived"
); );
const groupSizeHalf = GlobalInfoStore.useState(
const [banningUser, banningUserError] = useActionState(ban, userToBan); (state) => state.groupSizeHalf
const [unbanningUser, unbanningUserError] = useActionState(
unban,
userToUnban
);
const [hidingPost, hidingPostError] = useActionState(hide, postToHide);
const [archivingPost, archivingPostError] = useActionState(
archive,
postToArchive
);
const [announcingProposal, announcingProposalError] = useActionState(
announceProposal,
postToAnnounce
); );
const [acceptingProposal, acceptingProposalError] = useActionState( const [acceptingProposal, acceptingProposalError] = useActionState(
acceptProposal, acceptProposal,
postToAccept {
proposal: postToAccept,
archive: false,
}
); );
const [
acceptingAndArchivingProposal,
acceptingAndArchivingProposalError,
] = useActionState(acceptProposal, {
proposal: postToAccept,
archive: true,
});
const [rejectingProposal, rejectingProposalError] = useActionState( const [rejectingProposal, rejectingProposalError] = useActionState(
rejectProposal, rejectProposal,
postToReject {
proposal: postToReject,
archive: false,
}
); );
const [
rejectingAndArchivingProposal,
rejectingAndArchivingProposalError,
] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
const [ const [
rejectingProposalByChairman, rejectingProposalByChairman,
rejectingProposalByChairmanError, rejectingProposalByChairmanError,
] = useActionState(rejectProposalByChairman, postToRejectByChairman); ] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: false,
});
const [
rejectingProposalByChairmanAndArchiving,
rejectingProposalByChairmanAndArchivingError,
] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: true,
});
const { 2: loadResult } = loadPosts.useWatch(); const { 2: loadResult } = loadPosts.useWatch();
const confirmEdit = useCallback(
async (newContent) => {
if (postToEdit && newContent) {
setConfirmingEdit(true);
const result = await edit.run({ post: postToEdit, newContent });
if (!result.error) {
setPostToEdit(null);
setEditError(null);
} else {
setEditError(result.message);
}
setConfirmingEdit(false);
}
},
[postToEdit, setPostToEdit]
);
const cancelEdit = useCallback(() => {
setPostToEdit(null);
}, [setPostToEdit]);
/** /**
* Ban a post's author. * Ban a post's author.
* @param {CF2021.Post} post * @param {CF2021.Post} post
*/ */
const onBanUser = (post) => { const onBanUser = useCallback(
(post) => {
setUserToBan(post.author); setUserToBan(post.author);
}; },
[setUserToBan]
);
/** /**
* Ban a post's author. * Ban a post's author.
* @param {CF2021.Post} post * @param {CF2021.Post} post
*/ */
const onUnbanUser = (post) => { const onUnbanUser = useCallback(
(post) => {
setUserToUnban(post.author); setUserToUnban(post.author);
}; },
[setUserToUnban]
);
/**
* Invite post's author to Jitsi.
* @param {CF2021.Post} post
*/
const onInviteUser = useCallback(
(post) => {
setUserToInvite(post.author);
},
[setUserToInvite]
);
const sliceStart = (window.page - 1) * window.perPage; const windowItems = useMemo(() => {
const sliceEnd = window.page * window.perPage; return window.items.map((postId) => items[postId]);
const windowItems = window.items.map((postId) => items[postId]); }, [items, window.items]);
return ( return (
<> <>
...@@ -164,7 +203,7 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -164,7 +203,7 @@ const PostsContainer = ({ className, showAddPostCta }) => {
</ErrorMessage> </ErrorMessage>
)} )}
<PostList <PostList
items={windowItems.slice(sliceStart, sliceEnd)} items={windowItems}
showAddPostCta={showAddPostCta} showAddPostCta={showAddPostCta}
canThumb={isAuthenticated} canThumb={isAuthenticated}
onLike={like.run} onLike={like.run}
...@@ -173,9 +212,11 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -173,9 +212,11 @@ const PostsContainer = ({ className, showAddPostCta }) => {
className={className} className={className}
dimArchived={!showingArchivedOnly} dimArchived={!showingArchivedOnly}
currentUser={user} currentUser={user}
supportThreshold={groupSizeHalf}
onHide={setPostToHide} onHide={setPostToHide}
onBanUser={onBanUser} onBanUser={onBanUser}
onUnbanUser={onUnbanUser} onUnbanUser={onUnbanUser}
onInviteUser={onInviteUser}
onEdit={setPostToEdit} onEdit={setPostToEdit}
onArchive={setPostToArchive} onArchive={setPostToArchive}
onAnnounceProcedureProposal={setPostToAnnounce} onAnnounceProcedureProposal={setPostToAnnounce}
...@@ -187,8 +228,8 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -187,8 +228,8 @@ const PostsContainer = ({ className, showAddPostCta }) => {
isOpen={!!userToBan} isOpen={!!userToBan}
onConfirm={onBanUserConfirm} onConfirm={onBanUserConfirm}
onCancel={onBanUserCancel} onCancel={onBanUserCancel}
confirming={banningUser} confirming={banUserState.loading}
error={banningUserError} error={banUserState.error}
title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`} title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`}
yesActionLabel="Zablokovat" yesActionLabel="Zablokovat"
> >
...@@ -199,8 +240,8 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -199,8 +240,8 @@ const PostsContainer = ({ className, showAddPostCta }) => {
isOpen={!!userToUnban} isOpen={!!userToUnban}
onConfirm={onUnbanUserConfirm} onConfirm={onUnbanUserConfirm}
onCancel={onUnbanUserCancel} onCancel={onUnbanUserCancel}
confirming={unbanningUser} confirming={unbanUserState.loading}
error={unbanningUserError} error={unbanUserState.error}
title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`} title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`}
yesActionLabel="Odblokovat" yesActionLabel="Odblokovat"
> >
...@@ -208,12 +249,26 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -208,12 +249,26 @@ const PostsContainer = ({ className, showAddPostCta }) => {
odblokován a bude mu opět umožněno přidávat nové příspěvky. Opravdu to odblokován a bude mu opět umožněno přidávat nové příspěvky. Opravdu to
chcete? chcete?
</ModalConfirm> </ModalConfirm>
<ModalConfirm
isOpen={!!userToInvite}
onConfirm={onInviteUserConfirm}
onCancel={onInviteUserCancel}
confirming={inviteUserState.loading}
error={inviteUserState.error}
title={`Pozvat uživatele ${
userToBan ? userToBan.name : null
} do Jitsi?`}
yesActionLabel="Pozvat"
>
Uživateli <strong>{userToInvite ? userToInvite.name : null}</strong>{" "}
přijde pozvánka do soukromého Jitsi kanálu. Určitě to chcete?
</ModalConfirm>
<ModalConfirm <ModalConfirm
isOpen={!!postToHide} isOpen={!!postToHide}
onConfirm={onPostHideConfirm} onConfirm={onPostHideConfirm}
onCancel={onPostHideCancel} onCancel={onPostHideCancel}
confirming={hidingPost} confirming={postHideState.loading}
error={hidingPostError} error={postHideState.error}
title="Skrýt příspěvek?" title="Skrýt příspěvek?"
yesActionLabel="Potvrdit" yesActionLabel="Potvrdit"
> >
...@@ -223,8 +278,8 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -223,8 +278,8 @@ const PostsContainer = ({ className, showAddPostCta }) => {
isOpen={!!postToArchive} isOpen={!!postToArchive}
onConfirm={onPostArchiveConfirm} onConfirm={onPostArchiveConfirm}
onCancel={onPostArchiveCancel} onCancel={onPostArchiveCancel}
confirming={archivingPost} confirming={postArchiveState.loading}
error={archivingPostError} error={postArchiveState.error}
title="Archivovat příspěvek?" title="Archivovat příspěvek?"
yesActionLabel="Potvrdit" yesActionLabel="Potvrdit"
> >
...@@ -235,55 +290,142 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -235,55 +290,142 @@ const PostsContainer = ({ className, showAddPostCta }) => {
isOpen={!!postToAnnounce} isOpen={!!postToAnnounce}
onConfirm={onAnnounceConfirm} onConfirm={onAnnounceConfirm}
onCancel={onAnnounceCancel} onCancel={onAnnounceCancel}
confirming={announcingProposal} confirming={announceState.loading}
error={announcingProposalError} error={announceState.errror}
title="Vyhlásit procedurální návrh?" title="Vyhlásit procedurální návrh?"
yesActionLabel="Vyhlásit návrh" yesActionLabel="Vyhlásit návrh"
> >
Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete? Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete?
</ModalConfirm> </ModalConfirm>
<ModalConfirm <ModalWithActions
isOpen={!!postToAccept} isOpen={!!postToAccept}
onConfirm={onAcceptConfirm}
onCancel={onAcceptCancel} onCancel={onAcceptCancel}
confirming={acceptingProposal} error={acceptingProposalError || acceptingAndArchivingProposalError}
error={acceptingProposalError}
title="Schválit procedurální návrh?" title="Schválit procedurální návrh?"
yesActionLabel="Schválit návrh" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onAcceptConfirm(false)}
loading={acceptingProposal}
>
Schválit
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onAcceptConfirm(true)}
loading={acceptingAndArchivingProposal}
>
Schválit a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onAcceptCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete? Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete?
</ModalConfirm> </ModalWithActions>
<ModalConfirm <ModalWithActions
isOpen={!!postToReject} isOpen={!!postToReject}
onConfirm={onRejectConfirm}
onCancel={onRejectCancel} onCancel={onRejectCancel}
confirming={rejectingProposal} error={rejectingProposalError || rejectingAndArchivingProposalError}
error={rejectingProposalError}
title="Zamítnout procedurální návrh?" title="Zamítnout procedurální návrh?"
yesActionLabel="Zamítnout návrh" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(false)}
loading={rejectingProposal}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(true)}
loading={rejectingAndArchivingProposal}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete? Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
</ModalConfirm> </ModalWithActions>
<ModalConfirm <ModalWithActions
isOpen={!!postToRejectByChairman} isOpen={!!postToRejectByChairman}
onConfirm={onRejectByChairmanConfirm}
onCancel={onRejectByChairmanCancel} onCancel={onRejectByChairmanCancel}
confirming={rejectingProposalByChairman} error={
error={rejectingProposalByChairmanError} rejectingProposalByChairmanError ||
rejectingProposalByChairmanAndArchivingError
}
title="Zamítnout procedurální návrh předsedajícícm?" title="Zamítnout procedurální návrh předsedajícícm?"
yesActionLabel="Zamítnout návrh předsedajícím" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(false)}
loading={rejectingProposalByChairman}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(true)}
loading={rejectingProposalByChairmanAndArchiving}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu
to chcete? to chcete?
</ModalConfirm> </ModalWithActions>
{postToEdit && ( {postToEdit && (
<PostEditModal <PostEditModal
isOpen={true} isOpen={true}
post={postToEdit} post={postToEdit}
onConfirm={confirmEdit} onConfirm={onEditConfirm}
onCancel={cancelEdit} onCancel={onEditCancel}
confirming={confirmingEdit} confirming={editState.loading}
error={editError} error={editState.error}
/> />
)} )}
</> </>
......
src/hooks.js
View file @ 9f9e00fc
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
export const useItemActionConfirm = (actionFn) => { const baseActionParamsBuilder = (item, args) => {
return item;
};
export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
const [item, setItem] = useState(null); const [item, setItem] = useState(null);
const [actionArgs, setActionArgs] = useState(null);
const onActionConfirm = useCallback(async () => { const onActionConfirm = useCallback(
async (args) => {
if (item) { if (item) {
const result = await actionFn.run(item); const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
item,
args,
);
setActionArgs(newActionArgs);
const result = await actionFn.run(newActionArgs);
if (!result.error) { if (!result.error) {
setItem(null); setItem(null);
} }
} }
}, [item, setItem, actionFn]); },
[item, setItem, actionFn, actionParamsBuilder, setActionArgs],
);
const onActionCancel = useCallback(() => { const onActionCancel = useCallback(() => {
setItem(null); setItem(null);
}, [setItem]); }, [setItem]);
return [item, setItem, onActionConfirm, onActionCancel]; const [loading, error] = useActionState(actionFn, actionArgs);
const unwrappedActionState = { loading, error };
return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
}; };
export const useActionConfirm = (actionFn, actionArgs) => { export const useActionConfirm = (actionFn, actionArgs) => {
......
src/index.js
View file @ 9f9e00fc
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom/client";
import ReactModal from "react-modal"; import ReactModal from "react-modal";
import { refreshAccessToken } from "actions/users";
import App from "./App"; import App from "./App";
import * as serviceWorker from "./serviceWorker"; import * as serviceWorker from "./serviceWorker";
const root = document.getElementById("root"); const root = ReactDOM.createRoot(document.getElementById("root"));
function handleVisibilityChange() {
if (!document.hidden) {
refreshAccessToken();
}
}
ReactDOM.render( document.addEventListener("visibilitychange", handleVisibilityChange, false);
root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>
root
); );
ReactModal.setAppElement(document.getElementById("root"));
ReactModal.setAppElement(root);
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.
......
src/keycloak.js
View file @ 9f9e00fc
...@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js"; ...@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
// Setup Keycloak instance as needed // Setup Keycloak instance as needed
// Pass initialization options as required or leave blank to load from 'keycloak.json' // Pass initialization options as required or leave blank to load from 'keycloak.json'
const keycloak = Keycloak({ const keycloak = new Keycloak({
url: "https://auth.pirati.cz/auth", url: "https://auth.pirati.cz/auth",
realm: "pirati", realm: "pirati",
clientId: "cf-online", clientId: "cf-online",
......
src/pages/About.jsx 0 → 100644
View file @ 9f9e00fc
import React from "react";
import { Helmet } from "react-helmet-async";
import { markdownConverter } from "markdown";
const content = markdownConverter.makeHtml(`
**Celostátní fórum Pirátské strany** je [podle Stanov](https://wiki.pirati.cz/rules/st#cl_8_celostatni_forum) nejvyšším orgánem strany a zasedání se podle možností účastní každý člen strany.
> #### Celostátní fórum ve výlučné působnosti:
>
> * a. volí a odvolává republikové předsednictvo,
> * b. volí a odvolává členy republikového výboru volené celostátním fórem,
> * c. zřizuje a ruší komise a odbory na celostátní úrovni,
> * d. volí a odvolává členy komise a vedoucího odboru,
> * e. schvaluje změny stanov,
> * f. projednává a schvaluje výroční zprávu předsedy strany,
> * g. mimořádně přezkoumává rozhodnutí orgánu strany,
> * h. schvaluje zakládací dokument politického institutu,
> * i. může schválit Předpis o institutu,
> * j. může volit a odvolávat některé členy správní rady politického institutu.
>
> #### Celostátní fórum dále
>
> * a. přijímá v mezích stanov další předpisy,
> * b. ukládá úkoly republikovému předsednictvu a republikovému výboru,
> * c. může projednávat a schvalovat základní programové a ideové dokumenty,
> * d. má veškerou působnost, kterou stanovy neurčují jinému orgánu strany.
### Zasedání na Internetu
Zasedání Celostátního fóra může z důvodu mimořádných okolností probíhat na Internetu. Postup zasedání na Internetu je definován §42a Jednacího řádu Celostátního fóra v následujícím znění:
> **(1)** Pokud mimořádné okolnosti nedovolují konání běžného zasedání, může, v rámci krizového řízení, republikové předsednictvo pověřit předsedu strany svoláním zasedání na Internetu nebo změnou již svolaného běžného zasedání na zasedání na Internetu.
>
> **(2)** Při zasedání na Internetu jednají účastníci zasedání ve vzájemné okamžité součinnosti přes Internet s použitím určených systémů strany, případně systémů třetích stran.
>
> **(3)** Zasedání na Internetu předseda strany svolá tím, že členům řádně oznámí datum, dobu a jeho organizátora, a to nejméně 40 dnů předem. Nejméně 14 dní před začátkem zasedání organizátor oznámí zejména:
>
> * a) způsoby pro sledování veřejného přenosu ze zasedání,
> * b) způsob pro registraci přítomnosti účastníků v průběhu zasedání,
> * c) způsob pro účast v jednání zvukem a obrazem,
> * d) způsob, kterým mohou přítomní členové a příznivci v rozpravě písemně pokládat dotazy a připomínky a vyjádřit jim podporu,
> * e) způsob, kterým mohou přítomní členové předkládat písemně procedurální návrhy a vyjádřit jim podporu,
> * f) způsob pro sčítané hlasování o procedurálních návrzích,
> * g) pokyny pro účast novinářů.
>
> **(4)** Právo účasti v jednání zvukem a obrazem mají zejména:
>
> * a) předsedající a další činovníci jednání,
> * b) osoby s právem na závěrečné slovo v rozpravě k bodům k rozhodnutí,
> * c) osoby určené navrhovatelem bodu v rozpravě k jiným bodům,
> * d) další osoby, pro něž je schválen takový postup.
>
> **(5)** Jinak se při zasedání na Internetu postupuje přiměřeně jako při běžném zasedání.
>
### Další informace
* [Stanovy České pirátské strany](https://wiki.pirati.cz/rules/st)
* [Jednací řád celostátního fóra](https://wiki.pirati.cz/rules/jdr)
`);
const About = () => {
const htmlContent = {
__html: content,
};
return (
<>
<Helmet>
<title>Co je to celostátní fórum? | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
/>
<meta
property="og:title"
content="Co je to celostátní fórum? | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Nevíte co je to celostátní fórum České pirátské strany? Tady se dočtete vše potřebné."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Celostátní fórum</h1>
<div
className="content-block leading-normal"
dangerouslySetInnerHTML={htmlContent}
/>
</article>
</>
);
};
export default About;

Pirátský GitLab - Home of the CopyLeft