Fixed bug 552

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -35,13 +35,11 @@ import OfferDetails from "./OfferDetails/OfferDetails";
 const ItemDetailsCard = (props) => {
   const [showModalRemove, setShowModalRemove] = useState(false);
   const [showModalEdit, setShowModalEdit] = useState(false);
-  const [isMyProfile, setIsMyProfile] = useState(false);
   const offer = props.offer;
   const chats = useSelector(selectLatestChats);
   const userId = useSelector(selectUserId);
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const idProfile = offer?.offer?.userId;
 
   const increaseOfferCounter = useMemo(() => {
     return _.once(function (id) {
@@ -55,9 +53,6 @@ const ItemDetailsCard = (props) => {
     }
   }, [offer]);
 
-  useEffect(() => {
-    if (userId === idProfile) setIsMyProfile(true);
-  }, [userId, idProfile]);
 
   const date = formatDateLocale(new Date(offer?.offer?._created));
 
@@ -101,7 +96,7 @@ const ItemDetailsCard = (props) => {
           </Info>
           <DateButtonsContainer>
             <PostDate>{date}</PostDate>
-            {isMyProfile && (
+            {props.isMyOffer && (
               <ButtonsContainer>
                 <EditDeleteButtons>
                   <EditIconContainer onClick={() => setShowModalEdit(true)}>
@@ -127,6 +122,7 @@ const ItemDetailsCard = (props) => {
             buttoncolor={selectedTheme.primaryPurple}
             textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
             onClick={startExchange}
+            disabled={props.isMyOffer}
           >
             {t("itemDetailsCard.startExchangeButton")}
           </CheckButton>
@@ -158,6 +154,7 @@ ItemDetailsCard.propTypes = {
   showBarterButton: PropTypes.bool,
   showPublishButton: PropTypes.bool,
   className: PropTypes.string,
+  isMyOffer: PropTypes.bool,
 };
 ItemDetailsCard.defaultProps = {
   halfwidth: false,

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -252,8 +252,8 @@ export const CheckButton = styled(PrimaryButton)`
   right: 12px;
   font-weight: 600;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
     color: white !important;
+    background-color: ${props => !props.disabled ? selectedTheme.primaryPurple : selectedTheme.primaryPurpleDisabled} !important;
   }
   @media (max-width: 600px) {
     height: 44px;

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

@@ -1,24 +1,33 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { PropTypes } from "prop-types";
 import { ItemDetailsPageContainer } from "./ItemDetailsPage.styled";
 import { useDispatch, useSelector } from "react-redux";
 import ItemDetails from "../../components/ItemDetails/ItemDetails";
 import ItemDetailsLayout from "../../layouts/ItemDetailsLayout/ItemDetailsLayout";
-import { fetchOneOffer } from "../../store/actions/offers/offersActions";
+import { clearSelectedOffer, fetchOneOffer } from "../../store/actions/offers/offersActions";
 import UserReviews from "../../components/UserReviews/UserReviews";
 import { selectOffer } from "../../store/selectors/offersSelectors";
 
 const ItemDetailsPage = (props) => {
   const dispatch = useDispatch();
   const selectedOffer = useSelector(selectOffer);
-
+  const [isInitiallyLoaded, setIsInitiallyLoaded] = useState(false);
   const offerId = props.match.params.idProizvod;
 
   useEffect(() => {
-    if (offerId && !selectedOffer?.offer) {
+    dispatch(fetchOneOffer(offerId));
+    () => dispatch(clearSelectedOffer());
+  }, []);
+
+  useEffect(() => {
+    console.log("effect: selectedOffer", selectedOffer, " isInitiallyLoaded: ", isInitiallyLoaded)
+    if (!selectedOffer?.offer && isInitiallyLoaded) {
       dispatch(fetchOneOffer(offerId));
     }
-  }, [offerId, selectedOffer?.offer]);
+    if (selectedOffer?.offer) {
+      setIsInitiallyLoaded(true);
+    }
+  }, [selectedOffer?.offer]);
 
   return (
     <ItemDetailsPageContainer>

src/store/actions/offers/offersActionConstants.js

@@ -57,6 +57,7 @@ export const OFFER_INDEX_SET = createSetType("OFFER_INDEX_SET");
 export const OFFER_INDEX_CLEAR = createClearType("OFFER_INDEX_CLEAR");
 export const OFFER_PAGE_SET = createSetType("OFFER_PAGE_SET");
 export const OFFER_FEATURED_PAGE_SET = createSetType("OFFER_FEATURED_PAGE_SET");
+export const OFFER_SELECTED_CLEAR = createClearType("OFFER_SELECTED_CLEAR")
 
 export const OFFER_ADD_SCOPE = "OFFER_ADD_SCOPE";
 export const OFFER_ADD = createFetchType(OFFER_ADD_SCOPE);

src/store/actions/offers/offersActions.js

@@ -36,6 +36,7 @@ import {
   OFFER_REMOVE,
   OFFER_REMOVE_ERROR,
   OFFER_REMOVE_SUCCESS,
+  OFFER_SELECTED_CLEAR,
   OFFER_SET,
   ONE_OFFER_ERROR,
   ONE_OFFER_FETCH,
@@ -226,3 +227,6 @@ export const setFeaturedOfferPage = (payload) => ({
   type: OFFER_FEATURED_PAGE_SET,
   payload
 })
+export const clearSelectedOffer = () => ({
+  type: OFFER_SELECTED_CLEAR
+})

src/store/reducers/offers/offersReducer.js

@@ -9,7 +9,6 @@ import {
   OFFERS_SET,
   OFFER_ADD,
   OFFER_SET,
-  ONE_OFFER_FETCH,
   ONE_OFFER_ERROR,
   ONE_OFFER_SUCCESS,
   OFFERS_SET_TOTAL,
@@ -20,6 +19,7 @@ import {
   OFFER_INDEX_CLEAR,
   OFFER_PAGE_SET,
   OFFER_FEATURED_PAGE_SET,
+  OFFER_SELECTED_CLEAR,
 } from "../../actions/offers/offersActionConstants";
 import createReducer from "../../utils/createReducer";
 
@@ -48,7 +48,6 @@ export default createReducer(
     [OFFER_SET]: setOffer,
     [ONE_OFFER_ERROR]: fetchOneOfferError,
     [ONE_OFFER_SUCCESS]: fetchOneOfferSuccess,
-    [ONE_OFFER_FETCH]: fetchOneOffer,
     [OFFERS_NO_MORE]: setNoMoreOffersStatus,
     [OFFERS_PINNED_ADD]: addPinnedOffers,
     [OFFERS_PINNED_SET]: setPinnedOffers,
@@ -61,6 +60,7 @@ export default createReducer(
     [OFFER_INDEX_CLEAR]: clearOfferIndex,
     [OFFER_PAGE_SET]: setOfferPage,
     [OFFER_FEATURED_PAGE_SET]: setFeaturedOfferPage,
+    [OFFER_SELECTED_CLEAR]: clearSelectedOffer,
   },
   initialState
 );
@@ -102,13 +102,6 @@ function addOffer(state, action) {
     offer: action.payload,
   };
 }
-
-function fetchOneOffer(state, action) {
-  return {
-    ...state,
-    selectedOffer: action.payload,
-  };
-}
 function fetchOneOfferSuccess(state, action) {
   return {
     ...state,
@@ -155,36 +148,42 @@ function setProfileOffers(state, action) {
 function setFeaturedOffers(state, action) {
   return {
     ...state,
-    pinnedOffers: action.payload
-  }
+    pinnedOffers: action.payload,
+  };
 }
 function clearFeaturedOffers(state) {
   return {
     ...state,
-    pinnedOffers: []
-  }
+    pinnedOffers: [],
+  };
 }
-function setOfferIndex(state, {payload}) {
+function setOfferIndex(state, { payload }) {
   return {
     ...state,
-    offerIndex: payload
-  }
+    offerIndex: payload,
+  };
 }
 function clearOfferIndex(state) {
   return {
     ...state,
     offerIndex: null,
-  }
+  };
+}
+function setOfferPage(state, { payload }) {
+  return {
+    ...state,
+    offerPage: payload,
+  };
 }
-function setOfferPage(state, {payload}) {
+function setFeaturedOfferPage(state, { payload }) {
   return {
     ...state,
-    offerPage: payload
-  }
+    featuredOfferPage: payload,
+  };
 }
-function setFeaturedOfferPage(state, {payload}) {
+function clearSelectedOffer(state) {
   return {
     ...state,
-    featuredOfferPage: payload
-  }
+    selectedOffer: "",
+  };
 }