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
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1530 additions and 483 deletions
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 Button from "components/Button";
import { useActionLoading } from "hooks";
import { Card, CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import MarkdownEditor from "components/mde/MarkdownEditor";
import { useActionState } from "hooks";
const AddPostForm = ({ className }) => {
const AddPostForm = ({ className, canAddProposal }) => {
const cardRef = useRef();
const editorRef = useRef();
const [expanded, setExpanded] = useState(false);
const [text, setText] = useState("");
const addingPost = useActionLoading(addPost, { content: text });
const addingProposal = useActionLoading(addPost, { content: text });
const [showAddConfirm, setShowAddConfirm] = useState(false);
const [type, setType] = useState("post");
const [error, setError] = useState(null);
const [addingPost, addingPostError] = useActionState(addPost, {
content: text,
});
const [addingProposal, addingProposalError] = useActionState(addProposal, {
content: text,
});
const onTextInput = (evt) => {
setText(evt.target.value);
};
const apiError = addingPostError || addingProposalError;
const is429ApiError =
apiError &&
apiError.toString().indexOf("Unexpected status code 429") !== -1;
const onAddPost = async (evt) => {
if (!!text) {
const result = await addPost.run({ content: text });
const onOutsideClick = useCallback(() => {
setExpanded(false);
}, [setExpanded]);
if (!result.error) {
setText("");
const onWrite = useCallback(
(evt) => {
setShowAddConfirm(false);
if (!expanded) {
setExpanded(true);
setTimeout(() => {
if (
editorRef.current &&
editorRef.current.finalRefs.textarea.current
) {
editorRef.current.finalRefs.textarea.current.focus();
}
}, 0);
}
},
[setExpanded, expanded, setShowAddConfirm]
);
const hideAddConfirm = useCallback(() => {
setShowAddConfirm(false);
}, [setShowAddConfirm]);
useOutsideClick(cardRef, onOutsideClick);
const { start: enqueueHideAddConfirm } = useTimeout(hideAddConfirm, 2000);
const onTextInput = (newText) => {
setText(newText);
if (newText !== "") {
if (newText.length >= 1024) {
setError("Maximální délka příspěvku je 1024 znaků.");
} else {
setError(null);
}
}
};
const onAddProposal = async (evt) => {
evt.stopPropagation();
const onAdd = async (evt) => {
evt.preventDefault();
if (!!text) {
const result = await addProposal.run({ content: text });
if (!error) {
const result = await (type === "post" ? addPost : addProposal).run({
content: text,
});
if (!result.error) {
setText("");
setExpanded(false);
setShowAddConfirm(true);
enqueueHideAddConfirm();
}
}
} else {
setError("Před přidáním příspěvku nezapomeňte vyplnit jeho obsah.");
}
};
const buttonDropdownActionList = (
<ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
<li className="dropdown-button__choice hover:bg-grey-125">
<span className="block px-4 py-3" onClick={onAddProposal}>
Navrhnout postup
</span>
</li>
</ul>
const wrapperClass = classNames(
className,
"hover:elevation-16 transition duration-500",
{
"elevation-4 cursor-text": !expanded && !showAddConfirm,
"lg:elevation-16 container-padding--zero lg:container-padding--auto": expanded,
}
);
return (
<div className={className}>
<div className="form-field">
<div className="form-field__wrapper form-field__wrapper--shadowed">
<textarea
className="text-input form-field__control "
<Card className={wrapperClass} ref={cardRef}>
<span
className={classNames("alert items-center transition duration-500", {
"alert--success": showAddConfirm,
"alert--light": !showAddConfirm,
hidden: expanded,
})}
onClick={onWrite}
>
<i
className={classNames("alert__icon text-lg mr-4", {
"ico--checkmark": showAddConfirm,
"ico--pencil": !showAddConfirm,
})}
/>
{showAddConfirm && <span>Příspěvek byl přidán.</span>}
{!showAddConfirm && <span>Napiš nový příspěvek ...</span>}
</span>
<CardBody
className={
"p-4 lg:p-8 " + (showAddConfirm || !expanded ? "hidden" : "")
}
>
<form className="space-y-4" onSubmit={onAdd}>
{apiError && is429ApiError && (
<div className="alert alert--warning">
<i className="alert__icon ico--clock text-lg" />
<span>
<strong>Zpomal!</strong> Další příspěvek můžeš přidat nejdříve
po 1 minutě od přidání posledního.
</span>
</div>
)}
{apiError && !is429ApiError && (
<ErrorMessage>
Při přidávání příspěvku došlo k problému: {apiError}.
</ErrorMessage>
)}
<MarkdownEditor
ref={editorRef}
value={text}
rows="5"
cols="40"
placeholder="Vyplňte text vašeho příspěvku"
onChange={onTextInput}
></textarea>
error={error}
placeholder="Vyplňte text vašeho příspěvku"
toolbarCommands={[
["header", "bold", "italic", "strikethrough"],
["link", "quote"],
["unordered-list", "ordered-list"],
]}
/>
{canAddProposal && (
<div
className="form-field"
onChange={(evt) => setType(evt.target.value)}
>
<div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row">
<div className="radio form-field__control">
<label>
<input
type="radio"
name="postType"
value="post"
defaultChecked
/>
<span className="text-sm sm:text-base">
Přidávám <strong>běžný příspěvek</strong>
</span>
</label>
</div>
<div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4">
<label>
<input
type="radio"
name="postType"
value="procedure-proposal"
/>
<span className="text-sm sm:text-base">
Přidávám <strong>návrh postupu</strong>
</span>
</label>
</div>
</div>
</div>
)}
{type === "procedure-proposal" && (
<p className="alert alert--light text-sm">
<i className="alert__icon ico--info mr-2 text-lg hidden md:block" />
<span>
Návrh postupu se v rozpravě zobrazí až poté, co předsedající{" "}
<strong>posoudí jeho přijatelnost</strong>. Po odeslání proto
nepanikař, že jej hned nevidíš.
</span>
</p>
)}
<div className="space-x-4">
<Button
onClick={onAddPost}
disabled={!text || addingPost || addingProposal}
type="submit"
disabled={error || addingPost || addingProposal}
loading={addingPost || addingProposal}
fullwidth
hoverActive
icon="ico--chevron-down"
iconWrapperClassName="dropdown-button"
iconChildren={buttonDropdownActionList}
className="text-sm xl:text-base"
>
Přidat příspěvek
{type === "post" && "Přidat příspěvek"}
{type === "procedure-proposal" && "Navrhnout postup"}
</Button>
<span className="text-sm text-grey-200 hidden lg:inline">
......@@ -86,7 +229,9 @@ const AddPostForm = ({ className }) => {
.
</span>
</div>
</div>
</form>
</CardBody>
</Card>
);
};
......
src/containers/AnnoucementsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react";
import React from "react";
import {
deleteAnnouncement,
loadAnnouncements,
updateAnnouncementContent,
markSeen,
updateAnnouncement,
} from "actions/announcements";
import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
import AnnouncementList from "components/annoucements/AnnouncementList";
import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm";
import { useActionLoading, useItemActionConfirm } from "hooks";
import { useItemActionConfirm } from "hooks";
import { AnnouncementStore, AuthStore } from "stores";
const AnnoucementsContainer = () => {
const [itemToEdit, setItemToEdit] = useState(null);
const AnnoucementsContainer = ({ className }) => {
const { 2: loadResult } = loadAnnouncements.useWatch();
const [
......@@ -22,44 +22,27 @@ const AnnoucementsContainer = () => {
setItemToDelete,
onDeleteConfirm,
onDeleteCancel,
deleteState,
] = useItemActionConfirm(deleteAnnouncement);
const deletingAnnouncement = useActionLoading(
deleteAnnouncement,
itemToDelete
);
const [
itemToEdit,
setItemToEdit,
onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
item,
payload,
}));
const { isAuthenticated, user } = AuthStore.useState();
const items = AnnouncementStore.useState((state) =>
state.itemIds.map((id) => state.items[id])
);
const confirmEdit = useCallback(
async (newContent) => {
if (itemToEdit && newContent) {
await updateAnnouncementContent.run({ item: itemToEdit, newContent });
setItemToEdit(null);
}
},
[itemToEdit, setItemToEdit]
);
const cancelEdit = useCallback(() => {
setItemToEdit(null);
}, [setItemToEdit]);
/**
* Mark down user saw this announcement already.
* @param {CF2021.Announcement} announcement
*/
const markSeen = (announcement) => {
AnnouncementStore.update((state) => {
state.items[announcement.id].seen = true;
});
};
return (
<>
<div className={className}>
{loadResult && loadResult.error && (
<CardBody>
<ErrorMessage>
......@@ -78,7 +61,8 @@ const AnnoucementsContainer = () => {
isOpen={!!itemToDelete}
onConfirm={onDeleteConfirm}
onCancel={onDeleteCancel}
confirming={deletingAnnouncement}
confirming={deleteState.loading}
error={deleteState.error}
title="Opravdu smazat?"
yesActionLabel="Smazat"
>
......@@ -88,11 +72,13 @@ const AnnoucementsContainer = () => {
<AnnouncementEditModal
isOpen={true}
announcement={itemToEdit}
onConfirm={confirmEdit}
onCancel={cancelEdit}
onConfirm={onEditConfirm}
onCancel={onEditCancel}
confirming={editState.loading}
error={editState.error}
/>
)}
</>
</div>
);
};
......
src/containers/GlobalStats.jsx 0 → 100644
View file @ 9f9e00fc
import React from "react";
import { Link } from "react-router-dom";
import { format, isToday } from "date-fns";
import pick from "lodash/pick";
import { GlobalInfoStore, ProgramStore } from "stores";
const GlobalStats = () => {
const {
onlineUsers,
onlineMembers,
groupSizeHalf,
} = GlobalInfoStore.useState((state) =>
pick(state, ["onlineUsers", "onlineMembers", "groupSizeHalf"])
);
const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
pick(state, ["currentId", "scheduleIds", "items"])
);
const nextProgramEntryId = scheduleIds
? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
: null;
const nextProgramEntry = nextProgramEntryId
? items[nextProgramEntryId]
: null;
const nextProgramEntryCaption = nextProgramEntry
? `${nextProgramEntry.title} @ ${format(
nextProgramEntry.expectedStartAt,
isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm"
)}`
: null;
return (
<div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap">
<div
data-tip="Počet přihlášených členů Pirátské strany."
data-tip-at="bottom"
>
<strong>{onlineMembers}</strong>{" "}
<span>
{onlineMembers === 1 && "člen online"}
{onlineMembers > 1 && onlineMembers <= 4 && "členové online"}
{(onlineMembers === 0 || onlineMembers > 4) && "členů online"}
</span>
</div>
<div
data-tip="Celkový počet osob, které mají tuto stránku otevřenou."
data-tip-at="bottom"
>
<strong>{onlineUsers}</strong> <span>online celkem</span>
</div>
{groupSizeHalf !== null && (
<div
data-tip="Velikost skupiny členů je důležitá při posuzování podpory návrhů postupu."
data-tip-at="bottom"
>
<span>Vel. skupiny členů je</span> <strong>{groupSizeHalf}</strong>
</div>
)}
{nextProgramEntry && (
<div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate">
Následuje:{" "}
<Link
to="/program"
className="font-bold"
aria-label={nextProgramEntryCaption}
data-tip={"Následuje bod " + nextProgramEntryCaption}
data-tip-at="bottom"
>
{nextProgramEntryCaption}
</Link>
</div>
)}
</div>
);
};
export default GlobalStats;
src/containers/JitsiInviteCard.jsx 0 → 100644
View file @ 9f9e00fc
import React from "react";
import { loadMe } from "actions/users";
import Button from "components/Button";
import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage";
import { useActionState } from "hooks";
import { AuthStore } from "stores";
const JitsiInviteCard = () => {
// docasne zablokovano
return null;
const { showJitsiInvitePopup, jitsiPopupDismissed } = AuthStore.useState();
const [loading, errorMessage] = useActionState(loadMe);
const openJitsiWindow = async () => {
const result = await loadMe.run();
if (!result.error) {
window.open(result.payload.jitsi_url);
}
AuthStore.update((state) => {
state.jitsiPopupDismissed = true;
});
};
const dismissPopup = () => {
AuthStore.update((state) => {
state.jitsiPopupDismissed = true;
});
};
if (!showJitsiInvitePopup) {
return null;
}
if (jitsiPopupDismissed) {
return (
<Button
color="violet-500"
className="btn--fullwidth"
onClick={openJitsiWindow}
loading={loading}
icon="ico--jitsi"
>
Připojit se k Jitsi
</Button>
);
}
return (
<div className="lg:card lg:elevation-16 bg-violet-300 relative container-padding--zero md:container-padding--auto">
<i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
<CardBody className="p-4 lg:p-8 text-white relative z-10">
<div className="flex items-center justify-between mb-4">
<h2 className="head-heavy-xs">
<span>Pozvánka do Jitsi</span>
</h2>
<button
type="button"
onClick={dismissPopup}
aria-label="Zavřít"
data-tip="Zavřít"
>
<i className="ico--cross"></i>
</button>
</div>
{errorMessage && (
<ErrorMessage>
Při načítání URL Jitsi kanálu došlo k problému: {errorMessage}.
</ErrorMessage>
)}
<p className="leading-snug text-sm mb-4">
Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
</p>
<Button
color="violet-500"
className="btn--fullwidth"
onClick={openJitsiWindow}
loading={loading}
>
Připojit se k Jitsi
</Button>
</CardBody>
</div>
);
};
export default JitsiInviteCard;
src/containers/PostFilters.jsx
View file @ 9f9e00fc
import React, { useCallback } from "react";
import pick from "lodash/pick";
import React from "react";
import Chip from "components/Chip";
import Dropdown from "components/Dropdown";
import { PostStore } from "stores";
import { updateWindowPosts } from "utils";
const PostFilters = () => {
const { window, filters } = PostStore.useState((state) =>
pick(state, ["window", "filters", "items"])
);
const filters = PostStore.useState((state) => state.filters);
const flagsOptions = [
{ title: "Vše", value: "all" },
......@@ -25,19 +21,13 @@ const PostFilters = () => {
{ title: "Jen návrhy", value: "proposalsOnly" },
{ 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) => {
state.filters[prop] = newValue;
state.window.itemCount = state.window.items.length;
updateWindowPosts(state);
if (resetPage) {
state.window.page = 1;
}
});
};
......@@ -45,27 +35,9 @@ const PostFilters = () => {
const onSortChange = (newValue) => setFilter("sort", newValue, false);
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 (
<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
value={filters.flags}
onChange={onFlagsChange}
......@@ -85,29 +57,6 @@ const PostFilters = () => {
className="text-xs ml-1 mt-2 xl:mt-0"
/>
</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>
);
};
......
src/containers/PostsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react";
import React, { useCallback, useMemo } from "react";
import pick from "lodash/pick";
import {
acceptProposal,
announceProposal,
archive,
dislike,
edit,
hide,
like,
loadPosts,
markSeen,
rejectProposal,
rejectProposalByChairman,
} from "actions/posts";
import { ban } from "actions/users";
import { ban, inviteToJitsi, unban } from "actions/users";
import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm";
import ModalWithActions from "components/modals/ModalWithActions";
import PostEditModal from "components/posts/PostEditModal";
import PostList from "components/posts/PostList";
import { useActionLoading, useItemActionConfirm } from "hooks";
import { AuthStore, PostStore } from "stores";
const PostsContainer = ({ className }) => {
const [postToEdit, setPostToEdit] = useState(null);
import { useActionState, useItemActionConfirm } from "hooks";
import { AuthStore, GlobalInfoStore, PostStore } from "stores";
const PostsContainer = ({ className, showAddPostCta }) => {
const [
userToBan,
setUserToBan,
onBanUserConfirm,
onBanUserCancel,
banUserState,
] = useItemActionConfirm(ban);
const [
userToUnban,
setUserToUnban,
onUnbanUserConfirm,
onUnbanUserCancel,
unbanUserState,
] = useItemActionConfirm(unban);
const [
userToInvite,
setUserToInvite,
onInviteUserConfirm,
onInviteUserCancel,
inviteUserState,
] = useItemActionConfirm(inviteToJitsi);
const [
postToHide,
setPostToHide,
onPostHideConfirm,
onPostHideCancel,
postHideState,
] = useItemActionConfirm(hide);
const [
postToArchive,
setPostToArchive,
onPostArchiveConfirm,
onPostArchiveCancel,
postArchiveState,
] = useItemActionConfirm(archive);
const [
postToAnnounce,
setPostToAnnounce,
onAnnounceConfirm,
onAnnounceCancel,
announceState,
] = useItemActionConfirm(announceProposal);
const [
postToAccept,
setPostToAccept,
onAcceptConfirm,
onAcceptCancel,
] = useItemActionConfirm(acceptProposal);
] = useItemActionConfirm(acceptProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [
postToEdit,
setPostToEdit,
onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(edit, (item, newContent) => ({
post: item,
newContent,
}));
const [
postToReject,
setPostToReject,
onRejectConfirm,
onRejectCancel,
] = useItemActionConfirm(rejectProposal);
] = useItemActionConfirm(rejectProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [
postToRejectByChairman,
setPostToRejectByChairman,
onRejectByChairmanConfirm,
onRejectByChairmanCancel,
] = useItemActionConfirm(rejectProposalByChairman);
] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
proposal: item,
archive,
}));
const { isAuthenticated, user } = AuthStore.useState();
const { isAuthenticated, user } = AuthStore.useState((state) =>
pick(state, ["isAuthenticated", "user"])
);
const { window, items } = PostStore.useState((state) =>
pick(state, ["window", "items"])
);
const showingArchivedOnly = PostStore.useState(
(state) => state.filters.flags === "archived"
);
const banningUser = useActionLoading(ban, userToBan);
const hidingPost = useActionLoading(hide, postToHide);
const announcingProposal = useActionLoading(announceProposal, postToAnnounce);
const acceptingProposal = useActionLoading(acceptProposal, postToAccept);
const rejectingProposal = useActionLoading(rejectProposal, postToReject);
const rejectingProposalByChairman = useActionLoading(
rejectProposalByChairman,
postToRejectByChairman
const groupSizeHalf = GlobalInfoStore.useState(
(state) => state.groupSizeHalf
);
const { 2: loadResult } = loadPosts.useWatch();
const confirmEdit = useCallback(
async (newContent) => {
if (postToEdit && newContent) {
await edit.run({ post: postToEdit, newContent });
setPostToEdit(null);
const [acceptingProposal, acceptingProposalError] = useActionState(
acceptProposal,
{
proposal: postToAccept,
archive: false,
}
},
[postToEdit, setPostToEdit]
);
const [
acceptingAndArchivingProposal,
acceptingAndArchivingProposalError,
] = useActionState(acceptProposal, {
proposal: postToAccept,
archive: true,
});
const [rejectingProposal, rejectingProposalError] = useActionState(
rejectProposal,
{
proposal: postToReject,
archive: false,
}
);
const [
rejectingAndArchivingProposal,
rejectingAndArchivingProposalError,
] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
const [
rejectingProposalByChairman,
rejectingProposalByChairmanError,
] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: false,
});
const [
rejectingProposalByChairmanAndArchiving,
rejectingProposalByChairmanAndArchivingError,
] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: true,
});
const cancelEdit = useCallback(() => {
setPostToEdit(null);
}, [setPostToEdit]);
const { 2: loadResult } = loadPosts.useWatch();
/**
* Ban a post's author.
* @param {CF2021.Post} post
*/
const onBanUser = (post) => {
const onBanUser = useCallback(
(post) => {
setUserToBan(post.author);
};
},
[setUserToBan]
);
/**
* Mark down user saw this post already.
* Ban a post's author.
* @param {CF2021.Post} post
*/
const markSeen = (post) => {
PostStore.update((state) => {
state.items[post.id].seen = true;
});
};
const onUnbanUser = useCallback(
(post) => {
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 sliceEnd = window.page * window.perPage;
const windowItems = useMemo(() => {
return window.items.map((postId) => items[postId]);
}, [items, window.items]);
return (
<>
......@@ -123,19 +203,22 @@ const PostsContainer = ({ className }) => {
</ErrorMessage>
)}
<PostList
items={window.items
.slice(sliceStart, sliceEnd)
.map((postId) => items[postId])}
items={windowItems}
showAddPostCta={showAddPostCta}
canThumb={isAuthenticated}
canRunActions={isAuthenticated && user.role === "chairman"}
onLike={like.run}
onDislike={dislike.run}
onSeen={markSeen}
className={className}
dimArchived={!showingArchivedOnly}
currentUser={user}
supportThreshold={groupSizeHalf}
onHide={setPostToHide}
onBanUser={onBanUser}
onUnbanUser={onUnbanUser}
onInviteUser={onInviteUser}
onEdit={setPostToEdit}
onArchive={setPostToArchive}
onAnnounceProcedureProposal={setPostToAnnounce}
onAcceptProcedureProposal={setPostToAccept}
onRejectProcedureProposal={setPostToReject}
......@@ -145,70 +228,204 @@ const PostsContainer = ({ className }) => {
isOpen={!!userToBan}
onConfirm={onBanUserConfirm}
onCancel={onBanUserCancel}
confirming={banningUser}
confirming={banUserState.loading}
error={banUserState.error}
title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`}
yesActionLabel="Zablokovat"
>
Uživatel <strong>{userToBan ? userToBan.name : null}</strong> bude
zablokován a nebude dále moci vkládat nové příspěvky. Opravdu to chcete?
</ModalConfirm>
<ModalConfirm
isOpen={!!userToUnban}
onConfirm={onUnbanUserConfirm}
onCancel={onUnbanUserCancel}
confirming={unbanUserState.loading}
error={unbanUserState.error}
title={`Odblokovat uživatele ${userToUnban ? userToUnban.name : null}?`}
yesActionLabel="Odblokovat"
>
Uživatel <strong>{userToUnban ? userToUnban.name : null}</strong> bude
odblokován a bude mu opět umožněno přidávat nové příspěvky. Opravdu to
chcete?
</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
isOpen={!!postToHide}
onConfirm={onPostHideConfirm}
onCancel={onPostHideCancel}
confirming={hidingPost}
confirming={postHideState.loading}
error={postHideState.error}
title="Skrýt příspěvek?"
yesActionLabel="Potvrdit"
>
Příspěvek se skryje a uživatelé ho neuvidí. Opravdu to chcete?
</ModalConfirm>
<ModalConfirm
isOpen={!!postToArchive}
onConfirm={onPostArchiveConfirm}
onCancel={onPostArchiveCancel}
confirming={postArchiveState.loading}
error={postArchiveState.error}
title="Archivovat příspěvek?"
yesActionLabel="Potvrdit"
>
Příspěvek bude archivován a bude ve výpisu vizuálně odlišen. Opravdu to
chcete?
</ModalConfirm>
<ModalConfirm
isOpen={!!postToAnnounce}
onConfirm={onAnnounceConfirm}
onCancel={onAnnounceCancel}
confirming={announcingProposal}
confirming={announceState.loading}
error={announceState.errror}
title="Vyhlásit procedurální návrh?"
yesActionLabel="Vyhlásit návrh"
>
Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete?
</ModalConfirm>
<ModalConfirm
<ModalWithActions
isOpen={!!postToAccept}
onConfirm={onAcceptConfirm}
onCancel={onAcceptCancel}
confirming={acceptingProposal}
error={acceptingProposalError || acceptingAndArchivingProposalError}
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?
</ModalConfirm>
<ModalConfirm
</ModalWithActions>
<ModalWithActions
isOpen={!!postToReject}
onConfirm={onRejectConfirm}
onCancel={onRejectCancel}
confirming={rejectingProposal}
error={rejectingProposalError || rejectingAndArchivingProposalError}
title="Zamítnout procedurální návrh?"
yesActionLabel="Zamítnout návrh"
containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(false)}
loading={rejectingProposal}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(true)}
loading={rejectingAndArchivingProposal}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
>
Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
</ModalConfirm>
<ModalConfirm
</ModalWithActions>
<ModalWithActions
isOpen={!!postToRejectByChairman}
onConfirm={onRejectByChairmanConfirm}
onCancel={onRejectByChairmanCancel}
confirming={rejectingProposalByChairman}
error={
rejectingProposalByChairmanError ||
rejectingProposalByChairmanAndArchivingError
}
title="Zamítnout procedurální návrh předsedajícícm?"
yesActionLabel="Zamítnout návrh předsedajícím"
containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(false)}
loading={rejectingProposalByChairman}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(true)}
loading={rejectingProposalByChairmanAndArchiving}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
>
Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu
to chcete?
</ModalConfirm>
</ModalWithActions>
{postToEdit && (
<PostEditModal
isOpen={true}
post={postToEdit}
onConfirm={confirmEdit}
onCancel={cancelEdit}
onConfirm={onEditConfirm}
onCancel={onEditCancel}
confirming={editState.loading}
error={editState.error}
/>
)}
</>
......
src/hooks.js
View file @ 9f9e00fc
import { useCallback, useState } from "react";
export const useItemActionConfirm = (actionFn) => {
const baseActionParamsBuilder = (item, args) => {
return item;
};
export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
const [item, setItem] = useState(null);
const [actionArgs, setActionArgs] = useState(null);
const onActionConfirm = useCallback(async () => {
const onActionConfirm = useCallback(
async (args) => {
if (item) {
const result = await actionFn.run(item);
const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
item,
args,
);
setActionArgs(newActionArgs);
const result = await actionFn.run(newActionArgs);
if (!result.error) {
setItem(null);
}
}
}, [item, setItem, actionFn]);
},
[item, setItem, actionFn, actionParamsBuilder, setActionArgs],
);
const onActionCancel = useCallback(() => {
setItem(null);
}, [setItem]);
return [item, setItem, onActionConfirm, onActionCancel];
const [loading, error] = useActionState(actionFn, actionArgs);
const unwrappedActionState = { loading, error };
return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
};
export const useActionConfirm = (actionFn, actionArgs) => {
......@@ -40,7 +56,7 @@ export const useActionConfirm = (actionFn, actionArgs) => {
return [showConfirm, setShowConfirm, onActionConfirm, onActionCancel];
};
export const useActionLoading = (actionFn, actionArgs) => {
const { 0: started, 1: finished } = actionFn.useWatch(actionArgs);
return started && !finished;
export const useActionState = (actionFn, actionArgs) => {
const { 0: started, 1: finished, 2: result } = actionFn.useWatch(actionArgs);
return [started && !finished, result.error ? result.message : null];
};
src/index.js
View file @ 9f9e00fc
import React from "react";
import ReactDOM from "react-dom";
import ReactDOM from "react-dom/client";
import ReactModal from "react-modal";
import { refreshAccessToken } from "actions/users";
import App from "./App";
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>
<App />
</React.StrictMode>,
root
</React.StrictMode>
);
ReactModal.setAppElement(root);
ReactModal.setAppElement(document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// 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";
// Setup Keycloak instance as needed
// 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",
realm: "pirati",
clientId: "cf-online",
......
src/markdown.js 0 → 100644
View file @ 9f9e00fc
import Showdown from "showdown";
import xss from "xss";
const xssFilter = (converter) => [
{
type: "output",
filter: (text) => xss(text),
},
];
export const markdownConverter = new Showdown.Converter({
tables: true,
simplifiedAutoLink: true,
strikethrough: true,
tasklists: false,
omitExtraWLInCodeBlocks: true,
noHeaderId: true,
headerLevelStart: 2,
openLinksInNewWindow: true,
extensions: [xssFilter],
});
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.css 0 → 100644
View file @ 9f9e00fc
/* auto-size iframe according to aspect ratio while keeping the 100% height */
.iframe-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
src/pages/Home.jsx
View file @ 9f9e00fc
This diff is collapsed.
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
This diff is collapsed.
src/pages/Protocol.jsx 0 → 100644
View file @ 9f9e00fc
This diff is collapsed.
src/serviceWorker.js
View file @ 9f9e00fc
This diff is collapsed.
src/stores.js
View file @ 9f9e00fc
This diff is collapsed.
src/utils.js
View file @ 9f9e00fc
This diff is collapsed.
src/ws/connection.js
View file @ 9f9e00fc
This diff is collapsed.

Pirátský GitLab - Home of the CopyLeft