Skip to content
Snippets Groups Projects
Commit 38aa9d14 authored by xaralis's avatar xaralis
Browse files

feat: global actions on program

parent 5d0df31c
No related branches found
No related tags found
No related merge requests found
Pipeline #1829 passed
...@@ -33,9 +33,9 @@ export const loadProgram = createAsyncAction( ...@@ -33,9 +33,9 @@ export const loadProgram = createAsyncAction(
"description", "description",
"proposer", "proposer",
]), ]),
expectedStartAt: new Date(entry.expectedStartAt), expectedStartAt: new Date(entry.expected_start_at),
expectedFinishAt: entry.expectedFinishAt expectedFinishAt: entry.expected_finish_at
? new Date(entry.expectedFinishAt) ? new Date(entry.expected_finish_at)
: undefined, : undefined,
}; };
} }
...@@ -60,3 +60,57 @@ export const loadProgram = createAsyncAction( ...@@ -60,3 +60,57 @@ export const loadProgram = createAsyncAction(
}, },
} }
); );
/**
* Open discussion.
*/
export const endProgramPoint = createAsyncAction(
async () => {
return successResult();
},
{
postActionHook: ({ result }) => {
if (!result.error) {
ProgramStore.update((state) => {
state.current = null;
});
}
},
}
);
/**
* Open discussion.
*/
export const openDiscussion = createAsyncAction(
async () => {
return successResult();
},
{
postActionHook: ({ result }) => {
if (!result.error) {
ProgramStore.update((state) => {
state.current.discussionOpened = true;
});
}
},
}
);
/**
* Close discussion.
*/
export const closeDiscussion = createAsyncAction(
async () => {
return successResult();
},
{
postActionHook: ({ result }) => {
if (!result.error) {
ProgramStore.update((state) => {
state.current.discussionOpened = false;
});
}
},
}
);
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
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 ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import { useModalConfirmControl } from "hooks"; import { useItemActionConfirm } from "hooks";
import { AnnouncementStore } from "stores"; import { AnnouncementStore } from "stores";
const AnnoucementsContainer = () => { const AnnoucementsContainer = () => {
...@@ -18,7 +18,7 @@ const AnnoucementsContainer = () => { ...@@ -18,7 +18,7 @@ const AnnoucementsContainer = () => {
setItemToDelete, setItemToDelete,
onDeleteConfirm, onDeleteConfirm,
onDeleteCancel, onDeleteCancel,
] = useModalConfirmControl(deleteAnnouncement); ] = useItemActionConfirm(deleteAnnouncement);
const items = AnnouncementStore.useState((state) => state.items); const items = AnnouncementStore.useState((state) => state.items);
......
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
import { ban } from "actions/users"; import { ban } from "actions/users";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
import PostList from "components/posts/PostList"; import PostList from "components/posts/PostList";
import { useModalConfirmControl } from "hooks"; import { useItemActionConfirm } from "hooks";
import { PostStore } from "stores"; import { PostStore } from "stores";
const PostsContainer = ({ className }) => { const PostsContainer = ({ className }) => {
...@@ -23,31 +23,31 @@ const PostsContainer = ({ className }) => { ...@@ -23,31 +23,31 @@ const PostsContainer = ({ className }) => {
setUserToBan, setUserToBan,
onBanUserConfirm, onBanUserConfirm,
onBanUserCancel, onBanUserCancel,
] = useModalConfirmControl(ban); ] = useItemActionConfirm(ban);
const [ const [
postToHide, postToHide,
setPostToHide, setPostToHide,
onPostHideConfirm, onPostHideConfirm,
onPostHideCancel, onPostHideCancel,
] = useModalConfirmControl(hide); ] = useItemActionConfirm(hide);
const [ const [
postToAnnounce, postToAnnounce,
setPostToAnnounce, setPostToAnnounce,
onAnnounceConfirm, onAnnounceConfirm,
onAnnounceCancel, onAnnounceCancel,
] = useModalConfirmControl(announceProposal); ] = useItemActionConfirm(announceProposal);
const [ const [
postToAccept, postToAccept,
setPostToAccept, setPostToAccept,
onAcceptConfirm, onAcceptConfirm,
onAcceptCancel, onAcceptCancel,
] = useModalConfirmControl(acceptProposal); ] = useItemActionConfirm(acceptProposal);
const [ const [
postToReject, postToReject,
setPostToReject, setPostToReject,
onRejectConfirm, onRejectConfirm,
onRejectCancel, onRejectCancel,
] = useModalConfirmControl(rejectProposal); ] = useItemActionConfirm(rejectProposal);
const { window, items } = PostStore.useState((state) => const { window, items } = PostStore.useState((state) =>
pick(state, ["window", "items"]) pick(state, ["window", "items"])
...@@ -82,9 +82,6 @@ const PostsContainer = ({ className }) => { ...@@ -82,9 +82,6 @@ const PostsContainer = ({ className }) => {
} }
}; };
const sliceStart = (window.page - 1) * window.perPage;
const sliceEnd = window.page * window.perPage;
/** /**
* Ban a post's author. * Ban a post's author.
* @param {CF2021.Post} post * @param {CF2021.Post} post
...@@ -93,6 +90,9 @@ const PostsContainer = ({ className }) => { ...@@ -93,6 +90,9 @@ const PostsContainer = ({ className }) => {
setUserToBan(post.author); setUserToBan(post.author);
}; };
const sliceStart = (window.page - 1) * window.perPage;
const sliceEnd = window.page * window.perPage;
return ( return (
<> <>
<PostList <PostList
......
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
export const useModalConfirmControl = (actionFn) => { export const useItemActionConfirm = (actionFn) => {
const [item, setItem] = useState(null); const [item, setItem] = useState(null);
const onActionConfirm = useCallback(() => { const onActionConfirm = useCallback(() => {
...@@ -16,3 +16,20 @@ export const useModalConfirmControl = (actionFn) => { ...@@ -16,3 +16,20 @@ export const useModalConfirmControl = (actionFn) => {
return [item, setItem, onActionConfirm, onActionCancel]; return [item, setItem, onActionConfirm, onActionCancel];
}; };
export const useActionConfirm = (actionFn) => {
const [showConfirm, setShowConfirm] = useState(false);
const onActionConfirm = useCallback(() => {
if (showConfirm) {
actionFn.run();
setShowConfirm(false);
}
}, [showConfirm, setShowConfirm, actionFn]);
const onActionCancel = useCallback(() => {
setShowConfirm(false);
}, [setShowConfirm]);
return [showConfirm, setShowConfirm, onActionConfirm, onActionCancel];
};
import React, { useState } from "react"; import React from "react";
import {
closeDiscussion,
endProgramPoint,
openDiscussion,
} from "actions/program";
import Button from "components/Button"; import Button from "components/Button";
import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu";
import ModalConfirm from "components/modals/ModalConfirm"; import ModalConfirm from "components/modals/ModalConfirm";
...@@ -8,6 +13,7 @@ import AddPostForm from "containers/AddPostForm"; ...@@ -8,6 +13,7 @@ import AddPostForm from "containers/AddPostForm";
import AnnouncementsContainer from "containers/AnnoucementsContainer"; import AnnouncementsContainer from "containers/AnnoucementsContainer";
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 { ProgramStore } from "stores"; import { ProgramStore } from "stores";
const noCurrentDiscussion = ( const noCurrentDiscussion = (
...@@ -29,22 +35,30 @@ const noCurrentDiscussion = ( ...@@ -29,22 +35,30 @@ const noCurrentDiscussion = (
); );
const Home = () => { const Home = () => {
const [showEndDiscussionConfirm, setShowEndDiscussionConfirm] = useState( const [
false showCloseDiscussion,
); setShowCloseDiscussion,
onCloseDiscussionConfirm,
onCloseDiscussionCancel,
] = useActionConfirm(closeDiscussion);
const [
showOpenDiscussion,
setShowOpenDiscussion,
onOpenDiscussionConfirm,
onOpenDiscussionCancel,
] = useActionConfirm(openDiscussion);
const [
showEndProgramPoint,
setShowEndProgramPoint,
onEndProgramPointConfirm,
onEndProgramPointCancel,
] = useActionConfirm(endProgramPoint);
const { current } = ProgramStore.useState(); const { current } = ProgramStore.useState();
const onRenameProgramPoint = () => { const onRenameProgramPoint = () => {
console.log("renameProgramPoint"); console.log("renameProgramPoint");
}; };
const onEndDiscussion = () => {
console.log("endDiscussion");
setShowEndDiscussionConfirm(true);
};
const onEndProgramPoint = () => {
console.log("endProgramPoint");
};
if (!current) { if (!current) {
return noCurrentDiscussion; return noCurrentDiscussion;
...@@ -66,15 +80,26 @@ const Home = () => { ...@@ -66,15 +80,26 @@ const Home = () => {
titleSize="base" titleSize="base"
iconSize="base" iconSize="base"
/> />
{current.discussionOpened && (
<DropdownMenuItem <DropdownMenuItem
onClick={onEndDiscussion} onClick={() => setShowCloseDiscussion(true)}
icon="ico--bubbles" icon="ico--bubbles"
title="Ukončit rozpravu" title="Ukončit rozpravu"
titleSize="base" titleSize="base"
iconSize="base" iconSize="base"
/> />
)}
{!current.discussionOpened && (
<DropdownMenuItem <DropdownMenuItem
onClick={onEndProgramPoint} onClick={() => setShowOpenDiscussion(true)}
icon="ico--bubbles"
title="Otevřít rozpravu"
titleSize="base"
iconSize="base"
/>
)}
<DropdownMenuItem
onClick={() => setShowEndProgramPoint(true)}
icon="ico--switch" icon="ico--switch"
title="Ukončit bod programu" title="Ukončit bod programu"
titleSize="base" titleSize="base"
...@@ -115,18 +140,38 @@ const Home = () => { ...@@ -115,18 +140,38 @@ const Home = () => {
</div> </div>
<PostsContainer className="container-padding--zero lg:container-padding--auto" /> <PostsContainer className="container-padding--zero lg:container-padding--auto" />
{current.discussionOpened && (
<AddPostForm className="my-8 space-y-4" /> <AddPostForm className="my-8 space-y-4" />
)}
</section> </section>
</article> </article>
<ModalConfirm <ModalConfirm
isOpen={showEndDiscussionConfirm} isOpen={showCloseDiscussion}
onConfirm={() => setShowEndDiscussionConfirm(false)} onConfirm={onCloseDiscussionConfirm}
onCancel={() => setShowEndDiscussionConfirm(false)} onCancel={onCloseDiscussionCancel}
title="Ukončit rozpravu?" title="Ukončit rozpravu?"
yesActionLabel="Ukončit" yesActionLabel="Ukončit"
> >
Opravdu chcete ukončit rozpravu? Opravdu chcete ukončit rozpravu?
</ModalConfirm> </ModalConfirm>
<ModalConfirm
isOpen={showOpenDiscussion}
onConfirm={onOpenDiscussionConfirm}
onCancel={onOpenDiscussionCancel}
title="Otevřít rozpravu?"
yesActionLabel="Otevřít"
>
Opravdu chcete otevřít rozpravu k tomuto bodu programu?
</ModalConfirm>
<ModalConfirm
isOpen={showEndProgramPoint}
onConfirm={onEndProgramPointConfirm}
onCancel={onEndProgramPointCancel}
title="Ukončit bod programu?"
yesActionLabel="Ukončit bod programu"
>
Bod programu <strong>bude ukončen</strong>. Opravdu to chcete?
</ModalConfirm>
</> </>
); );
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment