trampa-frontend/src/components/Cards/OfferCard/OfferCard.js

import React, { useMemo, useState } from "react";
import PropTypes from "prop-types";
import {
  DetailIcon,
  DetailText,
  EditIcon,
  EditIconContainer,
  EyeIcon,
  Line,
  MessageIcon,
  OfferAuthor,
  OfferAuthorName,
  OfferCardContainer,
  OfferCategory,
  OfferDetails,
  OfferFlexContainer,
  OfferImage,
  OfferImageContainer,
  OfferInfo,
  OfferLocation,
  OfferTitle,
  OfferTitleAboveImage,
  OfferViews,
  OfferDate,
  PinIcon,
  RemoveIcon,
  RemoveIconContainer,
  LikeIcon,
  LikeIconContainer,
  CategoryIcon,
  CalendarIcon,
  PinIconContainer,
  PinOutlinedIcon,
} from "./OfferCard.styled";
import DeleteOffer from "./DeleteOffer/DeleteOffer";
import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
import { useHistory } from "react-router-dom";
import CreateOffer from "../CreateOfferCard/CreateOffer";
import { useSelector } from "react-redux";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import useIsMobile from "../../../hooks/useIsMobile";
import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
import OfferDescription from "./OfferDescription/OfferDescription";
import CheckButton from "./CheckButton/CheckButton";
import { formatDateLocale } from "../../../util/helpers/dateHelpers";

