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 1478 additions and 550 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 { addPost, addProposal } from "actions/posts";
import Button from "components/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");
};
const buttonDropdownActionList = (
<ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
{type === "post" && (
<li
className="dropdown-button__choice hover:bg-grey-125"
onClick={setTypeProposal}
>
<span className="block px-4 py-3">Navrhnout postup</span>
</li>
)}
{type === "procedure-proposal" && (
<li
className="dropdown-button__choice hover:bg-grey-125"
onClick={setTypePost}
>
<span className="block px-4 py-3">Přidat příspěvek</span>
</li>
)}
</ul>
); );
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={[
["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"> <div className="space-x-4">
<Button <Button
onClick={onAdd} type="submit"
disabled={addingPost || addingProposal} disabled={error || addingPost || addingProposal}
loading={addingPost || addingProposal} loading={addingPost || addingProposal}
fullwidth
hoverActive hoverActive
icon="ico--chevron-down" className="text-sm xl:text-base"
iconWrapperClassName="dropdown-button"
iconChildren={buttonDropdownActionList}
> >
{type === "post" && "Přidat příspěvek"} {type === "post" && "Přidat příspěvek"}
{type === "procedure-proposal" && "Navrhnout postup"} {type === "procedure-proposal" && "Navrhnout postup"}
...@@ -121,7 +229,9 @@ const AddPostForm = ({ className }) => { ...@@ -121,7 +229,9 @@ const AddPostForm = ({ className }) => {
. .
</span> </span>
</div> </div>
</div> </form>
</CardBody>
</Card>
); );
}; };
......
src/containers/AnnoucementsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react"; import React from "react";
import { import {
deleteAnnouncement, deleteAnnouncement,
loadAnnouncements, loadAnnouncements,
updateAnnouncementContent, markSeen,
updateAnnouncement,
} from "actions/announcements"; } from "actions/announcements";
import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal"; import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
import AnnouncementList from "components/annoucements/AnnouncementList"; import AnnouncementList from "components/annoucements/AnnouncementList";
import { CardBody } from "components/cards"; import { CardBody } from "components/cards";
import ErrorMessage from "components/ErrorMessage"; import ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import { useActionState, useItemActionConfirm } from "hooks"; import { useItemActionConfirm } from "hooks";
import { AnnouncementStore, AuthStore } from "stores"; import { AnnouncementStore, AuthStore } from "stores";
const AnnoucementsContainer = () => { const AnnoucementsContainer = ({ className }) => {
const [itemToEdit, setItemToEdit] = useState(null);
const [confirmingEdit, setConfirmingEdit] = useState(false);
const [editError, setEditError] = useState(null);
const { 2: loadResult } = loadAnnouncements.useWatch(); const { 2: loadResult } = loadAnnouncements.useWatch();
const [ const [
...@@ -24,57 +22,27 @@ const AnnoucementsContainer = () => { ...@@ -24,57 +22,27 @@ const AnnoucementsContainer = () => {
setItemToDelete, setItemToDelete,
onDeleteConfirm, onDeleteConfirm,
onDeleteCancel, onDeleteCancel,
deleteState,
] = useItemActionConfirm(deleteAnnouncement); ] = useItemActionConfirm(deleteAnnouncement);
const [deletingAnnouncement, deletingAnnouncementError] = useActionState( const [
deleteAnnouncement, itemToEdit,
itemToDelete setItemToEdit,
); onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(updateAnnouncement, (item, payload) => ({
item,
payload,
}));
const { isAuthenticated, user } = AuthStore.useState(); const { isAuthenticated, user } = AuthStore.useState();
const items = AnnouncementStore.useState((state) => const items = AnnouncementStore.useState((state) =>
state.itemIds.map((id) => state.items[id]) state.itemIds.map((id) => state.items[id])
); );
const confirmEdit = useCallback(
async (newContent) => {
if (itemToEdit && newContent) {
setConfirmingEdit(true);
const result = await updateAnnouncementContent.run({
item: itemToEdit,
newContent,
});
if (!result.error) {
setItemToEdit(null);
setEditError(null);
} else {
setEditError(result.message);
}
setConfirmingEdit(false);
}
},
[itemToEdit, setItemToEdit]
);
const cancelEdit = useCallback(() => {
setItemToEdit(null);
}, [setItemToEdit]);
/**
* Mark down user saw this announcement already.
* @param {CF2021.Announcement} announcement
*/
const markSeen = (announcement) => {
AnnouncementStore.update((state) => {
state.items[announcement.id].seen = true;
});
};
return ( return (
<> <div className={className}>
{loadResult && loadResult.error && ( {loadResult && loadResult.error && (
<CardBody> <CardBody>
<ErrorMessage> <ErrorMessage>
...@@ -93,8 +61,8 @@ const AnnoucementsContainer = () => { ...@@ -93,8 +61,8 @@ const AnnoucementsContainer = () => {
isOpen={!!itemToDelete} isOpen={!!itemToDelete}
onConfirm={onDeleteConfirm} onConfirm={onDeleteConfirm}
onCancel={onDeleteCancel} onCancel={onDeleteCancel}
confirming={deletingAnnouncement} confirming={deleteState.loading}
error={deletingAnnouncementError} error={deleteState.error}
title="Opravdu smazat?" title="Opravdu smazat?"
yesActionLabel="Smazat" yesActionLabel="Smazat"
> >
...@@ -104,13 +72,13 @@ const AnnoucementsContainer = () => { ...@@ -104,13 +72,13 @@ const AnnoucementsContainer = () => {
<AnnouncementEditModal <AnnouncementEditModal
isOpen={true} isOpen={true}
announcement={itemToEdit} announcement={itemToEdit}
onConfirm={confirmEdit} onConfirm={onEditConfirm}
onCancel={cancelEdit} onCancel={onEditCancel}
confirming={confirmingEdit} confirming={editState.loading}
error={editError} error={editState.error}
/> />
)} )}
</> </div>
); );
}; };
......
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 React from "react";
import pick from "lodash/pick";
import Chip from "components/Chip";
import Dropdown from "components/Dropdown"; import Dropdown from "components/Dropdown";
import { PostStore } from "stores"; import { PostStore } from "stores";
import { updateWindowPosts } from "utils"; import { updateWindowPosts } from "utils";
const PostFilters = () => { const PostFilters = () => {
const { window, filters } = PostStore.useState((state) => const filters = PostStore.useState((state) => state.filters);
pick(state, ["window", "filters", "items"])
);
const flagsOptions = [ const flagsOptions = [
{ title: "Vše", value: "all" }, { title: "Vše", value: "all" },
...@@ -25,19 +21,13 @@ const PostFilters = () => { ...@@ -25,19 +21,13 @@ const PostFilters = () => {
{ title: "Jen návrhy", value: "proposalsOnly" }, { title: "Jen návrhy", value: "proposalsOnly" },
{ title: "Jen příspěvky", value: "discussionOnly" }, { title: "Jen příspěvky", value: "discussionOnly" },
]; ];
const hasNextPage = window.page * window.perPage < window.itemCount;
const hasPrevPage = window.page > 1;
const setFilter = (prop, newValue, resetPage = true) => { const setFilter = (prop, newValue) => {
PostStore.update((state) => { PostStore.update((state) => {
state.filters[prop] = newValue; state.filters[prop] = newValue;
state.window.itemCount = state.window.items.length; state.window.itemCount = state.window.items.length;
updateWindowPosts(state); updateWindowPosts(state);
if (resetPage) {
state.window.page = 1;
}
}); });
}; };
...@@ -45,27 +35,9 @@ const PostFilters = () => { ...@@ -45,27 +35,9 @@ const PostFilters = () => {
const onSortChange = (newValue) => setFilter("sort", newValue, false); const onSortChange = (newValue) => setFilter("sort", newValue, false);
const onTypeChange = (newValue) => setFilter("type", newValue); const onTypeChange = (newValue) => setFilter("type", newValue);
const onNextPage = useCallback(() => {
if (hasNextPage) {
PostStore.update((state) => {
state.window.page = state.window.page + 1;
});
}
}, [hasNextPage]);
const onPrevPage = useCallback(() => {
if (hasPrevPage) {
PostStore.update((state) => {
state.window.page = state.window.page - 1;
});
}
}, [hasPrevPage]);
const enabledPaginatorClass = "cursor-pointer text-xs";
const disabledPaginatorClass = "opacity-25 cursor-not-allowed text-xs";
return ( return (
<div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center"> <div className="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div className="-mx-1"> <div className="-mx-1 joyride-filters">
<Dropdown <Dropdown
value={filters.flags} value={filters.flags}
onChange={onFlagsChange} onChange={onFlagsChange}
...@@ -85,29 +57,6 @@ const PostFilters = () => { ...@@ -85,29 +57,6 @@ const PostFilters = () => {
className="text-xs ml-1 mt-2 xl:mt-0" className="text-xs ml-1 mt-2 xl:mt-0"
/> />
</div> </div>
<div>
<Chip
color="grey-125"
className={
hasPrevPage ? enabledPaginatorClass : disabledPaginatorClass
}
hoveractive
onClick={onPrevPage}
>
<span className="ico--chevron-left"></span>
</Chip>
<Chip
color="grey-125"
className={
hasNextPage ? enabledPaginatorClass : disabledPaginatorClass
}
hoveractive
onClick={onNextPage}
>
<span className="ico--chevron-right"></span>
</Chip>
</div>
</div> </div>
); );
}; };
......
src/containers/PostsContainer.jsx
View file @ 9f9e00fc
import React, { useCallback, useState } from "react"; import React, { useCallback, useMemo } from "react";
import pick from "lodash/pick"; import pick from "lodash/pick";
import { import {
...@@ -10,143 +10,190 @@ import { ...@@ -10,143 +10,190 @@ import {
hide, hide,
like, like,
loadPosts, loadPosts,
markSeen,
rejectProposal, rejectProposal,
rejectProposalByChairman, rejectProposalByChairman,
} from "actions/posts"; } 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 ErrorMessage from "components/ErrorMessage";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import ModalWithActions from "components/modals/ModalWithActions";
import PostEditModal from "components/posts/PostEditModal"; import PostEditModal from "components/posts/PostEditModal";
import PostList from "components/posts/PostList"; import PostList from "components/posts/PostList";
import { useActionState, useItemActionConfirm } from "hooks"; import { useActionState, useItemActionConfirm } from "hooks";
import { AuthStore, PostStore } from "stores"; import { AuthStore, GlobalInfoStore, PostStore } from "stores";
const PostsContainer = ({ className }) => {
const [postToEdit, setPostToEdit] = useState(null);
const [confirmingEdit, setConfirmingEdit] = useState(false);
const [editError, setEditError] = useState(null);
const PostsContainer = ({ className, showAddPostCta }) => {
const [ const [
userToBan, userToBan,
setUserToBan, setUserToBan,
onBanUserConfirm, onBanUserConfirm,
onBanUserCancel, onBanUserCancel,
banUserState,
] = useItemActionConfirm(ban); ] = useItemActionConfirm(ban);
const [
userToUnban,
setUserToUnban,
onUnbanUserConfirm,
onUnbanUserCancel,
unbanUserState,
] = useItemActionConfirm(unban);
const [
userToInvite,
setUserToInvite,
onInviteUserConfirm,
onInviteUserCancel,
inviteUserState,
] = useItemActionConfirm(inviteToJitsi);
const [ const [
postToHide, postToHide,
setPostToHide, setPostToHide,
onPostHideConfirm, onPostHideConfirm,
onPostHideCancel, onPostHideCancel,
postHideState,
] = useItemActionConfirm(hide); ] = useItemActionConfirm(hide);
const [ const [
postToArchive, postToArchive,
setPostToArchive, setPostToArchive,
onPostArchiveConfirm, onPostArchiveConfirm,
onPostArchiveCancel, onPostArchiveCancel,
postArchiveState,
] = useItemActionConfirm(archive); ] = useItemActionConfirm(archive);
const [ const [
postToAnnounce, postToAnnounce,
setPostToAnnounce, setPostToAnnounce,
onAnnounceConfirm, onAnnounceConfirm,
onAnnounceCancel, onAnnounceCancel,
announceState,
] = useItemActionConfirm(announceProposal); ] = useItemActionConfirm(announceProposal);
const [ const [
postToAccept, postToAccept,
setPostToAccept, setPostToAccept,
onAcceptConfirm, onAcceptConfirm,
onAcceptCancel, onAcceptCancel,
] = useItemActionConfirm(acceptProposal); ] = useItemActionConfirm(acceptProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [
postToEdit,
setPostToEdit,
onEditConfirm,
onEditCancel,
editState,
] = useItemActionConfirm(edit, (item, newContent) => ({
post: item,
newContent,
}));
const [ const [
postToReject, postToReject,
setPostToReject, setPostToReject,
onRejectConfirm, onRejectConfirm,
onRejectCancel, onRejectCancel,
] = useItemActionConfirm(rejectProposal); ] = useItemActionConfirm(rejectProposal, (item, archive) => ({
proposal: item,
archive,
}));
const [ const [
postToRejectByChairman, postToRejectByChairman,
setPostToRejectByChairman, setPostToRejectByChairman,
onRejectByChairmanConfirm, onRejectByChairmanConfirm,
onRejectByChairmanCancel, onRejectByChairmanCancel,
] = useItemActionConfirm(rejectProposalByChairman); ] = useItemActionConfirm(rejectProposalByChairman, (item, archive) => ({
proposal: item,
archive,
}));
const { isAuthenticated, user } = AuthStore.useState(); const { isAuthenticated, user } = AuthStore.useState((state) =>
pick(state, ["isAuthenticated", "user"])
);
const { window, items } = PostStore.useState((state) => const { window, items } = PostStore.useState((state) =>
pick(state, ["window", "items"]) pick(state, ["window", "items"])
); );
const showingArchivedOnly = PostStore.useState( const showingArchivedOnly = PostStore.useState(
(state) => state.filters.flags === "archived" (state) => state.filters.flags === "archived"
); );
const groupSizeHalf = GlobalInfoStore.useState(
const [banningUser, banningUserError] = useActionState(ban, userToBan); (state) => state.groupSizeHalf
const [hidingPost, hidingPostError] = useActionState(hide, postToHide);
const [archivingPost, archivingPostError] = useActionState(
archive,
postToArchive
);
const [announcingProposal, announcingProposalError] = useActionState(
announceProposal,
postToAnnounce
); );
const [acceptingProposal, acceptingProposalError] = useActionState( const [acceptingProposal, acceptingProposalError] = useActionState(
acceptProposal, acceptProposal,
postToAccept {
proposal: postToAccept,
archive: false,
}
); );
const [
acceptingAndArchivingProposal,
acceptingAndArchivingProposalError,
] = useActionState(acceptProposal, {
proposal: postToAccept,
archive: true,
});
const [rejectingProposal, rejectingProposalError] = useActionState( const [rejectingProposal, rejectingProposalError] = useActionState(
rejectProposal, rejectProposal,
postToReject {
proposal: postToReject,
archive: false,
}
); );
const [
rejectingAndArchivingProposal,
rejectingAndArchivingProposalError,
] = useActionState(rejectProposal, { proposal: postToReject, archive: true });
const [ const [
rejectingProposalByChairman, rejectingProposalByChairman,
rejectingProposalByChairmanError, rejectingProposalByChairmanError,
] = useActionState(rejectProposalByChairman, postToRejectByChairman); ] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: false,
});
const [
rejectingProposalByChairmanAndArchiving,
rejectingProposalByChairmanAndArchivingError,
] = useActionState(rejectProposalByChairman, {
proposal: postToRejectByChairman,
archive: true,
});
const { 2: loadResult } = loadPosts.useWatch(); const { 2: loadResult } = loadPosts.useWatch();
const confirmEdit = useCallback( /**
async (newContent) => { * Ban a post's author.
if (postToEdit && newContent) { * @param {CF2021.Post} post
setConfirmingEdit(true); */
const onBanUser = useCallback(
const result = await edit.run({ post: postToEdit, newContent }); (post) => {
setUserToBan(post.author);
if (!result.error) {
setPostToEdit(null);
setEditError(null);
} else {
setEditError(result.message);
}
setConfirmingEdit(false);
}
}, },
[postToEdit, setPostToEdit] [setUserToBan]
); );
const cancelEdit = useCallback(() => {
setPostToEdit(null);
}, [setPostToEdit]);
/** /**
* Ban a post's author. * Ban a post's author.
* @param {CF2021.Post} post * @param {CF2021.Post} post
*/ */
const onBanUser = (post) => { const onUnbanUser = useCallback(
setUserToBan(post.author); (post) => {
}; setUserToUnban(post.author);
},
[setUserToUnban]
);
/** /**
* Mark down user saw this post already. * Invite post's author to Jitsi.
* @param {CF2021.Post} post * @param {CF2021.Post} post
*/ */
const markSeen = (post) => { const onInviteUser = useCallback(
PostStore.update((state) => { (post) => {
state.items[post.id].seen = true; 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 (
<> <>
...@@ -156,16 +203,20 @@ const PostsContainer = ({ className }) => { ...@@ -156,16 +203,20 @@ const PostsContainer = ({ className }) => {
</ErrorMessage> </ErrorMessage>
)} )}
<PostList <PostList
items={windowItems.slice(sliceStart, sliceEnd)} items={windowItems}
showAddPostCta={showAddPostCta}
canThumb={isAuthenticated} canThumb={isAuthenticated}
canRunActions={isAuthenticated && user.role === "chairman"}
onLike={like.run} onLike={like.run}
onDislike={dislike.run} onDislike={dislike.run}
onSeen={markSeen} onSeen={markSeen}
className={className} className={className}
dimArchived={!showingArchivedOnly} dimArchived={!showingArchivedOnly}
currentUser={user}
supportThreshold={groupSizeHalf}
onHide={setPostToHide} onHide={setPostToHide}
onBanUser={onBanUser} onBanUser={onBanUser}
onUnbanUser={onUnbanUser}
onInviteUser={onInviteUser}
onEdit={setPostToEdit} onEdit={setPostToEdit}
onArchive={setPostToArchive} onArchive={setPostToArchive}
onAnnounceProcedureProposal={setPostToAnnounce} onAnnounceProcedureProposal={setPostToAnnounce}
...@@ -177,20 +228,47 @@ const PostsContainer = ({ className }) => { ...@@ -177,20 +228,47 @@ const PostsContainer = ({ className }) => {
isOpen={!!userToBan} isOpen={!!userToBan}
onConfirm={onBanUserConfirm} onConfirm={onBanUserConfirm}
onCancel={onBanUserCancel} onCancel={onBanUserCancel}
confirming={banningUser} confirming={banUserState.loading}
error={banningUserError} error={banUserState.error}
title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`} title={`Zablokovat uživatele ${userToBan ? userToBan.name : null}?`}
yesActionLabel="Zablokovat" yesActionLabel="Zablokovat"
> >
Uživatel <strong>{userToBan ? userToBan.name : null}</strong> bude 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? zablokován a nebude dále moci vkládat nové příspěvky. Opravdu to chcete?
</ModalConfirm> </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 <ModalConfirm
isOpen={!!postToHide} isOpen={!!postToHide}
onConfirm={onPostHideConfirm} onConfirm={onPostHideConfirm}
onCancel={onPostHideCancel} onCancel={onPostHideCancel}
confirming={hidingPost} confirming={postHideState.loading}
error={hidingPostError} error={postHideState.error}
title="Skrýt příspěvek?" title="Skrýt příspěvek?"
yesActionLabel="Potvrdit" yesActionLabel="Potvrdit"
> >
...@@ -200,8 +278,8 @@ const PostsContainer = ({ className }) => { ...@@ -200,8 +278,8 @@ const PostsContainer = ({ className }) => {
isOpen={!!postToArchive} isOpen={!!postToArchive}
onConfirm={onPostArchiveConfirm} onConfirm={onPostArchiveConfirm}
onCancel={onPostArchiveCancel} onCancel={onPostArchiveCancel}
confirming={archivingPost} confirming={postArchiveState.loading}
error={archivingPostError} error={postArchiveState.error}
title="Archivovat příspěvek?" title="Archivovat příspěvek?"
yesActionLabel="Potvrdit" yesActionLabel="Potvrdit"
> >
...@@ -212,55 +290,142 @@ const PostsContainer = ({ className }) => { ...@@ -212,55 +290,142 @@ const PostsContainer = ({ className }) => {
isOpen={!!postToAnnounce} isOpen={!!postToAnnounce}
onConfirm={onAnnounceConfirm} onConfirm={onAnnounceConfirm}
onCancel={onAnnounceCancel} onCancel={onAnnounceCancel}
confirming={announcingProposal} confirming={announceState.loading}
error={announcingProposalError} error={announceState.errror}
title="Vyhlásit procedurální návrh?" title="Vyhlásit procedurální návrh?"
yesActionLabel="Vyhlásit návrh" yesActionLabel="Vyhlásit návrh"
> >
Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete? Procedurální návrh bude <strong>vyhlášen</strong>. Opravdu to chcete?
</ModalConfirm> </ModalConfirm>
<ModalConfirm <ModalWithActions
isOpen={!!postToAccept} isOpen={!!postToAccept}
onConfirm={onAcceptConfirm}
onCancel={onAcceptCancel} onCancel={onAcceptCancel}
confirming={acceptingProposal} error={acceptingProposalError || acceptingAndArchivingProposalError}
error={acceptingProposalError}
title="Schválit procedurální návrh?" title="Schválit procedurální návrh?"
yesActionLabel="Schválit návrh" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onAcceptConfirm(false)}
loading={acceptingProposal}
>
Schválit
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onAcceptConfirm(true)}
loading={acceptingAndArchivingProposal}
>
Schválit a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onAcceptCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete? Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete?
</ModalConfirm> </ModalWithActions>
<ModalConfirm <ModalWithActions
isOpen={!!postToReject} isOpen={!!postToReject}
onConfirm={onRejectConfirm}
onCancel={onRejectCancel} onCancel={onRejectCancel}
confirming={rejectingProposal} error={rejectingProposalError || rejectingAndArchivingProposalError}
error={rejectingProposalError}
title="Zamítnout procedurální návrh?" title="Zamítnout procedurální návrh?"
yesActionLabel="Zamítnout návrh" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(false)}
loading={rejectingProposal}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectConfirm(true)}
loading={rejectingAndArchivingProposal}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete? Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
</ModalConfirm> </ModalWithActions>
<ModalConfirm <ModalWithActions
isOpen={!!postToRejectByChairman} isOpen={!!postToRejectByChairman}
onConfirm={onRejectByChairmanConfirm}
onCancel={onRejectByChairmanCancel} onCancel={onRejectByChairmanCancel}
confirming={rejectingProposalByChairman} error={
error={rejectingProposalByChairmanError} rejectingProposalByChairmanError ||
rejectingProposalByChairmanAndArchivingError
}
title="Zamítnout procedurální návrh předsedajícícm?" title="Zamítnout procedurální návrh předsedajícícm?"
yesActionLabel="Zamítnout návrh předsedajícím" containerClassName="max-w-lg"
actions={
<>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(false)}
loading={rejectingProposalByChairman}
>
Zamítnout
</Button>
<Button
hoverActive
color="blue-300"
className="text-sm"
onClick={() => onRejectByChairmanConfirm(true)}
loading={rejectingProposalByChairmanAndArchiving}
>
Zamítnout a archivovat
</Button>
<Button
hoverActive
color="grey-125"
className="text-sm"
onClick={onRejectCancel}
>
Zrušit
</Button>
</>
}
> >
Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu Procedurální návrh bude <strong>zamítnut předsedajícím</strong>. Opravdu
to chcete? to chcete?
</ModalConfirm> </ModalWithActions>
{postToEdit && ( {postToEdit && (
<PostEditModal <PostEditModal
isOpen={true} isOpen={true}
post={postToEdit} post={postToEdit}
onConfirm={confirmEdit} onConfirm={onEditConfirm}
onCancel={cancelEdit} onCancel={onEditCancel}
confirming={confirmingEdit} confirming={editState.loading}
error={editError} error={editState.error}
/> />
)} )}
</> </>
......
src/hooks.js
View file @ 9f9e00fc
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
export const useItemActionConfirm = (actionFn) => { const baseActionParamsBuilder = (item, args) => {
return item;
};
export const useItemActionConfirm = (actionFn, actionParamsBuilder = null) => {
const [item, setItem] = useState(null); const [item, setItem] = useState(null);
const [actionArgs, setActionArgs] = useState(null);
const onActionConfirm = useCallback(async () => { const onActionConfirm = useCallback(
async (args) => {
if (item) { if (item) {
const result = await actionFn.run(item); const newActionArgs = (actionParamsBuilder || baseActionParamsBuilder)(
item,
args,
);
setActionArgs(newActionArgs);
const result = await actionFn.run(newActionArgs);
if (!result.error) { if (!result.error) {
setItem(null); setItem(null);
} }
} }
}, [item, setItem, actionFn]); },
[item, setItem, actionFn, actionParamsBuilder, setActionArgs],
);
const onActionCancel = useCallback(() => { const onActionCancel = useCallback(() => {
setItem(null); setItem(null);
}, [setItem]); }, [setItem]);
return [item, setItem, onActionConfirm, onActionCancel]; const [loading, error] = useActionState(actionFn, actionArgs);
const unwrappedActionState = { loading, error };
return [item, setItem, onActionConfirm, onActionCancel, unwrappedActionState];
}; };
export const useActionConfirm = (actionFn, actionArgs) => { export const useActionConfirm = (actionFn, actionArgs) => {
......
src/index.js
View file @ 9f9e00fc
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom/client";
import ReactModal from "react-modal"; import ReactModal from "react-modal";
import { refreshAccessToken } from "actions/users";
import App from "./App"; import App from "./App";
import * as serviceWorker from "./serviceWorker"; import * as serviceWorker from "./serviceWorker";
const root = document.getElementById("root"); const root = ReactDOM.createRoot(document.getElementById("root"));
function handleVisibilityChange() {
if (!document.hidden) {
refreshAccessToken();
}
}
ReactDOM.render( document.addEventListener("visibilitychange", handleVisibilityChange, false);
root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>
root
); );
ReactModal.setAppElement(document.getElementById("root"));
ReactModal.setAppElement(root);
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.
......
src/keycloak.js
View file @ 9f9e00fc
...@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js"; ...@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
// Setup Keycloak instance as needed // Setup Keycloak instance as needed
// Pass initialization options as required or leave blank to load from 'keycloak.json' // Pass initialization options as required or leave blank to load from 'keycloak.json'
const keycloak = Keycloak({ const keycloak = new Keycloak({
url: "https://auth.pirati.cz/auth", url: "https://auth.pirati.cz/auth",
realm: "pirati", realm: "pirati",
clientId: "cf-online", clientId: "cf-online",
......
src/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
import React, { useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { format } from "date-fns"; import { Helmet } from "react-helmet-async";
import Joyride, { EVENTS } from "react-joyride";
import ReactPlayer from "react-player/lazy";
import { useKeycloak } from "@react-keycloak/web";
import useWindowSize from "@rooks/use-window-size";
import { import {
closeDiscussion, closeDiscussion,
...@@ -7,85 +11,28 @@ import { ...@@ -7,85 +11,28 @@ 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 {
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";
import AnnouncementsContainer from "containers/AnnoucementsContainer"; import AnnouncementsContainer from "containers/AnnoucementsContainer";
import GlobalStats from "containers/GlobalStats";
import JitsiInviteCard from "containers/JitsiInviteCard";
import PostFilters from "containers/PostFilters"; import PostFilters from "containers/PostFilters";
import PostsContainer from "containers/PostsContainer"; import PostsContainer from "containers/PostsContainer";
import { useActionConfirm } from "hooks"; import { useActionConfirm } from "hooks";
import { AuthStore, ProgramStore } from "stores"; import { AuthStore, GlobalInfoStore, ProgramStore } from "stores";
const NotYetStarted = ({ startAt }) => ( import "./Home.css";
<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 = () => ( const tourLSKey = "cf2021__tour";
<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 {
...@@ -94,8 +41,14 @@ const Home = () => { ...@@ -94,8 +41,14 @@ const Home = () => {
scheduleIds, scheduleIds,
} = ProgramStore.useState(); } = ProgramStore.useState();
const { isAuthenticated, user } = AuthStore.useState(); const { isAuthenticated, user } = AuthStore.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,
...@@ -114,6 +67,17 @@ const Home = () => { ...@@ -114,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 });
...@@ -123,6 +87,17 @@ const Home = () => { ...@@ -123,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;
...@@ -131,11 +106,24 @@ const Home = () => { ...@@ -131,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 />;
} }
...@@ -143,18 +131,99 @@ const Home = () => { ...@@ -143,18 +131,99 @@ const Home = () => {
return <BreakInProgress />; return <BreakInProgress />;
} }
const displayActions = isAuthenticated && user.role === "chairman";
return ( return (
<> <>
<article className="container container--wide pt-8 lg:py-24 cf2021"> <Helmet>
<section className="cf2021__video space-y-8"> <title>Přímý přenos | CF 2024 | Pirátská strana</title>
<div className="flex items-center justify-between mb-4 lg:mb-8"> <meta
<h1 className="head-alt-md lg:head-alt-lg mb-0"> name="description"
Bod č. {programEntry.number}: {programEntry.title} 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">
<h1 className="head-alt-base lg:head-alt-lg">
{programEntry.number !== "" && `Bod č. ${programEntry.number}: `}
{programEntry.title}
</h1> </h1>
<DropdownMenu right triggerSize="lg"> <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 && (
<DropdownMenu right triggerSize="lg" className="z-20">
<DropdownMenuItem <DropdownMenuItem
onClick={() => setShowProgramEditModal(true)} onClick={() => setShowProgramEditModal(true)}
icon="ico--edit-pencil" icon="ico--pencil"
title="Přejmenovat bod programu" title="Přejmenovat bod programu"
titleSize="base" titleSize="base"
iconSize="base" iconSize="base"
...@@ -184,27 +253,46 @@ const Home = () => { ...@@ -184,27 +253,46 @@ const Home = () => {
titleSize="base" titleSize="base"
iconSize="base" iconSize="base"
/> />
)}
</DropdownMenu> </DropdownMenu>
)}
</div> </div>
</div>
<iframe </div>
width="100%" <section
height="500" className="cf2021__video"
src="https://www.youtube.com/embed/73jJLspL8o8" // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
frameBorder="0" style={{ maxWidth: "calc(100vw - 2rem)" }}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" >
allowFullScreen="" <div className="container-padding--zero md:container-padding--auto">
{streamUrl && (
<div className="iframe-container joyride-player">
<ReactPlayer
url={streamUrl}
title="Video stream" title="Video stream"
></iframe> controls={true}
playing={true}
muted={true}
width="100%"
height=""
/>
</div>
)}
{!streamUrl && (
<div className="px-4 py-16 lg:py-48 flex items-center justify-center bg-grey-400 text-center">
<span className="text-lg lg:text-xl text-grey-200">
<i className="ico--warning mr-2" /> Stream teď není k
dispozici. Vyčkej na aktualizaci.
</span>
</div>
)}
<GlobalStats />
</div>
</section> </section>
<section className="cf2021__notifications"> <section className="cf2021__notifications space-y-8">
<div className="lg:card lg:elevation-10"> <JitsiInviteCard />
<div className="lg:card__body pb-2 lg:py-6">
<h2 className="head-heavy-sm">Oznámení</h2>
</div>
<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" />
...@@ -212,30 +300,60 @@ const Home = () => { ...@@ -212,30 +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-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-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
title="Rozprava je uzavřena"
/>
)}
{programEntry.discussionOpened && (
<i
className="ico--lock-open text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
title="Probíhá rozprava"
/>
)}
</h2> </h2>
<PostFilters /> <PostFilters />
</div> </div>
<PostsContainer className="container-padding--zero lg:container-padding--auto" /> {!programEntry.discussionOpened &&
{programEntry.discussionOpened && isAuthenticated && ( (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
<AddPostForm className="my-8 space-y-4" /> <p className="alert alert--light items-center mb-4 elevation-4">
<i className="alert__icon ico--lock text-lg" />
Rozprava je uzavřena - příspěvky teď nelze přidávat.
</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 &&
isAuthenticated &&
!user.isBanned && (
<AddPostForm
className="mb-8"
canAddProposal={
user.role === "member" || user.role === "chairman"
}
/>
)}
<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 classNames from "classnames";
import { format } from "date-fns"; import { format } from "date-fns";
import { activateProgramPoint } from "actions/program"; import { activateProgramPoint } from "actions/program";
...@@ -26,21 +26,39 @@ const Schedule = () => { ...@@ -26,21 +26,39 @@ 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={classNames( className="flex flex-col md:flex-row my-4 duration-300 text-black"
"flex flex-col md:flex-row my-4 hover:opacity-100 transition duration-300",
{
"text-black": isCurrent,
"text-black opacity-50": !isCurrent,
}
)}
key={entry.id} key={entry.id}
> >
<div className="w-28 md:text-right"> <div className="w-28 md:text-right">
...@@ -51,22 +69,36 @@ const Schedule = () => { ...@@ -51,22 +69,36 @@ 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">
<Link to="/">{entry.title}</Link> {isCurrent && <Link to="/">{entry.fullTitle}</Link>}
{!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 && <p>{entry.description}</p>} {entry.speakers && (
<div className="space-x-2">
<strong>Řečníci:</strong>
<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" &&
entry.id !== currentId && ( entry.id !== currentId && (
...@@ -75,6 +107,7 @@ const Schedule = () => { ...@@ -75,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>
...@@ -99,6 +132,7 @@ const Schedule = () => { ...@@ -99,6 +132,7 @@ const Schedule = () => {
aktivován. Chcete pokračovat? aktivován. Chcete pokračovat?
</ModalConfirm> </ModalConfirm>
</article> </article>
</>
); );
}; };
......
src/pages/Protocol.jsx 0 → 100644
View file @ 9f9e00fc
import React, { useCallback, useState } from "react";
import { Helmet } from "react-helmet-async";
import useInterval from "@rooks/use-interval";
import { loadProtocol } from "actions/global-info";
import Button from "components/Button";
import ErrorMessage from "components/ErrorMessage";
import { useActionState } from "hooks";
import { GlobalInfoStore } from "stores";
const Protocol = () => {
const { protocolUrl, protocol } = GlobalInfoStore.useState();
const [protocolLoading, protocolLoadError] = useActionState(loadProtocol);
const [progressPercent, setProgressPercent] = useState(0);
const [paused, setPaused] = useState(false);
const forceLoad = useCallback(async () => {
try {
setPaused(true);
setProgressPercent(1);
await loadProtocol.run();
} finally {
setPaused(false);
}
}, [setPaused, setProgressPercent]);
const tick = useCallback(async () => {
if (paused) {
return;
}
if (progressPercent % 100 === 0) {
forceLoad();
} else {
setProgressPercent(progressPercent + 1);
}
}, [forceLoad, paused, progressPercent, setProgressPercent]);
useInterval(tick, 100, true);
const htmlContent = protocol
? {
__html: protocol,
}
: null;
const progressStyle = {
position: "absolute",
width: `${progressPercent}%`,
height: "100%",
left: "0",
background:
"linear-gradient(142deg, rgba(2,0,36,1) 0%, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%)",
opacity: "0.4",
};
return (
<>
<Helmet>
<title>Zápis ze zasedání | CF 2024 | Pirátská strana</title>
<meta
name="description"
content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
/>
<meta
property="og:title"
content="Zápis ze zasedání | CF 2024 | Pirátská strana"
/>
<meta
property="og:description"
content="Interaktivní zápis z 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">Zápis z jednání</h1>
<div className="flex items-start">
<div className="lg:w-2/3">
{!protocolUrl && (
<ErrorMessage>Zápis momentálně není k dispozici.</ErrorMessage>
)}
{protocolLoadError && (
<ErrorMessage>
Při stahování záznamu z jednání došlo k problému:{" "}
{protocolLoadError.toString()}
</ErrorMessage>
)}
{protocolUrl && <></>}
{htmlContent && (
<div
className="leading-tight text-sm lg:text-base content-block"
dangerouslySetInnerHTML={htmlContent}
></div>
)}
</div>
<div className="hidden lg:block card elevation-10 w-1/3">
<div className="lg:card__body content-block">
<h2>Jak to funguje?</h2>
<p>
Zápis se aktualizuje automaticky každých 10 sekund. Pokud chceš
aktualizaci vynutit ručně, můžeš využít tlačítko níže.
</p>
<Button
icon="ico--refresh"
loading={protocolLoading}
className="btn--fullwidth"
onClick={forceLoad}
color="black"
bodyProps={{
style: {
position: "relative",
},
}}
>
<span style={progressStyle}></span>
<span style={{ position: "relative" }}>
{protocolLoading ? "Aktualizace..." : "Aktualizovat"}
</span>
</Button>
</div>
</div>
</div>
</article>
</>
);
};
export default Protocol;
src/serviceWorker.js
View file @ 9f9e00fc
...@@ -16,8 +16,8 @@ const isLocalhost = Boolean( ...@@ -16,8 +16,8 @@ const isLocalhost = Boolean(
window.location.hostname === "[::1]" || window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4. // 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
) ),
); );
export function register(config) { export function register(config) {
...@@ -43,7 +43,7 @@ export function register(config) { ...@@ -43,7 +43,7 @@ export function register(config) {
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
"This web app is being served cache-first by a service " + "This web app is being served cache-first by a service " +
"worker. To learn more, visit https://bit.ly/CRA-PWA" "worker. To learn more, visit https://bit.ly/CRA-PWA",
); );
}); });
} else { } else {
...@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) { ...@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
// content until all client tabs are closed. // content until all client tabs are closed.
console.log( console.log(
"New content is available and will be used when all " + "New content is available and will be used when all " +
"tabs for this page are closed. See https://bit.ly/CRA-PWA." "tabs for this page are closed. See https://bit.ly/CRA-PWA.",
); );
// Execute callback // Execute callback
...@@ -123,7 +123,7 @@ function checkValidServiceWorker(swUrl, config) { ...@@ -123,7 +123,7 @@ function checkValidServiceWorker(swUrl, config) {
}) })
.catch(() => { .catch(() => {
console.log( console.log(
"No internet connection found. App is running in offline mode." "No internet connection found. App is running in offline mode.",
); );
}); });
} }
......
src/stores.js
View file @ 9f9e00fc
import memoize from "lodash/memoize"; import memoize from "lodash/memoize";
import { Store } from "pullstate"; import { Store } from "pullstate";
/** @type {CF2021.GlobalInfoStorePayload} */
const globalInfoStoreInitial = {
connectionState: "connecting",
onlineMembers: 0,
onlineUsers: 0,
groupSizeHalf: null,
websocketUrl: null,
streamUrl: null,
protocolUrl: null,
protocol: null,
};
export const GlobalInfoStore = new Store(globalInfoStoreInitial);
/** @type {CF2021.AuthStorePayload} */ /** @type {CF2021.AuthStorePayload} */
const authStoreInitial = { const authStoreInitial = {
isAuthenticated: false, isAuthenticated: false,
showJitsiInvitePopup: false,
jitsiPopupDismissed: false,
}; };
export const AuthStore = new Store(authStoreInitial); export const AuthStore = new Store(authStoreInitial);
...@@ -32,12 +48,10 @@ const postStoreInitial = { ...@@ -32,12 +48,10 @@ const postStoreInitial = {
window: { window: {
items: [], items: [],
itemCount: 0, itemCount: 0,
page: 1,
perPage: 20,
}, },
filters: { filters: {
flags: "all", flags: "active",
sort: "byDate", sort: "byScore",
type: "all", type: "all",
showPendingProposals: false, showPendingProposals: false,
}, },
...@@ -49,7 +63,7 @@ export const getGroupByCode = memoize( ...@@ -49,7 +63,7 @@ export const getGroupByCode = memoize(
(groupMappings, groupCode) => { (groupMappings, groupCode) => {
return groupMappings.find((gm) => gm.code === groupCode); return groupMappings.find((gm) => gm.code === groupCode);
}, },
(groupMappings, groupCode) => [groupMappings, groupCode] (groupMappings, groupCode) => [groupMappings, groupCode],
); );
export const getGroupsByCode = memoize((groupMappings, groupCodes) => { export const getGroupsByCode = memoize((groupMappings, groupCodes) => {
......
src/utils.js
View file @ 9f9e00fc
import { parse } from "date-fns";
import filter from "lodash/filter"; import filter from "lodash/filter";
import pick from "lodash/pick"; import pick from "lodash/pick";
import property from "lodash/property"; import property from "lodash/property";
import values from "lodash/values"; import values from "lodash/values";
import WaitQueue from "wait-queue";
import { markdownConverter } from "markdown";
export const urlRegex =
/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
export const seenPostsLSKey = "cf2021_seen_posts";
export const seenAnnouncementsLSKey = "cf2021_seen_announcements";
/** /**
* Filter & sort collection of posts. * Filter & sort collection of posts.
...@@ -30,7 +39,7 @@ export const filterPosts = (filters, allItems) => { ...@@ -30,7 +39,7 @@ export const filterPosts = (filters, allItems) => {
if (!filters.showPendingProposals) { if (!filters.showPendingProposals) {
filteredItems = filteredItems.filter( filteredItems = filteredItems.filter(
(item) => item.type === "post" || item.state !== "pending" (item) => item.type === "post" || item.state !== "pending",
); );
} }
...@@ -47,7 +56,7 @@ export const filterPosts = (filters, allItems) => { ...@@ -47,7 +56,7 @@ export const filterPosts = (filters, allItems) => {
*/ */
export const updateWindowPosts = (state) => { export const updateWindowPosts = (state) => {
state.window.items = filterPosts(state.filters, values(state.items)).map( state.window.items = filterPosts(state.filters, values(state.items)).map(
property("id") property("id"),
); );
}; };
...@@ -119,8 +128,13 @@ export const announcementTypeMappingRev = { ...@@ -119,8 +128,13 @@ export const announcementTypeMappingRev = {
*/ */
export const parseRawPost = (rawPost) => { export const parseRawPost = (rawPost) => {
const post = { const post = {
...pick(rawPost, ["id", "content", "author"]), ...pick(rawPost, ["id", "content"]),
datetime: new Date(rawPost.datetime), author: {
...pick(rawPost.author, ["id", "name", "username", "group"]),
isBanned: rawPost.author.is_banned === 1,
},
contentHtml: markdownConverter.makeHtml(rawPost.content),
datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()),
historyLog: rawPost.history_log, historyLog: rawPost.history_log,
ranking: { ranking: {
dislikes: rawPost.ranking.dislikes, dislikes: rawPost.ranking.dislikes,
...@@ -132,7 +146,7 @@ export const parseRawPost = (rawPost) => { ...@@ -132,7 +146,7 @@ export const parseRawPost = (rawPost) => {
modified: Boolean(rawPost.is_changed), modified: Boolean(rawPost.is_changed),
archived: Boolean(rawPost.is_archived), archived: Boolean(rawPost.is_archived),
hidden: false, hidden: false,
seen: false, seen: isSeen(seenPostsLSKey, rawPost.id),
}; };
if (post.type === "procedure-proposal") { if (post.type === "procedure-proposal") {
...@@ -151,10 +165,43 @@ export const parseRawPost = (rawPost) => { ...@@ -151,10 +165,43 @@ export const parseRawPost = (rawPost) => {
export const parseRawAnnouncement = (rawAnnouncement) => { export const parseRawAnnouncement = (rawAnnouncement) => {
const announcement = { const announcement = {
...pick(rawAnnouncement, ["id", "content", "link"]), ...pick(rawAnnouncement, ["id", "content", "link"]),
datetime: new Date(rawAnnouncement.datetime), contentHtml: markdownConverter.makeHtml(rawAnnouncement.content),
datetime: parse(
rawAnnouncement.datetime,
"yyyy-MM-dd HH:mm:ss",
new Date(),
),
type: announcementTypeMapping[rawAnnouncement.type], type: announcementTypeMapping[rawAnnouncement.type],
seen: false, seen: isSeen(seenAnnouncementsLSKey, rawAnnouncement.id),
}; };
return announcement; return announcement;
}; };
export const createSeenWriter = (localStorageKey) => {
const queue = new WaitQueue();
const seenWriterWorker = async () => {
const id = await queue.shift();
const seen = new Set(
(localStorage.getItem(localStorageKey) || "").split(","),
);
seen.add(id);
localStorage.setItem(localStorageKey, Array.from(seen).join(","));
setTimeout(seenWriterWorker);
};
seenWriterWorker();
return {
markSeen: (id) => queue.push(id),
};
};
export const isSeen = (localStorageKey, id) => {
const val = localStorage.getItem(localStorageKey) || "";
return val.indexOf(id) !== -1;
};
src/ws/connection.js
View file @ 9f9e00fc
import hex from "crypto-js/enc-hex";
import hmacSHA1 from "crypto-js/hmac-sha1";
import WaitQueue from "wait-queue"; import WaitQueue from "wait-queue";
import { AuthStore, GlobalInfoStore } from "stores";
import { handlers } from "./handlers"; import { handlers } from "./handlers";
function Worker() { function Worker() {
...@@ -42,23 +46,47 @@ function Worker() { ...@@ -42,23 +46,47 @@ function Worker() {
}; };
} }
export const connect = ({ onConnect }) => { const buildKeepalivePayload = async () => {
const { user } = AuthStore.getRawState();
const payload = user && user.id ? user.id.toString() : "";
const signature =
user && !!user.secret ? hmacSHA1(payload, user.secret) : null;
return {
event: "KEEPALIVE",
payload,
sig: signature ? hex.stringify(signature) : null,
};
};
export const connect = ({ url, onConnect }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const worker = Worker(); const worker = Worker();
const ws = new WebSocket(process.env.REACT_APP_WS_BASE_URL); GlobalInfoStore.update((state) => {
state.connectionState = "connecting";
});
const ws = new WebSocket(url);
let keepAliveInterval; let keepAliveInterval;
console.log("[ws] Connecting ..."); console.log("[ws] Connecting ...");
ws.onopen = () => { ws.onopen = () => {
GlobalInfoStore.update((state) => {
state.connectionState = "connected";
});
console.log("[ws] Connected."); console.log("[ws] Connected.");
keepAliveInterval = setInterval(() => { const sendKeepalive = async () => {
ws.send("KEEPALIVE"); ws.send(JSON.stringify(await buildKeepalivePayload()));
console.debug("[ws] Sending keepalive."); console.debug("[ws] Sending keepalive.");
}, 30 * 1000); };
const self = { ws, worker }; sendKeepalive();
keepAliveInterval = setInterval(sendKeepalive, 15 * 1000);
const self = { ws, worker, sendKeepalive };
if (onConnect) { if (onConnect) {
return onConnect(self).then(() => resolve(self)); return onConnect(self).then(() => resolve(self));
...@@ -70,20 +98,23 @@ export const connect = ({ onConnect }) => { ...@@ -70,20 +98,23 @@ export const connect = ({ onConnect }) => {
ws.onmessage = worker.queue.push.bind(worker.queue); ws.onmessage = worker.queue.push.bind(worker.queue);
ws.onclose = (event) => { ws.onclose = (event) => {
GlobalInfoStore.update((state) => {
state.connectionState = "offline";
});
console.log( console.log(
"[ws] Socket is closed. Reconnect will be attempted in 1 second.", "[ws] Socket is closed. Reconnect will be attempted in 1 second.",
event.reason event.reason,
); );
clearInterval(keepAliveInterval); clearInterval(keepAliveInterval);
setTimeout(() => connect({ onConnect }), 1000); setTimeout(() => connect({ url, onConnect }), 1000);
}; };
ws.onerror = (err) => { ws.onerror = (err) => {
console.error( console.error(
"[ws] Socket encountered error: ", "[ws] Socket encountered error: ",
err.message, err.message,
"Closing socket" "Closing socket",
); );
ws.close(); ws.close();
reject(err); reject(err);
......

Pirátský GitLab - Home of the CopyLeft