feat: announcement delete, post actions (ban user, hide post, announce/accept/reject proposal)

package.json

@@ -54,7 +54,7 @@
               "^@?\\w"
             ],
             [
-              "^(actions|components|containers|pages|utils|stores|keycloak)(/.*|$)"
+              "^(api|actions|config|hooks|components|containers|pages|utils|stores|keycloak)(/.*|$)"
             ],
             [
               "^(test-utils)(/.*|$)"

src/actions/posts.js

@@ -204,3 +204,120 @@ export const addProposal = createAsyncAction(
     },
   }
 );
+
+/**
+ * Hide existing post.
+ */
+export const hide = createAsyncAction(
+  /**
+   * @param {CF2021.Post} post
+   */
+  async (post) => {
+    return successResult(post);
+  },
+  {
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        PostStore.update((state) => {
+          state.items[result.payload.id].hidden = true;
+        });
+      }
+    },
+  }
+);
+
+/**
+ * Announce procedure proposal.
+ */
+export const announceProposal = createAsyncAction(
+  /**
+   * @param {CF2021.ProposalPost} proposal
+   */
+  async (proposal) => {
+    return successResult(proposal);
+  },
+  {
+    shortCircuitHook: ({ args }) => {
+      if (args.type !== "procedure-proposal") {
+        return errorResult();
+      }
+
+      if (args.state !== "pending") {
+        return errorResult();
+      }
+
+      return false;
+    },
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        PostStore.update((state) => {
+          state.items[result.payload.id].state = "announced";
+        });
+      }
+    },
+  }
+);
+
+/**
+ * Announce procedure proposal.
+ */
+export const acceptProposal = createAsyncAction(
+  /**
+   * @param {CF2021.ProposalPost} proposal
+   */
+  async (proposal) => {
+    return successResult(proposal);
+  },
+  {
+    shortCircuitHook: ({ args }) => {
+      if (args.type !== "procedure-proposal") {
+        return errorResult();
+      }
+
+      if (args.state !== "announced") {
+        return errorResult();
+      }
+
+      return false;
+    },
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        PostStore.update((state) => {
+          state.items[result.payload.id].state = "accepted";
+        });
+      }
+    },
+  }
+);
+
+/**
+ * Reject procedure proposal.
+ */
+export const rejectProposal = createAsyncAction(
+  /**
+   * @param {CF2021.ProposalPost} proposal
+   */
+  async (proposal) => {
+    return successResult(proposal);
+  },
+  {
+    shortCircuitHook: ({ args }) => {
+      if (args.type !== "procedure-proposal") {
+        return errorResult();
+      }
+
+      if (args.state !== "announced") {
+        return errorResult();
+      }
+
+      return false;
+    },
+    postActionHook: ({ result }) => {
+      if (!result.error) {
+        PostStore.update((state) => {
+          state.items[result.payload.id].state = "rejected";
+        });
+      }
+    },
+  }
+);

src/actions/program.js

-import { fetch } from "api";
 import pick from "lodash/pick";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
