| ITEM_DETAILS_PAGE, | ITEM_DETAILS_PAGE, | ||||
| PROFILE_PAGE, | PROFILE_PAGE, | ||||
| } from "../../../constants/pages"; | } from "../../../constants/pages"; | ||||
| import { dynamicRouteMatches, replaceInRoute } from "../../../util/helpers/routeHelpers"; | |||||
| import { | |||||
| dynamicRouteMatches, | |||||
| replaceInRoute, | |||||
| } from "../../../util/helpers/routeHelpers"; | |||||
| import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors"; | import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors"; | ||||
| import { | import { | ||||
| OFFER_ADD_SCOPE, | OFFER_ADD_SCOPE, | ||||
| if (editOffer) { | if (editOffer) { | ||||
| if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE)) | if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE)) | ||||
| dispatch(fetchOffers({ queryString })); | dispatch(fetchOffers({ queryString })); | ||||
| if (dynamicRouteMatches(PROFILE_PAGE) || dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)) | |||||
| if (isAdmin) dispatch(fetchProfileOffers(customUserId)); | |||||
| if ( | |||||
| dynamicRouteMatches(PROFILE_PAGE) || | |||||
| dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE) | |||||
| ) | |||||
| if (isAdmin) | |||||
| dispatch(fetchProfileOffers({ idProfile: customUserId, isAdmin })); | |||||
| else dispatch(fetchProfileOffers(userId)); | else dispatch(fetchProfileOffers(userId)); | ||||
| if ( | if ( |
| ); | ); | ||||
| }; | }; | ||||
| console.log(props) | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <ItemDetailsCardContainer | <ItemDetailsCardContainer |
| console.log("Error: ", error); | console.log("Error: ", error); | ||||
| }; | }; | ||||
| } else { | } else { | ||||
| setImages((prevImages) => [...prevImages, file]); | |||||
| setImages((prevImages) => [ | |||||
| ...prevImages, | |||||
| getImageUrl(file, variants.offerCard, isMobile), | |||||
| ]); | |||||
| } | } | ||||
| } | } | ||||
| }); | }); | ||||
| const onModalClose = () => { | const onModalClose = () => { | ||||
| setImagesCarouselModal(false); | setImagesCarouselModal(false); | ||||
| }; | }; | ||||
| console.log(props); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <Details | <Details | ||||
| <ScrollerVertical> | <ScrollerVertical> | ||||
| {images.map((item, index) => ( | {images.map((item, index) => ( | ||||
| <OfferImage | <OfferImage | ||||
| src={ | |||||
| props.createOffer | |||||
| ? images[index] | |||||
| : getImageUrl(item, variants.offerCard, isMobile) | |||||
| } | |||||
| src={images[index]} | |||||
| alt={t("offer.imageAlt")} | alt={t("offer.imageAlt")} | ||||
| key={item} | key={item} | ||||
| previewCard={props.previewCard} | previewCard={props.previewCard} | ||||
| if (!item) return; | if (!item) return; | ||||
| return ( | return ( | ||||
| <OfferImage | <OfferImage | ||||
| src={ | |||||
| props.createOffer | |||||
| ? images[index] | |||||
| : getImageUrl(item, variants.offerCard, isMobile) | |||||
| } | |||||
| src={images[index]} | |||||
| key={item} | key={item} | ||||
| previewCard={props.previewCard} | previewCard={props.previewCard} | ||||
| onClick={() => | onClick={() => |
| import { closeModal } from "../../../../store/actions/modal/modalActions"; | import { closeModal } from "../../../../store/actions/modal/modalActions"; | ||||
| import { | import { | ||||
| dynamicRouteMatches, | dynamicRouteMatches, | ||||
| replaceInRoute, | |||||
| routeMatches, | routeMatches, | ||||
| } from "../../../../util/helpers/routeHelpers"; | } from "../../../../util/helpers/routeHelpers"; | ||||
| import { | import { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const queryString = useSelector(selectQueryString); | const queryString = useSelector(selectQueryString); | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| const userId = props.offer.userId; | |||||
| const userId = props.offer.user._id; | |||||
| const { isMobile } = useIsMobile(); | const { isMobile } = useIsMobile(); | ||||
| const offerId = props.offer._id; | const offerId = props.offer._id; | ||||
| const closeDeleteModalHandler = () => { | const closeDeleteModalHandler = () => { | ||||
| dynamicRouteMatches(PROFILE_PAGE) || | dynamicRouteMatches(PROFILE_PAGE) || | ||||
| dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE) | dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE) | ||||
| ) | ) | ||||
| dispatch(fetchProfileOffers(userId)); | |||||
| dispatch(fetchProfileOffers({ idProfile: userId, isAdmin: true })); | |||||
| if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) | if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) | ||||
| dispatch(fetchOffers({ queryString })); | dispatch(fetchOffers({ queryString })); | ||||
| if ( | |||||
| dynamicRouteMatches(ITEM_DETAILS_PAGE) || | |||||
| dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE) | |||||
| ) { | |||||
| if (dynamicRouteMatches(ITEM_DETAILS_PAGE)) { | |||||
| history.push( | |||||
| replaceInRoute(PROFILE_PAGE, { | |||||
| profileId: userId, | |||||
| }) | |||||
| ); | |||||
| } | |||||
| if (dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE)) { | |||||
| if (props.pin) dispatch(fetchOneOffer(props.offer?._id)); | if (props.pin) dispatch(fetchOneOffer(props.offer?._id)); | ||||
| else history.goBack(); | |||||
| else | |||||
| history.push( | |||||
| replaceInRoute(ADMIN_SINGLE_USER_PAGE, { profileId: userId }) | |||||
| ); | |||||
| } | } | ||||
| }; | }; | ||||
| editOffer: true, | editOffer: true, | ||||
| offer: props.offer, | offer: props.offer, | ||||
| isAdmin: props.isAdmin, | isAdmin: props.isAdmin, | ||||
| customUserId: props?.offer?.userId, | |||||
| customUserId: props?.offer?.user._id, | |||||
| }) | }) | ||||
| ); | ); | ||||
| }; | }; |
| ...props.review, | ...props.review, | ||||
| }; | }; | ||||
| } | } | ||||
| let userWhoGaveReview = | |||||
| props?.review?.exchange?.buyer?.user?._id === props?.review?.user?._id | |||||
| ? "buyer" | |||||
| : "seller"; | |||||
| let userWhoRevievedReview = | |||||
| userWhoGaveReview === "buyer" ? "seller" : "buyer"; | |||||
| let isSuccessfulSwap = reviewEnum.YES.mainText.toUpperCase(); | let isSuccessfulSwap = reviewEnum.YES.mainText.toUpperCase(); | ||||
| if ( | if ( | ||||
| props.review.succeeded === reviewEnum.NO.backendText || | props.review.succeeded === reviewEnum.NO.backendText || | ||||
| isGoodCommunication = reviewEnum.NO.mainText.toUpperCase(); | isGoodCommunication = reviewEnum.NO.mainText.toUpperCase(); | ||||
| return { | return { | ||||
| _id: props.review._id, | _id: props.review._id, | ||||
| name: | |||||
| props.review?.reviewAdditionalData?.userWhoGave?.company?.name || | |||||
| props.review?.offer?.name, | |||||
| image: | |||||
| props.review?.reviewAdditionalData?.userWhoGave?.image || | |||||
| props.review?.offer?.image, | |||||
| userId: props.review.userId, | |||||
| name: props?.review?.exchange[userWhoGaveReview]?.user?.company?.name, | |||||
| image: props?.review?.exchange[userWhoGaveReview]?.user?.image, | |||||
| userId: props.review.user?._id, | |||||
| isGoodCommunication, | isGoodCommunication, | ||||
| isSuccessfulSwap, | isSuccessfulSwap, | ||||
| quote: props?.review?.message, | quote: props?.review?.message, | ||||
| offerName: | |||||
| props?.review?.reviewAdditionalData?.offerData?.name || | |||||
| props?.review?.userWhoGaveReview?.name, | |||||
| offerImage: | |||||
| props?.review?.reviewAdditionalData?.offerData?.firstImage || | |||||
| props?.review?.userWhoGaveReview?.image, | |||||
| offerName: props?.review?.exchange?.offer?.name, | |||||
| offerImage: props?.review?.exchange?.offer?.images[0], | |||||
| userWhoReceived: | userWhoReceived: | ||||
| props?.review?.reviewAdditionalData?.userWhoReceived?.company?.name, | |||||
| props?.review?.exchange[userWhoRevievedReview]?.user?.company?.name, | |||||
| _deleted: props?.review?._deleted, | _deleted: props?.review?._deleted, | ||||
| }; | }; | ||||
| }, [props.review]); | }, [props.review]); | ||||
| handleRemove={handleRemove} | handleRemove={handleRemove} | ||||
| hasGivenReview={props.hasGivenReview} | hasGivenReview={props.hasGivenReview} | ||||
| rightReviews={props.rightReviews} | rightReviews={props.rightReviews} | ||||
| isProfileReviews={props?.isProfileReviews} | |||||
| isAdmin={props.isAdmin} | isAdmin={props.isAdmin} | ||||
| /> | /> | ||||
| ); | ); | ||||
| hasGivenReview: PropTypes.bool, | hasGivenReview: PropTypes.bool, | ||||
| rightReviews: PropTypes.bool, | rightReviews: PropTypes.bool, | ||||
| isAdmin: PropTypes.bool, | isAdmin: PropTypes.bool, | ||||
| userId: PropTypes.string, | |||||
| }; | }; | ||||
| UserReviewsCard.defaultProps = { | UserReviewsCard.defaultProps = { | ||||
| isProfileReviews: false, | isProfileReviews: false, |
| import { RemoveButtonContainer, RemoveIcon } from "./RemoveButton.styled"; | import { RemoveButtonContainer, RemoveIcon } from "./RemoveButton.styled"; | ||||
| const RemoveButton = (props) => { | const RemoveButton = (props) => { | ||||
| console.log(props) | |||||
| return ( | return ( | ||||
| <RemoveButtonContainer | <RemoveButtonContainer | ||||
| isRemoved={props.isRemoved} | isRemoved={props.isRemoved} | ||||
| onClick={props.onClick} | onClick={props.onClick} | ||||
| hasGivenReview={props.hasGivenReview} | hasGivenReview={props.hasGivenReview} | ||||
| isProfileReviews={props?.isProfileReviews} | |||||
| > | > | ||||
| <RemoveIcon isRemoved={props.isRemoved} /> | <RemoveIcon isRemoved={props.isRemoved} /> | ||||
| </RemoveButtonContainer> | </RemoveButtonContainer> | ||||
| onClick: PropTypes.func, | onClick: PropTypes.func, | ||||
| hasGivenReview: PropTypes.bool, | hasGivenReview: PropTypes.bool, | ||||
| isRemoved: PropTypes.bool, | isRemoved: PropTypes.bool, | ||||
| isProfileReviews: PropTypes.any | |||||
| }; | }; | ||||
| export default RemoveButton; | export default RemoveButton; |
| export const RemoveButtonContainer = styled(IconButton)` | export const RemoveButtonContainer = styled(IconButton)` | ||||
| position: absolute; | position: absolute; | ||||
| top: ${(props) => (props.hasGivenReview ? "79px" : "16px")}; | |||||
| top: ${(props) => | |||||
| props.hasGivenReview && props.isProfileReviews ? "79px" : "16px"}; | |||||
| right: 16px; | right: 16px; | ||||
| background-color: ${props => props.isRemoved ? "transparent" : selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| background-color: ${(props) => | |||||
| props.isRemoved | |||||
| ? "transparent" | |||||
| : selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| border-radius: 100%; | border-radius: 100%; | ||||
| width: 32px; | width: 32px; | ||||
| height: 32px; | height: 32px; | ||||
| ${props => props.isRemoved && css` | |||||
| & button:hover { | |||||
| background-color: transparent; | |||||
| cursor: auto; | |||||
| } | |||||
| `} | |||||
| ${(props) => | |||||
| props.isRemoved && | |||||
| css` | |||||
| & button:hover { | |||||
| background-color: transparent; | |||||
| cursor: auto; | |||||
| } | |||||
| `} | |||||
| & button { | & button { | ||||
| width: 32px; | width: 32px; | ||||
| height: 32px; | height: 32px; | ||||
| `; | `; | ||||
| export const RemoveIcon = styled(Remove)` | export const RemoveIcon = styled(Remove)` | ||||
| & path { | & path { | ||||
| stroke: ${props => props.isRemoved && selectedTheme.colors.blockedColor}; | |||||
| stroke: ${(props) => props.isRemoved && selectedTheme.colors.blockedColor}; | |||||
| } | } | ||||
| `; | `; |
| <RemoveButton | <RemoveButton | ||||
| review={props.review} | review={props.review} | ||||
| onClick={handleRemove} | onClick={handleRemove} | ||||
| isProfileReviews={props?.isProfileReviews} | |||||
| hasGivenReview={props.hasGivenReview} | hasGivenReview={props.hasGivenReview} | ||||
| isRemoved={props.review?._deleted} | isRemoved={props.review?._deleted} | ||||
| /> | /> | ||||
| isAdmin: PropTypes.bool, | isAdmin: PropTypes.bool, | ||||
| className: PropTypes.string, | className: PropTypes.string, | ||||
| lastReview: PropTypes.bool, | lastReview: PropTypes.bool, | ||||
| isProfileReviews: PropTypes.any, | |||||
| }; | }; | ||||
| UserReviewsSingleCard.defaultProps = { | UserReviewsSingleCard.defaultProps = { | ||||
| lastReview: false, | lastReview: false, |
| return true; | return true; | ||||
| if (exchange.buyer?.user._id === userId && exchange.buyer?.givenReview) | if (exchange.buyer?.user._id === userId && exchange.buyer?.givenReview) | ||||
| return true; | return true; | ||||
| if (chat?.offer?._deleted) return true; | |||||
| if (props.interlocutor?._blocked) return true; | |||||
| return false; | return false; | ||||
| }, [exchange, userId]); | |||||
| }, [exchange, userId, props.interlocutor, chat]); | |||||
| const isDisabledCheckButton = useMemo(() => { | |||||
| if (props?.interlocutor?._blocked) return true; | |||||
| if (chat?.offer?._deleted) return true; | |||||
| return false; | |||||
| }, [props.interlocutor, chat]); | |||||
| const showReviewModal = () => { | const showReviewModal = () => { | ||||
| dispatch( | dispatch( | ||||
| <OfferCard | <OfferCard | ||||
| offer={props.offer} | offer={props.offer} | ||||
| aboveChat | aboveChat | ||||
| disabledReviews={props.interlocutor?._blocked || isDisabledReviews} | |||||
| disabledReviews={isDisabledReviews} | |||||
| makeReview={showReviewModal} | makeReview={showReviewModal} | ||||
| acceptExchange={acceptExchange} | acceptExchange={acceptExchange} | ||||
| exchangeState={props?.exchangeState} | exchangeState={props?.exchangeState} | ||||
| dontShowViews | dontShowViews | ||||
| disabledCheckButton={ | |||||
| props.interlocutor?._blocked || props?.offer?._deleted | |||||
| } | |||||
| disabledCheckButton={isDisabledCheckButton} | |||||
| /> | /> | ||||
| </DirectChatHeaderContainer> | </DirectChatHeaderContainer> | ||||
| ); | ); |
| }) | }) | ||||
| ); | ); | ||||
| }; | }; | ||||
| console.log(props) | |||||
| if (mineProfileBlocked) { | if (mineProfileBlocked) { | ||||
| return <NotAllowedChat mineProfileBlocked />; | return <NotAllowedChat mineProfileBlocked />; | ||||
| } | } | ||||
| if (props?.chat?.interlocutor?._deleted) { | |||||
| if (props?.interlocutor?._deleted) { | |||||
| return <NotAllowedChat deleted />; | return <NotAllowedChat deleted />; | ||||
| } | } | ||||
| if (props?.chat?.offer?.offer?._deleted) { | |||||
| if (props?.chat?.offer?._deleted) { | |||||
| return <NotAllowedChat />; | return <NotAllowedChat />; | ||||
| } | } | ||||
| if (props?.chat?.interlocutor?._blocked) { | |||||
| if (props?.interlocutor?._blocked) { | |||||
| return <NotAllowedChat blocked />; | return <NotAllowedChat blocked />; | ||||
| } | } | ||||
| return ( | return ( |
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const handleSearch = () => { | const handleSearch = () => { | ||||
| if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) { | if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) { | ||||
| console.log("uslo unutra") | |||||
| debounceHelper(() => props.handleSearch(ref.current.value), 500); | debounceHelper(() => props.handleSearch(ref.current.value), 500); | ||||
| } | } | ||||
| }; | }; | ||||
| console.log(routeMatches(HOME_PAGE)) | |||||
| const handleManualSearch = () => { | const handleManualSearch = () => { | ||||
| debounceHelper(() => {}, 500); | debounceHelper(() => {}, 500); | ||||
| props.handleSearch(ref.current.value); | props.handleSearch(ref.current.value); |
| selectIsLoadingByActionType(ONE_OFFER_SCOPE) | selectIsLoadingByActionType(ONE_OFFER_SCOPE) | ||||
| ); | ); | ||||
| let isMyProfile = useMemo(() => { | let isMyProfile = useMemo(() => { | ||||
| if ( | |||||
| offer?.user?._id?.toString() === userId?.toString() || | |||||
| props.isAdmin | |||||
| ) | |||||
| if (offer?.user?._id?.toString() === userId?.toString() || props.isAdmin) | |||||
| return true; | return true; | ||||
| return false; | return false; | ||||
| }, [offer, userId, props.isAdmin]); | }, [offer, userId, props.isAdmin]); | ||||
| ) : ( | ) : ( | ||||
| <> | <> | ||||
| {!props.singleOffer && ( | {!props.singleOffer && ( | ||||
| <ItemDetailsHeaderCard offer={offer} isMyProfile={isMyProfile} /> | |||||
| <ItemDetailsHeaderCard | |||||
| offer={offer} | |||||
| isMyProfile={isMyProfile} | |||||
| isAdmin={props?.isAdmin} | |||||
| /> | |||||
| )} | )} | ||||
| {props.singleOffer && ( | {props.singleOffer && ( | ||||
| <OfferIconContainer> | <OfferIconContainer> | ||||
| <OfferIconText>{t("offer.product")}</OfferIconText> | <OfferIconText>{t("offer.product")}</OfferIconText> | ||||
| </OfferIconContainer> | </OfferIconContainer> | ||||
| )} | )} | ||||
| <ItemDetailsCard offer={offer} isMyOffer={isMyProfile} isAdmin={props.isAdmin} singleOffer /> | |||||
| <ItemDetailsCard | |||||
| offer={offer} | |||||
| isMyOffer={isMyProfile} | |||||
| isAdmin={props.isAdmin} | |||||
| singleOffer | |||||
| /> | |||||
| </> | </> | ||||
| )} | )} | ||||
| </ItemDetailsContainer> | </ItemDetailsContainer> |
| import { Tooltip } from "@mui/material"; | import { Tooltip } from "@mui/material"; | ||||
| import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
| import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | ||||
| import { DIRECT_CHAT_PAGE, PROFILE_PAGE } from "../../../constants/pages"; | |||||
| import { | |||||
| ADMIN_SINGLE_USER_PAGE, | |||||
| DIRECT_CHAT_PAGE, | |||||
| PROFILE_PAGE, | |||||
| } from "../../../constants/pages"; | |||||
| const ItemDetailsHeaderCard = (props) => { | const ItemDetailsHeaderCard = (props) => { | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| const { isMobile } = useIsMobile(); | const { isMobile } = useIsMobile(); | ||||
| const handleGoProfile = () => { | const handleGoProfile = () => { | ||||
| history.push(replaceInRoute(PROFILE_PAGE, { | |||||
| profileId: props?.offer?.user?._id | |||||
| })); | |||||
| if (props?.isAdmin) { | |||||
| history.push( | |||||
| replaceInRoute(ADMIN_SINGLE_USER_PAGE, { | |||||
| profileId: props?.offer?.user?._id, | |||||
| }) | |||||
| ); | |||||
| } else { | |||||
| history.push( | |||||
| replaceInRoute(PROFILE_PAGE, { | |||||
| profileId: props?.offer?.user?._id, | |||||
| }) | |||||
| ); | |||||
| } | |||||
| }; | }; | ||||
| const messageUser = (offer) => { | const messageUser = (offer) => { | ||||
| const chatItem = chats.find( | |||||
| (item) => item.offer._id === offer?._id | |||||
| ); | |||||
| const chatItem = chats.find((item) => item.offer._id === offer?._id); | |||||
| if (chatItem !== undefined) { | if (chatItem !== undefined) { | ||||
| history.push(DIRECT_CHAT_PAGE, { | history.push(DIRECT_CHAT_PAGE, { | ||||
| chatId: chatItem._id | |||||
| chatId: chatItem._id, | |||||
| }); | }); | ||||
| } else { | } else { | ||||
| if (offer?.user?._id !== userId) { | if (offer?.user?._id !== userId) { | ||||
| offer: PropTypes.any, | offer: PropTypes.any, | ||||
| isMyProfile: PropTypes.bool, | isMyProfile: PropTypes.bool, | ||||
| singleOffer: PropTypes.bool, | singleOffer: PropTypes.bool, | ||||
| isAdmin: PropTypes.bool, | |||||
| }; | }; | ||||
| ItemDetailsHeaderCard.defaultProps = { | ItemDetailsHeaderCard.defaultProps = { | ||||
| halfwidth: false, | halfwidth: false, |
| headerTitle={headerTitle} | headerTitle={headerTitle} | ||||
| headerIcon={headerIcon} | headerIcon={headerIcon} | ||||
| offers={props?.offers} | offers={props?.offers} | ||||
| myOffers={props?.myOffers} | |||||
| hideBackButton={props?.hideBackButton} | hideBackButton={props?.hideBackButton} | ||||
| /> | /> | ||||
| {/* ^^^^^^ */} | {/* ^^^^^^ */} | ||||
| /> | /> | ||||
| {/* Select option to choose sorting */} | {/* Select option to choose sorting */} | ||||
| <HeaderSelect | |||||
| myOffers={props?.myOffers} | |||||
| sorting={sorting} | |||||
| hideSorting={props?.hideSorting} | |||||
| /> | |||||
| {!props?.hideSorting && ( | |||||
| <HeaderSelect | |||||
| myOffers={props?.myOffers} | |||||
| sorting={sorting} | |||||
| hideSorting={props?.hideSorting} | |||||
| /> | |||||
| )} | |||||
| {/* ^^^^^^ */} | {/* ^^^^^^ */} | ||||
| </HeaderOptions> | </HeaderOptions> | ||||
| </HeaderContainer> | </HeaderContainer> |
| const goBack = () => { | const goBack = () => { | ||||
| history.goBack(); | history.goBack(); | ||||
| }; | }; | ||||
| console.log(props) | |||||
| return ( | return ( | ||||
| <Tooltip title={headerString.text}> | <Tooltip title={headerString.text}> | ||||
| <TooltipInnerContainer> | <TooltipInnerContainer> |
| const Offers = (props) => { | const Offers = (props) => { | ||||
| const offers = props?.offers; | const offers = props?.offers; | ||||
| const arrayForMapping = Array.apply(null, Array(4)).map(() => {}); | const arrayForMapping = Array.apply(null, Array(4)).map(() => {}); | ||||
| console.log("rerender") | |||||
| console.log("rerender"); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <OffersFilterButton /> | |||||
| <OffersFilterButton | |||||
| offers={props?.offers} | |||||
| isAdmin={props?.isAdmin} | |||||
| myOffers={props?.myOffers} | |||||
| toggleFilters={props?.toggleFilters} | |||||
| /> | |||||
| <OffersSearchField /> | <OffersSearchField /> | ||||
| <OffersNotFound skeleton={props?.skeleton} /> | |||||
| {!props?.skeleton && <OffersNotFound />} | |||||
| <OffersList | <OffersList | ||||
| loading={props?.skeleton} | loading={props?.skeleton} | ||||
| offers={offers} | offers={offers} |
| // }; | // }; | ||||
| const closeModalHandler = () => { | const closeModalHandler = () => { | ||||
| console.log("closed") | |||||
| dispatch(closeModal()); | dispatch(closeModal()); | ||||
| }; | }; | ||||
| const handleApiResponseSuccess = () => { | const handleApiResponseSuccess = () => { | ||||
| console.log("succes") | |||||
| if (clickedOnNext) { | |||||
| if (clickedOnNext && props?.showSecondButton) { | |||||
| formik.resetForm(); | formik.resetForm(); | ||||
| inputRef.current.focus(); | inputRef.current.focus(); | ||||
| } else closeModalHandler(); | } else closeModalHandler(); |
| import { fetchMineHeaderOffers } from "../../../store/actions/offers/offersActions"; | import { fetchMineHeaderOffers } from "../../../store/actions/offers/offersActions"; | ||||
| import { selectProfileName } from "../../../store/selectors/profileSelectors"; | import { selectProfileName } from "../../../store/selectors/profileSelectors"; | ||||
| import { useHistory } from "react-router-dom"; | import { useHistory } from "react-router-dom"; | ||||
| import { MY_OFFERS_PAGE } from "../../../constants/pages"; | |||||
| import { ITEM_DETAILS_PAGE, MY_OFFERS_PAGE } from "../../../constants/pages"; | |||||
| import { useMemo } from "react"; | import { useMemo } from "react"; | ||||
| import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | |||||
| export const MyPosts = (props) => { | export const MyPosts = (props) => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| }, [arrayOfMineOffers, mineOffers]); | }, [arrayOfMineOffers, mineOffers]); | ||||
| const goToOffer = (id) => { | const goToOffer = (id) => { | ||||
| history.push(`/proizvodi/${id}`); | |||||
| history.push( | |||||
| replaceInRoute(ITEM_DETAILS_PAGE, { | |||||
| offerId: id, | |||||
| }) | |||||
| ); | |||||
| props.closePopover(); | props.closePopover(); | ||||
| }; | }; | ||||
| const goToMySwaps = () => { | const goToMySwaps = () => { |
| const [value, setValue] = useState(); | const [value, setValue] = useState(); | ||||
| const changeValue = (event) => { | const changeValue = (event) => { | ||||
| if (props.isAdmin) { | if (props.isAdmin) { | ||||
| // if(event.target.value.value === 1) { | |||||
| // dispatch(setReviews(reviews.givenReviews)); | |||||
| // } else { | |||||
| // dispatch(setReviews(reviews.receivedReviews)); | |||||
| // } | |||||
| // if(event.target.value.value === 1) { | |||||
| // dispatch(setReviews(reviews.givenReviews)); | |||||
| // } else { | |||||
| // dispatch(setReviews(reviews.receivedReviews)); | |||||
| // } | |||||
| } else { | } else { | ||||
| dispatch( | dispatch( | ||||
| setReviews( | setReviews( | ||||
| const sortEnum = useMemo(() => { | const sortEnum = useMemo(() => { | ||||
| if (props.isAdmin) return sortAdminEnum; | if (props.isAdmin) return sortAdminEnum; | ||||
| return reviewSortEnum; | return reviewSortEnum; | ||||
| }); | |||||
| }, [props.isAdmin]); | |||||
| const initialSortOption = useMemo(() => { | |||||
| if (props.isAdmin) return sortAdminEnum.GIVEN; | |||||
| return reviewSortEnum.INITIAL; | |||||
| }, [props.isAdmin]); | |||||
| useImperativeHandle(ref, () => ({ | useImperativeHandle(ref, () => ({ | ||||
| sortValue: value, | sortValue: value, | ||||
| hasGivenReview: value?.value === sortAdminEnum.GIVEN.value | |||||
| })) | |||||
| hasGivenReview: value?.value === sortAdminEnum.GIVEN.value, | |||||
| })); | |||||
| return ( | return ( | ||||
| <HeaderSelect | <HeaderSelect | ||||
| value={value || sortEnum.INITIAL} | |||||
| value={value || initialSortOption} | |||||
| IconComponent={DownArrowIcon} | IconComponent={DownArrowIcon} | ||||
| onChange={changeValue} | onChange={changeValue} | ||||
| > | > | ||||
| <SelectOption style={{ display: "none" }} value={sortEnum.INITIAL}> | |||||
| {sortEnum.INITIAL.mainText} | |||||
| <SelectOption style={{ display: "none" }} value={initialSortOption}> | |||||
| {initialSortOption.mainText} | |||||
| </SelectOption> | </SelectOption> | ||||
| {Object.keys(sortEnum).map((property) => { | {Object.keys(sortEnum).map((property) => { | ||||
| if (sortEnum[property].value === 0) return; | if (sortEnum[property].value === 0) return; |
| import { selectOffer } from "../../store/selectors/offersSelectors"; | import { selectOffer } from "../../store/selectors/offersSelectors"; | ||||
| import { selectSelectedReviews } from "../../store/selectors/reviewSelector"; | import { selectSelectedReviews } from "../../store/selectors/reviewSelector"; | ||||
| import { useRouteMatch } from "react-router-dom"; | import { useRouteMatch } from "react-router-dom"; | ||||
| import { | |||||
| fetchReviews, | |||||
| setReviews, | |||||
| } from "../../store/actions/review/reviewActions"; | |||||
| import { fetchReviews } from "../../store/actions/review/reviewActions"; | |||||
| import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | ||||
| import SkeletonUserReviews from "./SkeletonUserReviews/SkeletonUserReviews"; | import SkeletonUserReviews from "./SkeletonUserReviews/SkeletonUserReviews"; | ||||
| import { ONE_OFFER_SCOPE } from "../../store/actions/offers/offersActionConstants"; | import { ONE_OFFER_SCOPE } from "../../store/actions/offers/offersActionConstants"; | ||||
| import { | |||||
| REVIEW_GET_SCOPE, | |||||
| REVIEW_GET_AS_ADMIN_SCOPE, | |||||
| } from "../../store/actions/review/reviewActionConstants"; | |||||
| import { REVIEW_GET_SCOPE } from "../../store/actions/review/reviewActionConstants"; | |||||
| import ReviewsSorting from "./ReviewsSorting/ReviewsSorting"; | import ReviewsSorting from "./ReviewsSorting/ReviewsSorting"; | ||||
| import { sortReviews } from "../../util/helpers/reviewsHelper"; | |||||
| // import { selectUserId } from "../../store/selectors/loginSelectors"; | |||||
| import { dynamicRouteMatches } from "../../util/helpers/routeHelpers"; | |||||
| import { | |||||
| ADMIN_SINGLE_USER_PAGE, | |||||
| DIRECT_CHAT_PAGE, | |||||
| PROFILE_PAGE, | |||||
| } from "../../constants/pages"; | |||||
| import { selectUserId } from "../../store/selectors/loginSelectors"; | |||||
| const UserReviews = (props) => { | const UserReviews = (props) => { | ||||
| const [isGiven, setIsGiven] = useState(true); | const [isGiven, setIsGiven] = useState(true); | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const listRef = useRef(null); | const listRef = useRef(null); | ||||
| const sortRef = useRef(null); | const sortRef = useRef(null); | ||||
| // const userId = useSelector(selectUserId); | |||||
| const mineUserId = useSelector(selectUserId); | |||||
| const isLoadingReview = useSelector( | const isLoadingReview = useSelector( | ||||
| selectIsLoadingByActionType( | selectIsLoadingByActionType( | ||||
| props.isAdmin | |||||
| ? REVIEW_GET_AS_ADMIN_SCOPE | |||||
| : props.isProfileReviews | |||||
| ? REVIEW_GET_SCOPE | |||||
| : ONE_OFFER_SCOPE | |||||
| props.givingReview ? ONE_OFFER_SCOPE : REVIEW_GET_SCOPE | |||||
| ) | ) | ||||
| ); | ); | ||||
| const userId = useMemo(() => { | |||||
| if ( | |||||
| dynamicRouteMatches(PROFILE_PAGE) || | |||||
| dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE) | |||||
| ) { | |||||
| return routeMatch.params.profileId; | |||||
| } | |||||
| if (dynamicRouteMatches(DIRECT_CHAT_PAGE)) { | |||||
| return mineUserId; | |||||
| } | |||||
| return offer?.user?._id; | |||||
| }, [offer]); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| let idProfile = routeMatch.params?.profileId; | |||||
| if (idProfile) { | |||||
| dispatch(fetchReviews(idProfile)); | |||||
| if (!props?.givingReview && userId) { | |||||
| dispatch(fetchReviews(userId)); | |||||
| } | } | ||||
| }, [props.givingReview, userId]); | |||||
| // if (props.profileReviews && routeMatch.params?.profileId) { | |||||
| // let idProfile = routeMatch.params?.profileId; | |||||
| // dispatch(fetchReviews(idProfile)); | |||||
| // } | |||||
| }, [props.profileReviews, routeMatch]); | |||||
| const lastThreeReviews = useMemo(() => { | const lastThreeReviews = useMemo(() => { | ||||
| if (props.isAdmin) { | |||||
| if (isGiven) { | |||||
| return reviews.givenReviews; | |||||
| } else { | |||||
| return reviews.receivedReviews; | |||||
| } | |||||
| if (props.isProfileReviews && Array.isArray(reviews) && !props.isAdmin) { | |||||
| return reviews.filter((singleReview) => { | |||||
| let userWhoRecievedReview = | |||||
| singleReview?.exchange?.buyer?.user?._id === singleReview?.user?._id | |||||
| ? "seller" | |||||
| : "buyer"; | |||||
| return ( | |||||
| singleReview?.exchange[userWhoRecievedReview]?.user?._id === userId | |||||
| ); | |||||
| }); | |||||
| } | } | ||||
| if (props.isProfileReviews) { | |||||
| return reviews; | |||||
| } | |||||
| if (props.givingReview) { | |||||
| return [...props.profileReviews]; | |||||
| } | |||||
| if (offer?.companyData?.lastThreeReviews) { | |||||
| // Making array of reviews in same order(sorting) so when comparing | |||||
| // them, I can make valid condition | |||||
| if ( | |||||
| JSON.stringify(sortReviews(reviews)) !== | |||||
| JSON.stringify(sortReviews(offer?.companyData?.lastThreeReviews)) | |||||
| ) { | |||||
| dispatch(setReviews([...offer?.companyData.lastThreeReviews])); | |||||
| } | |||||
| return [...offer?.companyData?.lastThreeReviews]; | |||||
| if (Array.isArray(reviews)) { | |||||
| return reviews.reduce((result, singleReview) => { | |||||
| let userWhoGaveReview = | |||||
| singleReview?.exchange?.buyer?.user?._id === singleReview?.user?._id | |||||
| ? "buyer" | |||||
| : "seller"; | |||||
| let userWhoRevievedReview = | |||||
| userWhoGaveReview === "buyer" ? "seller" : "buyer"; | |||||
| if (props.isAdmin) { | |||||
| if (isGiven) { | |||||
| if ( | |||||
| userId === singleReview?.exchange[userWhoGaveReview]?.user?._id | |||||
| ) { | |||||
| result.push(singleReview); | |||||
| } | |||||
| } else { | |||||
| if ( | |||||
| userId === | |||||
| singleReview?.exchange[userWhoRevievedReview]?.user?._id | |||||
| ) { | |||||
| result.push(singleReview); | |||||
| } | |||||
| } | |||||
| } | |||||
| return result; | |||||
| }, []); | |||||
| } | } | ||||
| return []; | return []; | ||||
| }, [props.profileReviews, offer, props.isProfileReviews, reviews, isGiven]); | }, [props.profileReviews, offer, props.isProfileReviews, reviews, isGiven]); | ||||
| showRemoveIcon={props.isAdmin} | showRemoveIcon={props.isAdmin} | ||||
| review={review} | review={review} | ||||
| key={index} | key={index} | ||||
| isProfileReviews={props?.isProfileReviews} | |||||
| userId={userId} | |||||
| isAdmin={props.isAdmin} | isAdmin={props.isAdmin} | ||||
| hasGivenReview={isGiven} | hasGivenReview={isGiven} | ||||
| givingReview={props.givingReview} | givingReview={props.givingReview} |
| : "350px"}; | : "350px"}; | ||||
| padding: 0; | padding: 0; | ||||
| width: 100%; | width: 100%; | ||||
| margin: 0 ${(props) => (props.isAdmin ? "18px" : "0")}; | |||||
| margin: 0 | |||||
| ${(props) => (props.isAdmin && props.isProfileReviews ? "18px" : "0")}; | |||||
| margin-top: 60px; | margin-top: 60px; | ||||
| } | } | ||||
| `; | `; |
| const useSearch = (applyAllFilters) => { | const useSearch = (applyAllFilters) => { | ||||
| const [searchStringLocally, setSearchStringLocally] = useState(""); | const [searchStringLocally, setSearchStringLocally] = useState(""); | ||||
| const [isInitallyLoaded, setIsInitiallyLoaded] = useState(false); | const [isInitallyLoaded, setIsInitiallyLoaded] = useState(false); | ||||
| const [appliedSearch, setAppliedSearch] = useState(false); | |||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const searchString = useSelector(selectSearchString); | const searchString = useSelector(selectSearchString); | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| } | } | ||||
| }, [history.location.pathname]); | }, [history.location.pathname]); | ||||
| useEffect(() => { | |||||
| if (appliedSearch) { | |||||
| applyAllFilters(); | |||||
| setAppliedSearch(false); | |||||
| } | |||||
| }, [appliedSearch]); | |||||
| // On every local change of search string, global state of search string should be also updated | // On every local change of search string, global state of search string should be also updated | ||||
| useEffect(() => { | useEffect(() => { | ||||
| if (isInitallyLoaded && applyAllFilters) { | if (isInitallyLoaded && applyAllFilters) { | ||||
| const searchOffersImmediately = (searchValue) => { | const searchOffersImmediately = (searchValue) => { | ||||
| setIsInitiallyLoaded(true); | setIsInitiallyLoaded(true); | ||||
| searchOffers(searchValue); | searchOffers(searchValue); | ||||
| applyAllFilters(); | |||||
| setAppliedSearch(true); | |||||
| }; | }; | ||||
| const setSearchStringManually = (searchValue) => { | const setSearchStringManually = (searchValue) => { |
| {props.children} | {props.children} | ||||
| <ContentRightCardContainer container spacing={2}> | <ContentRightCardContainer container spacing={2}> | ||||
| <Content sm={12} md={8} lg={8} xl={9} item>{props.content}</Content> | <Content sm={12} md={8} lg={8} xl={9} item>{props.content}</Content> | ||||
| <RightCard sm={0} md={4} lg={4} xl={3} item singleOffer={props.singleOffer} profile={props.profile}> | |||||
| <RightCard sm={12} md={4} lg={4} xl={3} item singleOffer={props.singleOffer} profile={props.profile}> | |||||
| {props.rightCard} | {props.rightCard} | ||||
| </RightCard> | </RightCard> | ||||
| </ContentRightCardContainer> | </ContentRightCardContainer> |
| /* flex: 1; */ | /* flex: 1; */ | ||||
| height: 100%; | height: 100%; | ||||
| @media (max-width: 1350px) { | @media (max-width: 1350px) { | ||||
| padding-right: ${props => props.isAdmin ? "36px" : "0"}; | |||||
| padding-right: ${(props) => (props.isAdmin ? "36px" : "0")}; | |||||
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| padding-left: 0; | padding-left: 0; | ||||
| padding-left: 0; | padding-left: 0; | ||||
| ${(props) => props.profile && `min-width: 350px;`} | ${(props) => props.profile && `min-width: 350px;`} | ||||
| @media screen and (min-width: 600px) { | @media screen and (min-width: 600px) { | ||||
| margin-top: 34px; | margin-top: 34px; | ||||
| margin-left: ${(props) => (props.profile ? "0" : "36px")}; | margin-left: ${(props) => (props.profile ? "0" : "36px")}; | ||||
| margin-left: 0; | margin-left: 0; | ||||
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| width: 100%; | |||||
| min-width: 0; | min-width: 0; | ||||
| } | } | ||||
| `; | `; |
| content={<ItemDetails singleOffer isAdmin />} | content={<ItemDetails singleOffer isAdmin />} | ||||
| rightCard={ | rightCard={ | ||||
| <> | <> | ||||
| <ProfileMini /> <UserReviews rightReviews /> | |||||
| <ProfileMini /> <UserReviews isAdmin rightReviews /> | |||||
| </> | </> | ||||
| } | } | ||||
| /> | /> |
| // baseURL: "http://192.168.88.175:3005/", | // baseURL: "http://192.168.88.175:3005/", | ||||
| // baseURL: "http://192.168.88.143:3001/", // DULE | // baseURL: "http://192.168.88.143:3001/", // DULE | ||||
| // baseURL: "https://trampa-api.dilig.net/", | // baseURL: "https://trampa-api.dilig.net/", | ||||
| baseURL: "https://trampa-api-test.dilig.net/", | |||||
| // baseURL: "http://localhost:3001/", | |||||
| // baseURL: "https://trampa-api-test.dilig.net/", | |||||
| baseURL: "http://localhost:3001/", | |||||
| // baseURL: process.env.REACT_APP_BASE_API_URL, | // baseURL: process.env.REACT_APP_BASE_API_URL, | ||||
| headers: { | headers: { | ||||
| "Content-Type": "application/json", | "Content-Type": "application/json", |
| // const baseURL = "http://192.168.88.143:3001/"; // DULE | // const baseURL = "http://192.168.88.143:3001/"; // DULE | ||||
| // const baseURL = "http://192.168.88.175:3005/"; | // const baseURL = "http://192.168.88.175:3005/"; | ||||
| // const baseURL = "https://trampa-api.dilig.net/"; | // const baseURL = "https://trampa-api.dilig.net/"; | ||||
| const baseURL = "https://trampa-api-test.dilig.net/"; | |||||
| // const baseURL = "https://trampa-api-test.dilig.net/"; | |||||
| // const baseURL = "http://192.168.88.150:3001/"; // DJOLE | // const baseURL = "http://192.168.88.150:3001/"; // DJOLE | ||||
| // const baseURL = "http://localhost:3001/"; | |||||
| const baseURL = "http://localhost:3001/"; | |||||
| // const baseURL = process.env.REACT_APP_BASE_API_URL | // const baseURL = process.env.REACT_APP_BASE_API_URL | ||||
| //Interceptor unique name | //Interceptor unique name |
| try { | try { | ||||
| console.log(payload.payload); | console.log(payload.payload); | ||||
| let userId; | let userId; | ||||
| if (typeof payload.payload === "object") { | if (typeof payload.payload === "object") { | ||||
| userId = payload.payload.idProfile; | userId = payload.payload.idProfile; | ||||
| } else userId = payload.payload; | } else userId = payload.payload; | ||||
| if (!userId || userId?.length === 0) | if (!userId || userId?.length === 0) | ||||
| throw new Error("User id is not defined!"); | throw new Error("User id is not defined!"); | ||||
| let queryString = new URLSearchParams(); | let queryString = new URLSearchParams(); | ||||
| queryString.set(KEY_SIZE, 10); | queryString.set(KEY_SIZE, 10); | ||||
| if (payload.payload[KEY_PAGE]) { | if (payload.payload[KEY_PAGE]) { | ||||
| } else { | } else { | ||||
| queryString = yield select(selectQueryString); | queryString = yield select(selectQueryString); | ||||
| } | } | ||||
| console.log(queryString.toString()); | console.log(queryString.toString()); | ||||
| let data; | let data; | ||||
| if (payload.payload.isAdmin) { | if (payload.payload.isAdmin) { |
| try { | try { | ||||
| console.log(payload); | console.log(payload); | ||||
| const data = yield call(attemptFetchReview, payload.payload); | const data = yield call(attemptFetchReview, payload.payload); | ||||
| yield put(setReviews([...data.data.reviews].reverse())); | |||||
| yield put(setReviews([...data.data.reviews])); | |||||
| yield put(fetchReviewsSuccess()); | yield put(fetchReviewsSuccess()); | ||||
| } catch (e) { | } catch (e) { | ||||
| yield put(fetchReviewsError()); | yield put(fetchReviewsError()); |