| MarketplaceIcon, | MarketplaceIcon, | ||||
| } from "./MarketplaceButton.styled"; | } from "./MarketplaceButton.styled"; | ||||
| import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
| import history from "../../../../store/utils/history"; | |||||
| const MarketplaceButton = () => { | const MarketplaceButton = () => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); |
| const routeToItem = () => { | const routeToItem = () => { | ||||
| props.navigateToChat(chat?._id); | props.navigateToChat(chat?._id); | ||||
| }; | }; | ||||
| console.log(chat) | |||||
| const interlocutor = useMemo(() => { | const interlocutor = useMemo(() => { | ||||
| return userId === chat?.participants[0]._id ? 1 : 0; | return userId === chat?.participants[0]._id ? 1 : 0; | ||||
| }, [userId, chat]); | }, [userId, chat]); |
| const handleSelectCategory = (category) => { | const handleSelectCategory = (category) => { | ||||
| filters.category.setSelectedCategory(category); | filters.category.setSelectedCategory(category); | ||||
| filters.subcategory.setSelectedSubcategory({}); | filters.subcategory.setSelectedSubcategory({}); | ||||
| console.log("category 1") | |||||
| props.offers.applyFilters(); | props.offers.applyFilters(); | ||||
| }; | }; | ||||
| console.log(props); | |||||
| useImperativeHandle(ref, () => ({ | useImperativeHandle(ref, () => ({ | ||||
| closeSection: () => { | closeSection: () => { | ||||
| setIsOpened(false); | setIsOpened(false); |
| const [isOpened, setIsOpened] = useState(false); | const [isOpened, setIsOpened] = useState(false); | ||||
| const filters = props.filters; | const filters = props.filters; | ||||
| console.log(props); | |||||
| const allLocations = useMemo( | const allLocations = useMemo( | ||||
| () => filters.locations.allLocations || [], | () => filters.locations.allLocations || [], | ||||
| [filters.locations] | [filters.locations] |
| const handleSelectSubcategory = (subcategory) => { | const handleSelectSubcategory = (subcategory) => { | ||||
| filters.subcategory.setSelectedSubcategory(subcategory, !props.myOffers); | filters.subcategory.setSelectedSubcategory(subcategory, !props.myOffers); | ||||
| console.log("props.offers") | |||||
| // if (props.myOffers) props.offers?.applyFilters(); | // if (props.myOffers) props.offers?.applyFilters(); | ||||
| }; | }; | ||||
| const [isOpened, setIsOpened] = useState(false); | const [isOpened, setIsOpened] = useState(false); | ||||
| const handleDelete = (item) => { | const handleDelete = (item) => { | ||||
| props.setItemsSelected([...props.filters.filter((p) => p !== item)]); | props.setItemsSelected([...props.filters.filter((p) => p !== item)]); | ||||
| console.log("dropdown 1") | |||||
| props.offers.applyFilters(); | props.offers.applyFilters(); | ||||
| }; | }; | ||||
| const handleOpen = () => { | const handleOpen = () => { |
| const [isOpened, setIsOpened] = useState(false); | const [isOpened, setIsOpened] = useState(false); | ||||
| const [toSearch, setToSearch] = useState(""); | const [toSearch, setToSearch] = useState(""); | ||||
| const { data } = props; | const { data } = props; | ||||
| console.log(props); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| setDataToShow([...data]); | setDataToShow([...data]); | ||||
| props.setItemsSelected([...props.filters, item]); | props.setItemsSelected([...props.filters, item]); | ||||
| props.offers.applyFilters(); | props.offers.applyFilters(); | ||||
| } | } | ||||
| console.log("filter checkbox 1"); | |||||
| } | } | ||||
| }; | }; | ||||
| const handleOpen = () => { | const handleOpen = () => { |
| props.offers.applyFilters(); | props.offers.applyFilters(); | ||||
| } | } | ||||
| } | } | ||||
| console.log("dropdown 2") | |||||
| }; | }; | ||||
| const setDropdownHandler = () => { | const setDropdownHandler = () => { |
| const [images, setImages] = useState([]); | const [images, setImages] = useState([]); | ||||
| const [imagesCarouselModal, setImagesCarouselModal] = useState(false); | const [imagesCarouselModal, setImagesCarouselModal] = useState(false); | ||||
| console.log(offer); | |||||
| useEffect(() => { | useEffect(() => { | ||||
| if (props?.offer?.images) { | if (props?.offer?.images) { | ||||
| }); | }); | ||||
| } | } | ||||
| }, [props?.offer?.images]); | }, [props?.offer?.images]); | ||||
| console.log(images); | |||||
| const date = formatDateLocale(new Date(offer?._created)); | const date = formatDateLocale(new Date(offer?._created)); | ||||
| const onModalClose = () => { | const onModalClose = () => { | ||||
| setImagesCarouselModal(false); | setImagesCarouselModal(false); | ||||
| }; | }; | ||||
| console.log(props); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <Details | <Details |
| import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
| import { acceptExchangeSocket } from "../../../../socket/socket"; | import { acceptExchangeSocket } from "../../../../socket/socket"; | ||||
| import { useDispatch, useSelector } from "react-redux"; | 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 { addNewMessage } from "../../../../store/actions/chat/chatActions"; | ||||
| import { convertLocalDateToUTCDate } from "../../../../util/helpers/dateHelpers"; | import { convertLocalDateToUTCDate } from "../../../../util/helpers/dateHelpers"; | ||||
| import requesterStatus from "../../../../constants/requesterStatus"; | import requesterStatus from "../../../../constants/requesterStatus"; | ||||
| addNewMessage({ | addNewMessage({ | ||||
| _id: props.chatId, | _id: props.chatId, | ||||
| message: { | message: { | ||||
| userId: props.userId, | |||||
| user: { | |||||
| _id: props.userId, | |||||
| }, | |||||
| text: "", | text: "", | ||||
| isAcceptRequest: true, | isAcceptRequest: true, | ||||
| _created: convertLocalDateToUTCDate(new Date()), | _created: convertLocalDateToUTCDate(new Date()), | ||||
| onClick={handleAcceptExchange} | onClick={handleAcceptExchange} | ||||
| disabled={props.haveIAccepted} | disabled={props.haveIAccepted} | ||||
| > | > | ||||
| {props.haveIAccepted ? t("messages.acceptedRequest") : t("messages.acceptRequest")} | |||||
| {props.haveIAccepted | |||||
| ? t("messages.acceptedRequest") | |||||
| : t("messages.acceptRequest")} | |||||
| </RequestExchangeMessageButton> | </RequestExchangeMessageButton> | ||||
| </RequestExchangeMessageButtonsContainer> | </RequestExchangeMessageButtonsContainer> | ||||
| </RequestExchangeMessageContainer> | </RequestExchangeMessageContainer> |
| return; | return; | ||||
| } | } | ||||
| addMessageListener(({ succeed, data }) => { | addMessageListener(({ succeed, data }) => { | ||||
| console.log(data); | |||||
| if (succeed) { | if (succeed) { | ||||
| dispatch( | dispatch( | ||||
| addNewMessage({ | addNewMessage({ |
| }, [exchange, amIBuyer]); | }, [exchange, amIBuyer]); | ||||
| const interlocutorObject = useMemo(() => { | const interlocutorObject = useMemo(() => { | ||||
| console.log(offer); | |||||
| if (location?.state?.offerId) { | if (location?.state?.offerId) { | ||||
| return offer?.user; | return offer?.user; | ||||
| } | } | ||||
| // Listener to socket.IO chat | // Listener to socket.IO chat | ||||
| useEffect(() => { | useEffect(() => { | ||||
| addMessageListener(({ succeed, data }) => { | addMessageListener(({ succeed, data }) => { | ||||
| console.log(data); | |||||
| if (succeed) { | if (succeed) { | ||||
| if ( | if ( | ||||
| [...allChats].find((item) => { | [...allChats].find((item) => { | ||||
| } | } | ||||
| }; | }; | ||||
| const handleAcceptExchange = () => { | const handleAcceptExchange = () => { | ||||
| console.log(chat) | |||||
| let interlocutor = userId === chat?.participants[0]._id ? 1 : 0; | |||||
| acceptExchangeSocket( | acceptExchangeSocket( | ||||
| chat?._id, | chat?._id, | ||||
| userId, | userId, | ||||
| chat?.interlocutor?._id, | |||||
| chat?.participants[interlocutor]._id, | |||||
| () => { | () => { | ||||
| dispatch( | dispatch( | ||||
| acceptExchange({ | acceptExchange({ | ||||
| addNewMessage({ | addNewMessage({ | ||||
| _id: chat?._id, | _id: chat?._id, | ||||
| message: { | message: { | ||||
| userId, | |||||
| user: { | |||||
| _id: userId | |||||
| }, | |||||
| isAcceptRequest: true, | isAcceptRequest: true, | ||||
| text: "", | text: "", | ||||
| _created: convertLocalDateToUTCDate(new Date()), | _created: convertLocalDateToUTCDate(new Date()), |
| behaviour: "smooth", | behaviour: "smooth", | ||||
| }); | }); | ||||
| window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); | window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); | ||||
| }, [props?.chat?.chat?.messages, messagesRef, isLoadingChatContent]); | |||||
| }, [props?.chat?.messages, messagesRef, isLoadingChatContent]); | |||||
| const handleRefresh = () => { | const handleRefresh = () => { | ||||
| props.refreshChat(); | props.refreshChat(); | ||||
| }; | }; | ||||
| console.log(props); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| {isLoadingChatContent || isLoadingChatContent === undefined ? ( | {isLoadingChatContent || isLoadingChatContent === undefined ? ( | ||||
| /> | /> | ||||
| <MessagesList ref={messagesRef} exchangeState={props?.exchangeState}> | <MessagesList ref={messagesRef} exchangeState={props?.exchangeState}> | ||||
| {messages?.map((item) => { | {messages?.map((item) => { | ||||
| const isMyMessage = userId === item.userId; | |||||
| const isMyMessage = userId === item.user?._id; | |||||
| const image = isMyMessage | const image = isMyMessage | ||||
| ? myProfileImage | ? myProfileImage | ||||
| : interlocutorProfileImage; | : interlocutorProfileImage; |
| const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null); | const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null); | ||||
| const { isMobile } = useIsMobile(); | const { isMobile } = useIsMobile(); | ||||
| const mineProfileBlocked = useSelector(selectAmIBlocked); | const mineProfileBlocked = useSelector(selectAmIBlocked); | ||||
| console.log(props) | |||||
| const togglePhonePopover = (event) => { | const togglePhonePopover = (event) => { | ||||
| if (props.interlocutor?.company?.contacts?.telephone) { | if (props.interlocutor?.company?.contacts?.telephone) { | ||||
| setShowPhonePopover((prevState) => !prevState); | setShowPhonePopover((prevState) => !prevState); | ||||
| }) | }) | ||||
| ); | ); | ||||
| }; | }; | ||||
| console.log("in", props); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <DirectChatContentHeaderContainer> | <DirectChatContentHeaderContainer> |
| const location = useLocation(); | const location = useLocation(); | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| const userId = useSelector(selectUserId); | const userId = useSelector(selectUserId); | ||||
| console.log(props) | |||||
| const handleSend = useCallback( | const handleSend = useCallback( | ||||
| (newChatId = undefined) => { | (newChatId = undefined) => { | ||||
| console.log(props?.chat?._id); | |||||
| if (typedValue?.length === 0) return; | if (typedValue?.length === 0) return; | ||||
| if (props?.chat?._id) { | if (props?.chat?._id) { | ||||
| const chatId = props.chat?._id || newChatId; | const chatId = props.chat?._id || newChatId; | ||||
| addNewMessage({ | addNewMessage({ | ||||
| _id: chatId, | _id: chatId, | ||||
| message: { | message: { | ||||
| userId, | |||||
| user: { | |||||
| _id: userId, | |||||
| }, | |||||
| text: typedValue, | text: typedValue, | ||||
| _created: convertLocalDateToUTCDate(new Date()), | _created: convertLocalDateToUTCDate(new Date()), | ||||
| }, | }, | ||||
| }, | }, | ||||
| [typedValue, props.chat?._id, userId, props.interlocutor] | [typedValue, props.chat?._id, userId, props.interlocutor] | ||||
| ); | ); | ||||
| console.log(exchange); | |||||
| const handleMessageSendSuccess = (newChatId) => { | const handleMessageSendSuccess = (newChatId) => { | ||||
| history.replace(`${newChatId}`); | history.replace(`${newChatId}`); | ||||
| }; | }; | ||||
| startNewChat({ | startNewChat({ | ||||
| offerId, | offerId, | ||||
| message: typedValue, | message: typedValue, | ||||
| interlocutorUserId: props.interlocutor.userId, | |||||
| interlocutorUserId: props.interlocutor._id, | |||||
| handleMessageSendSuccess, | handleMessageSendSuccess, | ||||
| }) | }) | ||||
| ); | ); |
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const offer = useMemo(() => { | const offer = useMemo(() => { | ||||
| if (props.offer) { | if (props.offer) { | ||||
| console.log("itemDetailsHeader: ", props.offer) | |||||
| if (props.offer._id === routeMatch.params.offerId) { | if (props.offer._id === routeMatch.params.offerId) { | ||||
| return props.offer; | return props.offer; | ||||
| } | } |
| const handleClickCategory = () => { | const handleClickCategory = () => { | ||||
| props?.offers?.filters?.locations.clear(); | props?.offers?.filters?.locations.clear(); | ||||
| props?.offers?.filters?.subcategory.clear(); | props?.offers?.filters?.subcategory.clear(); | ||||
| console.log("tooltip 1") | |||||
| props?.offers?.applyFilters(); | props?.offers?.applyFilters(); | ||||
| }; | }; | ||||
| const handleClickSubcategory = () => { | const handleClickSubcategory = () => { | ||||
| props?.offers?.filters?.locations.clear(); | props?.offers?.filters?.locations.clear(); | ||||
| console.log("tooltip 2") | |||||
| props?.offers?.applyFilters(); | props?.offers?.applyFilters(); | ||||
| }; | }; | ||||
| const goBack = () => { | const goBack = () => { |
| // }; | // }; | ||||
| const closeModalHandler = () => { | const closeModalHandler = () => { | ||||
| console.log("closed") | |||||
| dispatch(closeModal()); | dispatch(closeModal()); | ||||
| }; | }; | ||||
| const handleApiResponseSuccess = () => { | const handleApiResponseSuccess = () => { | ||||
| console.log("succes") | |||||
| if (clickedOnNext) { | if (clickedOnNext) { | ||||
| formik.resetForm(); | formik.resetForm(); | ||||
| inputRef.current.focus(); | inputRef.current.focus(); |
| } | } | ||||
| }, [userId]); | }, [userId]); | ||||
| useEffect(() => { | useEffect(() => { | ||||
| console.log(chats); | |||||
| if (chats?.length > 0) { | if (chats?.length > 0) { | ||||
| setLastChats([...convertMessages(chats)]); | setLastChats([...convertMessages(chats)]); | ||||
| } | } |
| // Event keycode 13 = ENTER keycode | // Event keycode 13 = ENTER keycode | ||||
| if (event.keyCode === 13) { | if (event.keyCode === 13) { | ||||
| event.preventDefault(); | event.preventDefault(); | ||||
| console.log("iz search1") | |||||
| handleSearch(); | handleSearch(); | ||||
| } | } | ||||
| }, | }, | ||||
| searchRef.current.removeEventListener("keyup", listener); | searchRef.current.removeEventListener("keyup", listener); | ||||
| }; | }; | ||||
| const handleSearch = () => { | const handleSearch = () => { | ||||
| console.log("iz search 2") | |||||
| if (props.isAdmin) { | if (props.isAdmin) { | ||||
| if (props.handleSearch) props.handleSearch(searchRef.current.value); | if (props.handleSearch) props.handleSearch(searchRef.current.value); | ||||
| else search.searchOffersImmediately(searchRef.current.value); | else search.searchOffersImmediately(searchRef.current.value); |
| import { | import { | ||||
| fetchReviews, | fetchReviews, | ||||
| setReviews, | setReviews, | ||||
| fetchReviewsAsAdmin, | |||||
| } from "../../store/actions/review/reviewActions"; | } 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"; | ||||
| ) | ) | ||||
| ); | ); | ||||
| useEffect(() => { | useEffect(() => { | ||||
| let idProfile = routeMatch.params?.profileId; | let idProfile = routeMatch.params?.profileId; | ||||
| if (idProfile) { | if (idProfile) { | ||||
| if (props.isAdmin) { | |||||
| dispatch(fetchReviewsAsAdmin(idProfile)); | |||||
| } else { | |||||
| dispatch(fetchReviews(idProfile)); | |||||
| } | |||||
| dispatch(fetchReviews(idProfile)); | |||||
| } | } | ||||
| // if (props.profileReviews && routeMatch.params?.profileId) { | // if (props.profileReviews && routeMatch.params?.profileId) { |
| useEffect(() => { | useEffect(() => { | ||||
| setSelectedCategoryLocally(selectedCategory); | setSelectedCategoryLocally(selectedCategory); | ||||
| console.log("sleectedCat") | |||||
| }, [selectedCategory]); | }, [selectedCategory]); | ||||
| // Set selected category locally in state | // Set selected category locally in state |
| if (category.selectedCategoryLocally?._id) sumOfFiltersChosen++; | if (category.selectedCategoryLocally?._id) sumOfFiltersChosen++; | ||||
| if (subcategory.selectedSubcategoryLocally?._id) sumOfFiltersChosen++; | if (subcategory.selectedSubcategoryLocally?._id) sumOfFiltersChosen++; | ||||
| sumOfFiltersChosen += locations.selectedLocationsLocally.length; | sumOfFiltersChosen += locations.selectedLocationsLocally.length; | ||||
| console.log("numOfFiltersChosen"); | |||||
| return sumOfFiltersChosen; | return sumOfFiltersChosen; | ||||
| }, [ | }, [ | ||||
| category.selectedCategoryLocally, | category.selectedCategoryLocally, |
| // Filter, search and sort all mine offers | // Filter, search and sort all mine offers | ||||
| const allOffersToShow = useMemo(() => { | const allOffersToShow = useMemo(() => { | ||||
| let mineOffersFiltered = [...mineOffers]; | let mineOffersFiltered = [...mineOffers]; | ||||
| console.log(filters) | |||||
| // Filter mine offers by category | // Filter mine offers by category | ||||
| if (filters.category.selectedCategoryLocally?.name) | if (filters.category.selectedCategoryLocally?.name) | ||||
| mineOffersFiltered = mineOffersFiltered.filter( | mineOffersFiltered = mineOffersFiltered.filter( |
| sorting | sorting | ||||
| ); | ); | ||||
| dispatch(setQueryString(convertQueryStringForBackend(newQueryString))); | dispatch(setQueryString(convertQueryStringForBackend(newQueryString))); | ||||
| console.log("useoff apply") | |||||
| }; | }; | ||||
| const filters = useFilters(false, apply); | const filters = useFilters(false, apply); | ||||
| dispatch(setHeaderString(makeHeaderStringHelper({}))); | dispatch(setHeaderString(makeHeaderStringHelper({}))); | ||||
| history.location.state = {}; | history.location.state = {}; | ||||
| } | } | ||||
| console.log("history.log"); | |||||
| }, [history.location]); | }, [history.location]); | ||||
| // On every change of query string, new header string should be created | // On every change of query string, new header string should be created | ||||
| useEffect(() => { | useEffect(() => { | ||||
| const headerStringLocal = makeHeaderStringHelper(filters); | const headerStringLocal = makeHeaderStringHelper(filters); | ||||
| dispatch(setHeaderString(headerStringLocal)); | dispatch(setHeaderString(headerStringLocal)); | ||||
| console.log("queryStringHook.queryString, filtersCleared") | |||||
| }, [queryStringHook.queryString, filtersCleared]); | }, [queryStringHook.queryString, filtersCleared]); | ||||
| // Initially set category, location and subcategory based on query string | // Initially set category, location and subcategory based on query string | ||||
| useEffect(() => { | useEffect(() => { | ||||
| console.log("!!!!!!!!!!queryStringHook.isInitiallyLoaded") | |||||
| if (queryStringHook.isInitiallyLoaded) { | if (queryStringHook.isInitiallyLoaded) { | ||||
| const queryObject = queryStringHook.queryObject; | const queryObject = queryStringHook.queryObject; | ||||
| if (KEY_CATEGORY in queryObject) { | if (KEY_CATEGORY in queryObject) { | ||||
| setFiltersCleared(false); | setFiltersCleared(false); | ||||
| apply(); | apply(); | ||||
| } | } | ||||
| console.log("filtersCleared") | |||||
| }, [filtersCleared]); | }, [filtersCleared]); | ||||
| const applyFilters = () => { | const applyFilters = () => { | ||||
| console.log("applyfilters") | |||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| }; | }; | ||||
| const clearFiltersAndApply = () => { | const clearFiltersAndApply = () => { | ||||
| console.log("applyfilters") | |||||
| clear(); | clear(); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| }; | }; | ||||
| const applySorting = () => { | const applySorting = () => { | ||||
| console.log("applyfilters") | |||||
| paging.changePage(1); | paging.changePage(1); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| }; | }; | ||||
| const applySearch = () => { | const applySearch = () => { | ||||
| console.log("applyfilters") | |||||
| paging.changePage(1); | paging.changePage(1); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| }; | }; | ||||
| if (queryStringHook.isInitiallyLoaded) { | if (queryStringHook.isInitiallyLoaded) { | ||||
| search.searchOffers(search.searchString); | search.searchOffers(search.searchString); | ||||
| } | } | ||||
| console.log("search log") | |||||
| }, [search.searchString]); | }, [search.searchString]); | ||||
| // Clears only filters(does not clear sorting and search) | // Clears only filters(does not clear sorting and search) | ||||
| filters.clear(); | filters.clear(); | ||||
| paging.changePage(1); | paging.changePage(1); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| console.log("clear log") | |||||
| }; | }; | ||||
| const clear = () => { | const clear = () => { |
| // except on initial load | // except on initial load | ||||
| useEffect(() => { | useEffect(() => { | ||||
| if (isInitallyLoaded && applyAllFilters) { | if (isInitallyLoaded && applyAllFilters) { | ||||
| console.log("paging apply") | |||||
| applyAllFilters(); | applyAllFilters(); | ||||
| } | } | ||||
| if (!disableScroll) { | if (!disableScroll) { |
| } else { | } else { | ||||
| setHistoryStateCleared(true); | setHistoryStateCleared(true); | ||||
| } | } | ||||
| console.log("history location querystr") | |||||
| }, [history.location]); | }, [history.location]); | ||||
| // Set initially loaded to true on initial load | // Set initially loaded to true on initial load | ||||
| ) { | ) { | ||||
| setIsInitallyLoaded(true); | setIsInitallyLoaded(true); | ||||
| } | } | ||||
| console.log("querystr") | |||||
| }, [queryString]); | }, [queryString]); | ||||
| // Updating offers on query string change | // Updating offers on query string change | ||||
| search: convertQueryStringForFrontend(queryString), | search: convertQueryStringForFrontend(queryString), | ||||
| }); | }); | ||||
| } | } | ||||
| console.log("querystr, isinit") | |||||
| }, [queryString, isInitiallyLoaded]); | }, [queryString, isInitiallyLoaded]); | ||||
| return { | return { |
| // if (immediateApply) { | // if (immediateApply) { | ||||
| dispatch(setFilteredSubcategory(subcategory)); | dispatch(setFilteredSubcategory(subcategory)); | ||||
| // } | // } | ||||
| console.log("funk"); | |||||
| }; | }; | ||||
| const apply = () => { | const apply = () => { | ||||
| console.log("apply"); | |||||
| console.log("SELECTED SUB", selectedSubcategory); | |||||
| console.log("SELECTED SUBLOCALLY", selectedSubcategoryLocally); | |||||
| if ( | if ( | ||||
| Number(selectedSubcategory?._id) !== | Number(selectedSubcategory?._id) !== | ||||
| Number(selectedSubcategoryLocally?._id) | Number(selectedSubcategoryLocally?._id) | ||||
| }; | }; | ||||
| const clear = () => { | const clear = () => { | ||||
| console.log("clear"); | |||||
| setSelectedSubcategoryLocally(initialOption); | setSelectedSubcategoryLocally(initialOption); | ||||
| dispatch(setFilteredSubcategory(initialOption)); | dispatch(setFilteredSubcategory(initialOption)); | ||||
| }; | }; |
| const toggleFilters = () => { | const toggleFilters = () => { | ||||
| setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened); | setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened); | ||||
| }; | }; | ||||
| console.log("rerender") | |||||
| return ( | return ( | ||||
| <HomePageContainer> | <HomePageContainer> | ||||
| <MainLayout | <MainLayout |
| import io from "socket.io-client"; | import io from "socket.io-client"; | ||||
| export const socket = io("https://trampa-api-test.dilig.net/", { | 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"], | transports: ["websocket"], | ||||
| reconnectionAttempts: 5, | reconnectionAttempts: 5, | ||||
| }); | }); | ||||
| chatId, | chatId, | ||||
| receiverUserId, | receiverUserId, | ||||
| message: { | message: { | ||||
| userId, | |||||
| user: { | |||||
| _id: userId, | |||||
| }, | |||||
| text, | text, | ||||
| }, | }, | ||||
| }); | }); | ||||
| }; | }; | ||||
| export const acceptExchangeSocket = (chatId, userId, receiverUserId, callbackFn) => { | |||||
| export const acceptExchangeSocket = ( | |||||
| chatId, | |||||
| userId, | |||||
| receiverUserId, | |||||
| callbackFn | |||||
| ) => { | |||||
| socket.emit("private_message", { | socket.emit("private_message", { | ||||
| chatId, | chatId, | ||||
| receiverUserId, | receiverUserId, | ||||
| message: { | message: { | ||||
| userId, | |||||
| user: { | |||||
| _id: userId | |||||
| }, | |||||
| isAcceptRequest: true, | isAcceptRequest: true, | ||||
| text: "" | |||||
| text: "", | |||||
| }, | }, | ||||
| }); | }); | ||||
| callbackFn(); | callbackFn(); |
| } | } | ||||
| function addNewMessage(state, { payload }) { | function addNewMessage(state, { payload }) { | ||||
| let allChats = [...state.latestChats]; | let allChats = [...state.latestChats]; | ||||
| console.log(state); | |||||
| console.log("state", state); | |||||
| let chat = allChats.find((item) => item._id === payload._id); | let chat = allChats.find((item) => item._id === payload._id); | ||||
| console.log("chat: ", chat); | |||||
| if (chat) { | if (chat) { | ||||
| chat = { | chat = { | ||||
| ...chat, | ...chat, | ||||
| messages: [...chat.messages, payload.message], | messages: [...chat.messages, payload.message], | ||||
| }; | }; | ||||
| console.log("newchat: ", chat); | |||||
| allChats = allChats.filter((item) => item._id !== chat._id); | allChats = allChats.filter((item) => item._id !== chat._id); | ||||
| console.log("allchats1: ", allChats); | |||||
| allChats = [chat, ...allChats]; | allChats = [chat, ...allChats]; | ||||
| console.log("allchats2: ", allChats); | |||||
| } | } | ||||
| let newSelectedChat = {}; | let newSelectedChat = {}; | ||||
| if (state.selectedChat.chat) { | |||||
| newSelectedChat = { ...state.selectedChat }; | |||||
| if (newSelectedChat._id === chat._id) | |||||
| newSelectedChat = { ...newSelectedChat, chat: chat }; | |||||
| } else { | |||||
| newSelectedChat = { ...chat }; | |||||
| } | |||||
| if (state.selectedChat.chat) newSelectedChat = { ...state.selectedChat }; | |||||
| console.log("newSelectedChat1: ", newSelectedChat); | |||||
| newSelectedChat = { ...chat }; | |||||
| console.log("newSelectedChat2: ", newSelectedChat); | |||||
| return { | return { | ||||
| ...state, | ...state, | ||||
| latestChats: [...allChats], | latestChats: [...allChats], |
| chatData.data.messages.forEach((item) => { | chatData.data.messages.forEach((item) => { | ||||
| if (requester !== requesterStatus.NOONE) return; | if (requester !== requesterStatus.NOONE) return; | ||||
| if (item.isAcceptRequest) { | if (item.isAcceptRequest) { | ||||
| if (item.userId === userId) requester = requesterStatus.ME; | |||||
| if (item.user._id === userId) requester = requesterStatus.ME; | |||||
| else requester = requesterStatus.interlocutor; | else requester = requesterStatus.interlocutor; | ||||
| } | } | ||||
| }); | }); | ||||
| const exchange = yield select(selectExchange); | const exchange = yield select(selectExchange); | ||||
| const userId = yield select(selectUserId); | const userId = yield select(selectUserId); | ||||
| yield call(attemptSendMessage, payload.payload.chatId, messageObject); | 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 put(validateExchange(exchange._id)); | ||||
| } | } | ||||
| yield call(fetchChats); | yield call(fetchChats); | ||||
| } | } | ||||
| function* startNewChat(payload) { | function* startNewChat(payload) { | ||||
| try { | try { | ||||
| console.log(payload) | |||||
| const userId = yield select(selectUserId); | const userId = yield select(selectUserId); | ||||
| const newChatData = yield call(attemptCreateNewChat, { | const newChatData = yield call(attemptCreateNewChat, { | ||||
| offerId: payload.payload.offerId, | offerId: payload.payload.offerId, | ||||
| addNewMessage({ | addNewMessage({ | ||||
| _id: newChatId, | _id: newChatId, | ||||
| message: { | message: { | ||||
| userId, | |||||
| user: { | |||||
| _id: userId | |||||
| }, | |||||
| text: payload.payload.message, | text: payload.payload.message, | ||||
| _created: new Date().toISOString(), | _created: new Date().toISOString(), | ||||
| }, | }, |