+import { fetch } from "api";
 import { ProgramStore } from "stores";
 
 export const loadProgram = createAsyncAction(

src/actions/users.js

+import { createAsyncAction, successResult } from "pullstate";
+
+export const ban = createAsyncAction(
+  /**
+   * @param {number} userId
+   */
+  async (userId) => {
+    return successResult(userId);
+  }
+);

src/api.js

@@ -9,7 +9,7 @@ export const fetch = (url, opts) => {
   opts.headers = opts.headers || {};
 
   if (isAuthenticated) {
-    // opts.headers.Authorization = "Bearer " + user.accessToken;
+    opts.headers.Authorization = "Bearer " + user.accessToken;
   }
 
   return baseFetch(process.env.REACT_APP_API_BASE_URL + url, opts);

src/containers/AnnoucementsContainer.jsx

@@ -7,11 +7,19 @@ import {
 import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal";
 import AnnouncementList from "components/annoucements/AnnouncementList";
 import ModalConfirm from "components/modals/ModalConfirm";
+import { useModalConfirmControl } from "hooks";
 import { AnnouncementStore } from "stores";
 
 const AnnoucementsContainer = () => {
-  const [itemToDelete, setItemToDelete] = useState(null);
   const [itemToEdit, setItemToEdit] = useState(null);
+
+  const [
+    itemToDelete,
+    setItemToDelete,
+    onDeleteConfirm,
+    onDeleteCancel,
+  ] = useModalConfirmControl(deleteAnnouncement);
+
   const items = AnnouncementStore.useState((state) => state.items);
 
   const confirmEdit = useCallback(
@@ -28,15 +36,6 @@ const AnnoucementsContainer = () => {
     setItemToEdit(null);
   }, [setItemToEdit]);
 
-  const confirmDelete = useCallback(async () => {
-    await deleteAnnouncement.run(itemToDelete);
-    setItemToDelete(null);
-  }, [setItemToDelete, itemToDelete]);
-
-  const cancelDelete = useCallback(() => {
-    setItemToDelete(null);
-  }, [setItemToDelete]);
-
   return (
     <>
       <AnnouncementList
@@ -47,8 +46,8 @@ const AnnoucementsContainer = () => {
       />
       <ModalConfirm
         isOpen={!!itemToDelete}
-        onConfirm={confirmDelete}
-        onCancel={cancelDelete}
+        onConfirm={onDeleteConfirm}
+        onCancel={onDeleteCancel}
         title="Opravdu chcete toto oznámení smazat?"
         yesActionLabel="Smazat"
       >

src/containers/PostsContainer.jsx

 import React from "react";
 import pick from "lodash/pick";
 
-import { dislike, like, removeDislike, removeLike } from "actions/posts";
+import {
+  acceptProposal,
+  announceProposal,
+  dislike,
+  hide,
+  like,
+  rejectProposal,
+  removeDislike,
+  removeLike,
+} from "actions/posts";
+import { ban } from "actions/users";
+import ModalConfirm from "components/modals/ModalConfirm";
 import PostList from "components/posts/PostList";
+import { useModalConfirmControl } from "hooks";
 import { PostStore } from "stores";
 
 const PostsContainer = ({ className }) => {
+  const [
+    userToBan,
+    setUserToBan,
+    onBanUserConfirm,
+    onBanUserCancel,
+  ] = useModalConfirmControl(ban);
+  const [
+    postToHide,
+    setPostToHide,
+    onPostHideConfirm,
+    onPostHideCancel,
+  ] = useModalConfirmControl(hide);
+  const [
+    postToAnnounce,
+    setPostToAnnounce,
+    onAnnounceConfirm,
+    onAnnounceCancel,
+  ] = useModalConfirmControl(announceProposal);
+  const [
+    postToAccept,
+    setPostToAccept,
+    onAcceptConfirm,
+    onAcceptCancel,
+  ] = useModalConfirmControl(acceptProposal);
+  const [
+    postToReject,
+    setPostToReject,
+    onRejectConfirm,
+    onRejectCancel,
+  ] = useModalConfirmControl(rejectProposal);
+
   const { window, items } = PostStore.useState((state) =>
     pick(state, ["window", "items"])
   );
@@ -13,9 +56,6 @@ const PostsContainer = ({ className }) => {
     (state) => state.filters.flags === "archived"
   );
 
-  // const onLike = (post) => like.run();
-  // const onDislike = (post) => console.log("dislike", post);
-
   /**
    *
    * @param {CF2021.Post} post
@@ -45,38 +85,87 @@ const PostsContainer = ({ className }) => {
   const sliceStart = (window.page - 1) * window.perPage;
   const sliceEnd = window.page * window.perPage;
 
-  const onHide = (post) => {
-    console.log("hide", post);
-  };
+  /**
+   * Ban a post's author.
+   * @param {CF2021.Post} post
+   */
   const onBanUser = (post) => {
-    console.log("banUser", post);
-  };
-  const onAnnounceProcedureProposal = (post) => {
-    console.log("announce", post);
-  };
-  const onAcceptProcedureProposal = (post) => {
-    console.log("accept", post);
-  };
-  const onRejectProcedureProposal = (post) => {
-    console.log("reject", post);
+    setUserToBan(post.author);
   };
 
   return (
-    <PostList
-      items={window.items
-        .slice(sliceStart, sliceEnd)
-        .map((postId) => items[postId])}
-      onLike={onLike}
-      onDislike={onDislike}
-      className={className}
-      dimArchived={!showingArchivedOnly}
-      displayActions={true}
-      onHide={onHide}
-      onBanUser={onBanUser}
-      onAnnounceProcedureProposal={onAnnounceProcedureProposal}
-      onAcceptProcedureProposal={onAcceptProcedureProposal}
-      onRejectProcedureProposal={onRejectProcedureProposal}
-    />
+    <>
+      <PostList
+        items={window.items
+          .slice(sliceStart, sliceEnd)
+          .map((postId) => items[postId])}
+        onLike={onLike}
+        onDislike={onDislike}
+        className={className}
+        dimArchived={!showingArchivedOnly}
+        displayActions={true}
+        onHide={setPostToHide}
+        onBanUser={onBanUser}
+        onAnnounceProcedureProposal={setPostToAnnounce}
+        onAcceptProcedureProposal={setPostToAccept}
+        onRejectProcedureProposal={setPostToReject}
+      />
+      <ModalConfirm
+        isOpen={!!userToBan}
+        onConfirm={onBanUserConfirm}
+        onCancel={onBanUserCancel}
+        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={!!postToHide}
+        onConfirm={onPostHideConfirm}
+        onCancel={onPostHideCancel}
+        title="Skrýt příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek se skryje a uživatelé ho neuvidí. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToHide}
+        onConfirm={onPostHideConfirm}
+        onCancel={onPostHideCancel}
+        title="Skrýt příspěvek?"
+        yesActionLabel="Potvrdit"
+      >
+        Příspěvek se skryje a uživatelé ho neuvidí. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToAnnounce}
+        onConfirm={onAnnounceConfirm}
+        onCancel={onAnnounceCancel}
+        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
+        isOpen={!!postToAccept}
+        onConfirm={onAcceptConfirm}
+        onCancel={onAcceptCancel}
+        title="Schválit procedurální návrh?"
+        yesActionLabel="Schválit návrh"
+      >
+        Procedurální návrh bude <strong>schválen</strong>. Opravdu to chcete?
+      </ModalConfirm>
+      <ModalConfirm
+        isOpen={!!postToReject}
+        onConfirm={onRejectConfirm}
+        onCancel={onRejectCancel}
+        title="Zamítnout procedurální návrh?"
+        yesActionLabel="Zamítnout návrh"
+      >
+        Procedurální návrh bude <strong>zamítnut</strong>. Opravdu to chcete?
+      </ModalConfirm>
+    </>
   );
 };
 

src/hooks.js

+import { useCallback, useState } from "react";
+
+export const useModalConfirmControl = (actionFn) => {
+  const [item, setItem] = useState(null);
+
+  const onActionConfirm = useCallback(() => {
+    if (item) {
+      actionFn.run(item);
+      setItem(null);
+    }
+  }, [item, setItem, actionFn]);
+
+  const onActionCancel = useCallback(() => {
+    setItem(null);
+  }, [setItem]);
+
+  return [item, setItem, onActionConfirm, onActionCancel];
+};

src/stores.js

@@ -84,6 +84,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "cf",
     },
@@ -103,6 +104,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "cf",
     },
@@ -122,6 +124,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "cf",
     },
@@ -141,6 +144,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -160,6 +164,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -179,6 +184,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -198,6 +204,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -218,6 +225,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -246,6 +254,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -266,6 +275,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },
@@ -286,6 +296,7 @@ const allPosts = [
       "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     datetime: new Date(),
     author: {
+      id: 1,
       name: "John Doe",
       group: "KS Pardubický kraj",
     },

typings/cf2021.d.ts

@@ -69,6 +69,7 @@ declare namespace CF2021 {
         id: string;
         datetime: Date;
         author: {
+            id: number;
             name: string;
             group: string;
         };