Finished feature 638

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -81,7 +81,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   // Create (or edit) offer
   const handleSubmitOffer = () => {
     if (editOffer) {
-      dispatch(editOneOffer({offerId: offer._id, offerData}));
+      dispatch(editOneOffer({offerId: offer._id, offerData, handleApiResponseSuccess}));
     } else {
       dispatch(addOffer({ offerData, handleApiResponseSuccess }));
     }

src/components/Cards/MessageCard/MessageCard.js

@@ -7,15 +7,15 @@ import {
   MessageText,
   ProfileImage,
 } from "./MessageCard.styled";
-import { formatDateTime } from "../../../util/helpers/dateHelpers";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
+import { getMessageDate } from "../../../util/helpers/dateHelpers";
 
 const MessageCard = (props) => {
   const message = props.message;
   const { isMobile } = useIsMobile();
 
-  const dateString = formatDateTime(new Date(message._created));
+  const dateString = getMessageDate(new Date(message._created));
   return (
     <MessageCardContainer ismymessage={props.isMyMessage}>
       <ProfileImage

src/components/Cards/MessageCard/MessageCard.styled.js

@@ -10,6 +10,7 @@ export const MessageCardContainer = styled(Box)`
 export const ProfileImage = styled.img`
   width: 54px;
   height: 54px;
+  min-width: 54px;
   overflow: hidden;
   border-radius: 100%;
   @media (max-width: 600px) {
@@ -24,6 +25,7 @@ export const MessageContent = styled(Box)`
   border-radius: ${(props) =>
     props.ismymessage ? "9px 0px 9px 9px" : "0px 9px 9px 9px"};
     padding: 9px;
+    padding-bottom: 31px;
     position: relative;
     min-height: 65px;
     margin: 0 18px;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -40,7 +40,6 @@ const ProfileCard = () => {
   const profileFromRedux = useSelector(selectProfile);
   const userId = useSelector(selectUserId);
   const idProfile = useMemo(() => {
-    console.log("routematch", routeMatch);
     return routeMatch.params.idProfile;
   }, [routeMatch.params.idProfile]);
   const { t } = useTranslation();

src/components/DirectChat/DirectChat.js

@@ -83,7 +83,6 @@ const DirectChat = () => {
   // Listener to socket.IO chat
   useEffect(() => {
     addMesageListener(({ succeed, data }) => {
-      console.log(succeed);
       if (succeed) {
         if (
           [...allChats].find((item) => {

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

@@ -19,6 +19,7 @@ import { useHistory, useLocation } from "react-router-dom";
 import { selectExchange } from "../../../store/selectors/exchangeSelector";
 import { validateExchange } from "../../../store/actions/exchange/exchangeActions";
 import NotAllowedChat from "./NotAllowedChat/NotAllowedChat";
+import { convertLocalDateToUTCDate } from "../../../util/helpers/dateHelpers";
 
 const DirectChatNewMessage = (props) => {
   const [typedValue, setTypedValue] = useState("");
@@ -40,7 +41,7 @@ const DirectChatNewMessage = (props) => {
             message: {
               userId,
               text: typedValue,
-              _created: new Date().toISOString(),
+              _created: convertLocalDateToUTCDate(new Date()),
             },
           })
         );

src/components/MarketPlace/Header/Header.js

@@ -75,10 +75,6 @@ const Header = (props) => {
     props.offers.filters.locations.clear();
     props.offers.applyFilters();
   };
-  // const goBack = () => {
-  //   history.goBack();
-  // };
-  console.log(headerString.text);
 
   return (
     <>
@@ -93,19 +89,19 @@ const Header = (props) => {
                   <CategoryHeaderIcon />
                   <HeaderLocation>
                     {/* {headerString} */}
-                    <HeaderCategoryString onClick={handleClickCategory}>
+                    <HeaderCategoryString component="span" onClick={handleClickCategory}>
                       {headerString.categoryString}
                       {headerString.subcategoryString && <>&nbsp;</>}
                     </HeaderCategoryString>
-                    <HeaderSubcategoryString onClick={handleClickSubcategory}>
+                    <HeaderSubcategoryString component="span" onClick={handleClickSubcategory}>
                       {headerString.subcategoryString}
                       {headerString.locationsString && <>&nbsp;</>}
                     </HeaderSubcategoryString>
-                    <HeaderLocationsString>
-                      <HeaderLocationsMainString>
+                    <HeaderLocationsString component="span">
+                      <HeaderLocationsMainString component="span">
                         {headerString.locationsString}
                       </HeaderLocationsMainString>
-                      <HeaderAltLocation>{altString}</HeaderAltLocation>
+                      <HeaderAltLocation component="span">{altString}</HeaderAltLocation>
                     </HeaderLocationsString>
                   </HeaderLocation>
                 </>

src/components/MarketPlace/Header/Header.styled.js

@@ -19,6 +19,12 @@ export const HeaderContainer = styled(Box)`
 `;
 export const TooltipInnerContainer = styled(Box)`
   width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  & * {
+    display: inline;
+  }
 `;
 export const HeaderLocation = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -29,9 +35,9 @@ export const HeaderLocation = styled(Typography)`
   flex: 2;
   margin-left: 9px;
   max-width: 50%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  position: relative;
+  top: -2px;
+
   &:after {
     content: ${(props) => (props.initial ? `":"` : `""`)};
     @media (max-width: 600px) {
@@ -52,6 +58,10 @@ export const HeaderCategoryString = styled(Typography)`
   /* position: relative;
   bottom: 2px; */
   cursor: pointer;
+  @media (max-width: 600px) {
+    font-size: 12px;
+    padding-top: 3px;
+  }
 `;
 export const HeaderSubcategoryString = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -62,6 +72,10 @@ export const HeaderSubcategoryString = styled(Typography)`
   /* position: relative;
   bottom: 2px; */
   cursor: pointer;
+  @media (max-width: 600px) {
+    font-size: 12px;
+    padding-top: 3px;
+  }
 `;
 export const HeaderLocationsString = styled(Typography)`
   /* position: relative;
@@ -69,6 +83,10 @@ export const HeaderLocationsString = styled(Typography)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  @media (max-width: 600px) {
+    font-size: 12px;
+    padding-top: 3px;
+  }
   max-width: 100%;
 `;
 export const HeaderLocationsMainString = styled(Typography)`
@@ -78,6 +96,10 @@ export const HeaderLocationsMainString = styled(Typography)`
   font-weight: 700;
   line-height: 22px;
   font-size: 16px;
+  @media (max-width: 600px) {
+    font-size: 12px;
+    padding-top: 3px;
+  }
 `;
 export const HeaderButton = styled(IconButton)`
   padding: 2px 10px;
@@ -137,7 +159,8 @@ export const HeaderAltLocation = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   color: ${selectedTheme.colors.primaryText};
-  /* margin-left: 5px; */
+  position: relative;
+  top: 0.5px;
   @media (max-width: 600px) {
     display: none;
   }

src/components/Popovers/PhonePopover/PhonePopover.js

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 
 const PhonePopover = (props) => {
   const {t} = useTranslation();
-  console.log(props);
   return (
     <PhonePopoverContainer>
       <Arrow />

src/hooks/useOffers/useOffers.js

@@ -20,6 +20,7 @@ import useQueryString from "./useQueryString";
 import { setQueryString } from "../../store/actions/queryString/queryStringActions";
 import {
   convertQueryStringForBackend,
+  makeHeaderStringFromQueryObjectHelper,
   makeHeaderStringHelper,
   makeQueryStringHelper,
 } from "../../util/helpers/queryHelpers";
@@ -63,7 +64,7 @@ const useOffers = () => {
   useEffect(() => {
     const headerStringLocal = makeHeaderStringHelper(filters);
     dispatch(setHeaderString(headerStringLocal));
-  }, [queryStringHook.queryString]);
+  }, [queryStringHook.queryString, filtersCleared]);
 
   // Initially set category, location and subcategory based on query string
   useEffect(() => {
@@ -101,6 +102,7 @@ const useOffers = () => {
         search.clear();
       }
       dispatch(setSearchString(queryObject[KEY_SEARCH]));
+      dispatch(setHeaderString(makeHeaderStringFromQueryObjectHelper(queryObject)));
     }
   }, [queryStringHook.isInitiallyLoaded]);
 
@@ -128,7 +130,7 @@ const useOffers = () => {
 
   const applyFilters = () => {
     setFiltersCleared(true);
-  }
+  };
 
   const clearFiltersAndApply = () => {
     clear();

src/pages/RegisterPages/Register/Register.js

@@ -87,7 +87,6 @@ const Register = () => {
         registerUser({ ...informations, ...values });
       }
     }
-    console.log({...informations, ...values})
     setInformations({ ...informations, ...values });
   };
 

src/util/helpers/dateHelpers.js

@@ -1,53 +1,82 @@
-import { format } from 'date-fns';
-// import { enUS } from 'date-fns/locale';
-import i18next from 'i18next';
+import { format } from "date-fns";
+import { enUS, sr } from "date-fns/locale";
+import i18next from "i18next";
 
-export function formatDate(date, fmt = 'MM/dd/y', locale) {
+export function formatDate(date, fmt = "MM/dd/y", locale = sr) {
   const dt = new Date(date);
   return format(dt, fmt, { locale });
 }
 
-export function formatDateTime(date) {
+export function formatDateTime(date, locale = enUS) {
   const dt = new Date(date);
-  return format(dt, 'MM.dd.y hh:mm');
+  return format(dt, "MM.dd.y hh:mm"), { locale };
 }
 
 export function getDateDay(date) {
   const dt = new Date(date);
-  return format(dt, 'dd');
+  return format(dt, "dd");
 }
 
 export function getDateMonth(date) {
   const dt = new Date(date);
-  return format(dt, 'MM');
+  return format(dt, "MM");
 }
 
 export function getDateYear(date) {
   const dt = new Date(date);
-  return format(dt, 'y');
+  return format(dt, "y");
 }
 
 export function formatDateTimeLocale(date) {
-  const dt = new Date(date);
-  return format(dt, 'MM/dd/y hh:mm aa');
+  const dayCreated =
+    date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+  const monthCreated =
+    date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+  const yearCreated = date.getFullYear();
+  const hourCreated =
+    date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  const minutesCreated =
+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  return `${dayCreated}.${monthCreated}.${yearCreated} ${hourCreated}:${minutesCreated}`;
 }
 
 // TODO add locale
 export function formatDateRange(dates) {
   const start = formatDate(dates.start);
   const end = formatDate(dates.end);
-  return i18next.t('common.date.range', { start, end });
+  return i18next.t("common.date.range", { start, end });
 }
 
 export function formatDateLocale(date) {
   const dayCreated =
-    date.getDate() < 10
-      ? "0" + date.getDate()
-      : date.getDate();
+    date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
   const monthCreated =
-    date.getMonth() < 10
-      ? "0" + (date.getMonth() + 1)
-      : date.getMonth() + 1;
+    date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
   const yearCreated = date.getFullYear();
   return `${dayCreated}.${monthCreated}.${yearCreated}`;
 }
+export function convertUTCDateToLocalDate(date) {
+  var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
+
+  var offset = date.getTimezoneOffset() / 60;
+  var hours = date.getHours();
+
+  newDate.setHours(hours - offset);
+
+  return newDate;
+}
+export function convertLocalDateToUTCDate(date) {
+  var newDate = new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
+
+  var offset = date.getTimezoneOffset() / 60;
+  var hours = date.getHours();
+
+  newDate.setHours(hours + offset);
+
+  return newDate;
+}
+export function getMessageDate(date) {
+  const blankTime = new Date(date.toISOString());
+  const newDate = convertUTCDateToLocalDate(blankTime);
+  return formatDateTimeLocale(newDate);
+}

src/util/helpers/queryHelpers.js

@@ -220,6 +220,41 @@ export const makeHeaderStringHelper = (filters) => {
     text: headerStringLocal,
   };
 };
+export const makeHeaderStringFromQueryObjectHelper = (queryObject) => {
+  new URLSearchParams().get;
+  let categoryString = `${ALL_CATEGORIES}`;
+  let subcategoryString = "";
+  let locationsString = "";
+  if (KEY_CATEGORY in queryObject) {
+    categoryString = queryObject[KEY_CATEGORY];
+    if (KEY_SUBCATEGORY in queryObject) {
+      subcategoryString = `${SPREAD}${queryObject[KEY_SUBCATEGORY]}`;
+    }
+  }
+  if (KEY_LOCATION in queryObject) {
+    locationsString = SPREAD;
+    if (!Array.isArray(queryObject[KEY_LOCATION])) {
+      locationsString += queryObject[KEY_LOCATION];
+    } else {
+      queryObject[KEY_LOCATION].forEach((location, index) => {
+        // Checking if item is last
+        if (index + 1 === queryObject[KEY_LOCATION].length) {
+          locationsString += location;
+        } else {
+          locationsString += location + COMMA;
+        }
+      });
+    }
+  }
+  let headerStringLocal = categoryString + subcategoryString + locationsString;
+
+  return {
+    categoryString,
+    subcategoryString,
+    locationsString,
+    text: headerStringLocal,
+  };
+};
 export const makeQueryStringHelper = (filters, paging, search, sorting) => {
   const newQueryString = new URLSearchParams();
   if (filters.category.selectedCategoryLocally?.name) {