PostsContainer.jsx

import React from "react";
import pick from "lodash/pick";

import {
  acceptProposal,
  announceProposal,
  dislike,
  hide,
  like,
  rejectProposal,
} from "actions/posts";
import { ban } from "actions/users";
import ModalConfirm from "components/modals/ModalConfirm";
import PostList from "components/posts/PostList";
import { useItemActionConfirm } from "hooks";
import { PostStore } from "stores";

const PostsContainer = ({ className }) => {
  const [
    userToBan,
    setUserToBan,
    onBanUserConfirm,
    onBanUserCancel,
  ] = useItemActionConfirm(ban);
  const [
    postToHide,
    setPostToHide,
    onPostHideConfirm,
    onPostHideCancel,
  ] = useItemActionConfirm(hide);
  const [
    postToAnnounce,
    setPostToAnnounce,
    onAnnounceConfirm,
    onAnnounceCancel,
  ] = useItemActionConfirm(announceProposal);
  const [
    postToAccept,
    setPostToAccept,
    onAcceptConfirm,
    onAcceptCancel,
  ] = useItemActionConfirm(acceptProposal);
  const [
    postToReject,
    setPostToReject,
    onRejectConfirm,
    onRejectCancel,
  ] = useItemActionConfirm(rejectProposal);

  const { window, items } = PostStore.useState((state) =>
    pick(state, ["window", "items"])
  );
  const showingArchivedOnly = PostStore.useState(
    (state) => state.filters.flags === "archived"
  );

  /**
   * Ban a post's author.
   * @param {CF2021.Post} post
   */
  const onBanUser = (post) => {
    setUserToBan(post.author);
  };

  /**
   * Mark down user saw this post already.
   * @param {CF2021.Post} post
   */
  const markSeen = (post) => {
    PostStore.update((state) => {
      state.items[post.id].seen = true;
    });
  };

  const sliceStart = (window.page - 1) * window.perPage;
  const sliceEnd = window.page * window.perPage;

  return (
    <>
      <PostList
        items={window.items
          .slice(sliceStart, sliceEnd)
          .map((postId) => items[postId])}
        onLike={like.run}
        onDislike={dislike.run}
        onSeen={markSeen}
        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>
    </>
  );
};

export default PostsContainer;