Post.jsx

import React from "react";
import classNames from "classnames";
import { format } from "date-fns";

import Chip from "components/Chip";

const Post = ({
  className,
  datetime,
  author,
  type,
  ranking,
  content,
  seen,
  archived,
  state,
  historyLog,
}) => {
  const wrapperClassName = classNames(
    "flex items-start p-4 lg:p-2 lg:py-4 lg:-mx-2",
    {
      "bg-yellow-100 bg-opacity-50": !seen,
      "opacity-25 hover:opacity-100 transition-opacity duration-200": !!archived,
    },
    className
  );

  const labels = [];

  if (type === "post") {
    labels.push(
      <Chip
        key="type__post"
        condensed
        color="grey-125"
        className="text-grey-300"
      >
        Příspěvek
      </Chip>
    );
  }

  if (type === "procedure-proposal") {
    labels.push(
      <Chip key="type__procedure-proposal" condensed color="cyan-200">
        Návrh postupu
      </Chip>
    );

    labels.push(
      {
        pending: (
          <Chip key="state__pending" condensed color="grey-500">
            Čeká na zpracování
          </Chip>
        ),
        announced: (
          <Chip key="state__announced" condensed color="blue-300">
            Vyhlášený
          </Chip>
        ),
        accepted: (
          <Chip key="state__accepted" condensed color="green-400">
            Schválený
          </Chip>
        ),
        rejected: (
          <Chip key="state__rejected" condensed color="red-600">
            Zamítnutý
          </Chip>
        ),
        "rejected-by-chairman": (
          <Chip key="state__rejected-by-chairmen" condensed color="red-600">
            Zamítnutý předsedajícím
          </Chip>
        ),
      }[state]
    );
  }

  if (archived) {
    labels.push(
      <Chip
        key="isArchived"
        condensed
        color="grey-125"
        className="text-grey-300"
      >
        Archivovaný
      </Chip>
    );
  }

  const isModified =
    (historyLog || []).filter(
      (logRecord) =>
        logRecord.attribute === "content" && logRecord.originator === "chairman"
    ).length > 0;

  return (
    <div className={wrapperClassName}>
      <img
        src="http://placeimg.com/100/100/people"
        className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3"
        alt={author.name}
      />
      <div className="flex-1">
        <div className="mb-1">
          <div className="flex justify-between items-start xl:items-center">
            <div className="flex flex-col xl:flex-row xl:items-center">
              <div className="flex flex-col xl:flex-row xl:items-center">
                <span className="font-bold">{author.name}</span>
                <div className="mt-1 lg:mt-0 lg:ml-2">
                  <span className="text-grey-200 text-sm">{author.group}</span>
                  <span className="text-grey-200 ml-1 text-sm">
                    @ {format(datetime, "H:mm")}
                    {isModified && (
                      <span className="text-grey-200 text-xs ml-2 underline">
                        (Upraveno přesdedajícím)
                      </span>
                    )}
                  </span>
                </div>
              </div>
              <div className="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2 space-x-2">
                {labels}
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <div className="space-x-2 text-sm flex items-center">
                <button className="text-blue-300 flex items-center space-x-1">
                  <span className="font-bold">{ranking.likes}</span>
                  <i className="ico--thumbs-up"></i>
                </button>
                <button className="text-red-600 flex items-center space-x-1">
                  <i className="ico--thumbs-down transform -scale-x-1"></i>
                  <span className="font-bold">{ranking.dislikes}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <p className="text-sm lg:text-base text-black leading-normal">
          {content}
        </p>
      </div>
    </div>
  );
};

export default Post;