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

import React, { 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,
  RemoveIcon,
  RemoveIconContainer,
} from "./OfferCard.styled";
import DeleteOffer from "./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";

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

  const routeToItem = (itemId) => {
    history.push(`/proizvodi/${itemId}`);
  };

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

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

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

  console.log(props.offer);
  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[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>
              <OfferViews vertical={props.vertical}>
                <DetailIcon color="black" component="span" size="16px">
                  <EyeIcon />
                </DetailIcon>
                <DetailText>{props?.offer?.views?.viewers?.length}</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>
            </>
          ) : (
            <MessageIcon vertical={props.vertical}>
              <Message />
            </MessageIcon>
          )}
        </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,
};
OfferCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
};

export default OfferCard;