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

Target

Select target project
  • to/cf-online-ui
  • vpfafrin/cf2021
2 results
Select Git revision
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 558 additions and 213 deletions
src/actions/global-info.js
View file @ 9f9e00fc
import isArray from "lodash/isArray";
import { createAsyncAction, errorResult, successResult } from "pullstate";
import { fetch } from "api";
import { fetchApi } from "api";
import { markdownConverter } from "markdown";
import { GlobalInfoStore } from "stores";
export const loadConfig = createAsyncAction(
async () => {
try {
const resp = await fetch("/config");
const resp = await fetchApi("/config");
const payload = await resp.json();
if (!isArray(payload)) {
......@@ -30,9 +31,39 @@ export const loadConfig = createAsyncAction(
if (rawConfigItem.id === "websocket_url") {
state.websocketUrl = rawConfigItem.value;
}
if (rawConfigItem.id === "record_url") {
state.protocolUrl = rawConfigItem.value;
}
});
});
}
},
},
);
export const loadProtocol = createAsyncAction(
async () => {
const { protocolUrl } = GlobalInfoStore.getRawState();
try {
const resp = await fetch(protocolUrl);
if (resp.status !== 200) {
return errorResult([], `Unexpected status code ${resp.status}`);
}
return successResult(await resp.text());
} catch (err) {
return errorResult([], err.toString());
}
},
{
postActionHook: ({ result }) => {
if (!result.error) {
GlobalInfoStore.update((state) => {
state.protocol = markdownConverter.makeHtml(result.payload);
});
}
},
},
);
src/actions/posts.js
View file @ 9f9e00fc
......@@ -2,8 +2,8 @@ import keyBy from "lodash/keyBy";
import property from "lodash/property";
import { createAsyncAction, errorResult, successResult } from "pullstate";
import { fetch } from "api";
import { PostStore } from "stores";
import { fetchApi } from "api";
import { AuthStore, PostStore } from "stores";
import {
createSeenWriter,
filterPosts,
......@@ -16,7 +16,7 @@ import {
export const loadPosts = createAsyncAction(
async () => {
try {
const resp = await fetch("/posts", { expectedStatus: 200 });
const resp = await fetchApi("/posts", { expectedStatus: 200 });
const data = await resp.json();
return successResult(data.data);
} catch (err) {
......@@ -36,13 +36,11 @@ export const loadPosts = createAsyncAction(
state.window = {
items: filteredPosts.map(property("id")),
itemCount: filteredPosts.length,
page: 1,
perPage: 20,
};
});
}
},
}
},
);
export const like = createAsyncAction(
......@@ -51,7 +49,7 @@ export const like = createAsyncAction(
*/
async (post) => {
try {
await fetch(`/posts/${post.id}/like`, {
await fetchApi(`/posts/${post.id}/like`, {
method: "PATCH",
expectedStatus: 204,
});
......@@ -71,7 +69,7 @@ export const like = createAsyncAction(
});
}
},
}
},
);
export const dislike = createAsyncAction(
......@@ -80,7 +78,7 @@ export const dislike = createAsyncAction(
*/
async (post) => {
try {
await fetch(`/posts/${post.id}/dislike`, {
await fetchApi(`/posts/${post.id}/dislike`, {
method: "PATCH",
expectedStatus: 204,
});
......@@ -100,7 +98,7 @@ export const dislike = createAsyncAction(
});
}
},
}
},
);
/**
......@@ -112,7 +110,7 @@ export const addPost = createAsyncAction(async ({ content }) => {
content,
type: postsTypeMappingRev["post"],
});
await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
return successResult();
} catch (err) {
return errorResult([], err.toString());
......@@ -128,7 +126,7 @@ export const addProposal = createAsyncAction(async ({ content }) => {
content,
type: postsTypeMappingRev["procedure-proposal"],
});
await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
return successResult();
} catch (err) {
return errorResult([], err.toString());
......@@ -144,7 +142,7 @@ export const hide = createAsyncAction(
*/
async (post) => {
try {
await fetch(`/posts/${post.id}`, {
await fetchApi(`/posts/${post.id}`, {
method: "DELETE",
expectedStatus: 204,
});
......@@ -152,7 +150,7 @@ export const hide = createAsyncAction(
} catch (err) {
return errorResult([], err.toString());
}
}
},
);
/**
......@@ -167,7 +165,7 @@ export const edit = createAsyncAction(
const body = JSON.stringify({
content: newContent,
});
await fetch(`/posts/${post.id}`, {
await fetchApi(`/posts/${post.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -176,7 +174,22 @@ export const edit = createAsyncAction(
} catch (err) {
return errorResult([], err.toString());
}
},
{
shortCircuitHook: ({ args }) => {
const { user } = AuthStore.getRawState();
if (!user) {
return errorResult();
}
if (user && user.isBanned) {
return errorResult();
}
return false;
},
},
);
/**
......@@ -191,7 +204,7 @@ export const archive = createAsyncAction(
const body = JSON.stringify({
is_archived: true,
});
await fetch(`/posts/${post.id}`, {
await fetchApi(`/posts/${post.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -200,7 +213,7 @@ export const archive = createAsyncAction(
} catch (err) {
return errorResult([], err.toString());
}
}
},
);
/**
......@@ -213,7 +226,7 @@ const updateProposalState = async (proposal, state, additionalPayload) => {
state: postsStateMappingRev[state],
...(additionalPayload || {}),
});
await fetch(`/posts/${proposal.id}`, {
await fetchApi(`/posts/${proposal.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -243,7 +256,7 @@ export const announceProposal = createAsyncAction(
return false;
},
}
},
);
/**
......@@ -253,22 +266,22 @@ export const acceptProposal = createAsyncAction(
/**
* @param {CF2021.ProposalPost} proposal
*/
(proposal) => {
return updateProposalState(proposal, "accepted");
({ proposal, archive }) => {
return updateProposalState(proposal, "accepted", { is_archived: archive });
},
{
shortCircuitHook: ({ args }) => {
if (args.type !== "procedure-proposal") {
if (args.proposal.type !== "procedure-proposal") {
return errorResult();
}
if (args.state !== "announced") {
if (args.proposal.state !== "announced") {
return errorResult();
}
return false;
},
}
},
);
/**
......@@ -293,7 +306,7 @@ export const rejectProposal = createAsyncAction(
return false;
},
}
},
);
/**
......@@ -320,7 +333,7 @@ export const rejectProposalByChairman = createAsyncAction(
return false;
},
}
},
);
const { markSeen: storeSeen } = createSeenWriter(seenPostsLSKey);
......
src/actions/program.js
View file @ 9f9e00fc
......@@ -4,7 +4,8 @@ import pick from "lodash/pick";
import property from "lodash/property";
import { createAsyncAction, errorResult, successResult } from "pullstate";
import { fetch } from "api";
import { fetchApi } from "api";
import { markdownConverter } from "markdown";
import { ProgramStore } from "stores";
import { loadPosts } from "./posts";
......@@ -12,7 +13,7 @@ import { loadPosts } from "./posts";
export const loadProgram = createAsyncAction(
async () => {
try {
const resp = await fetch("/program");
const resp = await fetchApi("/program");
const mappings = await resp.json();
return successResult(mappings);
} catch (err) {
......@@ -37,22 +38,28 @@ export const loadProgram = createAsyncAction(
"title",
"description",
"proposer",
"speakers",
]),
fullTitle:
entry.number !== ""
? `${entry.number}. ${entry.title}`
: entry.title,
htmlContent: markdownConverter.makeHtml(entry.description),
discussionOpened: entry.discussion_opened,
expectedStartAt: parse(
entry.expected_start_at,
"yyyy-MM-dd HH:mm:ss",
new Date()
new Date(),
),
expectedFinishAt: entry.expected_finish_at
? parse(
entry.expected_finish_at,
"yyyy-MM-dd HH:mm:ss",
new Date()
new Date(),
)
: undefined,
};
}
},
)
.sort((a, b) => a.expectedStartAt - b.expectedStartAt);
......@@ -68,7 +75,7 @@ export const loadProgram = createAsyncAction(
});
}
},
}
},
);
/**
......@@ -80,7 +87,7 @@ export const renameProgramPoint = createAsyncAction(
const body = JSON.stringify({
title: newTitle,
});
await fetch(`/program/${programEntry.id}`, {
await fetchApi(`/program/${programEntry.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -101,7 +108,7 @@ export const renameProgramPoint = createAsyncAction(
});
}
},
}
},
);
/**
......@@ -117,7 +124,7 @@ export const endProgramPoint = createAsyncAction(
const body = JSON.stringify({
is_live: false,
});
await fetch(`/program/${programEntry.id}`, {
await fetchApi(`/program/${programEntry.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -135,7 +142,7 @@ export const endProgramPoint = createAsyncAction(
});
}
},
}
},
);
/**
......@@ -151,7 +158,7 @@ export const activateProgramPoint = createAsyncAction(
const body = JSON.stringify({
is_live: true,
});
await fetch(`/program/${programEntry.id}`, {
await fetchApi(`/program/${programEntry.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -172,7 +179,7 @@ export const activateProgramPoint = createAsyncAction(
loadPosts.run({}, { respectCache: false });
}
},
}
},
);
/**
......@@ -188,7 +195,7 @@ export const openDiscussion = createAsyncAction(
const body = JSON.stringify({
discussion_opened: true,
});
await fetch(`/program/${programEntry.id}`, {
await fetchApi(`/program/${programEntry.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -208,7 +215,7 @@ export const openDiscussion = createAsyncAction(
});
}
},
}
},
);
/**
......@@ -220,7 +227,7 @@ export const closeDiscussion = createAsyncAction(
const body = JSON.stringify({
discussion_opened: false,
});
await fetch(`/program/${programEntry.id}`, {
await fetchApi(`/program/${programEntry.id}`, {
method: "PUT",
body,
expectedStatus: 204,
......@@ -240,5 +247,5 @@ export const closeDiscussion = createAsyncAction(
});
}
},
}
},
);
src/actions/users.js
View file @ 9f9e00fc
import * as Sentry from "@sentry/react";
import { createAsyncAction, errorResult, successResult } from "pullstate";
import { fetch } from "api";
import { AuthStore } from "stores";
import { fetchApi } from "api";
import keycloak from "keycloak";
import { AuthStore, PostStore } from "stores";
import { updateWindowPosts } from "utils";
export const loadMe = createAsyncAction(
/**
* @param {number} userId
*/
async (user) => {
async () => {
try {
const response = await fetch(`/users/me`, {
const response = await fetchApi(`/users/me`, {
method: "GET",
expectedStatus: 200,
});
......@@ -32,7 +35,7 @@ export const loadMe = createAsyncAction(
});
}
},
}
},
);
export const ban = createAsyncAction(
......@@ -41,7 +44,7 @@ export const ban = createAsyncAction(
*/
async (user) => {
try {
await fetch(`/users/${user.id}/ban`, {
await fetchApi(`/users/${user.id}/ban`, {
method: "PATCH",
expectedStatus: 204,
});
......@@ -49,7 +52,7 @@ export const ban = createAsyncAction(
} catch (err) {
return errorResult([], err.toString());
}
}
},
);
export const unban = createAsyncAction(
......@@ -58,13 +61,65 @@ export const unban = createAsyncAction(
*/
async (user) => {
try {
await fetch(`/users/${user.id}/unban`, {
await fetchApi(`/users/${user.id}/unban`, {
method: "PATCH",
expectedStatus: 204,
});
return successResult(user);
} catch (err) {
return errorResult([], err.toString());
}
},
);
export const inviteToJitsi = createAsyncAction(
/**
* @param {number} userId
*/
async (user) => {
try {
const body = JSON.stringify({
allowed: true,
});
await fetchApi(`/users/${user.id}/jitsi`, {
method: "PATCH",
body,
expectedStatus: 204,
});
return successResult(user);
} catch (err) {
return errorResult([], err.toString());
}
},
);
export const refreshAccessToken = async () => {
const { isAuthenticated } = AuthStore.getRawState();
if (!isAuthenticated) {
return;
}
try {
await keycloak.updateToken(60);
console.info("[auth] access token refreshed");
} catch (exc) {
console.warn(
"[auth] could not refresh the access token, refresh token possibly expired, logging out",
);
Sentry.setUser(null);
AuthStore.update((state) => {
state.isAuthenticated = false;
state.user = null;
state.showJitsiInvitePopup = false;
state.jitsiPopupDimissed = false;
});
PostStore.update((state) => {
state.filters.showPendingProposals = false;
updateWindowPosts(state);
});
}
};
src/api.js
View file @ 9f9e00fc
import baseFetch from "unfetch";
import { AuthStore } from "./stores";
export const fetch = async (
export const fetchApi = async (
url,
{ headers = {}, expectedStatus = 200, method = "GET", body = null } = {}
{ headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
) => {
const { isAuthenticated, user } = AuthStore.getRawState();
......@@ -16,10 +14,11 @@ export const fetch = async (
headers["Content-Type"] = "application/json";
}
const response = await baseFetch(process.env.REACT_APP_API_BASE_URL + url, {
const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
body,
method,
headers,
redirect: "follow",
});
if (!!expectedStatus && response.status !== expectedStatus) {
......
src/components/Button.jsx
View file @ 9f9e00fc
......@@ -12,6 +12,7 @@ const Button = ({
loading = false,
children,
routerTo,
bodyProps = {},
...props
}) => {
const btnClass = classNames(
......@@ -30,7 +31,9 @@ const Button = ({
const inner = (
<div className="btn__body-wrap">
<div className={bodyClass}>{children}</div>
<div className={bodyClass} {...bodyProps}>
{children}
</div>
{!!icon && (
<div className="btn__icon">
<i className={icon}></i>
......
src/components/Footer.jsx
View file @ 9f9e00fc
import React from "react";
import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import useWindowSize from "@rooks/use-window-size";
import classNames from "classnames";
const Footer = () => {
const { innerWidth } = useWindowSize();
const [showCfMenu, setShowCfMenu] = useState(false);
const [showOtherMenu, setShowOtherMenu] = useState(false);
const isLg = innerWidth >= 1024;
return (
<footer className="footer bg-grey-700 text-white">
<div className="footer__main py-4 lg:py-16 container container--default">
......@@ -12,17 +19,25 @@ const Footer = () => {
className="w-32 md:w-40 pb-6"
/>
<p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
Piráti, 2024. Všechna práva vyhlazena. Sdílejte a nechte ostatní
sdílet za stejných podmínek.
</p>
</section>
<section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
<section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-2 gap-4">
<div className="pt-8 pb-4 lg:py-0">
<div className="footer-collapsible">
<span className="text-xl uppercase text-white footer-collapsible__toggle">
CF 2021
<span
className={classNames(
"text-xl uppercase text-white footer-collapsible__toggle",
{
"footer-collapsible__toggle--open": showCfMenu,
}
)}
onClick={() => setShowCfMenu(!showCfMenu)}
>
CF 2024
</span>{" "}
<div className="">
<div className={showCfMenu || isLg ? "" : "hidden"}>
<ul className="mt-6 space-y-2 text-grey-200">
<li>
<NavLink to="/">Přímý přenos</NavLink>
......@@ -30,16 +45,30 @@ const Footer = () => {
<li>
<NavLink to="/program">Program</NavLink>
</li>
<li>
<NavLink to="/protocol">Zápis</NavLink>
</li>
<li>
<NavLink to="/about">Co je to celostátní fórum?</NavLink>
</li>
</ul>
</div>
</div>
</div>
<div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<div className="footer-collapsible">
<span className="text-xl uppercase text-white footer-collapsible__toggle">
<span
className={classNames(
"text-xl uppercase text-white footer-collapsible__toggle",
{
"footer-collapsible__toggle--open": showOtherMenu,
}
)}
onClick={() => setShowOtherMenu(!showOtherMenu)}
>
Otevřenost
</span>{" "}
<div className="">
<div className={showOtherMenu || isLg ? "" : "hidden"}>
<ul className="mt-6 space-y-2 text-grey-200">
<li>
<a href="https://ucet.pirati.cz">Transparentní účet</a>
......
src/components/Navbar.jsx
View file @ 9f9e00fc
......@@ -7,7 +7,7 @@ import classNames from "classnames";
import Button from "components/Button";
import { AuthStore, GlobalInfoStore } from "stores";
const Navbar = () => {
const Navbar = ({ onGetHelp }) => {
const { innerWidth } = useWindowSize();
const [showMenu, setShowMenu] = useState();
const { keycloak } = useKeycloak();
......@@ -36,10 +36,12 @@ const Navbar = () => {
};
const connectionIndicator = (
<div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
<div className="inline-flex items-center">
<span
className="relative inline-flex h-4 w-4 mr-4"
title={connectionStateCaption}
data-tip={connectionStateCaption}
data-tip-at="left"
aria-label={connectionStateCaption}
>
<span
className={classNames(
......@@ -75,7 +77,7 @@ const Navbar = () => {
to="/"
className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline"
>
Celostátní fórum 2021
Celostátní fórum 2024
</NavLink>
</div>
<div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
......@@ -100,17 +102,24 @@ const Navbar = () => {
Program
</NavLink>
</li>
<li className="navbar-menu__item">
<NavLink className="navbar-menu__link" to="/protocol">
Zápis
</NavLink>
</li>
</ul>
</div>
<div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
<div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center justify-between">
<div className="order-last lg:order-first lg:mr-8">
{connectionIndicator}
</div>
{!isAuthenticated && (
<Button className="btn--white joyride-login" onClick={login}>
Přihlásit se
</Button>
)}
{isAuthenticated && (
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-4 joyride-login">
<span className="head-heavy-2xs">{user.name}</span>
<div className="avatar avatar--2xs">
<img
......@@ -121,6 +130,9 @@ const Navbar = () => {
<button
onClick={logout}
className="text-grey-200 hover:text-white"
aria-label="Odhlásit se"
data-tip="Odhlásit se"
data-tip-at="bottom"
>
<i className="ico--log-out"></i>
</button>
......
src/components/Thumbs.jsx
View file @ 9f9e00fc
......@@ -8,9 +8,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
<button
className={classNames("flex items-center space-x-1", {
"cursor-pointer": !readOnly,
"cursor-default": readOnly,
"cursor-not-allowed": readOnly,
"text-blue-300": myVote === "like",
"text-grey-200 hover:text-blue-300": myVote !== "like",
"text-grey-200 ": myVote !== "like",
"hover:text-blue-300": myVote !== "like" && !readOnly,
})}
disabled={readOnly}
onClick={onLike}
......@@ -21,9 +22,10 @@ const Thumbs = ({ likes, dislikes, myVote, onLike, onDislike, readOnly }) => {
<button
className={classNames("flex items-center space-x-1", {
"cursor-pointer": !readOnly,
"cursor-default": readOnly,
"cursor-not-allowed": readOnly,
"text-red-600": myVote === "dislike",
"text-grey-200 hover:text-red-600": myVote !== "dislike",
"text-grey-200": myVote !== "dislike",
"hover:text-red-600": myVote !== "dislike" && !readOnly,
})}
disabled={readOnly}
onClick={onDislike}
......
src/components/annoucements/AnnouncementEditModal.jsx
View file @ 9f9e00fc
......@@ -18,14 +18,18 @@ const AnnouncementEditModal = ({
}) => {
const [text, setText] = useState(announcement.content);
const [link, setLink] = useState(announcement.link);
const [linkValid, setLinkValid] = useState(null);
const [noTextError, setNoTextError] = useState(false);
const [textError, setTextError] = useState(null);
const [linkError, setLinkError] = useState(null);
const onTextInput = (newText) => {
setText(newText);
if (newText !== "") {
setNoTextError(false);
if (newText.length > 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
}
};
......@@ -33,7 +37,11 @@ const AnnouncementEditModal = ({
setLink(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.");
}
}
};
......@@ -46,12 +54,15 @@ const AnnouncementEditModal = ({
};
if (!text) {
setNoTextError(true);
setTextError("Před úpravou oznámení nezapomeňte vyplnit jeho obsah.");
preventAction = true;
} else if (!!text && text.length > 1024) {
setTextError("Maximální délka oznámení je 1024 znaků.");
preventAction = true;
}
if (announcement.type === "voting" && !link) {
setLinkValid(false);
setLinkError("Zadejte platnou URL.");
preventAction = true;
} else {
payload.link = link;
......@@ -67,7 +78,7 @@ const AnnouncementEditModal = ({
return (
<Modal containerClassName="max-w-lg" onRequestClose={onCancel} {...props}>
<form onSubmit={confirm}>
<Card>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit oznámení</CardHeadline>
......@@ -78,11 +89,7 @@ const AnnouncementEditModal = ({
<MarkdownEditor
value={text}
onChange={onTextInput}
error={
noTextError
? "Před úpravou oznámení nezapomeňte vyplnit jeho obsah."
: null
}
error={textError}
placeholder="Vyplňte text oznámení"
toolbarCommands={[
["bold", "italic", "strikethrough"],
......@@ -92,7 +99,7 @@ const AnnouncementEditModal = ({
<div
className={classNames("form-field mt-4", {
hidden: announcement.type !== "voting",
"form-field--error": linkValid === false,
"form-field--error": !!linkError,
})}
>
<div className="form-field__wrapper form-field__wrapper--shadowed">
......@@ -107,8 +114,8 @@ const AnnouncementEditModal = ({
<i className="ico--link"></i>
</div>
</div>
{linkValid === false && (
<div className="form-field__error">Zadejte platnou URL.</div>
{!!linkError && (
<div className="form-field__error">{linkError}</div>
)}
</div>
{error && (
......@@ -123,6 +130,7 @@ const AnnouncementEditModal = ({
color="blue-300"
className="text-sm"
loading={confirming}
disabled={textError || linkError || confirming}
type="submit"
>
Uložit
......
src/components/cards/Card.jsx
View file @ 9f9e00fc
import React from "react";
import classNames from "classnames";
const Card = ({ children, elevation = 21, className }) => {
const cls = classNames("card", `elevation-${elevation}`, className);
return <div className={cls}>{children}</div>;
const Card = ({ children, className }, ref) => {
const cls = classNames("card", className);
return (
<div className={cls} ref={ref}>
{children}
</div>
);
};
export default Card;
export default React.forwardRef(Card);
src/components/cards/CardBody.jsx
View file @ 9f9e00fc
import React from "react";
import classNames from "classnames";
const CardBody = ({ children, className }) => {
const CardBody = ({ children, className, ...props }) => {
const cls = classNames("card__body", className);
return <div className={cls}>{children}</div>;
return (
<div className={cls} {...props}>
{children}
</div>
);
};
export default CardBody;
src/components/home/NotYetStarted.jsx
View file @ 9f9e00fc
......@@ -9,7 +9,7 @@ const NotYetStarted = ({ startAt }) => (
Jejda ...
</div>
<h1 className="head-alt-base md:head-alt-md lg:head-alt-xl mb-2">
Jednání ještě nebylo zahájeno :(
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>
......
src/components/mde/MarkdownEditor.jsx
View file @ 9f9e00fc
......@@ -7,13 +7,10 @@ import { markdownConverter } from "markdown";
import "react-mde/lib/styles/css/react-mde-toolbar.css";
import "./MarkdownEditor.css";
const MarkdownEditor = ({
value,
onChange,
error,
placeholder = "",
...props
}) => {
const MarkdownEditor = (
{ value, onChange, error, placeholder = "", ...props },
ref
) => {
const [selectedTab, setSelectedTab] = useState("write");
const classes = {
......@@ -36,6 +33,7 @@ const MarkdownEditor = ({
return (
<div className={classNames("form-field", { "form-field--error": !!error })}>
<ReactMde
ref={ref}
value={value}
onChange={onChange}
selectedTab={selectedTab}
......@@ -53,4 +51,4 @@ const MarkdownEditor = ({
);
};
export default MarkdownEditor;
export default React.forwardRef(MarkdownEditor);
src/components/modals/ModalWithActions.jsx
View file @ 9f9e00fc
......@@ -21,11 +21,16 @@ const ModalConfirm = ({
}) => {
return (
<Modal onRequestClose={onClose} {...props}>
<Card>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>{title}</CardHeadline>
<button onClick={onClose} type="button">
<button
onClick={onClose}
type="button"
data-tip="Zavřít"
aria-label="Zavřít"
>
<i className="ico--cross"></i>
</button>
</div>
......
src/components/onboarding/index.jsx
View file @ 9f9e00fc
import React from "react";
import Chip from "components/Chip";
// import Chip from "components/Chip";
export { default as Beacon } from "./Beacon";
......@@ -9,11 +9,12 @@ export const steps = [
target: "body",
content: (
<>
<h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2021</h1>
<h1 className="head-alt-sm mb-4">Vítej na celostátním fóru 2024</h1>
<p className="leading-snug text-base">
Letošní Pirátské fórum bude online. Abychom to celé zvládli,
připravili jsme tuhle aplikaci, která se snaží alespoň částečně
nahradit fyzickou přítomnost. Nejprve si vysvětlíme, jak funguje.
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>
</>
),
......@@ -24,10 +25,11 @@ export const steps = [
target: ".joyride-login",
content: (
<>
<h1 className="head-alt-sm mb-4">Jsi člen strany? Přihlaš se</h1>
<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, je rozhodně dobrý nápad se přihlásit. Budeš tak
moci přidávat příspěvky v rozpravě a palcovat je.
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>
</>
),
......@@ -60,27 +62,63 @@ export const steps = [
<strong>Běžné příspěvky</strong> se zobrazí ihned po přidání.
</p>
<p>
<strong>Návrhy postupu</strong> po přidání nejprve zkontroluje
předsedající a pokud sezná, že je takový návrh přípusný, prohlásí ho
za{" "}
<Chip color="blue-300" condensed>
hlasovatelný
</Chip>
. Pro vyjádření podpory používejte palce. Na základě velikosti
podpory předsedající buď návrh označí za{" "}
<Chip color="green-400" condensed>
schválený
</Chip>
, nebo za{" "}
<Chip color="red-600" condensed>
zamítnutý
</Chip>
.
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: "top",
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",
......@@ -102,7 +140,7 @@ export const steps = [
<>
<h1 className="head-alt-sm mb-4">To je vše!</h1>
<p className="leading-snug text-base">
Ať se ti letošní CF líbí i v těchto ztížených podmínkách.
Ať se ti letošní „CFko“ líbí.
</p>
</>
),
......
src/components/posts/Post.jsx
View file @ 9f9e00fc
......@@ -5,6 +5,7 @@ import { format, isToday } from "date-fns";
import Chip from "components/Chip";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import PostScore from "components/posts/PostScore";
import Thumbs from "components/Thumbs";
const Post = ({
......@@ -20,12 +21,15 @@ const Post = ({
state,
dimIfArchived = true,
currentUser,
supportThreshold,
canThumb,
reportSeen = true,
onLike,
onDislike,
onHide,
onBanUser,
onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal,
onAcceptProcedureProposal,
onRejectProcedureProposal,
......@@ -33,20 +37,21 @@ const Post = ({
onEdit,
onArchive,
onSeen,
...props
}) => {
const { ref, inView } = useInView({
threshold: 0.8,
trackVisibility: true,
delay: 1500,
skip: seen,
delay: 1000,
skip: !reportSeen,
triggerOnce: true,
});
useEffect(() => {
if (!seen && inView && onSeen) {
if (inView && onSeen) {
onSeen();
}
});
}, [inView, onSeen]);
const wrapperClassName = classNames(
"flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500",
......@@ -82,28 +87,53 @@ const Post = ({
labels.push(
{
pending: (
<Chip key="state__pending" condensed color="grey-500">
<Chip
key="state__pending"
condensed
color="grey-500"
aria-label="Návrh čekající na zpracování"
>
Čeká na zpracování
</Chip>
),
announced: (
<Chip key="state__announced" condensed color="blue-300">
<Chip
key="state__announced"
condensed
color="blue-300"
aria-label="Návrh k hlasování"
>
K hlasování
</Chip>
),
accepted: (
<Chip key="state__accepted" condensed color="green-400">
<Chip
key="state__accepted"
condensed
color="green-400"
aria-label="Schválený návrh"
>
Schválený
</Chip>
),
rejected: (
<Chip key="state__rejected" condensed color="red-600">
<Chip
key="state__rejected"
condensed
color="red-600"
aria-label="Zamítnutý návrh"
>
Zamítnutý
</Chip>
),
"rejected-by-chairman": (
<Chip key="state__rejected-by-chairmen" condensed color="red-600">
Zamítnutý předsedajícím
<Chip
key="state__rejected-by-chairmen"
condensed
color="red-600"
aria-label="Návrh zamítnutý předsedajícím"
>
Zamítnutý předs.
</Chip>
),
}[state]
......@@ -136,9 +166,11 @@ const Post = ({
type === "procedure-proposal" &&
["announced", "pending"].includes(state);
const showEditAction =
isChairman || (currentUser && currentUser.id === author.id);
isChairman ||
(currentUser && currentUser.id === author.id && !currentUser.isBanned);
const showBanAction = isChairman && !author.isBanned;
const showUnbanAction = isChairman && author.isBanned;
const showInviteAction = isChairman;
const showHideAction = isChairman && !archived;
const showArchiveAction = isChairman && !archived;
......@@ -151,6 +183,7 @@ const Post = ({
showEditAction,
showBanAction,
showUnbanAction,
showInviteAction,
showHideAction,
showArchiveAction,
].some((item) => !!item);
......@@ -159,29 +192,33 @@ const Post = ({
__html: content,
};
const thumbsVisible = !archived && (type === "post" || state === "announced");
return (
<div className={wrapperClassName} ref={ref}>
<div className={wrapperClassName} ref={ref} {...props}>
<img
src={`https://a.pirati.cz/piratar/200/${author.username}.jpg`}
className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3 object-cover"
className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
alt={author.name}
/>
<div className="flex-1">
<div className="flex-1 overflow-hidden">
<div className="mb-1">
<div className="flex justify-between items-start xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center">
<span className="font-bold">{author.name}</span>
<div className="mt-1 xl:mt-0 xl:ml-2 leading-tight">
<span className="text-grey-200 text-sm">{author.group}</span>
<span className="text-grey-200 ml-1 text-sm">
<span className="text-grey-200 text-xs sm:text-sm">
{author.group}
</span>
<span className="text-grey-200 ml-1 text-xs sm:text-sm">
@{" "}
{format(
datetime,
isToday(datetime) ? "H:mm" : "dd. MM. H:mm"
)}
{modified && (
<span className="text-grey-200 text-sm block md:inline md:ml-2">
<span className="text-grey-200 text-xs block md:inline md:ml-2">
(upraveno)
</span>
)}
......@@ -193,6 +230,7 @@ const Post = ({
</div>
</div>
<div className="flex items-center">
{thumbsVisible && (
<Thumbs
likes={ranking.likes}
dislikes={ranking.dislikes}
......@@ -201,8 +239,16 @@ const Post = ({
onDislike={onDislike}
myVote={ranking.myVote}
/>
)}
<PostScore
className="ml-2"
postType={type}
ranking={ranking}
rankingReadonly={!thumbsVisible}
supportThreshold={supportThreshold}
/>
{showActions && (
<DropdownMenu right className="pl-4">
<DropdownMenu right className="pl-4 static">
{showAnnounceAction && (
<DropdownMenuItem
onClick={onAnnounceProcedureProposal}
......@@ -252,6 +298,13 @@ const Post = ({
title="Odblokovat uživatele"
/>
)}
{showInviteAction && (
<DropdownMenuItem
onClick={onInviteUser}
icon="ico--phone"
title="Pozvat uživatele do Jitsi"
/>
)}
{showHideAction && (
<DropdownMenuItem
onClick={onHide}
......@@ -275,7 +328,7 @@ const Post = ({
{labels}
</div>
<div
className="text-sm lg:text-base text-black leading-normal content-block"
className="text-sm lg:text-base text-black leading-normal content-block overflow-x-auto overflow-y-hidden mt-1"
dangerouslySetInnerHTML={htmlContent}
></div>
</div>
......@@ -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 = ({
...props
}) => {
const [text, setText] = useState(post.content);
const [noTextError, setNoTextError] = useState(false);
const [textError, setTextError] = useState(null);
const onTextInput = (newText) => {
setText(newText);
if (newText !== "") {
setNoTextError(false);
if (newText.length >= 1024) {
setTextError("Maximální délka příspěvku je 1024 znaků.");
} else {
setTextError(null);
}
}
};
......@@ -31,14 +35,14 @@ const PostEditModal = ({
if (!!text) {
onConfirm(text);
} else {
setNoTextError(true);
setTextError("Před upravením příspěvku nezapomeňte vyplnit jeho obsah.");
}
};
return (
<Modal containerClassName="max-w-xl" onRequestClose={onCancel} {...props}>
<form onSubmit={confirm}>
<Card>
<Card className="elevation-21">
<CardBody>
<div className="flex items-center justify-between mb-4">
<CardHeadline>Upravit text příspěvku</CardHeadline>
......@@ -49,15 +53,11 @@ const PostEditModal = ({
<MarkdownEditor
value={text}
onChange={onTextInput}
error={
noTextError
? "Před upravením příspěvku nezapomeňte vyplnit jeho obsah."
: null
}
error={textError}
placeholder="Vyplňte text příspěvku"
toolbarCommands={[
["header", "bold", "italic", "strikethrough"],
["link", "quote", "image"],
["link", "quote"],
["unordered-list", "ordered-list"],
]}
/>
......@@ -72,6 +72,7 @@ const PostEditModal = ({
hoverActive
color="blue-300"
className="text-sm"
disabled={textError || confirming}
loading={confirming}
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 Post from "./Post";
......@@ -8,6 +8,7 @@ const PostList = ({
items,
showAddPostCta,
currentUser,
supportThreshold,
canThumb,
dimArchived,
onLike,
......@@ -15,6 +16,7 @@ const PostList = ({
onHide,
onBanUser,
onUnbanUser,
onInviteUser,
onAnnounceProcedureProposal,
onAcceptProcedureProposal,
onRejectProcedureProposal,
......@@ -28,12 +30,16 @@ const PostList = ({
responderFn(post);
};
const windowSize = 20;
const [window, setWindow] = useState(windowSize);
const onPostLike = buildHandler(onLike);
const onPostDislike = buildHandler(onDislike);
const onPostEdit = buildHandler(onEdit);
const onPostHide = buildHandler(onHide);
const onPostBanUser = buildHandler(onBanUser);
const onPostUnbanUser = buildHandler(onUnbanUser);
const onPostInviteUser = buildHandler(onInviteUser);
const onPostArchive = buildHandler(onArchive);
const onPostAnnounceProcedureProposal = buildHandler(
onAnnounceProcedureProposal
......@@ -44,15 +50,27 @@ const PostList = ({
onRejectProcedureProposalByChairman
);
const onPostSeen = (post) => () => {
const onPostSeen = useCallback(
(post) => () => {
if (!post.seen) {
onSeen(post);
};
}
// Once last post in window is reached, attempt show more.
if (items.indexOf(post) === window - 1) {
setWindow(window + windowSize);
}
},
[items, onSeen, window]
);
const windowItems = useMemo(() => {
return items.slice(0, window).filter((item) => !item.hidden);
}, [items, window]);
return (
<div className={classNames("space-y-px", className)}>
{items
.filter((item) => !item.hidden)
.map((item) => (
{windowItems.map((item, idx) => (
<Post
key={item.id}
datetime={item.datetime}
......@@ -61,18 +79,20 @@ const PostList = ({
state={item.state}
content={item.contentHtml}
ranking={item.ranking}
historyLog={item.historyLog}
modified={item.modified}
seen={item.seen}
reportSeen={!item.seen || idx === window - 1}
archived={item.archived}
dimIfArchived={dimArchived}
currentUser={currentUser}
supportThreshold={supportThreshold}
canThumb={canThumb}
onLike={onPostLike(item)}
onDislike={onPostDislike(item)}
onHide={onPostHide(item)}
onBanUser={onPostBanUser(item)}
onUnbanUser={onPostUnbanUser(item)}
onInviteUser={onPostInviteUser(item)}
onAnnounceProcedureProposal={onPostAnnounceProcedureProposal(item)}
onAcceptProcedureProposal={onPostAcceptProcedureProposal(item)}
onRejectProcedureProposal={onPostRejectProcedureProposal(item)}
......
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);

Pirátský GitLab - Home of the CopyLeft