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

import React, { useMemo, useState } from "react";
import PropTypes from "prop-types";
import {
  CheckButton,
  DetailIcon,
  DetailText,
  EditIcon,
  EditIconContainer,
  EyeIcon,
  Line,
  MessageIcon,
  OfferAuthor,
  OfferAuthorName,
  OfferCardContainer,
  OfferCategory,
  OfferDescription,
  OfferDescriptionText,
  OfferDescriptionTitle,
  OfferDetails,
  OfferFlexContainer,
  OfferImage,
  OfferImageContainer,
  OfferInfo,
  OfferLocation,
  OfferTitle,
  OfferTitleAboveImage,
  OfferViews,
  PinIcon,
  RemoveIcon,
  RemoveIconContainer,
  LikeIcon,
  LikeIconContainer,
} from "./OfferCard.styled";
import DeleteOffer from "./DeleteOffer/DeleteOffer";
import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
import selectedTheme from "../../../themes";
import { useHistory } from "react-router-dom";
import CreateOffer from "../CreateOfferCard/CreateOffer";
import { useSelector } from "react-redux";
import { selectUserId } from "../../../store/selectors/loginSelectors";

const OfferCard = (props) => {
  const [deleteOfferModal, setDeleteOfferModal] = useState(false);
  const [editOfferModal, setEditOfferModal] = useState(false);
  const history = useHistory();
  const userId = useSelector(selectUserId);

  const routeToItem = (itemId) => {
    history.push(`/proizvodi/${itemId}`);
  };
  const messageUser = () => {
    props.messageUser(props.offer);
  };
  const makeReview = () => {
    if (!props.disabledReviews) {
      props.makeReview(props.offer);
    }
  };

  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}
      >
        <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 ? props?.offer?.images[0] : ""}
              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">
                  <Category width={"14px"} />
                </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>
              )}
            </OfferDetails>
          </OfferInfo>
          {!props.halfwidth ? (
            <React.Fragment>
              <Line />
              <OfferDescription>
                <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
                <OfferDescriptionText>
                  {props?.offer?.description}
                </OfferDescriptionText>
              </OfferDescription>

              <CheckButton
                variant={props.sponsored ? "contained" : "outlined"}
                buttoncolor={selectedTheme.primaryPurple}
                textcolor={
                  props.sponsored ? "white" : selectedTheme.primaryPurple
                }
                style={{ fontWeight: "600" }}
                onClick={() => routeToItem(props?.offer?._id)}
              >
                Pogledaj proizvod
              </CheckButton>
            </React.Fragment>
          ) : (
            <></>
          )}

          {props.isMyOffer ? (
            <>
              <RemoveIconContainer
                vertical={props.vertical}
                onClick={() => setDeleteOfferModal(true)}
              >
                <RemoveIcon />
              </RemoveIconContainer>
              <EditIconContainer
                vertical={props.vertical}
                onClick={() => setEditOfferModal(true)}
              >
                <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?.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,
};
OfferCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
  messageUser: () => {},
  makeReview: () => {},
};

export default OfferCard;