const OfferCard = (props) => {
  const [deleteOfferModal, setDeleteOfferModal] = useState(false);
  const [editOfferModal, setEditOfferModal] = useState(false);
  const history = useHistory();
  const userId = useSelector(selectUserId);
  const { isMobile } = useIsMobile();
  const date = formatDateLocale(new Date(props.offer?._created));

  const pinOffer = (event) => {
    event.stopPropagation();
  };
  const routeToItem = (itemId) => {
    if (!props.disabledCheckButton) {
      history.push(`/proizvodi/${itemId}`);
    }
  };
  const messageUser = (event) => {
    event.stopPropagation();
    props.messageUser(props.offer);
  };
  const makeReview = (event) => {
    event.stopPropagation();
    if (!props.disabledReviews) {
      props.makeReview(props.offer);
    }
  };
  const openEditOfferModal = (event) => {
    event.stopPropagation();
    setEditOfferModal(true);
  };
  const openRemoveModal = (event) => {
    event.stopPropagation();
    setDeleteOfferModal(true);
  };

  const closeModalHandler = () => {
    setDeleteOfferModal(false);
  };

  const closeCreateOfferModal = () => {
    setEditOfferModal(false);
  };

  const showMessageIcon = useMemo(() => {
    if (userId === props.offer?.userId) {
      return false;
    }
    return true;
  }, [userId, props.offer]);

  if (deleteOfferModal || editOfferModal) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "auto";
  }

  return (
    <React.Fragment>
      <OfferCardContainer
        vertical={props.vertical}
        sponsored={
          props?.pinned !== undefined
            ? props?.pinned?.toString()
            : props?.offer?.pinned?.toString()
        }
        halfwidth={props.halfwidth ? 1 : 0}
        onClick={() => routeToItem(props?.offer?._id)}
      >
        {/* This only shows on vertical offer card */}
        <OfferTitleAboveImage
          vertical={props.vertical}
          onClick={() => routeToItem(props?.offer?._id)}
        >
          {props?.offer?.name}
        </OfferTitleAboveImage>
        {/* ^^^^^^^ */}

        <OfferFlexContainer vertical={props.vertical}>
          <OfferImageContainer vertical={props.vertical}>
            <OfferImage
              src={
                props?.offer?.images
                  ? getImageUrl(
                      props?.offer?.images[0],
                      variants.offerCard,
                      isMobile
                    )
                  : ""
              }
              vertical={props.vertical}
            ></OfferImage>
          </OfferImageContainer>
          <OfferInfo vertical={props.vertical}>
            <OfferTitle
              vertical={props.vertical}
              onClick={() => routeToItem(props?.offer?._id)}
            >
              {props?.offer?.name}
            </OfferTitle>
            <OfferAuthor>
              <OfferAuthorName vertical={props.vertical}>
                {props?.offer?.user?.company?.name}
              </OfferAuthorName>
              <OfferLocation vertical={props.vertical}>
                {props?.offer?.location?.city}
              </OfferLocation>
            </OfferAuthor>
            <OfferDetails>
              <OfferCategory vertical={props.vertical}>
                <DetailIcon color="black" component="span" size="16px">
                  <CategoryIcon />
                </DetailIcon>
                <DetailText>{props?.offer?.category?.name}</DetailText>
              </OfferCategory>

              {props.dontShowViews ? (
                <></>
              ) : (
                <OfferViews vertical={props.vertical}>
                  <DetailIcon color="black" component="span" size="16px">
                    <EyeIcon />
                  </DetailIcon>
                  <DetailText>{props?.offer?.views?.count}</DetailText>
                </OfferViews>
              )}
              <OfferDate vertical={props.vertical}>
                <DetailIcon component="span" size="16px">
                  <CalendarIcon />
                </DetailIcon>
                <DetailText>{date}</DetailText>
              </OfferDate>
            </OfferDetails>
          </OfferInfo>
          {!props.halfwidth ? (
            <React.Fragment>
              <Line />
              <OfferDescription description={props?.offer?.description} />
              <CheckButton
                disabled={props.disabledCheckButton}
                offerId={props?.offer?._id}
                sponsored={props.sponsored}
              />
            </React.Fragment>
          ) : (
            <></>
          )}

          {props.isMyOffer ? (
            <>
              <RemoveIconContainer
                vertical={props.vertical}
                onClick={openRemoveModal}
              >
                <RemoveIcon />
              </RemoveIconContainer>
              <EditIconContainer
                vertical={props.vertical}
                onClick={openEditOfferModal}
              >
                <EditIcon />
              </EditIconContainer>
            </>
          ) : props.aboveChat ? (
            <LikeIconContainer
              disabled={props.disabledReviews}
              onClick={makeReview}
            >
              <LikeIcon disabled={props.disabledReviews} />
            </LikeIconContainer>
          ) : (
            <MessageIcon
              showMessageIcon={showMessageIcon}
              vertical={props.vertical}
              onClick={messageUser}
            >
              <Message />
            </MessageIcon>
          )}
          {props.isAdmin && !props.pinned && (
            <PinIconContainer showMessageIcon onClick={pinOffer}>
              <PinOutlinedIcon />
            </PinIconContainer>
          )}
          {props?.offer?.pinned && <PinIcon isMyOffer={props.isMyOffer} />}
        </OfferFlexContainer>
      </OfferCardContainer>
      {deleteOfferModal && (
        <DeleteOffer
          offer={props.offer}
          closeModalHandler={closeModalHandler}
        />
      )}
      {editOfferModal && (
        <CreateOffer
          editOffer
          closeCreateOfferModal={closeCreateOfferModal}
          offer={props.offer}
        />
      )}
    </React.Fragment>
  );
};

OfferCard.propTypes = {
  children: PropTypes.node,
  _id: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  category: PropTypes.string,
  author: PropTypes.string,
  location: PropTypes.string,
  image: PropTypes.node,
  quantity: PropTypes.number,
  package: PropTypes.string,
  numberOfViews: PropTypes.number,
  halfwidth: PropTypes.bool,
  sponsored: PropTypes.bool,
  offer: PropTypes.any,
  pinned: PropTypes.bool,
  vertical: PropTypes.bool,
  isMyOffer: PropTypes.bool,
  aboveChat: PropTypes.bool,
  disabledReviews: PropTypes.bool,
  messageUser: PropTypes.func,
  makeReview: PropTypes.func,
  dontShowViews: PropTypes.bool,
  skeleton: PropTypes.bool,
  disabledCheckButton: PropTypes.bool,
  isAdmin: PropTypes.bool,
};
OfferCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
  messageUser: () => {},
  makeReview: () => {},
};

export default OfferCard;