Merge branch 'master' of http://git.dilig.net/selenaaasi/trampa-frontend

src/assets/images/svg/calendar.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 2H2.5C1.94772 2 1.5 2.44772 1.5 3V10C1.5 10.5523 1.94772 11 2.5 11H9.5C10.0523 11 10.5 10.5523 10.5 10V3C10.5 2.44772 10.0523 2 9.5 2Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.5 5H10.5" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -13,8 +13,8 @@ import SecondPartCreateOffer from "./SecondPart/SecondPartCreateOffer";
 import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer";
 import {
   addOffer,
-  fetchOffers,
-  fetchOneOffer,
+  // fetchOffers,
+  // fetchOneOffer,
   fetchProfileOffers,
 } from "../../../store/actions/offers/offersActions";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
@@ -25,25 +25,34 @@ import CloseButton from "./CloseButton/CloseButton";
 import BackButton from "./BackButton/BackButton";
 import selectedTheme from "../../../themes";
 import { useMemo } from "react";
-import { useLocation } from "react-router-dom";
-import { BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
-import { routeMatches } from "../../../util/helpers/routeHelpers";
+// import { useLocation } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+import { PROFILE_PAGE } from "../../../constants/pages";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+// import { routeMatches } from "../../../util/helpers/routeHelpers";
 
 const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   const dispatch = useDispatch();
-  const location = useLocation();
+  // const location = useLocation();
+  const history = useHistory();
   const [informations, setInformations] = useState({});
   const [currentStep, setCurrentStep] = useState(1);
   const { t } = useTranslation();
   const userId = useSelector(selectUserId);
 
   const handleApiResponseSuccess = () => {
-    if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
-      dispatch(fetchOffers({ queryString: "" }));
-    if (location.pathname.includes("profile"))
-      dispatch(fetchProfileOffers(userId));
-    if (location.pathname.includes("proizvodi"))
-      dispatch(fetchOneOffer(offer._id));
+    // if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
+    //   dispatch(fetchOffers({ queryString: "" }));
+    // if (location.pathname.includes("profile"))
+    //   dispatch(fetchProfileOffers(userId));
+    // if (location.pathname.includes("proizvodi"))
+    //   dispatch(fetchOneOffer(offer._id));
+    dispatch(fetchProfileOffers(userId));
+    history.push(
+      replaceInRoute(PROFILE_PAGE, {
+        idProfile: userId,
+      })
+    );
   };
 
   // Go to next step and save typed values
@@ -81,7 +90,13 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   // Create (or edit) offer
   const handleSubmitOffer = () => {
     if (editOffer) {
-      dispatch(editOneOffer({offerId: offer._id, offerData, handleApiResponseSuccess}));
+      dispatch(
+        editOneOffer({
+          offerId: offer._id,
+          offerData,
+          handleApiResponseSuccess,
+        })
+      );
     } else {
       dispatch(addOffer({ offerData, handleApiResponseSuccess }));
     }

src/components/Cards/OfferCard/OfferCard.js

@@ -21,12 +21,14 @@ import {
   OfferTitle,
   OfferTitleAboveImage,
   OfferViews,
+  OfferDate,
   PinIcon,
   RemoveIcon,
   RemoveIconContainer,
   LikeIcon,
   LikeIconContainer,
   CategoryIcon,
+  CalendarIcon,
   PinIconContainer,
   PinOutlinedIcon,
 } from "./OfferCard.styled";
@@ -40,6 +42,7 @@ import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import OfferDescription from "./OfferDescription/OfferDescription";
 import CheckButton from "./CheckButton/CheckButton";
+import { formatDateLocale } from "../../../util/helpers/dateHelpers";
 
 const OfferCard = (props) => {
   const [deleteOfferModal, setDeleteOfferModal] = useState(false);
@@ -47,6 +50,7 @@ const OfferCard = (props) => {
   const history = useHistory();
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
+  const date = formatDateLocale(new Date(props.offer?._created));
 
   const pinOffer = (event) => {
     event.stopPropagation();
@@ -154,6 +158,7 @@ const OfferCard = (props) => {
                 </DetailIcon>
                 <DetailText>{props?.offer?.category?.name}</DetailText>
               </OfferCategory>
+
               {props.dontShowViews ? (
                 <></>
               ) : (
@@ -164,6 +169,12 @@ const OfferCard = (props) => {
                   <DetailText>{props?.offer?.views?.count}</DetailText>
                 </OfferViews>
               )}
+              <OfferDate vertical={props.vertical}>
+                <DetailIcon component="span" size="16px">
+                  <CalendarIcon />
+                </DetailIcon>
+                <DetailText>{date}</DetailText>
+              </OfferDate>
             </OfferDetails>
           </OfferInfo>
           {!props.halfwidth ? (

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -10,6 +10,7 @@ import { ReactComponent as Like } from "../../../assets/images/svg/like.svg";
 import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg";
 import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
+import { ReactComponent as Calendar } from "../../../assets/images/svg/calendar.svg";
 
 export const OfferCardContainer = styled(Container)`
   display: ${(props) => (props.skeleton ? "none" : "flex")};
@@ -120,6 +121,9 @@ export const OfferTitle = styled(Typography)`
 
     `}
   }
+  @media (max-width: 760px) {
+    margin-bottom: 16px;
+  }
 `;
 export const OfferAuthor = styled(Box)`
   display: flex;
@@ -159,7 +163,7 @@ export const OfferDetails = styled(Box)`
   flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
   justify-content: start;
   gap: 1rem;
-  @media (max-width: 650px) {
+  @media (max-width: 760px) {
     flex-direction: column;
     justify-content: center;
     gap: 0;
@@ -194,6 +198,13 @@ export const OfferViews = styled(Box)`
     display: none;
   `}
 `;
+export const OfferDate = styled(Box)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  margin-top: 1px;
+`;
 
 export const Line = styled(Box)`
   border-left: 1px solid rgba(0, 0, 0, 0.15);
@@ -383,3 +394,10 @@ export const CategoryIcon = styled(Category)`
     stroke-width: 1;
   }
 `;
+
+export const CalendarIcon = styled(Calendar)`
+  width: 14px;
+  & path {
+    stroke-width: 1;
+  }
+`;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -7,8 +7,6 @@ import {
   ProfileCardHeader,
   HeaderTitle,
   EditIcon,
-  MessageIcon,
-  MessageButton,
   ProfileInfoContainer,
 } from "./ProfileCard.styled";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
@@ -101,14 +99,10 @@ const ProfileCard = () => {
               <HeaderTitle>{t("profile.myProfile")}</HeaderTitle>
             </ProfileCardHeader>
             <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}>
-              {isMyProfile ? (
+              {isMyProfile && (
                 <EditButton onClick={() => setEditProfileModal(true)}>
                   <EditIcon />
                 </EditButton>
-              ) : (
-                <MessageButton>
-                  <MessageIcon />
-                </MessageButton>
               )}
               <ProfileInfoContainer>
                 {/* Profile Main Info  */}

src/components/Popovers/MyProfile/MyProfile.js

@@ -59,8 +59,8 @@ export const MyProfile = (props) => {
       buttonOnClick={() => seeMyProfile()}
     >
       <GrayButtonsContainer>
-        <AboutButton closePopover={props.closePopover} />
         <PricesButton closePopover={props.closePopover} />
+        <AboutButton closePopover={props.closePopover} />
         <PrivacyPolicyButton closePopover={props.closePopover} />
       </GrayButtonsContainer>
       <LogoutButton />

src/util/helpers/dateHelpers.js

@@ -53,7 +53,7 @@ export function formatDateLocale(date) {
   const monthCreated =
     date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
   const yearCreated = date.getFullYear();
-  return `${dayCreated}.${monthCreated}.${yearCreated}`;
+  return `${dayCreated}.${monthCreated}.${yearCreated}.`;
 }
 export function convertUTCDateToLocalDate(date) {
   var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);