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

import React, { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import {
  CheckButton,
  ItemDetailsCardContainer,
  OfferInfo,
  Info,
  PostDate,
  CategoryIcon,
  SubcategoryIcon,
  QuantityIcon,
  EyeIcon,
} from "./ItemDetailsCard.styled";
import selectedTheme from "../../../themes";
import { useDispatch, useSelector } from "react-redux";
import { selectLatestChats } from "../../../store/selectors/chatSelectors";
import { increaseCounter } from "../../../store/actions/counter/counterActions";
import _ from "lodash";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import { formatDateLocale } from "../../../util/helpers/dateHelpers";
import { startChat } from "../../../util/helpers/chatHelper";
import Information from "./Information/Information";
import { useTranslation } from "react-i18next";
import OfferDetails from "./OfferDetails/OfferDetails";

const ItemDetailsCard = (props) => {
  const offer = props.offer;
  const chats = useSelector(selectLatestChats);
  const userId = useSelector(selectUserId);
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const increaseOfferCounter = useMemo(() => {
    return _.once(function (id) {
      dispatch(increaseCounter(id));
    });
  }, []);

  useEffect(() => {
    if (offer?.offer?._id) {
      increaseOfferCounter(offer?.offer?._id);
    }
  }, [offer]);

  const date = formatDateLocale(new Date(offer?.offer?._created));

  const startExchange = () => {
    startChat(chats, offer?.offer, userId);
  };
  return (
    <ItemDetailsCardContainer
      sponsored={props.sponsored.toString()}
      halfwidth={props.halfwidth ? 1 : 0}
      className={props.className}
    >
      <OfferInfo>
        <Info>
          <Information
            icon={<CategoryIcon />}
            value={offer?.offer?.category?.name}
          />
          <Information
            icon={<SubcategoryIcon />}
            value={offer?.offer?.subcategory}
          />
          <Information
            icon={<QuantityIcon />}
            value={offer?.offer?.condition}
          />
          <Information icon={<EyeIcon />} value={offer?.offer?.views?.count} />
        </Info>
        <PostDate>{date}</PostDate>
      </OfferInfo>

      <OfferDetails offer={offer}/>

      {!props.halfwidth && props.showExchangeButton && (
          <CheckButton
            variant={props.sponsored ? "contained" : "outlined"}
            buttoncolor={selectedTheme.primaryPurple}
            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
            onClick={startExchange}
          >
            {t("itemDetailsCard.startExchangeButton")}
          </CheckButton>
      )}
    </ItemDetailsCardContainer>
  );
};

ItemDetailsCard.propTypes = {
  halfwidth: PropTypes.bool,
  sponsored: PropTypes.bool,
  offer: PropTypes.any,
  hideViews: PropTypes.bool,
  showExchangeButton: PropTypes.bool,
  showBarterButton: PropTypes.bool,
  showPublishButton: PropTypes.bool,
  className: PropTypes.string,
};
ItemDetailsCard.defaultProps = {
  halfwidth: false,
  sponsored: false,
  showExchangeButton: true,
};

export default ItemDetailsCard;