PostsContainer.jsx

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

import { dislike, like, removeDislike, removeLike } from "actions/posts";
import PostList from "components/posts/PostList";
import { PostStore } from "stores";

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

  // const onLike = (post) => like.run();
  // const onDislike = (post) => console.log("dislike", post);

  /**
   *
   * @param {CF2021.Post} post
   */
  const onLike = (post) => {
    if (post.ranking.myVote === "none") {
      return like.run(post);
    }
    if (post.ranking.myVote === "like") {
      return removeLike.run(post);
    }
  };

  /**
   *
   * @param {CF2021.Post} post
   */
  const onDislike = (post) => {
    if (post.ranking.myVote === "none") {
      return dislike.run(post);
    }
    if (post.ranking.myVote === "dislike") {
      return removeDislike.run(post);
    }
  };

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

  const onHide = (post) => {
    console.log("hide", 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);
  };

  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}
    />
  );
};

export default PostsContainer;