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 1242 additions and 498 deletions
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}
...@@ -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
View file @ 9f9e00fc
...@@ -27,7 +27,7 @@ const RejectPostModalConfirm = ({ ...@@ -27,7 +27,7 @@ const RejectPostModalConfirm = ({
}) => { }) => {
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>{title}</CardHeadline> <CardHeadline>{title}</CardHeadline>
......
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/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 from "react"; import React, { useCallback, useMemo } from "react";
import pick from "lodash/pick"; import pick from "lodash/pick";
import { import {
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ 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 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";
...@@ -22,7 +22,7 @@ import ModalWithActions from "components/modals/ModalWithActions"; ...@@ -22,7 +22,7 @@ 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 [ const [
...@@ -39,6 +39,13 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -39,6 +39,13 @@ const PostsContainer = ({ className, showAddPostCta }) => {
onUnbanUserCancel, onUnbanUserCancel,
unbanUserState, unbanUserState,
] = useItemActionConfirm(unban); ] = useItemActionConfirm(unban);
const [
userToInvite,
setUserToInvite,
onInviteUserConfirm,
onInviteUserCancel,
inviteUserState,
] = useItemActionConfirm(inviteToJitsi);
const [ const [
postToHide, postToHide,
setPostToHide, setPostToHide,
...@@ -65,8 +72,10 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -65,8 +72,10 @@ const PostsContainer = ({ className, showAddPostCta }) => {
setPostToAccept, setPostToAccept,
onAcceptConfirm, onAcceptConfirm,
onAcceptCancel, onAcceptCancel,
acceptState, ] = useItemActionConfirm(acceptProposal, (item, archive) => ({
] = useItemActionConfirm(acceptProposal); proposal: item,
archive,
}));
const [ const [
postToEdit, postToEdit,
setPostToEdit, setPostToEdit,
...@@ -96,14 +105,33 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -96,14 +105,33 @@ const PostsContainer = ({ className, showAddPostCta }) => {
archive, 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(
(state) => state.groupSizeHalf
);
const [acceptingProposal, acceptingProposalError] = useActionState(
acceptProposal,
{
proposal: postToAccept,
archive: false,
}
);
const [
acceptingAndArchivingProposal,
acceptingAndArchivingProposalError,
] = useActionState(acceptProposal, {
proposal: postToAccept,
archive: true,
});
const [rejectingProposal, rejectingProposalError] = useActionState( const [rejectingProposal, rejectingProposalError] = useActionState(
rejectProposal, rejectProposal,
{ {
...@@ -136,20 +164,36 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -136,20 +164,36 @@ const PostsContainer = ({ className, showAddPostCta }) => {
* 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 (
<> <>
...@@ -159,7 +203,7 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -159,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}
...@@ -168,9 +212,11 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -168,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}
...@@ -203,6 +249,20 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -203,6 +249,20 @@ 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}
...@@ -237,17 +297,45 @@ const PostsContainer = ({ className, showAddPostCta }) => { ...@@ -237,17 +297,45 @@ const PostsContainer = ({ className, showAddPostCta }) => {
> >
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={acceptState.loading} error={acceptingProposalError || acceptingAndArchivingProposalError}
error={acceptState.error}
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>
<ModalWithActions <ModalWithActions
isOpen={!!postToReject} isOpen={!!postToReject}
onCancel={onRejectCancel} onCancel={onRejectCancel}
......
src/hooks.js
View file @ 9f9e00fc
...@@ -13,7 +13,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => { ...@@ -13,7 +13,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
if (item) { if (item) {
const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)( const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
item, item,
args args,
); );
setActionArgs(newActionArgs); setActionArgs(newActionArgs);
const result = await actionFn.run(newActionArgs); const result = await actionFn.run(newActionArgs);
...@@ -23,7 +23,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => { ...@@ -23,7 +23,7 @@ export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
} }
} }
}, },
[item, setItem, actionFn, actionParamsBuilder, setActionArgs] [item, setItem, actionFn, actionParamsBuilder, setActionArgs],
); );
const onActionCancel = useCallback(() => { const onActionCancel = useCallback(() => {
......
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;
src/pages/Home.jsx
View file @ 9f9e00fc
import React, { useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import Joyride, { EVENTS } from "react-joyride";
import ReactPlayer from "react-player/lazy"; import ReactPlayer from "react-player/lazy";
import { format } from "date-fns"; import { useKeycloak } from "@react-keycloak/web";
import useWindowSize from "@rooks/use-window-size";
import { import {
closeDiscussion, closeDiscussion,
...@@ -8,10 +11,14 @@ import { ...@@ -8,10 +11,14 @@ import {
openDiscussion, openDiscussion,
renameProgramPoint, renameProgramPoint,
} from "actions/program"; } from "actions/program";
import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import ErrorMessage from "components/ErrorMessage"; import {
AlreadyFinished,
BreakInProgress,
NotYetStarted,
} from "components/home";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import { Beacon, steps } from "components/onboarding";
import ProgramEntryEditModal from "components/program/ProgramEntryEditModal"; import ProgramEntryEditModal from "components/program/ProgramEntryEditModal";
import AddAnnouncementForm from "containers/AddAnnouncementForm"; import AddAnnouncementForm from "containers/AddAnnouncementForm";
import AddPostForm from "containers/AddPostForm"; import AddPostForm from "containers/AddPostForm";
...@@ -25,73 +32,7 @@ import { AuthStore, GlobalInfoStore, ProgramStore } from "stores"; ...@@ -25,73 +32,7 @@ import { AuthStore, GlobalInfoStore, ProgramStore } from "stores";
import "./Home.css"; import "./Home.css";
const NotYetStarted = ({ startAt }) => ( const tourLSKey = "cf2021__tour";
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="hidden md:inline-block flag bg-violet-400 text-white head-alt-base mb-4 py-4 px-5">
Jejda ...
</div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Jednání ještě nebylo zahájeno :(
</h1>
<p className="text-xl leading-snug mb-8">
<span>Jednání celostátního fóra ještě nezačalo. </span>
{startAt && (
<span>
Mělo by být zahájeno <strong>{format(startAt, "d. M. Y")}</strong> v{" "}
<strong>{format(startAt, "H:mm")}</strong>.{" "}
</span>
)}
<span>Můžete si ale zobrazit program.</span>
</p>
<Button routerTo="/program" className="md:text-lg lg:text-xl" hoverActive>
Zobrazit program
</Button>
</article>
);
const AlreadyFinished = () => (
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="flex">
<div>
<i className="ico--anchor text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
</div>
<div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Jednání už skočilo!
</h1>
<p className="text-xl leading-snug">
Oficiální program již skončil. Těšíme se na viděnou zase příště.
</p>
</div>
</div>
</article>
);
const BreakInProgress = () => (
<article className="container container--wide py-8 md:py-16 lg:py-32">
<div className="flex">
<div>
<i className="ico--clock text-2xl md:text-6xl lg:text-9xl mr-4 lg:mr-8"></i>
</div>
<div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Probíhá přestávka ...
</h1>
<p className="text-xl leading-snug mb-8">
Jednání celostátního fóra je momentálně přerušeno. Můžete si ale
zobrazit program.
</p>
<Button
routerTo="/program"
className="md:text-lg lg:text-xl"
hoverActive
>
Zobrazit program
</Button>
</div>
</div>
</article>
);
const Home = () => { const Home = () => {
const { const {
...@@ -103,6 +44,11 @@ const Home = () => { ...@@ -103,6 +44,11 @@ const Home = () => {
const { streamUrl } = GlobalInfoStore.useState(); const { streamUrl } = GlobalInfoStore.useState();
const programEntry = currentId ? programEntries[currentId] : null; const programEntry = currentId ? programEntries[currentId] : null;
const [showProgramEditModal, setShowProgramEditModal] = useState(false); const [showProgramEditModal, setShowProgramEditModal] = useState(false);
const [runJoyRide, setRunJoyride] = useState(false);
// The easiest way to restart the joyride tour is by simply re-rendering the component.
const [joyrideRenderKey, setJoyrideRenderKey] = useState(0);
const { innerWidth } = useWindowSize();
const isLg = innerWidth >= 1024;
const [ const [
showCloseDiscussion, showCloseDiscussion,
setShowCloseDiscussion, setShowCloseDiscussion,
...@@ -121,6 +67,17 @@ const Home = () => { ...@@ -121,6 +67,17 @@ const Home = () => {
onEndProgramPointConfirm, onEndProgramPointConfirm,
onEndProgramPointCancel, onEndProgramPointCancel,
] = useActionConfirm(endProgramPoint, programEntry); ] = useActionConfirm(endProgramPoint, programEntry);
const { keycloak } = useKeycloak();
const login = useCallback(() => {
keycloak.login();
}, [keycloak]);
useEffect(() => {
if (isLg && !localStorage.getItem(tourLSKey)) {
setRunJoyride(true);
}
}, [isLg, setRunJoyride]);
const onEditProgramConfirm = async (newTitle) => { const onEditProgramConfirm = async (newTitle) => {
await renameProgramPoint.run({ programEntry, newTitle }); await renameProgramPoint.run({ programEntry, newTitle });
...@@ -130,6 +87,17 @@ const Home = () => { ...@@ -130,6 +87,17 @@ const Home = () => {
setShowProgramEditModal(false); setShowProgramEditModal(false);
}; };
const showTutorial = useCallback(() => {
setRunJoyride(true);
setJoyrideRenderKey(joyrideRenderKey + 1);
}, [joyrideRenderKey, setRunJoyride, setJoyrideRenderKey]);
const handleJoyrideCallback = ({ action, index, status, type }) => {
if (type === EVENTS.TOUR_END) {
localStorage.setItem(tourLSKey, "COMPLETED");
}
};
const firstProgramEntry = scheduleIds.length const firstProgramEntry = scheduleIds.length
? programEntries[scheduleIds[0]] ? programEntries[scheduleIds[0]]
: null; : null;
...@@ -138,11 +106,24 @@ const Home = () => { ...@@ -138,11 +106,24 @@ const Home = () => {
? programEntries[scheduleIds[0]] ? programEntries[scheduleIds[0]]
: null; : null;
if (!programEntry && new Date() < firstProgramEntry.expectedStartAt) { if (
return <NotYetStarted startAt={firstProgramEntry.expectedStartAt} />; !programEntry &&
(!firstProgramEntry || new Date() < firstProgramEntry.expectedStartAt)
) {
return (
<NotYetStarted
startAt={
firstProgramEntry ? firstProgramEntry.expectedStartAt : undefined
}
/>
);
} }
if (!programEntry && new Date() > lastProgramEntry.expectedStartAt) { if (
!programEntry &&
lastProgramEntry &&
new Date() > lastProgramEntry.expectedStartAt
) {
return <AlreadyFinished />; return <AlreadyFinished />;
} }
...@@ -154,13 +135,92 @@ const Home = () => { ...@@ -154,13 +135,92 @@ const Home = () => {
return ( return (
<> <>
<article className="container container--wide py-8 lg:py-24 cf2021"> <Helmet>
<title>Přímý přenos | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Přímý přenos | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
</Helmet>
<Joyride
beaconComponent={Beacon}
continuous={true}
locale={{
back: "Zpět",
close: "Zavřít",
last: "Poslední",
next: "Další",
skip: "Přeskočit intro",
}}
key={joyrideRenderKey}
run={runJoyRide}
showProgress={true}
showSkipButton={true}
scrollToFirstStep={true}
callback={handleJoyrideCallback}
steps={steps}
styles={{
options: {
arrowColor: "#fff",
backgroundColor: "#fff",
overlayColor: "rgba(255, 255, 255, 0.75)",
primaryColor: "#000",
textColor: "#000",
textAlign: "left",
outline: "none",
zIndex: 1000,
borderRadius: 0,
},
tooltip: {
borderRadius: 0,
},
tooltipContent: {
textAlign: "left",
},
buttonClose: {
borderRadius: 0,
fontSize: "0.875rem",
},
buttonNext: {
borderRadius: 0,
padding: ".75em 2em",
fontSize: "0.875rem",
},
buttonBack: {
color: "#4c4c4c",
fontSize: "0.875rem",
},
buttonSkip: {
color: "#4c4c4c",
fontSize: "0.875rem",
},
}}
/>
<article className="container container--wide py-8 lg:py-24 cf2021 bg-white">
<div className="cf2021__title flex justify-between"> <div className="cf2021__title flex justify-between">
<h1 className="head-alt-base lg:head-alt-lg"> <h1 className="head-alt-base lg:head-alt-lg">
Bod č. {programEntry.number}: {programEntry.title} {programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
{programEntry.title}
</h1> </h1>
<div className="pl-4 pt-1 lg:pt-5">
<div className="space-x-4 inline-flex items-center">
<button
className="ico--question text-grey-200 hidden lg:block hover:text-black text-lg"
aria-label="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
data-tip="Potřebuješ pomoc? Spusť si znovu nápovědu jak tuhle aplikaci používat."
data-tip-at="top"
onClick={showTutorial}
/>
{displayActions && ( {displayActions && (
<DropdownMenu right triggerSize="lg" className="pl-4 pt-1 lg:pt-5"> <DropdownMenu right triggerSize="lg" className="z-20">
<DropdownMenuItem <DropdownMenuItem
onClick={() => setShowProgramEditModal(true)} onClick={() => setShowProgramEditModal(true)}
icon="ico--pencil" icon="ico--pencil"
...@@ -196,10 +256,16 @@ const Home = () => { ...@@ -196,10 +256,16 @@ const Home = () => {
</DropdownMenu> </DropdownMenu>
)} )}
</div> </div>
<section className="cf2021__video"> </div>
</div>
<section
className="cf2021__video"
// This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
style={{ maxWidth: "calc(100vw - 2rem)" }}
>
<div className="container-padding--zero md:container-padding--auto"> <div className="container-padding--zero md:container-padding--auto">
{streamUrl && ( {streamUrl && (
<div className="iframe-container"> <div className="iframe-container joyride-player">
<ReactPlayer <ReactPlayer
url={streamUrl} url={streamUrl}
title="Video stream" title="Video stream"
...@@ -212,10 +278,12 @@ const Home = () => { ...@@ -212,10 +278,12 @@ const Home = () => {
</div> </div>
)} )}
{!streamUrl && ( {!streamUrl && (
<p> <div className="px-4 py-16 lg:py-48 flex items-center justify-center bg-grey-400 text-center">
Server neposlal informaci o aktuálním streamu. Vyčkejte na <span className="text-lg lg:text-xl text-grey-200">
aktualizaci. <i className="ico--warning mr-2" /> Stream teď není k
</p> dispozici. Vyčkej na aktualizaci.
</span>
</div>
)} )}
<GlobalStats /> <GlobalStats />
</div> </div>
...@@ -224,7 +292,7 @@ const Home = () => { ...@@ -224,7 +292,7 @@ const Home = () => {
<section className="cf2021__notifications space-y-8"> <section className="cf2021__notifications space-y-8">
<JitsiInviteCard /> <JitsiInviteCard />
<div className="lg:card lg:elevation-10"> <div className="lg:card lg:elevation-10 joyride-announcements">
<AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" /> <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
{isAuthenticated && user.role === "chairman" && ( {isAuthenticated && user.role === "chairman" && (
<AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" /> <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
...@@ -232,43 +300,60 @@ const Home = () => { ...@@ -232,43 +300,60 @@ const Home = () => {
</div> </div>
</section> </section>
<section className="cf2021__posts"> {/* Relative is for fixing the dropdowns on the right which are detached from their immediate container. */}
<section
className="cf2021__posts relative joyride-posts"
// This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
style={{ maxWidth: "calc(100vw - 2rem)" }}
>
<div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4"> <div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap"> <h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
<span>Příspěvky v rozpravě</span> <span>Příspěvky v rozpravě</span>
{!programEntry.discussionOpened && (
<i
className="ico--lock text-black ml-2 opacity-50 hover:opacity-100 transition duration-500 text-xl"
title="Rozprava je uzavřena"
/>
)}
</h2> </h2>
<PostFilters /> <PostFilters />
</div> </div>
<PostsContainer
className="container-padding--zero lg:container-padding--auto"
showAddPostCta={programEntry.discussionOpened}
/>
{!programEntry.discussionOpened && {!programEntry.discussionOpened &&
isAuthenticated && (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
!user.isBanned && ( <p className="alert alert--light items-center mb-4 elevation-4">
<p className="leading-normal"> <i className="alert__icon ico--lock text-lg" />
Rozprava je uzavřena - příspěvky teď nelze přidávat. Rozprava je uzavřena - příspěvky teď nelze přidávat.
</p> </p>
)} )}
{programEntry.discussionOpened && !isAuthenticated && (
<p className="alert alert--light items-center mb-4">
<i className="alert__icon ico--info text-lg" />
<span>
Pokud chceš přidat nový příspěvek,{" "}
<button onClick={login} className="underline cursor-pointer">
přihlaš se pomocí Pirátské identity
</button>
.
</span>
</p>
)}
{programEntry.discussionOpened && isAuthenticated && user.isBanned && (
<p className="alert alert--error items-center mb-4">
<i className="alert__icon ico--warning text-lg" />
Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než ti
ho předsedající odebere.
</p>
)}
{programEntry.discussionOpened && {programEntry.discussionOpened &&
isAuthenticated && isAuthenticated &&
!user.isBanned && <AddPostForm className="my-8 space-y-4" />} !user.isBanned && (
<AddPostForm
{programEntry.discussionOpened && className="mb-8"
isAuthenticated && canAddProposal={
user.isBanned && ( user.role === "member" || user.role === "chairman"
<ErrorMessage className="mt-8"> }
Jejda! Nemůžeš přidávat příspěvky, protože máš ban. Vyčkej než />
ti ho předsedající odebere.
</ErrorMessage>
)} )}
<PostsContainer
className="container-padding--zero lg:container-padding--auto"
showAddPostCta={programEntry.discussionOpened}
/>
</section> </section>
</article> </article>
<ProgramEntryEditModal <ProgramEntryEditModal
......
src/pages/NotFound.jsx 0 → 100644
View file @ 9f9e00fc
import React from "react";
import { Helmet } from "react-helmet-async";
import Button from "components/Button";
const NotFound = () => (
<>
<Helmet>
<title>404ka | CF 2024 | Pirátská strana</title>
<meta name="description" content="Tahle stránka tu není." />
<meta property="og:title" content="404ka | CF 2024 | Pirátská strana" />
<meta property="og:description" content="Tahle stránka tu není." />
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-base lg:head-alt-lg mb-8">
404ka: tak tahle stránka tu není
</h1>
<p className="text-base lg:text-xl mb-8">
Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což
znamená, že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu
není. Zkontroluj, zda máš správný odkaz.
</p>
<Button
routerTo="/"
className="text-base lg:text-xl"
hoverActive
fullwidth
>
Přejít na hlavní stránku
</Button>
</article>
</>
);
export default NotFound;
src/pages/Program.jsx
View file @ 9f9e00fc
import React from "react"; import React from "react";
import { Helmet } from "react-helmet-async";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { format } from "date-fns"; import { format } from "date-fns";
...@@ -25,12 +26,36 @@ const Schedule = () => { ...@@ -25,12 +26,36 @@ const Schedule = () => {
); );
return ( return (
<article className="container container--wide py-8 lg:py-24"> <>
<Helmet>
<title>Program zasedání | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Program zasedání | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1> <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
<div class="my-4">
Program zde neobsahuje z technických důvodů všechny podrobnosti. Kompletní program naleznete na <a href="https://cf2024.pirati.cz/program">webu</a>.
</div>
<div className="flex flex-col"> <div className="flex flex-col">
{scheduleIds.map((id) => { {scheduleIds.map((id) => {
const isCurrent = id === currentId; const isCurrent = id === currentId;
const entry = items[id]; const entry = items[id];
const htmlContent = entry.htmlContent
? {
__html: entry.htmlContent,
}
: null;
return ( return (
<div <div
className="flex flex-col md:flex-row my-4 duration-300 text-black" className="flex flex-col md:flex-row my-4 duration-300 text-black"
...@@ -44,26 +69,35 @@ const Schedule = () => { ...@@ -44,26 +69,35 @@ const Schedule = () => {
)} )}
</div> </div>
<div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8"> <div className="w-full md:w-32 flex flex-row md:flex-col items-center md:items-stretch md:text-right md:pr-8">
<p className="head-heavy-xs md:head-heavy-base"> <p className="head-allcaps-2xs md:head-heavy-base">
{format(entry.expectedStartAt, "H:mm")} {format(entry.expectedStartAt, "H:mm")}
</p> </p>
<p className="ml-auto md:ml-0 head-heavy-xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap"> <p className="ml-auto md:ml-0 head-allcaps-2xs md:head-heavy-xs md:text-grey-200 whitespace-no-wrap">
{format(entry.expectedStartAt, "d. M. Y")} {format(entry.expectedStartAt, "d. M. Y")}
</p> </p>
</div> </div>
<div className="flex-grow w-full"> <div className="flex-grow w-full">
<h2 className="head-heavy-xs md:head-heavy-base mb-1"> <h2 className="head-heavy-xs md:head-heavy-base mb-2">
{isCurrent && <Link to="/">{entry.title}</Link>} {isCurrent && <Link to="/">{entry.fullTitle}</Link>}
{!isCurrent && entry.title} {!isCurrent && entry.fullTitle}
</h2> </h2>
<div className="flex space-x-2"> <div className="leading-snug">
<div className="space-x-2">
<strong>Navrhovatel:</strong> <strong>Navrhovatel:</strong>
<span>{entry.proposer}</span> <span>{entry.proposer}</span>
</div> </div>
{entry.description && ( {entry.speakers && (
<p className="mt-2 leading-tight max-w-3xl"> <div className="space-x-2">
{entry.description} <strong>Řečníci:</strong>
</p> <span>{entry.speakers}</span>
</div>
)}
</div>
{htmlContent && (
<div
className="mt-2 leading-snug max-w-3xl content-block"
dangerouslySetInnerHTML={htmlContent}
/>
)} )}
{isAuthenticated && {isAuthenticated &&
user.role === "chairman" && user.role === "chairman" &&
...@@ -73,6 +107,7 @@ const Schedule = () => { ...@@ -73,6 +107,7 @@ const Schedule = () => {
onClick={() => setEntryToActivate(entry)} onClick={() => setEntryToActivate(entry)}
color="grey-125" color="grey-125"
className="text-xs" className="text-xs"
fullwidth
> >
Aktivovat tento bod programu Aktivovat tento bod programu
</Button> </Button>
...@@ -97,6 +132,7 @@ const Schedule = () => { ...@@ -97,6 +132,7 @@ const Schedule = () => {
aktivován. Chcete pokračovat? aktivován. Chcete pokračovat?
</ModalConfirm> </ModalConfirm>
</article> </article>
</>
); );
}; };
......

Pirátský GitLab - Home of the CopyLeft