| @@ -22,7 +22,6 @@ const App = () => { | |||
| useEffect(() => { | |||
| socketInit(userId); | |||
| }, [userId]); | |||
| return ( | |||
| <Router history={history}> | |||
| <Helmet> | |||
| @@ -7,6 +7,7 @@ import { | |||
| MarketplaceIcon, | |||
| } from "./MarketplaceButton.styled"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import history from "../../../../store/utils/history"; | |||
| const MarketplaceButton = () => { | |||
| const { t } = useTranslation(); | |||
| @@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next"; | |||
| import { isInRoute, routeMatches } from "../../../../util/helpers/routeHelpers"; | |||
| import { ADMIN_HOME_PAGE, ADMIN_USERS_PAGE } from "../../../../constants/pages"; | |||
| import { ADMIN_NAVIGATION } from "../../../../constants/adminNavigation"; | |||
| import history from "../../../../store/utils/history"; | |||
| const SidebarNavigation = () => { | |||
| const { t } = useTranslation(); | |||
| @@ -1,5 +1,5 @@ | |||
| import { ReactComponent as DownArrow } from "../../../assets/images/svg/arrow-down.svg"; | |||
| import styled from "styled-components"; | |||
| import styled, { css } from "styled-components"; | |||
| import selectedTheme from "../../../themes"; | |||
| import { IconButton } from "../IconButton/IconButton"; | |||
| @@ -11,9 +11,9 @@ export const ArrowIcon = styled(DownArrow)` | |||
| `} | |||
| width: 18px; | |||
| height: 18px; | |||
| /* position: relative; | |||
| position: relative; | |||
| top: 1px; | |||
| left: 1px; */ | |||
| left: 1px; | |||
| & path { | |||
| ${(props) => | |||
| props.disabled && | |||
| @@ -46,7 +46,7 @@ export const ArrowContainer = styled(IconButton)` | |||
| } | |||
| ${(props) => | |||
| props.disabled && | |||
| ` | |||
| css` | |||
| border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor} !important; | |||
| &:hover { | |||
| background-color: inherit; | |||
| @@ -18,7 +18,7 @@ export const IconButton = (props) => { | |||
| onClick={props.onClick} | |||
| sx={props.style} | |||
| iconcolor={props.iconColor} | |||
| {...props} | |||
| // {...props} | |||
| > | |||
| {props.children} | |||
| </IconButtonStyled> | |||
| @@ -12,42 +12,48 @@ import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails"; | |||
| import useIsMobile from "../../../hooks/useIsMobile"; | |||
| import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter"; | |||
| import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile"; | |||
| import { useSelector } from "react-redux"; | |||
| import { selectUserId } from "../../../store/selectors/loginSelectors"; | |||
| // Chat card is shown only on mobile phones (route /messages) | |||
| const ChatCard = (props) => { | |||
| const { isMobile } = useIsMobile(); | |||
| const userId = useSelector(selectUserId); | |||
| const chat = useMemo(() => { | |||
| return props.chat; | |||
| }, [props.chat]); | |||
| const routeToItem = () => { | |||
| props.navigateToChat(chat?.chat?._id); | |||
| props.navigateToChat(chat?._id); | |||
| }; | |||
| const interlocutor = useMemo(() => { | |||
| return userId === chat?.participants[0]._id ? 1 : 0; | |||
| }, [userId, chat]); | |||
| return ( | |||
| <ChatCardContainer onClick={routeToItem}> | |||
| <UserImgWrapper> | |||
| <UserImage | |||
| src={getImageUrl( | |||
| chat?.interlocutorData?.image, | |||
| chat?.participants[interlocutor].image, | |||
| variants.chatCard, | |||
| isMobile | |||
| )} | |||
| /> | |||
| </UserImgWrapper> | |||
| <ChatInfo isBlocked={props.chat.interlocutorData?._blocked}> | |||
| <ChatInfo isBlocked={props.chat.participants[interlocutor]?._blocked}> | |||
| <ProfileNameContainer> | |||
| <UserName>{chat?.interlocutorData?.name}</UserName> | |||
| {(props.chat.interlocutorData?._blocked || | |||
| props.chat.interlocutorData?._deleted) && ( | |||
| <UserName>{chat?.participants[interlocutor]?.company?.name}</UserName> | |||
| {(props.chat?.participants[interlocutor]?._blocked || | |||
| props.chat?.participants[interlocutor]?._deleted) && ( | |||
| <BlockedProfile | |||
| redText | |||
| chatCard | |||
| shortText | |||
| aboveTitle | |||
| hideIcon | |||
| deleted={props.chat.interlocutorData?._deleted} | |||
| deleted={props.chat?.participants[interlocutor]?._deleted} | |||
| /> | |||
| )} | |||
| </ProfileNameContainer> | |||
| @@ -12,7 +12,7 @@ const MobileOfferDetails = (props) => { | |||
| return ( | |||
| <OfferCardContainerMobile> | |||
| <OfferTextMobile>{t("messages.cardProduct")}</OfferTextMobile> | |||
| <OfferTitleMobile>{props.chat?.offerData?.name}</OfferTitleMobile> | |||
| <OfferTitleMobile>{props.chat?.offer?.name}</OfferTitleMobile> | |||
| </OfferCardContainerMobile> | |||
| ); | |||
| }; | |||
| @@ -23,7 +23,6 @@ const CategoryChoser = forwardRef((props, ref) => { | |||
| filters.subcategory.setSelectedSubcategory({}); | |||
| props.offers.applyFilters(); | |||
| }; | |||
| console.log(props); | |||
| useImperativeHandle(ref, () => ({ | |||
| closeSection: () => { | |||
| setIsOpened(false); | |||
| @@ -33,7 +32,8 @@ const CategoryChoser = forwardRef((props, ref) => { | |||
| useEffect(() => { | |||
| if ( | |||
| !filters.category.selectedCategoryLocally || | |||
| (filters.category.selectedCategoryLocally && | |||
| !("_id" in filters.category.selectedCategoryLocally)) || | |||
| (filters.category.selectedCategoryLocally?._id === 0 && !isOpened) | |||
| ) { | |||
| setIsOpened(false); | |||
| @@ -11,6 +11,7 @@ import FilterSubDropdown from "../../FilterDropdown/Checkbox/FilterSubDropdown/F | |||
| const CompanyChoser = forwardRef((props, ref) => { | |||
| const [isOpened, setIsOpened] = useState(false); | |||
| const [appliedFilters, setAppliedFilters] = useState(false); | |||
| const filters = props.filters; | |||
| const { t } = useTranslation(); | |||
| @@ -26,6 +27,18 @@ const CompanyChoser = forwardRef((props, ref) => { | |||
| } | |||
| }, [filters.companies.selectedCompaniesLocally]); | |||
| useEffect(() => { | |||
| if (appliedFilters) { | |||
| props?.offers?.apply(); | |||
| setAppliedFilters(false); | |||
| } | |||
| }, [filters.companies.selectedCompaniesLocally]); | |||
| const handleSetItemsSelected = (items) => { | |||
| filters.companies.setSelectedCompanies(items); | |||
| setAppliedFilters(true); | |||
| }; | |||
| return ( | |||
| <FilterSubDropdown | |||
| searchPlaceholder={t("filters.company.placeholder")} | |||
| @@ -35,7 +48,7 @@ const CompanyChoser = forwardRef((props, ref) => { | |||
| handleOpen={() => setIsOpened((prevIsOpened) => !prevIsOpened)} | |||
| icon={<CompanyIcon />} | |||
| title={t("filters.company.title")} | |||
| setItemsSelected={filters.companies.setSelectedCompanies} | |||
| setItemsSelected={handleSetItemsSelected} | |||
| companies | |||
| offers={props.offers} | |||
| /> | |||
| @@ -12,11 +12,10 @@ import { useTranslation } from "react-i18next"; | |||
| const LocationChoser = forwardRef((props, ref) => { | |||
| const { t } = useTranslation(); | |||
| const [appliedFilters, setAppliedFilters] = useState(false); | |||
| const [isOpened, setIsOpened] = useState(false); | |||
| const filters = props.filters; | |||
| console.log(props); | |||
| const allLocations = useMemo( | |||
| () => filters.locations.allLocations || [], | |||
| [filters.locations] | |||
| @@ -33,6 +32,18 @@ const LocationChoser = forwardRef((props, ref) => { | |||
| setIsOpened(true); | |||
| } | |||
| }, [filters.locations.selectedLocationsLocally]); | |||
| useEffect(() => { | |||
| if (appliedFilters) { | |||
| props?.offers?.apply(); | |||
| setAppliedFilters(false); | |||
| } | |||
| }, [appliedFilters]); | |||
| const handleSetItemsSelected = (items) => { | |||
| filters.locations.setSelectedLocations(items); | |||
| setAppliedFilters(true); | |||
| }; | |||
| return ( | |||
| <FilterCheckboxDropdown | |||
| searchPlaceholder={t("filters.location.placeholder")} | |||
| @@ -42,7 +53,7 @@ const LocationChoser = forwardRef((props, ref) => { | |||
| handleOpen={() => setIsOpened((prevIsOpened) => !prevIsOpened)} | |||
| icon={<LocationIcon />} | |||
| title={t("filters.location.title")} | |||
| setItemsSelected={filters.locations.setSelectedLocations} | |||
| setItemsSelected={handleSetItemsSelected} | |||
| offers={props.offers} | |||
| /> | |||
| ); | |||
| @@ -32,10 +32,16 @@ const SubcategoryChoser = forwardRef((props, ref) => { | |||
| }, | |||
| })); | |||
| const handleSelectSubcategory = (subcategory) => { | |||
| filters.subcategory.setSelectedSubcategory(subcategory, !props.myOffers); | |||
| // if (props.myOffers) props.offers?.applyFilters(); | |||
| }; | |||
| useEffect(() => { | |||
| if (props?.queryStringHook?.isInitiallyLoaded || props.isMyOffers) { | |||
| if (props?.queryStringHook?.isInitiallyLoaded || props.myOffers) { | |||
| if ( | |||
| !filters.category.selectedCategoryLocally || | |||
| (filters.category.selectedCategoryLocally && | |||
| !("_id" in filters.category.selectedCategoryLocally)) || | |||
| filters.category.selectedCategoryLocally?._id === 0 | |||
| ) { | |||
| setIsOpened(false); | |||
| @@ -46,12 +52,14 @@ const SubcategoryChoser = forwardRef((props, ref) => { | |||
| } | |||
| } else { | |||
| if ( | |||
| !filters.subcategory.selectedSubcategoryLocally || | |||
| (filters.subcategory.selectedSubcategoryLocally && | |||
| !("_id" in filters.subcategory.selectedSubcategoryLocally)) || | |||
| filters.subcategory.selectedSubcategoryLocally?._id === 0 | |||
| ) { | |||
| setIsOpened(false); | |||
| if ( | |||
| !filters.category.selectedCategoryLocally || | |||
| (filters.category.selectedCategoryLocally && | |||
| !("_id" in filters.category.selectedCategoryLocally)) || | |||
| filters.category.selectedCategoryLocally?._id === 0 | |||
| ) { | |||
| setIsDisabled(true); | |||
| @@ -74,7 +82,7 @@ const SubcategoryChoser = forwardRef((props, ref) => { | |||
| : t("filters.subcategories.title") | |||
| } | |||
| searchPlaceholder={t("filters.subcategories.placeholder")} | |||
| setSelected={filters.subcategory.setSelectedSubcategory} | |||
| setSelected={handleSelectSubcategory} | |||
| selected={filters.subcategory.selectedSubcategoryLocally} | |||
| open={isOpened} | |||
| disabled={isDisabled} | |||
| @@ -91,7 +99,7 @@ SubcategoryChoser.propTypes = { | |||
| filters: PropTypes.any, | |||
| categoryOpened: PropTypes.bool, | |||
| queryStringHook: PropTypes.any, | |||
| isMyOffers: PropTypes.bool, | |||
| myOffers: PropTypes.bool, | |||
| offers: PropTypes.any, | |||
| }; | |||
| @@ -50,7 +50,7 @@ const FilterCard = (props) => { | |||
| queryStringHook={offers.queryStringHook} | |||
| ref={subcategoryRef} | |||
| categoryOpened={categoryRef.current?.isOpened} | |||
| isMyOffers={props.myOffers} | |||
| myOffers={props.myOffers} | |||
| offers={offers} | |||
| /> | |||
| @@ -16,8 +16,9 @@ const CheckboxDropdownList = (props) => { | |||
| const data = props.data; | |||
| const [isOpened, setIsOpened] = useState(false); | |||
| const handleDelete = (item) => { | |||
| props.setItemsSelected([...props.filters.filter((p) => p !== item)]); | |||
| props.offers.applyFilters(); | |||
| console.log(item); | |||
| console.log(props.filters) | |||
| props.setItemsSelected([...props.filters.filter((p) => p?._id !== item?._id)]); | |||
| }; | |||
| const handleOpen = () => { | |||
| setIsOpened((prevState) => !prevState); | |||
| @@ -9,7 +9,6 @@ const FilterCheckboxDropdown = (props) => { | |||
| const [isOpened, setIsOpened] = useState(false); | |||
| const [toSearch, setToSearch] = useState(""); | |||
| const { data } = props; | |||
| console.log(props); | |||
| useEffect(() => { | |||
| setDataToShow([...data]); | |||
| @@ -48,6 +48,7 @@ const FilterSubDropdown = (props) => { | |||
| filters={props.filters} | |||
| icon={props.icon} | |||
| data={data} | |||
| offers={props?.offers} | |||
| searchPlaceholder={props.searchPlaceholder} | |||
| open={props?.open !== undefined ? props.open : isOpened} | |||
| handleOpen={handleOpen} | |||
| @@ -111,7 +111,10 @@ const FilterRadioDropdown = (props) => { | |||
| label={props.firstOption.label} | |||
| // number={item.numberOfProducts} | |||
| fullWidth | |||
| checked={!props.selected || props.selected._id === 0} | |||
| checked={ | |||
| (props?.selected && !("_id" in props?.selected)) || | |||
| props?.selected?._id === 0 | |||
| } | |||
| onChange={props.setSelected} | |||
| /> | |||
| </DropdownItem> | |||
| @@ -37,7 +37,7 @@ const ImagesCarousel = (props) => { | |||
| <CloseButtonIcon /> | |||
| </CloseButton> | |||
| <Scroller isCarousel> | |||
| {props?.offer?.offer?.images.map((image) => { | |||
| {props?.images.map((image) => { | |||
| if (!image) return; | |||
| return ( | |||
| <OfferImage | |||
| @@ -48,7 +48,7 @@ const ImagesCarousel = (props) => { | |||
| })} | |||
| </Scroller> | |||
| <Offer> | |||
| {t("carousel.offer")} <OfferSpan>{props.offer.offer.name}</OfferSpan> | |||
| {t("carousel.offer")} <OfferSpan>{props.offer.name}</OfferSpan> | |||
| </Offer> | |||
| </ImagesCarouselContainer> | |||
| </> | |||
| @@ -59,6 +59,7 @@ ImagesCarousel.propTypes = { | |||
| offer: PropTypes.any, | |||
| onModalClose: PropTypes.any, | |||
| createOffer: PropTypes.bool, | |||
| images: PropTypes.array | |||
| }; | |||
| export default ImagesCarousel; | |||
| @@ -50,11 +50,12 @@ const ItemDetailsCard = (props) => { | |||
| const offer = useMemo(() => { | |||
| if (props.offer) { | |||
| if ( | |||
| props.offer.offer._id === routeMatch.params?.offerId || | |||
| props.createOffer | |||
| props.offer._id === routeMatch.params?.offerId && | |||
| !props?.createOffer | |||
| ) { | |||
| return props.offer; | |||
| } | |||
| if (props.createOffer) return props.offer.offer; | |||
| } | |||
| return itemDetailsData; | |||
| }, [props.offer, props.createOffer, routeMatch.params]); | |||
| @@ -66,21 +67,21 @@ const ItemDetailsCard = (props) => { | |||
| }, []); | |||
| useEffect(() => { | |||
| if (offer?.offer?._id) { | |||
| increaseOfferCounter(offer?.offer?._id); | |||
| if (offer?._id) { | |||
| increaseOfferCounter(offer?._id); | |||
| } | |||
| }, [offer]); | |||
| const date = formatDateLocale(new Date(offer?.offer?._created)); | |||
| const date = formatDateLocale(new Date(offer?._created)); | |||
| const startExchange = () => { | |||
| startChat(chats, offer?.offer, userId); | |||
| startChat(chats, offer, userId); | |||
| }; | |||
| const showDeleteOfferModalHandler = () => { | |||
| dispatch( | |||
| toggleDeleteOfferModal({ | |||
| offer: offer.offer, | |||
| offer: offer, | |||
| isAdmin: props.isAdmin, | |||
| }) | |||
| ); | |||
| @@ -90,18 +91,18 @@ const ItemDetailsCard = (props) => { | |||
| dispatch( | |||
| toggleEditOfferModal({ | |||
| editOffer: true, | |||
| offer: offer?.offer, | |||
| offer: offer, | |||
| isAdmin: props.isAdmin, | |||
| customUserId: offer?.offer?.userId, | |||
| customUserId: offer?.user?._id, | |||
| }) | |||
| ); | |||
| }; | |||
| const showPinOfferModalHandler = () => { | |||
| dispatch( | |||
| toggleDeleteOfferModal({ | |||
| offer: offer?.offer, | |||
| offer: offer, | |||
| pin: true, | |||
| pinnedOffer: offer?.offer?.pinned, | |||
| pinnedOffer: offer?.pinned, | |||
| deleteOffer: false, | |||
| }) | |||
| ); | |||
| @@ -120,21 +121,15 @@ const ItemDetailsCard = (props) => { | |||
| <Info> | |||
| <Information | |||
| icon={<CategoryIcon />} | |||
| value={offer?.offer?.category?.name} | |||
| value={offer?.category?.name} | |||
| /> | |||
| <Information | |||
| icon={<SubcategoryIcon />} | |||
| value={offer?.offer?.subcategory} | |||
| /> | |||
| <Information | |||
| icon={<QuantityIcon />} | |||
| value={offer?.offer?.condition} | |||
| value={offer?.subcategory} | |||
| /> | |||
| <Information icon={<QuantityIcon />} value={offer?.condition} /> | |||
| {!props.hideViews && ( | |||
| <Information | |||
| icon={<EyeIcon />} | |||
| value={offer?.offer?.views?.count} | |||
| /> | |||
| <Information icon={<EyeIcon />} value={offer?.views?.count} /> | |||
| )} | |||
| </Info> | |||
| <PostDate previewCard={props.previewCard}>{date}</PostDate> | |||
| @@ -153,9 +148,11 @@ const ItemDetailsCard = (props) => { | |||
| <DateButtonsContainer> | |||
| {props.isMyOffer && ( | |||
| <ButtonsContainer> | |||
| <PinIconContainer onClick={showPinOfferModalHandler}> | |||
| {offer?.offer?.pinned ? <UnpinIcon /> : <PinIcon />} | |||
| </PinIconContainer> | |||
| {props?.isAdmin && ( | |||
| <PinIconContainer onClick={showPinOfferModalHandler}> | |||
| {offer?.pinned ? <UnpinIcon /> : <PinIcon />} | |||
| </PinIconContainer> | |||
| )} | |||
| <EditIconContainer onClick={showEditOfferModalHandler}> | |||
| <EditIcon /> | |||
| </EditIconContainer> | |||
| @@ -28,8 +28,8 @@ const OfferDetails = (props) => { | |||
| const [imagesCarouselModal, setImagesCarouselModal] = useState(false); | |||
| useEffect(() => { | |||
| if (props?.offer?.offer?.images) { | |||
| props.offer.offer.images.map((file) => { | |||
| if (props?.offer?.images) { | |||
| props.offer.images.map((file) => { | |||
| if (file) { | |||
| if (typeof file !== "string") { | |||
| var reader = new FileReader(); | |||
| @@ -41,16 +41,16 @@ const OfferDetails = (props) => { | |||
| console.log("Error: ", error); | |||
| }; | |||
| } else { | |||
| setImages((prevImages) => [ | |||
| ...prevImages, | |||
| getImageUrl(file, variants.offerCard, isMobile), | |||
| ]); | |||
| setImages((prevImages) => [...prevImages, file]); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| }, [props?.offer?.offer?.images]); | |||
| const date = formatDateLocale(new Date(offer?.offer?._created)); | |||
| return () => { | |||
| setImages([]); | |||
| }; | |||
| }, [props?.offer?.images]); | |||
| const date = formatDateLocale(new Date(offer?._created)); | |||
| const onModalClose = () => { | |||
| setImagesCarouselModal(false); | |||
| }; | |||
| @@ -64,7 +64,7 @@ const OfferDetails = (props) => { | |||
| > | |||
| {!isMobile && props.singleOffer && ( | |||
| <ScrollerVertical> | |||
| {props?.offer?.offer?.images.map((item, index) => ( | |||
| {images.map((item, index) => ( | |||
| <OfferImage | |||
| src={ | |||
| props.createOffer | |||
| @@ -85,12 +85,10 @@ const OfferDetails = (props) => { | |||
| singleOffer={props.singleOffer} | |||
| previewCard={props.previewCard} | |||
| > | |||
| <OfferTitle singleOffer={props.singleOffer}> | |||
| {offer?.offer?.name} | |||
| </OfferTitle> | |||
| <OfferTitle singleOffer={props.singleOffer}>{offer?.name}</OfferTitle> | |||
| {isMobile && ( | |||
| <ScrollerHorizontal> | |||
| {props?.offer?.offer?.images.map((item, index) => { | |||
| {images.map((item, index) => { | |||
| if (!item) return; | |||
| return ( | |||
| <OfferImage | |||
| @@ -117,7 +115,7 @@ const OfferDetails = (props) => { | |||
| {t("itemDetailsCard.description")} | |||
| </OfferDescriptionTitle> | |||
| <OfferDescriptionText showBarterButton={props.showExchangeButton}> | |||
| {offer?.offer?.description} | |||
| {offer?.description} | |||
| </OfferDescriptionText> | |||
| <DesciprtionPostDate previewCard={props.previewCard}> | |||
| {date} | |||
| @@ -126,7 +124,11 @@ const OfferDetails = (props) => { | |||
| </OfferInfoContainer> | |||
| </Details> | |||
| {imagesCarouselModal && ( | |||
| <ImagesCarousel offer={props.offer} onModalClose={onModalClose} /> | |||
| <ImagesCarousel | |||
| offer={props.offer} | |||
| images={images} | |||
| onModalClose={onModalClose} | |||
| /> | |||
| )} | |||
| </> | |||
| ); | |||
| @@ -16,40 +16,46 @@ import history from "../../../store/utils/history"; | |||
| import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | |||
| import { DIRECT_CHAT_PAGE } from "../../../constants/pages"; | |||
| import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile"; | |||
| import { useMemo } from "react"; | |||
| import { useSelector } from "react-redux"; | |||
| import { selectUserId } from "../../../store/selectors/loginSelectors"; | |||
| const MiniChatCard = (props) => { | |||
| const { t } = useTranslation(); | |||
| const { isMobile } = useIsMobile(); | |||
| const userId = useSelector(selectUserId); | |||
| const changeChat = () => { | |||
| history.push( | |||
| replaceInRoute(DIRECT_CHAT_PAGE, { | |||
| chatId: props?.chat?.chat?._id, | |||
| chatId: props?.chat?._id, | |||
| }) | |||
| ); | |||
| }; | |||
| const interlocutorData = useMemo(() => { | |||
| if (props?.chat?.participants) { | |||
| let interlocutor = props?.chat?.participants[0]._id === userId ? 1 : 0; | |||
| return props?.chat?.participants[interlocutor]; | |||
| } | |||
| return {}; | |||
| }, [props?.chat]); | |||
| return ( | |||
| <MiniChatCardContainer selected={props.selected} onClick={changeChat}> | |||
| <ProfileImage | |||
| src={getImageUrl( | |||
| props?.chat?.interlocutorData?.image, | |||
| variants.chatCard, | |||
| isMobile | |||
| )} | |||
| src={getImageUrl(interlocutorData?.image, variants.chatCard, isMobile)} | |||
| /> | |||
| <ProfileDetails isBlocked={props.chat.interlocutorData?._blocked}> | |||
| <ProfileDetails isBlocked={interlocutorData?._blocked}> | |||
| <ProfileNameContainer> | |||
| <ProfileName selected={props.selected}> | |||
| {props?.chat?.interlocutorData?.name} | |||
| {interlocutorData?.company?.name} | |||
| </ProfileName> | |||
| {(props.chat.interlocutorData?._blocked || | |||
| props.chat.interlocutorData?._deleted) && ( | |||
| {(interlocutorData?._blocked || interlocutorData?._deleted) && ( | |||
| <BlockedProfile | |||
| redText | |||
| chatCard | |||
| shortText | |||
| aboveTitle | |||
| hideIcon | |||
| deleted={props.chat.interlocutorData?._deleted} | |||
| deleted={interlocutorData?._deleted} | |||
| /> | |||
| )} | |||
| </ProfileNameContainer> | |||
| @@ -57,7 +63,7 @@ const MiniChatCard = (props) => { | |||
| {t("messages.cardProduct")} | |||
| </ProfileProduct> | |||
| <ProfileProductName selected={props.selected}> | |||
| {props?.chat?.offerData?.name} | |||
| {props?.chat?.offer?.name} | |||
| </ProfileProductName> | |||
| </ProfileDetails> | |||
| </MiniChatCardContainer> | |||
| @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; | |||
| import { | |||
| CategoryIcon, | |||
| CategoryIconContainer, | |||
| OfferCategoryContainer, | |||
| OfferDescriptionCategory, | |||
| OfferDescriptionContainer, | |||
| OfferDescriptionTitle, | |||
| @@ -13,7 +14,7 @@ const OfferDescription = (props) => { | |||
| return ( | |||
| <OfferDescriptionContainer> | |||
| <OfferDescriptionTitle>{props.offerName}</OfferDescriptionTitle> | |||
| <OfferDescriptionCategory> | |||
| <OfferCategoryContainer> | |||
| <CategoryIconContainer | |||
| color={selectedTheme.colors.iconStrokeDisabledColor} | |||
| component="span" | |||
| @@ -21,8 +22,10 @@ const OfferDescription = (props) => { | |||
| > | |||
| <CategoryIcon /> | |||
| </CategoryIconContainer> | |||
| {props.categoryName} | |||
| </OfferDescriptionCategory> | |||
| <OfferDescriptionCategory> | |||
| {props.categoryName} | |||
| </OfferDescriptionCategory> | |||
| </OfferCategoryContainer> | |||
| </OfferDescriptionContainer> | |||
| ); | |||
| }; | |||
| @@ -35,15 +35,21 @@ export const OfferDescriptionCategory = styled(Typography)` | |||
| font-family: ${selectedTheme.fonts.textFont}; | |||
| color: ${selectedTheme.colors.primaryDarkText}; | |||
| `; | |||
| export const OfferCategoryContainer = styled(Box)` | |||
| display: flex; | |||
| flex-direction: row; | |||
| white-space: nowrap; | |||
| ` | |||
| export const CategoryIconContainer = styled(Icon)` | |||
| margin-right: 4px; | |||
| position: relative; | |||
| top: 2px; | |||
| display: inline; | |||
| & svg { | |||
| width: 14px; | |||
| position: relative; | |||
| top: -6px; | |||
| top: -4px; | |||
| } | |||
| `; | |||
| export const CategoryIcon = styled(Category)``; | |||
| @@ -87,11 +87,14 @@ const OfferCard = (props) => { | |||
| }) | |||
| ); | |||
| } else { | |||
| history.push( | |||
| replaceInRoute(ITEM_DETAILS_PAGE, { | |||
| history.push({ | |||
| pathname: replaceInRoute(ITEM_DETAILS_PAGE, { | |||
| offerId: itemId, | |||
| }) | |||
| ); | |||
| }), | |||
| state: { | |||
| view: true, | |||
| }, | |||
| }); | |||
| } | |||
| } | |||
| }; | |||
| @@ -54,7 +54,10 @@ const ProfileControl = (props) => { | |||
| ); | |||
| }; | |||
| const handleEditProfile = () => { | |||
| if (!props.profile?._blocked) { | |||
| console.log("edit") | |||
| console.log(props) | |||
| if (!props.profile?._blocked || props?.isAdmin) { | |||
| console.log("edit2") | |||
| dispatch( | |||
| toggleEditProfileModal({ | |||
| userId: props.profile._id, | |||
| @@ -67,9 +70,10 @@ const ProfileControl = (props) => { | |||
| ); | |||
| } | |||
| }; | |||
| console.log(props) | |||
| return ( | |||
| <ButtonsContainer> | |||
| {props.profile?._blocked && !props.isMobile && <BlockedProfile />} | |||
| {props.profile?._blocked && !props.isMobile && !props?.isAdmin && <BlockedProfile />} | |||
| {props.isAdmin && ( | |||
| <> | |||
| {props.profile?._blocked ? ( | |||
| @@ -26,15 +26,15 @@ const RequestExchangeCard = (props) => { | |||
| const requester = useSelector(selectRequester); | |||
| const exchange = useSelector(selectExchange); | |||
| const amIBuyer = useMemo( | |||
| () => exchange?.buyer?.userId === userId, | |||
| () => exchange?.buyer?.user?._id === userId, | |||
| [exchange, userId] | |||
| ); | |||
| const haveIAccepted = useMemo( | |||
| () => (amIBuyer ? exchange?.buyer?.accepted : exchange?.seller?.accepted), | |||
| [amIBuyer, exchange] | |||
| ); | |||
| const interlucatorUserId = useMemo( | |||
| () => (amIBuyer ? exchange?.seller?.userId : exchange?.buyer?.userId), | |||
| const interlocutorUserId = useMemo( | |||
| () => (amIBuyer ? exchange?.seller?.user?._id : exchange?.buyer?.user?._id), | |||
| [exchange, amIBuyer] | |||
| ); | |||
| const message = useMemo(() => { | |||
| @@ -52,18 +52,18 @@ const RequestExchangeCard = (props) => { | |||
| </MessageText> | |||
| ); | |||
| } | |||
| } else if (requester === requesterStatus.INTERLUCATOR) { | |||
| } else if (requester === requesterStatus.interlocutor) { | |||
| return ( | |||
| <RequestExchangeMessage | |||
| haveIAccepted={haveIAccepted} | |||
| chatId={props.chatId} | |||
| userId={userId} | |||
| interlucatorUserId={interlucatorUserId} | |||
| interlocutorUserId={interlocutorUserId} | |||
| /> | |||
| ); | |||
| } | |||
| return ""; | |||
| }, [requester, t, haveIAccepted, interlucatorUserId, userId, exchange]); | |||
| }, [requester, t, haveIAccepted, interlocutorUserId, userId, exchange]); | |||
| return ( | |||
| <RequestExchangeCardContainer ismymessage={props.isMyMessage}> | |||
| <InfoIcon /> | |||
| @@ -9,8 +9,14 @@ import { | |||
| import { useTranslation } from "react-i18next"; | |||
| import { acceptExchangeSocket } from "../../../../socket/socket"; | |||
| import { useDispatch, useSelector } from "react-redux"; | |||
| import { selectExchange, selectRequester } from "../../../../store/selectors/exchangeSelector"; | |||
| import { acceptExchange, setRequester } from "../../../../store/actions/exchange/exchangeActions"; | |||
| import { | |||
| selectExchange, | |||
| selectRequester, | |||
| } from "../../../../store/selectors/exchangeSelector"; | |||
| import { | |||
| acceptExchange, | |||
| setRequester, | |||
| } from "../../../../store/actions/exchange/exchangeActions"; | |||
| import { addNewMessage } from "../../../../store/actions/chat/chatActions"; | |||
| import { convertLocalDateToUTCDate } from "../../../../util/helpers/dateHelpers"; | |||
| import requesterStatus from "../../../../constants/requesterStatus"; | |||
| @@ -21,22 +27,21 @@ const RequestExchangeMessage = (props) => { | |||
| const exchange = useSelector(selectExchange); | |||
| const requester = useSelector(selectRequester); | |||
| const handleAcceptExchange = () => { | |||
| const handleAcceptExchangeSuccess = () => { | |||
| console.log("accept salje i prima 3 POZVANA RESPONSE FUNKCIJA"); | |||
| acceptExchangeSocket( | |||
| props.chatId, | |||
| props.userId, | |||
| props.interlucatorUserId, | |||
| props.interlocutorUserId, | |||
| () => { | |||
| dispatch( | |||
| acceptExchange({ | |||
| exchangeId: exchange._id, | |||
| }) | |||
| ); | |||
| console.log("accept salje i prima 4 SOCKET FUNKCIJA"); | |||
| dispatch( | |||
| addNewMessage({ | |||
| _id: props.chatId, | |||
| message: { | |||
| userId: props.userId, | |||
| user: { | |||
| _id: props.userId, | |||
| }, | |||
| text: "", | |||
| isAcceptRequest: true, | |||
| _created: convertLocalDateToUTCDate(new Date()), | |||
| @@ -49,6 +54,15 @@ const RequestExchangeMessage = (props) => { | |||
| } | |||
| ); | |||
| }; | |||
| const handleAcceptExchange = () => { | |||
| console.log("accept salje i prima 1 POZVANA FUNKCIJA"); | |||
| dispatch( | |||
| acceptExchange({ | |||
| exchangeId: exchange._id, | |||
| handleApiResponseSuccess: handleAcceptExchangeSuccess, | |||
| }) | |||
| ); | |||
| }; | |||
| return ( | |||
| <RequestExchangeMessageContainer> | |||
| <RequestExchangeMessageText> | |||
| @@ -65,7 +79,9 @@ const RequestExchangeMessage = (props) => { | |||
| onClick={handleAcceptExchange} | |||
| disabled={props.haveIAccepted} | |||
| > | |||
| {props.haveIAccepted ? t("messages.acceptedRequest") : t("messages.acceptRequest")} | |||
| {props.haveIAccepted | |||
| ? t("messages.acceptedRequest") | |||
| : t("messages.acceptRequest")} | |||
| </RequestExchangeMessageButton> | |||
| </RequestExchangeMessageButtonsContainer> | |||
| </RequestExchangeMessageContainer> | |||
| @@ -76,7 +92,7 @@ RequestExchangeMessage.propTypes = { | |||
| children: PropTypes.node, | |||
| chatId: PropTypes.string, | |||
| userId: PropTypes.string, | |||
| interlucatorUserId: PropTypes.string, | |||
| interlocutorUserId: PropTypes.string, | |||
| haveIAccepted: PropTypes.any, | |||
| }; | |||
| @@ -24,7 +24,7 @@ import { | |||
| fetchChats, | |||
| } from "../../store/actions/chat/chatActions"; | |||
| import useSorting from "../../hooks/useOffers/useSorting"; | |||
| import { addMesageListener, removeMessageListener } from "../../socket/socket"; | |||
| import { addMessageListener, removeMessageListener } from "../../socket/socket"; | |||
| import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | |||
| import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants"; | |||
| import SkeletonChatColumn from "./SkeletonChatColumn/SkeletonChatColumn"; | |||
| @@ -60,7 +60,8 @@ export const ChatColumn = (props) => { | |||
| history.goBack(); | |||
| return; | |||
| } | |||
| addMesageListener(({ succeed, data }) => { | |||
| addMessageListener(({ succeed, data }) => { | |||
| if (succeed) { | |||
| dispatch( | |||
| addNewMessage({ | |||
| @@ -10,9 +10,8 @@ import { | |||
| import FirstStepCreateReview from "./FirstStep/FirstStepCreateReview"; | |||
| import SecondStepCreateReview from "./SecondStep/SecondStepCreateReview"; | |||
| import ThirdStepCreateReview from "./ThirdStep/ThirdStepCreateReview"; | |||
| import { useDispatch, useSelector } from "react-redux"; | |||
| import { useDispatch } from "react-redux"; | |||
| import { giveReview } from "../../store/actions/review/reviewActions"; | |||
| import { selectUserId } from "../../store/selectors/loginSelectors"; | |||
| import { reviewEnum } from "../../enums/reviewEnum"; | |||
| import { fetchExchange } from "../../store/actions/exchange/exchangeActions"; | |||
| import { closeModal } from "../../store/actions/modal/modalActions"; | |||
| @@ -23,13 +22,9 @@ const CreateReview = (props) => { | |||
| const [informations, setInformations] = useState({}); | |||
| const [currentStep, setCurrentStep] = useState(1); | |||
| const dispatch = useDispatch(); | |||
| const userId = useSelector(selectUserId); | |||
| const closeModalHandler = () => { | |||
| dispatch(closeModal()); | |||
| }; | |||
| setTimeout(() => { | |||
| dispatch(closeModal()); | |||
| }, 3000); | |||
| const handleApiResponseSuccess = () => { | |||
| dispatch(fetchExchange(props.exchange._id)); | |||
| }; | |||
| @@ -45,8 +40,9 @@ const CreateReview = (props) => { | |||
| dispatch( | |||
| giveReview({ | |||
| review: { | |||
| exchangeId: props.exchange._id, | |||
| userId: userId, | |||
| exchange: { | |||
| _id: props.exchange._id, | |||
| }, | |||
| succeeded, | |||
| communication, | |||
| message: informations.comment, | |||
| @@ -7,9 +7,15 @@ import { | |||
| ThirdStepCreateReviewContainer, | |||
| } from "./ThirdStepCreateReview.styled"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import { useDispatch } from "react-redux"; | |||
| import { closeModal } from "../../../store/actions/modal/modalActions"; | |||
| const ThirdStepCreateReview = () => { | |||
| const { t } = useTranslation(); | |||
| const dispatch = useDispatch(); | |||
| setTimeout(() => { | |||
| dispatch(closeModal()); | |||
| }, 3000); | |||
| return ( | |||
| <ThirdStepCreateReviewContainer> | |||
| <LogoImage /> | |||
| @@ -24,7 +24,7 @@ import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants"; | |||
| import { selectUserId } from "../../store/selectors/loginSelectors"; | |||
| import { | |||
| acceptExchangeSocket, | |||
| addMesageListener, | |||
| addMessageListener, | |||
| removeMessageListener, | |||
| } from "../../socket/socket"; | |||
| import { makeErrorToastMessage } from "../../store/utils/makeToastMessage"; | |||
| @@ -35,6 +35,7 @@ import { | |||
| } from "../../store/selectors/exchangeSelector"; | |||
| import { | |||
| acceptExchange, | |||
| fetchExchange, | |||
| setRequester, | |||
| } from "../../store/actions/exchange/exchangeActions"; | |||
| import { convertLocalDateToUTCDate } from "../../util/helpers/dateHelpers"; | |||
| @@ -59,9 +60,9 @@ const DirectChat = () => { | |||
| const offerObject = useMemo(() => { | |||
| if (location?.state?.offerId) { | |||
| return offer?.offer; | |||
| return offer; | |||
| } | |||
| return chat?.offer?.offer; | |||
| return chat?.offer; | |||
| }, [chat, location.state, offer]); | |||
| const chatObject = useMemo(() => { | |||
| @@ -72,7 +73,7 @@ const DirectChat = () => { | |||
| }, [chat, location.state]); | |||
| const amIBuyer = useMemo( | |||
| () => exchange.buyer?.userId === userId, | |||
| () => exchange.buyer?.user?._id === userId, | |||
| [exchange, userId] | |||
| ); | |||
| @@ -81,14 +82,14 @@ const DirectChat = () => { | |||
| let haveIAccepted = amIBuyer | |||
| ? exchange.buyer?.accepted | |||
| : exchange.seller?.accepted; | |||
| let haveInterlucatorAccepted = amIBuyer | |||
| let haveinterlocutorAccepted = amIBuyer | |||
| ? exchange.seller?.accepted | |||
| : exchange.buyer?.accepted; | |||
| let haveIReviewed = amIBuyer | |||
| ? exchange.buyer.givenReview | |||
| : exchange.seller.givenReview; | |||
| if (haveIAccepted) { | |||
| if (haveInterlucatorAccepted) { | |||
| if (haveinterlocutorAccepted) { | |||
| if (haveIReviewed) { | |||
| return exchangeStatus.REVIEWED; | |||
| } else { | |||
| @@ -98,7 +99,7 @@ const DirectChat = () => { | |||
| return exchangeStatus.I_OFFERED; | |||
| } | |||
| } else { | |||
| if (haveInterlucatorAccepted) { | |||
| if (haveinterlocutorAccepted) { | |||
| return exchangeStatus.I_AM_OFFERED; | |||
| } else { | |||
| return exchangeStatus.INITIAL; | |||
| @@ -110,21 +111,13 @@ const DirectChat = () => { | |||
| const interlocutorObject = useMemo(() => { | |||
| if (location?.state?.offerId) { | |||
| return { | |||
| image: offer?.companyData?.image, | |||
| name: offer?.companyData?.company?.name, | |||
| location: offer?.companyData?.company?.contacts?.location, | |||
| userId: offer?.offer?.userId, | |||
| telephone: offer?.companyData?.company?.contacts?.telephone, | |||
| }; | |||
| return offer?.user; | |||
| } | |||
| return { | |||
| ...chat?.interlocutor, | |||
| userId: | |||
| chat?.chat?.participants[0] === userId | |||
| ? chat?.chat?.participants[1] | |||
| : chat?.chat?.participants[0], | |||
| }; | |||
| if (chat?.participants) { | |||
| let interlocutor = userId === chat?.participants[0]._id ? 1 : 0; | |||
| return chat?.participants[interlocutor]; | |||
| } | |||
| return {}; | |||
| }, [chat, location.state, offer]); | |||
| // Fetch chat after it is created | |||
| @@ -137,11 +130,11 @@ const DirectChat = () => { | |||
| // Listener to socket.IO chat | |||
| useEffect(() => { | |||
| addMesageListener(({ succeed, data }) => { | |||
| addMessageListener(({ succeed, data }) => { | |||
| if (succeed) { | |||
| if ( | |||
| [...allChats].find((item) => { | |||
| return item.chat._id === data.chatId; | |||
| return item._id === data.chatId; | |||
| }) | |||
| ) { | |||
| dispatch( | |||
| @@ -150,11 +143,11 @@ const DirectChat = () => { | |||
| message: data.message, | |||
| }) | |||
| ); | |||
| if ( | |||
| data.message?.isAcceptRequest && | |||
| requester === requesterStatus.NOONE | |||
| ) { | |||
| dispatch(setRequester(requesterStatus.INTERLUCATOR)); | |||
| if (data.message?.isAcceptRequest) { | |||
| dispatch(fetchExchange(exchange?._id)); | |||
| if (requester === requesterStatus.NOONE) { | |||
| dispatch(setRequester(requesterStatus.interlocutor)); | |||
| } | |||
| } | |||
| } else { | |||
| dispatch(fetchChats()); | |||
| @@ -166,8 +159,7 @@ const DirectChat = () => { | |||
| } | |||
| }); | |||
| return () => removeMessageListener(); | |||
| }, [allChats, routeMatch]); | |||
| }, [allChats, routeMatch, requester]); | |||
| const refreshChat = () => { | |||
| if (routeMatch.params?.chatId === "newMessage") { | |||
| @@ -177,22 +169,20 @@ const DirectChat = () => { | |||
| dispatch(fetchOneChat(routeMatch.params?.chatId)); | |||
| } | |||
| }; | |||
| const handleAcceptExchange = () => { | |||
| const handleAcceptExchangeSuccess = () => { | |||
| let interlocutor = userId === chat?.participants[0]._id ? 1 : 0; | |||
| acceptExchangeSocket( | |||
| chat?.chat?._id, | |||
| chat?._id, | |||
| userId, | |||
| chat?.interlocutor?._id, | |||
| chat?.participants[interlocutor]._id, | |||
| () => { | |||
| dispatch( | |||
| acceptExchange({ | |||
| exchangeId: exchange._id, | |||
| }) | |||
| ); | |||
| dispatch( | |||
| addNewMessage({ | |||
| _id: chat?.chat?._id, | |||
| _id: chat?._id, | |||
| message: { | |||
| userId, | |||
| user: { | |||
| _id: userId, | |||
| }, | |||
| isAcceptRequest: true, | |||
| text: "", | |||
| _created: convertLocalDateToUTCDate(new Date()), | |||
| @@ -205,6 +195,15 @@ const DirectChat = () => { | |||
| } | |||
| ); | |||
| }; | |||
| const handleAcceptExchange = () => { | |||
| console.log("accept salje i prima 1 POZVANA FUNKCIJA") | |||
| dispatch( | |||
| acceptExchange({ | |||
| exchangeId: exchange._id, | |||
| handleApiResponseSuccess: handleAcceptExchangeSuccess, | |||
| }) | |||
| ); | |||
| }; | |||
| return ( | |||
| <DirectChatContainer> | |||
| {isLoadingDirectChat || isLoadingDirectChat === undefined ? ( | |||
| @@ -224,7 +223,7 @@ const DirectChat = () => { | |||
| <DirectChatContent | |||
| chat={chatObject} | |||
| exchangeState={exchangeState} | |||
| interlucator={interlocutorObject} | |||
| interlocutor={interlocutorObject} | |||
| refreshChat={refreshChat} | |||
| /> | |||
| </DirectChatContainer> | |||
| @@ -23,18 +23,18 @@ const DirectChatContent = (props) => { | |||
| const myProfileImage = useSelector(selectMineProfilePicture); | |||
| const messagesRef = useRef(null); | |||
| const requester = useSelector(selectRequester); | |||
| const interlucatorProfileImage = props?.interlucator?.image; | |||
| const interlocutorProfileImage = props?.interlocutor?.image; | |||
| const isLoadingChatContent = useSelector( | |||
| selectIsLoadingByActionType(CHAT_SCOPE) | |||
| ); | |||
| const messages = props?.chat?.chat?.messages; | |||
| const messages = props?.chat?.messages; | |||
| useEffect(() => { | |||
| messagesRef.current?.scrollTo({ | |||
| top: messagesRef.current.scrollHeight, | |||
| behaviour: "smooth", | |||
| }); | |||
| window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); | |||
| }, [props?.chat?.chat?.messages, messagesRef, isLoadingChatContent]); | |||
| }, [props?.chat?.messages, messagesRef, isLoadingChatContent]); | |||
| const handleRefresh = () => { | |||
| props.refreshChat(); | |||
| @@ -46,16 +46,20 @@ const DirectChatContent = (props) => { | |||
| ) : ( | |||
| <DirectChatContentContainer> | |||
| <DirectChatContentHeader | |||
| interlucator={props?.interlucator} | |||
| interlocutor={props?.interlocutor} | |||
| exchangeState={props.exchangeState} | |||
| /> | |||
| <MessagesList ref={messagesRef} exchangeState={props?.exchangeState}> | |||
| {messages?.map((item) => { | |||
| const isMyMessage = userId === item.userId; | |||
| const isMyMessage = userId === item.user?._id; | |||
| const image = isMyMessage | |||
| ? myProfileImage | |||
| : interlucatorProfileImage; | |||
| if (requester === requesterStatus.INTERLUCATOR && isMyMessage && item?.isAcceptRequest) | |||
| : interlocutorProfileImage; | |||
| if ( | |||
| requester === requesterStatus.interlocutor && | |||
| isMyMessage && | |||
| item?.isAcceptRequest | |||
| ) | |||
| return; | |||
| return ( | |||
| <MessageContainer key={item?._id || item?._created}> | |||
| @@ -63,7 +67,7 @@ const DirectChatContent = (props) => { | |||
| <RequestExchangeCard | |||
| isMyMessage={isMyMessage} | |||
| message={item} | |||
| chatId={props?.chat?.chat?._id} | |||
| chatId={props?.chat?._id} | |||
| /> | |||
| ) : ( | |||
| <MessageCard | |||
| @@ -79,7 +83,7 @@ const DirectChatContent = (props) => { | |||
| <DirectChatNewMessage | |||
| chat={props?.chat} | |||
| refreshChat={handleRefresh} | |||
| interlucator={props.interlucator} | |||
| interlocutor={props.interlocutor} | |||
| /> | |||
| </DirectChatContentContainer> | |||
| )} | |||
| @@ -90,7 +94,7 @@ const DirectChatContent = (props) => { | |||
| DirectChatContent.propTypes = { | |||
| children: PropTypes.node, | |||
| chat: PropTypes.any, | |||
| interlucator: PropTypes.any, | |||
| interlocutor: PropTypes.any, | |||
| refreshChat: PropTypes.func, | |||
| exchangeState: PropTypes.any, | |||
| }; | |||
| @@ -32,9 +32,8 @@ const DirectChatContentHeader = (props) => { | |||
| const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null); | |||
| const { isMobile } = useIsMobile(); | |||
| const mineProfileBlocked = useSelector(selectAmIBlocked); | |||
| const togglePhonePopover = (event) => { | |||
| if (props.interlucator?.telephone) { | |||
| if (props.interlocutor?.company?.contacts?.telephone) { | |||
| setShowPhonePopover((prevState) => !prevState); | |||
| setPhonePopoverAnchorEl((prevState) => { | |||
| if (prevState) return null; | |||
| @@ -43,10 +42,10 @@ const DirectChatContentHeader = (props) => { | |||
| } | |||
| }; | |||
| const routeToUser = () => { | |||
| if (!props?.interlucator?._blocked) | |||
| if (!props?.interlocutor?._blocked) | |||
| history.push( | |||
| replaceInRoute(PROFILE_PAGE, { | |||
| profileId: props?.interlucator?.userId, | |||
| profileId: props?.interlocutor?._id, | |||
| }) | |||
| ); | |||
| }; | |||
| @@ -57,19 +56,19 @@ const DirectChatContentHeader = (props) => { | |||
| <ProfileImage | |||
| onClick={routeToUser} | |||
| src={getImageUrl( | |||
| props?.interlucator?.image, | |||
| props?.interlocutor?.image, | |||
| variants.chatHeader, | |||
| isMobile | |||
| )} | |||
| /> | |||
| <ProfileDetails> | |||
| <ProfileName onClick={routeToUser}> | |||
| {props?.interlucator?.name} | |||
| {props?.interlocutor?.company?.name} | |||
| </ProfileName> | |||
| <ProfileLocation> | |||
| <ProfileLocationIcon /> | |||
| <ProfileLocationText> | |||
| {props?.interlucator?.location} | |||
| {props?.interlocutor?.company?.contacts?.location} | |||
| </ProfileLocationText> | |||
| </ProfileLocation> | |||
| </ProfileDetails> | |||
| @@ -78,8 +77,8 @@ const DirectChatContentHeader = (props) => { | |||
| <PhoneIconContainer | |||
| disabled={ | |||
| mineProfileBlocked || | |||
| props?.interlucator?._blocked || | |||
| !props.interlucator?.telephone | |||
| props?.interlocutor?._blocked || | |||
| !props.interlocutor?.company?.contacts?.telephone | |||
| } | |||
| onClick={togglePhonePopover} | |||
| > | |||
| @@ -91,7 +90,11 @@ const DirectChatContentHeader = (props) => { | |||
| open={showPhonePopover} | |||
| anchorRight | |||
| onClose={togglePhonePopover} | |||
| content={<PhonePopover phoneNumber={props.interlucator?.telephone} />} | |||
| content={ | |||
| <PhonePopover | |||
| phoneNumber={props.interlocutor?.company?.contacts?.telephone} | |||
| /> | |||
| } | |||
| /> | |||
| </DirectChatContentHeaderContainer> | |||
| {(props.exchangeState === exchangeStatus.I_OFFERED || | |||
| @@ -111,7 +114,7 @@ const DirectChatContentHeader = (props) => { | |||
| DirectChatContentHeader.propTypes = { | |||
| children: PropTypes.node, | |||
| interlucator: PropTypes.any, | |||
| interlocutor: PropTypes.any, | |||
| exchangeState: PropTypes.bool, | |||
| }; | |||
| @@ -5,10 +5,14 @@ import OfferCard from "../../Cards/OfferCard/OfferCard"; | |||
| import { useSelector } from "react-redux"; | |||
| import { selectExchange } from "../../../store/selectors/exchangeSelector"; | |||
| import { useDispatch } from "react-redux"; | |||
| import { fetchExchange } from "../../../store/actions/exchange/exchangeActions"; | |||
| import { | |||
| fetchExchange, | |||
| setExchange, | |||
| } from "../../../store/actions/exchange/exchangeActions"; | |||
| import { selectSelectedChat } from "../../../store/selectors/chatSelectors"; | |||
| import { selectUserId } from "../../../store/selectors/loginSelectors"; | |||
| import { toggleCreateReviewModal } from "../../../store/actions/modal/modalActions"; | |||
| import { setOneChat } from "../../../store/actions/chat/chatActions"; | |||
| const DirectChatHeader = (props) => { | |||
| const exchange = useSelector(selectExchange); | |||
| @@ -17,14 +21,21 @@ const DirectChatHeader = (props) => { | |||
| const chat = useSelector(selectSelectedChat); | |||
| useEffect(() => { | |||
| if (chat?.chat?.exchangeId) refetchExchange(); | |||
| }, [chat]); | |||
| return () => { | |||
| dispatch(setExchange({})); | |||
| dispatch(setOneChat({})); | |||
| }; | |||
| }, []); | |||
| useEffect(() => { | |||
| if (chat?.exchange?._id) refetchExchange(); | |||
| }, [chat?.exchange]); | |||
| const isDisabledReviews = useMemo(() => { | |||
| if (!exchange.valid) return true; | |||
| if (exchange.seller?.userId === userId && exchange.seller?.givenReview) | |||
| if (exchange.seller?.user._id === userId && exchange.seller?.givenReview) | |||
| return true; | |||
| if (exchange.buyer?.userId === userId && exchange.buyer?.givenReview) | |||
| if (exchange.buyer?.user._id === userId && exchange.buyer?.givenReview) | |||
| return true; | |||
| return false; | |||
| }, [exchange, userId]); | |||
| @@ -40,7 +51,7 @@ const DirectChatHeader = (props) => { | |||
| }; | |||
| const refetchExchange = () => { | |||
| dispatch(fetchExchange(chat.chat.exchangeId)); | |||
| dispatch(fetchExchange(chat.exchange?._id)); | |||
| }; | |||
| const acceptExchange = () => { | |||
| @@ -34,21 +34,24 @@ const DirectChatNewMessage = (props) => { | |||
| const userId = useSelector(selectUserId); | |||
| const handleSend = useCallback( | |||
| (newChatId = undefined) => { | |||
| if (props.chat?.chat?._id) { | |||
| const chatId = props.chat?.chat?._id || newChatId; | |||
| sendMessage(chatId, userId, typedValue, props.interlucator.userId); | |||
| if (typedValue?.length === 0) return; | |||
| if (props?.chat?._id) { | |||
| const chatId = props.chat?._id || newChatId; | |||
| sendMessage(chatId, userId, typedValue, props.interlocutor._id); | |||
| dispatch( | |||
| addNewMessage({ | |||
| _id: chatId, | |||
| message: { | |||
| userId, | |||
| user: { | |||
| _id: userId, | |||
| }, | |||
| text: typedValue, | |||
| _created: convertLocalDateToUTCDate(new Date()), | |||
| }, | |||
| }) | |||
| ); | |||
| if (props.chat?.chat?._id) { | |||
| if (!exchange.valid && exchange.seller.userId === userId) { | |||
| if (props.chat?._id) { | |||
| if (!exchange.valid && exchange.seller.user._id === userId) { | |||
| dispatch(validateExchange(exchange._id)); | |||
| } | |||
| } | |||
| @@ -57,7 +60,7 @@ const DirectChatNewMessage = (props) => { | |||
| } | |||
| setTypedValue(""); | |||
| }, | |||
| [typedValue, props.chat?.chat?._id, userId, props.interlucator.userId] | |||
| [typedValue, props.chat?._id, userId, props.interlocutor] | |||
| ); | |||
| const handleMessageSendSuccess = (newChatId) => { | |||
| history.replace(`${newChatId}`); | |||
| @@ -82,7 +85,7 @@ const DirectChatNewMessage = (props) => { | |||
| startNewChat({ | |||
| offerId, | |||
| message: typedValue, | |||
| interlucatorUserId: props.interlucator.userId, | |||
| interlocutorUserId: props.interlocutor._id, | |||
| handleMessageSendSuccess, | |||
| }) | |||
| ); | |||
| @@ -127,7 +130,7 @@ DirectChatNewMessage.propTypes = { | |||
| children: PropTypes.node, | |||
| chatId: PropTypes.any, | |||
| refreshChat: PropTypes.func, | |||
| interlucator: PropTypes.any, | |||
| interlocutor: PropTypes.any, | |||
| chat: PropTypes.any, | |||
| }; | |||
| @@ -36,12 +36,16 @@ const MiniChatColumn = () => { | |||
| const newChat = useMemo(() => { | |||
| if (location.state?.offerId) { | |||
| return { | |||
| interlocutorData: { | |||
| image: offer?.companyData?.image, | |||
| name: offer?.companyData?.company?.name, | |||
| }, | |||
| offerData: { | |||
| name: offer?.offer?.name, | |||
| participants: [ | |||
| { | |||
| image: offer?.user?.image, | |||
| company: { | |||
| name: offer?.user?.company?.name, | |||
| }, | |||
| }, | |||
| ], | |||
| offer: { | |||
| name: offer?.name, | |||
| }, | |||
| }; | |||
| } | |||
| @@ -72,7 +76,7 @@ const MiniChatColumn = () => { | |||
| <MiniChatCard | |||
| key={Date.now() * Math.random()} | |||
| chat={item} | |||
| selected={item?.chat?._id === selectedChat?.chat?._id} | |||
| selected={item?._id === selectedChat?._id} | |||
| /> | |||
| ); | |||
| })} | |||
| @@ -112,7 +112,7 @@ const Header = () => { | |||
| logo: true, | |||
| }, | |||
| }); | |||
| searchRef.current.value = ""; | |||
| if (searchRef?.current) searchRef.current.value = ""; | |||
| } | |||
| }; | |||
| @@ -26,7 +26,7 @@ const ItemDetails = (props) => { | |||
| ); | |||
| let isMyProfile = useMemo(() => { | |||
| if ( | |||
| offer?.offer?.userId?.toString() === userId?.toString() || | |||
| offer?.user?._id?.toString() === userId?.toString() || | |||
| props.isAdmin | |||
| ) | |||
| return true; | |||
| @@ -25,6 +25,8 @@ import { useMemo } from "react"; | |||
| import itemDetailsData from "../../../notFoundData/itemDetailsData"; | |||
| import { Tooltip } from "@mui/material"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | |||
| import { DIRECT_CHAT_PAGE, PROFILE_PAGE } from "../../../constants/pages"; | |||
| const ItemDetailsHeaderCard = (props) => { | |||
| const history = useHistory(); | |||
| @@ -33,7 +35,7 @@ const ItemDetailsHeaderCard = (props) => { | |||
| const { t } = useTranslation(); | |||
| const offer = useMemo(() => { | |||
| if (props.offer) { | |||
| if (props.offer.offer._id === routeMatch.params.offerId) { | |||
| if (props.offer._id === routeMatch.params.offerId) { | |||
| return props.offer; | |||
| } | |||
| } | |||
| @@ -43,18 +45,22 @@ const ItemDetailsHeaderCard = (props) => { | |||
| const { isMobile } = useIsMobile(); | |||
| const handleGoProfile = () => { | |||
| history.push(`/profile/${offer?.offer?.userId}`); | |||
| history.push(replaceInRoute(PROFILE_PAGE, { | |||
| profileId: props?.offer?.user?._id | |||
| })); | |||
| }; | |||
| const messageUser = (offer) => { | |||
| const chatItem = chats.find( | |||
| (item) => item.chat.offerId === offer?.offer?._id | |||
| (item) => item.offer._id === offer?._id | |||
| ); | |||
| if (chatItem !== undefined) { | |||
| history.push(`/messages/${chatItem.chat._id}`); | |||
| history.push(DIRECT_CHAT_PAGE, { | |||
| chatId: chatItem._id | |||
| }); | |||
| } else { | |||
| if (offer?.offer?.userId !== userId) { | |||
| if (offer?.user?._id !== userId) { | |||
| history.push(`/messages/newMessage`, { | |||
| offerId: offer?.offer?._id, | |||
| offerId: offer?._id, | |||
| }); | |||
| } | |||
| } | |||
| @@ -67,14 +73,14 @@ const ItemDetailsHeaderCard = (props) => { | |||
| <HeaderTop> | |||
| <OfferImage | |||
| src={getImageUrl( | |||
| offer?.companyData?.image ? offer.companyData.image : "", | |||
| offer?.user?.image ? offer.user.image : "", | |||
| variants.profileImage, | |||
| isMobile | |||
| )} | |||
| /> | |||
| <OfferDetails> | |||
| <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}> | |||
| {offer?.companyData?.company?.name} | |||
| {offer?.user?.company?.name} | |||
| </OfferTitle> | |||
| <PIBDetail offer={offer} isMyProfile={props.isMyProfile} /> | |||
| <CategoryDetail offer={offer} isMyProfile={props.isMyProfile} /> | |||
| @@ -16,7 +16,7 @@ const CategoryDetail = (props) => { | |||
| <LocationIcon /> | |||
| </DetailIcon> | |||
| <DetailText ismyprofile={props.isMyProfile}> | |||
| {offer.offer?.location?.city} | |||
| {offer?.location?.city} | |||
| </DetailText> | |||
| </DetailContainer> | |||
| ); | |||
| @@ -15,7 +15,7 @@ const PIBDetail = (props) => { | |||
| <PIB /> | |||
| </PIBIcon> | |||
| <DetailText isMyProfile={props.isMyProfile}> | |||
| {`${t("itemDetailsCard.PIB")}${offer?.companyData?.company?.PIB}`} | |||
| {`${t("itemDetailsCard.PIB")}${offer?.user?.company?.PIB}`} | |||
| </DetailText> | |||
| </DetailContainer> | |||
| ); | |||
| @@ -12,13 +12,13 @@ const StatisticDetails = (props) => { | |||
| const { t } = useTranslation(); | |||
| const offer = props.offer; | |||
| const percentOfSucceededExchanges = useMemo(() => { | |||
| if (offer?.companyData?.statistics?.exchanges?.succeeded === 0) { | |||
| if (offer?.user?.statistics?.exchanges?.succeeded === 0) { | |||
| return 0 + "%"; | |||
| } else { | |||
| return ( | |||
| Math.ceil( | |||
| (offer?.companyData?.statistics?.exchanges?.total / | |||
| offer?.companyData?.statistics?.exchanges?.succeeded) * | |||
| (offer?.user?.statistics?.exchanges?.total / | |||
| offer?.user?.statistics?.exchanges?.succeeded) * | |||
| 100 | |||
| ) + "%" | |||
| ); | |||
| @@ -30,13 +30,13 @@ const StatisticDetails = (props) => { | |||
| <BottomDetails> | |||
| <StatusText> | |||
| <StatusValue> | |||
| {offer?.companyData?.statistics?.publishes?.count} | |||
| {offer?.user?.statistics?.publishes?.count} | |||
| </StatusValue> | |||
| {t("itemDetailsCard.offers")} | |||
| </StatusText> | |||
| <StatusText> | |||
| <StatusValue> | |||
| {offer?.companyData?.statistics?.views?.count} | |||
| {offer?.user?.statistics?.views?.count} | |||
| </StatusValue> | |||
| {t("itemDetailsCard.totalViews")} | |||
| </StatusText> | |||
| @@ -31,10 +31,12 @@ const TooltipHeader = (props) => { | |||
| const handleClickCategory = () => { | |||
| props?.offers?.filters?.locations.clear(); | |||
| props?.offers?.filters?.subcategory.clear(); | |||
| props?.offers?.filters?.companies?.clear(); | |||
| props?.offers?.applyFilters(); | |||
| }; | |||
| const handleClickSubcategory = () => { | |||
| props?.offers?.filters?.locations.clear(); | |||
| props?.offers?.filters?.companies?.clear(); | |||
| props?.offers?.applyFilters(); | |||
| }; | |||
| const goBack = () => { | |||
| @@ -9,11 +9,13 @@ import OffersNotFound from "./OffersNotFound/OffersNotFound"; | |||
| const Offers = (props) => { | |||
| const offers = props?.offers; | |||
| const arrayForMapping = Array.apply(null, Array(4)).map(() => {}); | |||
| console.log("rerender") | |||
| return ( | |||
| <> | |||
| <OffersFilterButton /> | |||
| <OffersSearchField /> | |||
| <OffersNotFound /> | |||
| <OffersNotFound skeleton={props?.skeleton} /> | |||
| <OffersList | |||
| loading={props?.skeleton} | |||
| offers={offers} | |||
| @@ -21,6 +23,7 @@ const Offers = (props) => { | |||
| isGrid={props?.isGrid} | |||
| isUsers={props?.isUsers} | |||
| users={props?.users} | |||
| myOffers={props?.myOffers} | |||
| /> | |||
| {props?.skeleton && | |||
| arrayForMapping.map((item, index) => ( | |||
| @@ -1,6 +1,6 @@ | |||
| import React from "react"; | |||
| import PropTypes from "prop-types"; | |||
| import { useSelector } from "react-redux"; | |||
| import { useDispatch, useSelector } from "react-redux"; | |||
| import { selectTotalOffers } from "../../../../store/selectors/offersSelectors"; | |||
| import { OffersContainer } from "./OffersList.styled"; | |||
| import BigProfileCard from "../../../Cards/ProfileCard/BigProfileCard/BigProfileCard"; | |||
| @@ -9,13 +9,17 @@ import Paging from "../../../Paging/Paging"; | |||
| import { startChat } from "../../../../util/helpers/chatHelper"; | |||
| import { selectLatestChats } from "../../../../store/selectors/chatSelectors"; | |||
| import { selectUserId } from "../../../../store/selectors/loginSelectors"; | |||
| import { setRequester } from "../../../../store/actions/exchange/exchangeActions"; | |||
| import requesterStatus from "../../../../constants/requesterStatus"; | |||
| const OffersList = (props) => { | |||
| const totalOffers = useSelector(selectTotalOffers); | |||
| const chats = useSelector(selectLatestChats); | |||
| const userId = useSelector(selectUserId); | |||
| const dispatch = useDispatch(); | |||
| const offers = props?.offers; | |||
| const messageOneUser = (offer) => { | |||
| dispatch(setRequester(requesterStatus.NOONE)); | |||
| startChat(chats, offer, userId); | |||
| }; | |||
| return ( | |||
| @@ -35,7 +39,7 @@ const OffersList = (props) => { | |||
| offer={item} | |||
| halfwidth={props?.isGrid} | |||
| messageUser={messageOneUser} | |||
| isMyOffer={item?.userId === userId || props?.isAdmin} | |||
| isMyOffer={item?.user._id === userId || props?.isAdmin} | |||
| isAdmin={props?.isAdmin} | |||
| /> | |||
| ); | |||
| @@ -52,10 +52,12 @@ const EditCategory = (props) => { | |||
| // }; | |||
| const closeModalHandler = () => { | |||
| console.log("closed") | |||
| dispatch(closeModal()); | |||
| }; | |||
| const handleApiResponseSuccess = () => { | |||
| console.log("succes") | |||
| if (clickedOnNext) { | |||
| formik.resetForm(); | |||
| inputRef.current.focus(); | |||
| @@ -9,6 +9,8 @@ import HeaderPopover from "../HeaderPopover/HeaderPopover"; | |||
| import PropTypes from "prop-types"; | |||
| import { makeErrorToastMessage } from "../../../store/utils/makeToastMessage"; | |||
| import { EyeIcon } from "./MyMessages.styled"; | |||
| import { DIRECT_CHAT_PAGE } from "../../../constants/pages"; | |||
| import { replaceInRoute } from "../../../util/helpers/routeHelpers"; | |||
| export const MyMessages = (props) => { | |||
| const { t } = useTranslation(); | |||
| @@ -20,13 +22,16 @@ export const MyMessages = (props) => { | |||
| const convertMessages = (messages) => { | |||
| return messages | |||
| .map((item) => ({ | |||
| src: item.interlocutorData.image, | |||
| title: item.interlocutorData.name, | |||
| onClick: () => goToMessage(item?.chat?._id), | |||
| text: "Proizvod: ", | |||
| bigText: item.offerData.name, | |||
| })) | |||
| .map((item) => { | |||
| let interlocutor = userId === item.participants[0]._id ? 1 : 0; | |||
| return { | |||
| src: item.participants[interlocutor]?.image, | |||
| title: item.participants[interlocutor]?.company?.name, | |||
| onClick: () => goToMessage(item?._id), | |||
| text: "Proizvod: ", | |||
| bigText: item.offer.name, | |||
| }; | |||
| }) | |||
| .slice(0, 2); | |||
| }; | |||
| @@ -50,7 +55,11 @@ export const MyMessages = (props) => { | |||
| } | |||
| }; | |||
| const goToMessage = (chatId) => { | |||
| history.push(`/messages/${chatId}`); | |||
| history.push( | |||
| replaceInRoute(DIRECT_CHAT_PAGE, { | |||
| chatId, | |||
| }) | |||
| ); | |||
| props.closePopover(); | |||
| }; | |||
| return ( | |||
| @@ -54,6 +54,12 @@ const ProfileOffers = (props) => { | |||
| const dispatch = useDispatch(); | |||
| const searchRef = useRef(null); | |||
| useEffect(() => { | |||
| return () => { | |||
| dispatch(setProfileOffers([])); | |||
| }; | |||
| }, []); | |||
| useEffect(() => { | |||
| dispatch( | |||
| fetchProfileOffers({ | |||
| @@ -62,6 +68,7 @@ const ProfileOffers = (props) => { | |||
| sortOption: sortOption, | |||
| append: isMobile && append, | |||
| page: paging.currentPage, | |||
| isAdmin: props?.isAdmin, | |||
| }) | |||
| ); | |||
| setAppend(true); | |||
| @@ -107,14 +114,14 @@ const ProfileOffers = (props) => { | |||
| <ProfileOffersHeaderSkeleton /> | |||
| {isMobile ? ( | |||
| <SkeletonContainer> | |||
| <SkeletonOfferCard vertical /> | |||
| <SkeletonOfferCard vertical /> | |||
| <SkeletonOfferCard vertical /> | |||
| <SkeletonOfferCard vertical skeleton /> | |||
| <SkeletonOfferCard vertical skeleton /> | |||
| <SkeletonOfferCard vertical skeleton /> | |||
| </SkeletonContainer> | |||
| ) : ( | |||
| <> | |||
| {arrayForMapping.map((item, index) => ( | |||
| <SkeletonOfferCard key={index} /> | |||
| <SkeletonOfferCard key={index} skeleton /> | |||
| ))} | |||
| </> | |||
| )} | |||
| @@ -20,7 +20,6 @@ import { useRouteMatch } from "react-router-dom"; | |||
| import { | |||
| fetchReviews, | |||
| setReviews, | |||
| fetchReviewsAsAdmin, | |||
| } from "../../store/actions/review/reviewActions"; | |||
| import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | |||
| import SkeletonUserReviews from "./SkeletonUserReviews/SkeletonUserReviews"; | |||
| @@ -54,15 +53,10 @@ const UserReviews = (props) => { | |||
| ) | |||
| ); | |||
| useEffect(() => { | |||
| let idProfile = routeMatch.params?.profileId; | |||
| if (idProfile) { | |||
| if (props.isAdmin) { | |||
| dispatch(fetchReviewsAsAdmin(idProfile)); | |||
| } else { | |||
| dispatch(fetchReviews(idProfile)); | |||
| } | |||
| dispatch(fetchReviews(idProfile)); | |||
| } | |||
| // if (props.profileReviews && routeMatch.params?.profileId) { | |||
| @@ -1,5 +1,5 @@ | |||
| export default { | |||
| NOONE: 0, | |||
| ME: 1, | |||
| INTERLUCATOR: 2 | |||
| interlocutor: 2 | |||
| } | |||
| @@ -21,11 +21,11 @@ const useCategoryFilter = () => { | |||
| // Set selected category locally in state | |||
| // If second argument is true, then selected category is also updated in redux | |||
| const setSelectedCategory = (category, immediateApply = false) => { | |||
| const setSelectedCategory = (category) => { | |||
| setSelectedCategoryLocally(category); | |||
| if (immediateApply) { | |||
| dispatch(setFilteredCategory(category)); | |||
| } | |||
| // if (immediateApply) { | |||
| // dispatch(setFilteredCategory(category)); | |||
| // } | |||
| }; | |||
| // Find category object by providing its name | |||
| @@ -4,7 +4,7 @@ import useCompaniesFilter from "./useCompanyFilter"; | |||
| import useLocationsFilter from "./useLocationsFilter"; | |||
| import useSubcategoryFilter from "./useSubcategoryFilter"; | |||
| const useFilters = (clearAll = false, applyFilters) => { | |||
| const useFilters = (clearAll = false, applyFilters = () => {}) => { | |||
| const category = useCategoryFilter(); | |||
| const subcategory = useSubcategoryFilter(applyFilters); | |||
| const locations = useLocationsFilter(); | |||
| @@ -9,6 +9,10 @@ import useSearch from "./useSearch"; | |||
| import useSorting from "./useSorting"; | |||
| const useMyOffers = () => { | |||
| const applyFilters = () => { | |||
| paging.changePage(1); | |||
| setAppliedFilters(false); | |||
| }; | |||
| const filters = useFilters(true); | |||
| const sorting = useSorting(); | |||
| const mineOffers = useSelector(selectMineOffers); | |||
| @@ -20,6 +24,10 @@ const useMyOffers = () => { | |||
| useEffect(() => { | |||
| dispatch(fetchMineOffers()); | |||
| return () => { | |||
| filters.clear(); | |||
| } | |||
| }, []); | |||
| const clear = () => { | |||
| @@ -27,11 +35,6 @@ const useMyOffers = () => { | |||
| setAppliedFilters(false); | |||
| } | |||
| const apply = () => { | |||
| paging.changePage(1); | |||
| setAppliedFilters(false); | |||
| }; | |||
| // Filter, search and sort all mine offers | |||
| const allOffersToShow = useMemo(() => { | |||
| let mineOffersFiltered = [...mineOffers]; | |||
| @@ -100,7 +103,7 @@ const useMyOffers = () => { | |||
| search, | |||
| allOffersToShow, | |||
| totalOffers, | |||
| apply, | |||
| applyFilters, | |||
| clear, | |||
| }; | |||
| }; | |||
| @@ -140,17 +140,17 @@ const useOffers = () => { | |||
| const applyFilters = () => { | |||
| setFiltersCleared(true); | |||
| }; | |||
| const clearFiltersAndApply = () => { | |||
| clear(); | |||
| setFiltersCleared(true); | |||
| }; | |||
| const applySorting = () => { | |||
| paging.changePage(1); | |||
| setFiltersCleared(true); | |||
| }; | |||
| const applySearch = () => { | |||
| paging.changePage(1); | |||
| setFiltersCleared(true); | |||
| @@ -172,7 +172,6 @@ const useOffers = () => { | |||
| const clearOnlyFiltersAndApply = () => { | |||
| filters.clear(); | |||
| paging.changePage(1); | |||
| setFiltersCleared(true); | |||
| }; | |||
| @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux"; | |||
| import { setFilteredSubcategory } from "../../store/actions/filters/filtersActions"; | |||
| import { selectSelectedSubcategory } from "../../store/selectors/filtersSelectors"; | |||
| const useSubcategoryFilter = (applyFilters) => { | |||
| const useSubcategoryFilter = (applyFilters = () => {}) => { | |||
| const selectedSubcategory = useSelector(selectSelectedSubcategory); | |||
| const dispatch = useDispatch(); | |||
| const initialOption = { | |||
| @@ -31,12 +31,16 @@ const useSubcategoryFilter = (applyFilters) => { | |||
| const setSelectedSubcategory = (subcategory) => { | |||
| setSelectedSubcategoryLocally(subcategory); | |||
| // if (immediateApply) { | |||
| dispatch(setFilteredSubcategory(subcategory)); | |||
| dispatch(setFilteredSubcategory(subcategory)); | |||
| // } | |||
| }; | |||
| const apply = () => { | |||
| dispatch(setFilteredSubcategory(selectedSubcategoryLocally)); | |||
| if ( | |||
| Number(selectedSubcategory?._id) !== | |||
| Number(selectedSubcategoryLocally?._id) | |||
| ) | |||
| dispatch(setFilteredSubcategory(selectedSubcategoryLocally)); | |||
| }; | |||
| const clear = () => { | |||
| @@ -1,19 +0,0 @@ | |||
| // import useQueryString from "./useOffers/useQueryString"; | |||
| export const useSearch = () => { | |||
| // const queryStringHook = useQueryString(); | |||
| const searchOffers = () => { | |||
| // if (searchString?.length !== 0) { | |||
| // queryStringHook.appendToQueryString("oname", searchString); | |||
| // } else { | |||
| // const newQueryString = new URLSearchParams(queryStringHook.queryString); | |||
| // if (newQueryString.has("oname")) { | |||
| // queryStringHook.deleteFromQueryString("oname"); | |||
| // } | |||
| // } | |||
| }; | |||
| return { | |||
| searchOffers, | |||
| }; | |||
| }; | |||
| @@ -1,4 +1,9 @@ | |||
| export default (informations, offer, images) => ({ | |||
| images: informations?.image || offer?.images || images, | |||
| condition: informations?.condition || offer?.condition || "default", | |||
| condition: | |||
| informations?.condition || | |||
| (typeof offer?.condition === "string" && | |||
| offer?.condition?.charAt(0)?.toUpperCase() + | |||
| offer?.condition?.slice(1)) || | |||
| "default", | |||
| }); | |||
| @@ -2,28 +2,6 @@ import i18next from "i18next"; | |||
| import defaultImage from "../constants/defaultImage"; | |||
| export default { | |||
| companyData: { | |||
| company: { | |||
| PIB: i18next.t("notFoundData.PIB"), | |||
| name: i18next.t("notFoundData.companyName") | |||
| }, | |||
| image: defaultImage, | |||
| lastThreeReviews: [], | |||
| statistics: { | |||
| exchanges: { | |||
| failed: 0, | |||
| succeeded: 0, | |||
| total: 0, | |||
| }, | |||
| publishes: { | |||
| count: 0, | |||
| }, | |||
| views: { | |||
| count: 0, | |||
| } | |||
| } | |||
| }, | |||
| offer: { | |||
| category: { | |||
| name: i18next.t("notFoundData.categoryName") | |||
| }, | |||
| @@ -43,5 +21,4 @@ export default { | |||
| count: 0 | |||
| }, | |||
| _created: new Date().toString() | |||
| } | |||
| } | |||
| @@ -17,7 +17,6 @@ const HomePage = () => { | |||
| const toggleFilters = () => { | |||
| setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened); | |||
| }; | |||
| return ( | |||
| <HomePageContainer> | |||
| <MainLayout | |||
| @@ -11,6 +11,7 @@ import { | |||
| import UserReviews from "../../components/UserReviews/UserReviews"; | |||
| import { selectOffer } from "../../store/selectors/offersSelectors"; | |||
| import ProfileMini from "../../components/ProfileMini/ProfileMini"; | |||
| import history from "../../store/utils/history"; | |||
| const ItemDetailsPage = (props) => { | |||
| const dispatch = useDispatch(); | |||
| @@ -19,7 +20,9 @@ const ItemDetailsPage = (props) => { | |||
| const offerId = props.match.params.offerId; | |||
| useEffect(() => { | |||
| dispatch(fetchOneOffer(offerId)); | |||
| const view = history?.location?.state?.view; | |||
| console.log(view) | |||
| dispatch(fetchOneOffer({ offerId, view })); | |||
| () => dispatch(clearSelectedOffer()); | |||
| }, []); | |||
| @@ -166,7 +166,7 @@ export default { | |||
| setFingerprint: "/affiliate/fingerprint", | |||
| }, | |||
| offers: { | |||
| getOneOffer: "offers", | |||
| getOneOffer: "offers/{offerId}", | |||
| getOffers: "offers", | |||
| getFeaturedOffers: "offers/featured", | |||
| addOffer: "/users/{userId}/offers", | |||
| @@ -176,13 +176,14 @@ export default { | |||
| locations: "locations", | |||
| mineOffers: "users", | |||
| profileOffers: "users/{userId}/offers", | |||
| profileOffersAsAdmin: "admin/users/{userId}/offers", | |||
| removeOffer: "/users/{userId}/offers/{offerId}", | |||
| removeOfferAsAdmin: "/admin/offers/{offerId}", | |||
| pinOffer: "admin/offers/{id}/pin", | |||
| }, | |||
| chat: { | |||
| getChat: "chats", | |||
| getUserChats: "users/{userId}/chat", | |||
| getUserChats: "users/{userId}/chats", | |||
| getOneChat: "users/{userId}/chats/{chatId}", | |||
| createChat: "users/{userId}/offers/{offerId}/chat", | |||
| sendMessage: "chats", | |||
| @@ -190,7 +191,7 @@ export default { | |||
| exchange: { | |||
| getExchange: "exchanges", | |||
| validateExchange: "exchanges", | |||
| acceptExchange: "users/{userId}/exchanges/{exchangeId}/accept" | |||
| acceptExchange: "users/{userId}/exchanges/{exchangeId}/accept", | |||
| }, | |||
| reviews: { | |||
| getUserReviews: "/users/{userId}/reviews", | |||
| @@ -1,5 +1,5 @@ | |||
| import axios from "axios"; | |||
| import queryString from "qs"; | |||
| // import queryString from "qs"; | |||
| const request = axios.create({ | |||
| // baseURL: "http://192.168.88.150:3001/", // DJOLE | |||
| @@ -13,8 +13,8 @@ const request = axios.create({ | |||
| "Content-Type": "application/json", | |||
| }, | |||
| // withCredentials: true, | |||
| paramsSerializer: (params) => | |||
| queryString.stringify(params, { arrayFormat: "comma" }), | |||
| // paramsSerializer: (params) => | |||
| // queryString.stringify(params, { arrayFormat: "comma" }), | |||
| }); | |||
| export const getRequest = (url, params = null, options = null) => { | |||
| @@ -18,8 +18,12 @@ export const attemptFetchFeaturedOffers = (payload) => { | |||
| return getRequest(apiEndpoints.offers.getOffers); | |||
| }; | |||
| export const attemptFetchOneOffer = (payload) => { | |||
| const url = `${apiEndpoints.offers.getOneOffer}/${payload}`; | |||
| return getRequest(url); | |||
| return getRequest( | |||
| replaceInUrl(apiEndpoints.offers.getOneOffer, { | |||
| offerId: payload.offerId, | |||
| }), | |||
| payload.queryObject | |||
| ); | |||
| }; | |||
| export const attemptFetchMoreOffers = (page, payload) => { | |||
| if (payload) | |||
| @@ -42,6 +46,13 @@ export const attemptFetchProfileOffers = (userId, queryString = "") => { | |||
| }) + `?${queryString}` | |||
| ); | |||
| }; | |||
| export const attemptFetchProfileOffersAsAdmin = (userId, queryString = "") => { | |||
| return getRequest( | |||
| replaceInUrl(apiEndpoints.offers.profileOffersAsAdmin, { | |||
| userId: userId, | |||
| }) + `?${queryString}` | |||
| ); | |||
| }; | |||
| export const attemptRemoveOffer = (payload, offerId) => { | |||
| return deleteRequest( | |||
| replaceInUrl(apiEndpoints.offers.removeOffer, { | |||
| @@ -1,8 +1,8 @@ | |||
| import io from "socket.io-client"; | |||
| export const socket = io("https://trampa-api-test.dilig.net/", { | |||
| // export const socket = io("http://localhost:3001/", { | |||
| // export const socket = io(process.env.REACT_APP_BASE_API_URL, { | |||
| // export const socket = io("http://localhost:3001/", { | |||
| // export const socket = io(process.env.REACT_APP_BASE_API_URL, { | |||
| transports: ["websocket"], | |||
| reconnectionAttempts: 5, | |||
| }); | |||
| @@ -20,25 +20,34 @@ export const sendMessage = (chatId, userId, text, receiverUserId) => { | |||
| chatId, | |||
| receiverUserId, | |||
| message: { | |||
| userId, | |||
| user: { | |||
| _id: userId, | |||
| }, | |||
| text, | |||
| }, | |||
| }); | |||
| }; | |||
| export const acceptExchangeSocket = (chatId, userId, receiverUserId, callbackFn) => { | |||
| export const acceptExchangeSocket = ( | |||
| chatId, | |||
| userId, | |||
| receiverUserId, | |||
| callbackFn | |||
| ) => { | |||
| socket.emit("private_message", { | |||
| chatId, | |||
| receiverUserId, | |||
| message: { | |||
| userId, | |||
| user: { | |||
| _id: userId | |||
| }, | |||
| isAcceptRequest: true, | |||
| text: "" | |||
| text: "", | |||
| }, | |||
| }); | |||
| callbackFn(); | |||
| }; | |||
| export const addMesageListener = (listener) => { | |||
| export const addMessageListener = (listener) => { | |||
| socket.on("private_message", (data) => | |||
| listener({ | |||
| succeed: true, | |||
| @@ -40,6 +40,7 @@ export default ({ dispatch }) => | |||
| // If refresh token is expired, log out user | |||
| if (new Date() > new Date(refreshTokenDecoded?.exp * 1000)) { | |||
| dispatch(logoutUser()); | |||
| return Promise.resolve(response) | |||
| } | |||
| // If access token is expired, refresh access token | |||
| if (new Date() > new Date(jwtTokenDecoded.exp * 1000)) { | |||
| @@ -33,7 +33,7 @@ function setChats(state, action) { | |||
| function setChatsTotal(state, action) { | |||
| return { | |||
| ...state, | |||
| total: action.payload | |||
| total: action.payload, | |||
| }; | |||
| } | |||
| function setOneChat(state, action) { | |||
| @@ -47,26 +47,18 @@ function clearChats() { | |||
| } | |||
| function addNewMessage(state, { payload }) { | |||
| let allChats = [...state.latestChats]; | |||
| let chat = allChats.find((item) => item.chat._id === payload._id); | |||
| let chat = allChats.find((item) => item._id === payload._id); | |||
| if (chat) { | |||
| chat = { | |||
| ...chat, | |||
| chat: { | |||
| ...chat.chat, | |||
| messages: [...chat.chat.messages, payload.message], | |||
| }, | |||
| messages: [...chat.messages, payload.message], | |||
| }; | |||
| allChats = allChats.filter((item) => item.chat._id !== chat.chat._id); | |||
| allChats = allChats.filter((item) => item._id !== chat._id); | |||
| allChats = [chat, ...allChats]; | |||
| } | |||
| let newSelectedChat = {}; | |||
| if (state.selectedChat.chat) { | |||
| newSelectedChat = { ...state.selectedChat }; | |||
| if (newSelectedChat.chat._id === chat.chat._id) | |||
| newSelectedChat = { ...newSelectedChat, chat: chat.chat }; | |||
| } else { | |||
| newSelectedChat = { ...chat }; | |||
| } | |||
| if (state.selectedChat.chat) newSelectedChat = { ...state.selectedChat }; | |||
| newSelectedChat = { ...chat }; | |||
| return { | |||
| ...state, | |||
| latestChats: [...allChats], | |||
| @@ -60,8 +60,8 @@ function* fetchChats({ payload }) { | |||
| queryString: queryString, | |||
| }); | |||
| yield call(console.dir, data); | |||
| yield put(setChats([...data.data.chatsWithData])); | |||
| yield put(setChatsTotal(data.data.total)) | |||
| yield put(setChats([...data.data.chats])); | |||
| yield put(setChatsTotal(data.data.total)); | |||
| yield put(fetchChatsSuccess()); | |||
| } catch (e) { | |||
| yield put(fetchChatsError()); | |||
| @@ -73,7 +73,7 @@ function* fetchHeaderChats() { | |||
| try { | |||
| const userId = yield select(selectUserId); | |||
| const data = yield call(attemptFetchHeaderChats, userId); | |||
| yield put(setChats([...data.data.chatsWithData])); | |||
| yield put(setChats([...data.data.chats])); | |||
| yield put(fetchHeaderChatsSuccess()); | |||
| } catch (e) { | |||
| yield put(fetchHeaderChatsError()); | |||
| @@ -88,22 +88,15 @@ function* fetchOneChat(payload) { | |||
| userId, | |||
| }); | |||
| let requester = requesterStatus.NOONE; | |||
| chatData.data.chat.messages.forEach((item) => { | |||
| chatData.data.messages.forEach((item) => { | |||
| if (requester !== requesterStatus.NOONE) return; | |||
| if (item.isAcceptRequest) { | |||
| if (item.userId === userId) requester = requesterStatus.ME; | |||
| else requester = requesterStatus.INTERLUCATOR; | |||
| if (item.user._id === userId) requester = requesterStatus.ME; | |||
| else requester = requesterStatus.interlocutor; | |||
| } | |||
| }); | |||
| const chat = { | |||
| chat: chatData.data.chat, | |||
| offer: { | |||
| offer: { ...chatData.data.offer, images: [chatData.data.offer.image] }, | |||
| }, | |||
| interlocutor: chatData.data.interlocutorData, | |||
| }; | |||
| yield put(setRequester(requester)); | |||
| yield put(setOneChat(chat)); | |||
| yield put(setOneChat(chatData.data)); | |||
| yield put(fetchOneChatSuccess()); | |||
| } catch (e) { | |||
| yield put(fetchOneChatError()); | |||
| @@ -120,7 +113,7 @@ function* sendMessage(payload) { | |||
| const exchange = yield select(selectExchange); | |||
| const userId = yield select(selectUserId); | |||
| yield call(attemptSendMessage, payload.payload.chatId, messageObject); | |||
| if (chat?.offer?.offer?.userId === userId && exchange.valid === false) { | |||
| if (chat?.offer?.user._id === userId && exchange.valid === false) { | |||
| yield put(validateExchange(exchange._id)); | |||
| } | |||
| yield call(fetchChats); | |||
| @@ -142,8 +135,8 @@ function* startNewChat(payload) { | |||
| }); | |||
| const queryString = yield select(selectQueryString); | |||
| const data = yield call(attemptFetchChats, { userId, queryString }); | |||
| yield put(setChats([...data.data.chatsWithData])); | |||
| yield put(setChatsTotal(data.data.total)) | |||
| yield put(setChats([...data.data.chats])); | |||
| yield put(setChatsTotal(data.data.total)); | |||
| const newChatId = newChatData.data.chatId; | |||
| yield put(startNewChatSuccess()); | |||
| yield call( | |||
| @@ -151,13 +144,15 @@ function* startNewChat(payload) { | |||
| newChatData.data.chatId, | |||
| userId, | |||
| payload.payload.message, | |||
| payload.payload.interlucatorUserId | |||
| payload.payload.interlocutorUserId | |||
| ); | |||
| yield put( | |||
| addNewMessage({ | |||
| _id: newChatId, | |||
| message: { | |||
| userId, | |||
| user: { | |||
| _id: userId | |||
| }, | |||
| text: payload.payload.message, | |||
| _created: new Date().toISOString(), | |||
| }, | |||
| @@ -44,10 +44,13 @@ function* validateExchange(payload) { | |||
| } | |||
| function* acceptExchange({ payload }) { | |||
| try { | |||
| console.log("accept salje i prima 2 POZVANA ACCEPT SAGA") | |||
| const userId = yield select(selectUserId); | |||
| yield call(attemptAcceptExchange, userId, payload.exchangeId); | |||
| const data = yield call(attemptFetchExchange, payload.exchangeId); | |||
| yield put(setExchange(data.data)); | |||
| if (payload.handleApiResponseSuccess) | |||
| yield call(payload.handleApiResponseSuccess); | |||
| yield put(acceptExchangeSuccess()); | |||
| } catch (e) { | |||
| yield put(acceptExchangeError()); | |||
| @@ -5,6 +5,7 @@ import { | |||
| attemptFetchFeaturedOffers, | |||
| attemptFetchOffers, | |||
| attemptFetchOneOffer, | |||
| attemptFetchProfileOffersAsAdmin, | |||
| attemptPinOffer, | |||
| attemptRemoveOffer, | |||
| attemptRemoveOfferAsAdmin, | |||
| @@ -172,7 +173,14 @@ function* createOffer(payload) { | |||
| const offerData = payload.payload.offerData; | |||
| const formData = new FormData(); | |||
| formData.append("category[name]", offerData.category.name); | |||
| formData.append("condition", offerData.condition); | |||
| formData.append( | |||
| "condition", | |||
| offerData.condition === "Novo" | |||
| ? "novo" | |||
| : offerData.condition === "Polovno" | |||
| ? "polovno" | |||
| : "kao novo" | |||
| ); | |||
| formData.append("description", offerData.description); | |||
| // formData.append("file", JSON.stringify(offerData.images)) | |||
| for (var i = 0; i < offerData.images.length; i++) { | |||
| @@ -195,7 +203,17 @@ function* createOffer(payload) { | |||
| function* fetchOneOffer(payload) { | |||
| try { | |||
| const data = yield call(attemptFetchOneOffer, payload.payload); | |||
| let offerId = payload.payload; | |||
| console.log("sagabb", payload.payload); | |||
| const queryObject = new URLSearchParams(); | |||
| if (typeof payload.payload === "object") { | |||
| offerId = payload.payload.offerId; | |||
| queryObject.set("view", "true"); | |||
| } | |||
| const data = yield call(attemptFetchOneOffer, { | |||
| offerId, | |||
| queryObject, | |||
| }); | |||
| if (!data?.data) throw new Error(); | |||
| yield put(fetchOneOfferSuccess(data?.data)); | |||
| } catch (e) { | |||
| @@ -214,6 +232,7 @@ function* fetchMineOffers() { | |||
| const userId = yield select(selectUserId); | |||
| const data = yield call(attemptFetchProfileOffers, userId); | |||
| yield put(setMineOffers(data.data.offers)); | |||
| yield put(setTotalOffers(data.data.total)); | |||
| yield put(fetchMineOffersSuccess()); | |||
| } catch (e) { | |||
| yield put(fetchMineOffersError()); | |||
| @@ -253,11 +272,20 @@ function* fetchProfileOffers(payload) { | |||
| queryString = yield select(selectQueryString); | |||
| } | |||
| console.log(queryString.toString()); | |||
| const data = yield call( | |||
| attemptFetchProfileOffers, | |||
| userId, | |||
| convertQueryStringForBackend(queryString) | |||
| ); | |||
| let data; | |||
| if (payload.payload.isAdmin) { | |||
| data = yield call( | |||
| attemptFetchProfileOffersAsAdmin, | |||
| userId, | |||
| convertQueryStringForBackend(queryString) | |||
| ); | |||
| } else { | |||
| data = yield call( | |||
| attemptFetchProfileOffers, | |||
| userId, | |||
| convertQueryStringForBackend(queryString) | |||
| ); | |||
| } | |||
| if (payload.payload.append) { | |||
| yield put(addProfileOffers(data.data.offers)); | |||
| } else { | |||
| @@ -311,7 +339,7 @@ function* editOffer(payload) { | |||
| const offerData = payload.payload.offerData; | |||
| const formData = new FormData(); | |||
| formData.append("category[name]", offerData.category.name); | |||
| formData.append("condition", offerData.condition); | |||
| formData.append("condition", offerData.condition.toLowerCase()); | |||
| formData.append("description", offerData.description); | |||
| // const oldImages = []; | |||
| for (var i = 0; i < offerData.images.length; i++) { | |||
| @@ -28,7 +28,7 @@ function* fetchReviews(payload) { | |||
| try { | |||
| console.log(payload); | |||
| const data = yield call(attemptFetchReview, payload.payload); | |||
| yield put(setReviews([...data.data].reverse())); | |||
| yield put(setReviews([...data.data.reviews].reverse())); | |||
| yield put(fetchReviewsSuccess()); | |||
| } catch (e) { | |||
| yield put(fetchReviewsError()); | |||
| @@ -1,13 +1,15 @@ | |||
| import { DIRECT_CHAT_PAGE } from "../../constants/pages"; | |||
| import history from "../../store/utils/history"; | |||
| import { replaceInRoute } from "./routeHelpers"; | |||
| export const startChat = (chats, offer, userId) => { | |||
| const chatItem = chats.find( | |||
| (item) => item.chat.offerId === offer?._id && offer?.userId !== userId | |||
| (item) => item.offer?._id === offer?._id && offer?.user?._id !== userId | |||
| ); | |||
| if (chatItem !== undefined) { | |||
| history.push(`/messages/${chatItem.chat._id}`); | |||
| history.push(replaceInRoute(DIRECT_CHAT_PAGE, { chatId: chatItem?._id })); | |||
| } else { | |||
| if (offer?.userId !== userId) { | |||
| if (offer?.user?._id !== userId) { | |||
| history.push(`/messages/newMessage`, { | |||
| offerId: offer?._id, | |||
| }); | |||