Edit Delete Buttons Added

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -5,7 +5,7 @@ import {
   ItemDetailsCardContainer,
   OfferInfo,
   Info,
-  DateEditDeleteContainer,
+  ButtonsContainer,
   PostDate,
   OfferTitle,
   OfferDescriptionText,
@@ -22,6 +22,7 @@ import {
   EditIcon,
   RemoveIconContainer,
   RemoveIcon,
+  EditDeleteButtons,
 } from "./ItemDetailsCard.styled";
 import selectedTheme from "../../../themes";
 import { useDispatch, useSelector } from "react-redux";
@@ -39,11 +40,13 @@ import CreateOffer from "../CreateOfferCard/CreateOffer";
 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) {
@@ -57,6 +60,10 @@ const ItemDetailsCard = (props) => {
     }
   }, [offer]);
 
+  useEffect(() => {
+    if (userId === idProfile) setIsMyProfile(true);
+  }, [userId, idProfile]);
+
   const date = formatDateLocale(new Date(offer?.offer?._created));
 
   const startExchange = () => {
@@ -71,7 +78,6 @@ const ItemDetailsCard = (props) => {
     setShowModalRemove(false);
   };
 
-  console.log(offer);
   return (
     <>
       <ItemDetailsCardContainer
@@ -98,15 +104,21 @@ const ItemDetailsCard = (props) => {
               value={offer?.offer?.views?.count}
             />
           </Info>
-          <DateEditDeleteContainer>
-            <PostDate>{date}</PostDate>
-            <EditIconContainer onClick={() => setShowModalEdit(true)}>
-              <EditIcon />
-            </EditIconContainer>
-            <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
-              <RemoveIcon />
-            </RemoveIconContainer>
-          </DateEditDeleteContainer>
+          <PostDate>
+            {date}
+            {isMyProfile && (
+              <ButtonsContainer>
+                <EditDeleteButtons>
+                  <EditIconContainer onClick={() => setShowModalEdit(true)}>
+                    <EditIcon />
+                  </EditIconContainer>
+                  <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
+                    <RemoveIcon />
+                  </RemoveIconContainer>
+                </EditDeleteButtons>
+              </ButtonsContainer>
+            )}
+          </PostDate>
         </OfferInfo>
         <Details
           hasScrollBar={!props.showPublishButton}

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

@@ -41,14 +41,29 @@ export const OfferInfo = styled(Box)`
   flex: 2;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   margin: 18px 0;
   @media (max-width: 600px) {
     margin: 0;
   }
 `;
-export const DateEditDeleteContainer = styled(Box)`
+export const ButtonsContainer = styled(Box)`
   display: flex;
   align-items: center;
+
+  @media screen and (max-width: 600px) {
+    position: absolute;
+  }
+`;
+
+export const EditDeleteButtons = styled(Box)`
+  display: flex;
+
+  @media screen and (max-width: 600px) {
+    position: absolute;
+    right: -310px;
+    top: -265px;
+  }
 `;
 export const EditIconContainer = styled(IconButton)`
   width: 40px;
@@ -58,8 +73,21 @@ export const EditIconContainer = styled(IconButton)`
   padding-top: 2px;
   text-align: center;
   margin-left: 18px;
+
+  @media screen and (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
+`;
+export const EditIcon = styled(Edit)`
+  @media screen and (max-width: 600px) {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: -4px;
+    left: -2px;
+  }
 `;
-export const EditIcon = styled(Edit)``;
 
 export const RemoveIconContainer = styled(IconButton)`
   width: 40px;
@@ -69,14 +97,29 @@ export const RemoveIconContainer = styled(IconButton)`
   padding-top: 2px;
   text-align: center;
   margin-left: 18px;
+
+  @media screen and (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
 `;
 
-export const RemoveIcon = styled(Remove)``;
+export const RemoveIcon = styled(Remove)`
+  @media screen and (max-width: 600px) {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: -4px;
+    left: -2px;
+  }
+`;
 
 export const PostDate = styled(Typography)`
   font-family: "Open Sans";
   font-size: 12px;
   color: ${selectedTheme.primaryText};
+  display: flex;
+  align-items: center;
   &::before {
     content: "Objavljeno: ";
     @media (max-width: 600px) {
@@ -89,6 +132,8 @@ export const PostDate = styled(Typography)`
     bottom: 23px;
     left: 18px;
     width: 70px;
+    flex-direction: column;
+    align-items: start;
   }
 `;
 export const Info = styled(Box)`

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.js

@@ -25,10 +25,12 @@ import {
   removeOffer,
 } from "../../../../store/actions/offers/offersActions";
 import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
 
 const DeleteOffer = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const history = useHistory();
   const userId = props.offer.userId;
   const offerId = props.offer._id;
   const closeDeleteModalHandler = () => {
@@ -39,9 +41,14 @@ const DeleteOffer = (props) => {
     dispatch(fetchProfileOffers(userId));
   };
 
+  console.log(history);
+
   const removeOfferHandler = () => {
     dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
     props.closeModalHandler();
+    if (history.location.pathname.includes("proizvodi")) {
+      history.goBack();
+    }
   };
 
   return (