Merge branch 'bugfix/app-changes' of https://git.dilig.net/selenaaasi/trampa-frontend

src/App.js

   useEffect(() => {
     socketInit(userId);
   }, [userId]);
-
   return (
     <Router history={history}>
       <Helmet>

src/components/Admin/Sidebar/MarketplaceButton/MarketplaceButton.js

   MarketplaceIcon,
 } from "./MarketplaceButton.styled";
 import { useTranslation } from "react-i18next";
+import history from "../../../../store/utils/history";
 
 const MarketplaceButton = () => {
   const { t } = useTranslation();

src/components/Admin/Sidebar/SidebarNavigation/SidebarNavigation.js

 import { isInRoute, routeMatches } from "../../../../util/helpers/routeHelpers";
 import { ADMIN_HOME_PAGE, ADMIN_USERS_PAGE } from "../../../../constants/pages";
 import { ADMIN_NAVIGATION } from "../../../../constants/adminNavigation";
+import history from "../../../../store/utils/history";
 
 const SidebarNavigation = () => {
   const { t } = useTranslation();

src/components/Buttons/ArrowButton/ArrowButton.styled.js

 import { ReactComponent as DownArrow } from "../../../assets/images/svg/arrow-down.svg";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../IconButton/IconButton";
 
 `}
   width: 18px;
   height: 18px;
-  /* position: relative;
+  position: relative;
   top: 1px;
-  left: 1px; */
+  left: 1px;
   & path {
     ${(props) =>
       props.disabled &&
   }
   ${(props) =>
     props.disabled &&
-    `
+    css`
     border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor} !important;
     &:hover {
         background-color: inherit;

src/components/Buttons/IconButton/IconButton.js

         onClick={props.onClick}
         sx={props.style}
         iconcolor={props.iconColor}
-        {...props}
+        // {...props}
       >
         {props.children}
       </IconButtonStyled>

src/components/Cards/ChatCard/ChatCard.js

 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";
+import { useSelector } from "react-redux";
+import { selectUserId } from "../../../store/selectors/loginSelectors";
 
 // Chat card is shown only on mobile phones (route /messages)
 const ChatCard = (props) => {
   const { isMobile } = useIsMobile();
+  const userId = useSelector(selectUserId);
 
   const chat = useMemo(() => {
     return props.chat;
   }, [props.chat]);
 
   const routeToItem = () => {
-    props.navigateToChat(chat?.chat?._id);
+    props.navigateToChat(chat?._id);
   };
+  const interlocutor = useMemo(() => {
+    return userId === chat?.participants[0]._id ? 1 : 0;
+  }, [userId, chat]);
 
   return (
     <ChatCardContainer onClick={routeToItem}>
       <UserImgWrapper>
         <UserImage
           src={getImageUrl(
-            chat?.interlocutorData?.image,
+            chat?.participants[interlocutor].image,
             variants.chatCard,
             isMobile
           )}
         />
       </UserImgWrapper>
-      <ChatInfo isBlocked={props.chat.interlocutorData?._blocked}>
+      <ChatInfo isBlocked={props.chat.participants[interlocutor]?._blocked}>
         <ProfileNameContainer>
-          <UserName>{chat?.interlocutorData?.name}</UserName>
-          {(props.chat.interlocutorData?._blocked ||
-            props.chat.interlocutorData?._deleted) && (
+          <UserName>{chat?.participants[interlocutor]?.company?.name}</UserName>
+          {(props.chat?.participants[interlocutor]?._blocked ||
+            props.chat?.participants[interlocutor]?._deleted) && (
             <BlockedProfile
               redText
               chatCard
               shortText
               aboveTitle
               hideIcon
-              deleted={props.chat.interlocutorData?._deleted}
+              deleted={props.chat?.participants[interlocutor]?._deleted}
             />
           )}
         </ProfileNameContainer>

src/components/Cards/ChatCard/MobileOfferDetails/MobileOfferDetails.js

   return (
     <OfferCardContainerMobile>
       <OfferTextMobile>{t("messages.cardProduct")}</OfferTextMobile>
-      <OfferTitleMobile>{props.chat?.offerData?.name}</OfferTitleMobile>
+      <OfferTitleMobile>{props.chat?.offer?.name}</OfferTitleMobile>
     </OfferCardContainerMobile>
   );
 };

src/components/Cards/CreateOfferCard/CreateOffer.js

   ITEM_DETAILS_PAGE,
   PROFILE_PAGE,
 } from "../../../constants/pages";
-import { dynamicRouteMatches, replaceInRoute } from "../../../util/helpers/routeHelpers";
+import {
+  dynamicRouteMatches,
+  replaceInRoute,
+} from "../../../util/helpers/routeHelpers";
 import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
 import {
   OFFER_ADD_SCOPE,
     if (editOffer) {
       if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
         dispatch(fetchOffers({ queryString }));
-      if (dynamicRouteMatches(PROFILE_PAGE) || dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE))
-        if (isAdmin) dispatch(fetchProfileOffers(customUserId));
+      if (
+        dynamicRouteMatches(PROFILE_PAGE) ||
+        dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)
+      )
+        if (isAdmin)
+          dispatch(fetchProfileOffers({ idProfile: customUserId, isAdmin }));
         else dispatch(fetchProfileOffers(userId));
 
       if (

src/components/Cards/FilterCard/Choser/CategoryChoser/CategoryChoser.js

     filters.subcategory.setSelectedSubcategory({});
     props.offers.applyFilters();
   };
-  console.log(props);
   useImperativeHandle(ref, () => ({
     closeSection: () => {
       setIsOpened(false);
 
   useEffect(() => {
     if (
-      !filters.category.selectedCategoryLocally ||
+      (filters.category.selectedCategoryLocally &&
+        !("_id" in filters.category.selectedCategoryLocally)) ||
       (filters.category.selectedCategoryLocally?._id === 0 && !isOpened)
     ) {
       setIsOpened(false);

src/components/Cards/FilterCard/Choser/CompanyChoser/CompanyChoser.js

 
 const CompanyChoser = forwardRef((props, ref) => {
   const [isOpened, setIsOpened] = useState(false);
+  const [appliedFilters, setAppliedFilters] = useState(false);
   const filters = props.filters;
   const { t } = useTranslation();
 
     }
   }, [filters.companies.selectedCompaniesLocally]);
 
+  useEffect(() => {
+    if (appliedFilters) {
+      props?.offers?.apply();
+      setAppliedFilters(false);
+    }
+  }, [filters.companies.selectedCompaniesLocally]);
+
+  const handleSetItemsSelected = (items) => {
+    filters.companies.setSelectedCompanies(items);
+    setAppliedFilters(true);
+  };
+
   return (
     <FilterSubDropdown
       searchPlaceholder={t("filters.company.placeholder")}
       handleOpen={() => setIsOpened((prevIsOpened) => !prevIsOpened)}
       icon={<CompanyIcon />}
       title={t("filters.company.title")}
-      setItemsSelected={filters.companies.setSelectedCompanies}
+      setItemsSelected={handleSetItemsSelected}
       companies
       offers={props.offers}
     />

src/components/Cards/FilterCard/Choser/LocationChoser/LocationChoser.js

 
 const LocationChoser = forwardRef((props, ref) => {
   const { t } = useTranslation();
+  const [appliedFilters, setAppliedFilters] = useState(false);
   const [isOpened, setIsOpened] = useState(false);
   const filters = props.filters;
 
-  console.log(props);
-
   const allLocations = useMemo(
     () => filters.locations.allLocations || [],
     [filters.locations]
       setIsOpened(true);
     }
   }, [filters.locations.selectedLocationsLocally]);
+
+  useEffect(() => {
+    if (appliedFilters) {
+      props?.offers?.apply();
+      setAppliedFilters(false);
+    }
+  }, [appliedFilters]);
+
+  const handleSetItemsSelected = (items) => {
+    filters.locations.setSelectedLocations(items);
+    setAppliedFilters(true);
+  };
   return (
     <FilterCheckboxDropdown
       searchPlaceholder={t("filters.location.placeholder")}
       handleOpen={() => setIsOpened((prevIsOpened) => !prevIsOpened)}
       icon={<LocationIcon />}
       title={t("filters.location.title")}
-      setItemsSelected={filters.locations.setSelectedLocations}
+      setItemsSelected={handleSetItemsSelected}
       offers={props.offers}
     />
   );

src/components/Cards/FilterCard/Choser/SubcategoryChoser/SubcategoryChoser.js

     },
   }));
 
+  const handleSelectSubcategory = (subcategory) => {
+    filters.subcategory.setSelectedSubcategory(subcategory, !props.myOffers);
+    // if (props.myOffers) props.offers?.applyFilters();
+  };
+
   useEffect(() => {
-    if (props?.queryStringHook?.isInitiallyLoaded || props.isMyOffers) {
+    if (props?.queryStringHook?.isInitiallyLoaded || props.myOffers) {
       if (
-        !filters.category.selectedCategoryLocally ||
-        filters.category.selectedCategoryLocally?._id === 0
+        (filters.category.selectedCategoryLocally &&
+          !("_id" in filters.category.selectedCategoryLocally)) ||
+        filters.category.selectedCategoryLocally?._id === 0 ||
+        !filters.category.selectedCategoryLocally
       ) {
         setIsOpened(false);
         setIsDisabled(true);
       }
     } else {
       if (
-        !filters.subcategory.selectedSubcategoryLocally ||
+        (filters.subcategory.selectedSubcategoryLocally &&
+          !("_id" in filters.subcategory.selectedSubcategoryLocally)) ||
         filters.subcategory.selectedSubcategoryLocally?._id === 0
       ) {
         setIsOpened(false);
         if (
-          !filters.category.selectedCategoryLocally ||
+          (filters.category.selectedCategoryLocally &&
+            !("_id" in filters.category.selectedCategoryLocally)) ||
           filters.category.selectedCategoryLocally?._id === 0
         ) {
           setIsDisabled(true);
           : t("filters.subcategories.title")
       }
       searchPlaceholder={t("filters.subcategories.placeholder")}
-      setSelected={filters.subcategory.setSelectedSubcategory}
+      setSelected={handleSelectSubcategory}
       selected={filters.subcategory.selectedSubcategoryLocally}
       open={isOpened}
       disabled={isDisabled}
   filters: PropTypes.any,
   categoryOpened: PropTypes.bool,
   queryStringHook: PropTypes.any,
-  isMyOffers: PropTypes.bool,
+  myOffers: PropTypes.bool,
   offers: PropTypes.any,
 };
 

src/components/Cards/FilterCard/FilterCard.js

           queryStringHook={offers.queryStringHook}
           ref={subcategoryRef}
           categoryOpened={categoryRef.current?.isOpened}
-          isMyOffers={props.myOffers}
+          myOffers={props.myOffers}
           offers={offers}
         />
 

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/CheckboxDropdownList.js

   const data = props.data;
   const [isOpened, setIsOpened] = useState(false);
   const handleDelete = (item) => {
-    props.setItemsSelected([...props.filters.filter((p) => p !== item)]);
-    props.offers.applyFilters();
+    console.log(item);
+    console.log(props.filters)
+    props.setItemsSelected([...props.filters.filter((p) => p?._id !== item?._id)]);
   };
   const handleOpen = () => {
     setIsOpened((prevState) => !prevState);

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

   const [isOpened, setIsOpened] = useState(false);
   const [toSearch, setToSearch] = useState("");
   const { data } = props;
-  console.log(props);
 
   useEffect(() => {
     setDataToShow([...data]);

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSubDropdown.js

       filters={props.filters}
       icon={props.icon}
       data={data}
+      offers={props?.offers}
       searchPlaceholder={props.searchPlaceholder}
       open={props?.open !== undefined ? props.open : isOpened}
       handleOpen={handleOpen}

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

                 label={props.firstOption.label}
                 // number={item.numberOfProducts}
                 fullWidth
-                checked={!props.selected || props.selected._id === 0}
+                checked={
+                  (props?.selected && !("_id" in props?.selected)) ||
+                  props?.selected?._id === 0 || !props?.selected
+                }
                 onChange={props.setSelected}
               />
             </DropdownItem>

src/components/Cards/ItemDetailsCard/ImagesCarousel/ImagesCarousel.js

           <CloseButtonIcon />
         </CloseButton>
         <Scroller isCarousel>
-          {props?.offer?.offer?.images.map((image) => {
+          {props?.images.map((image) => {
             if (!image) return;
             return (
               <OfferImage
           })}
         </Scroller>
         <Offer>
-          {t("carousel.offer")} <OfferSpan>{props.offer.offer.name}</OfferSpan>
+          {t("carousel.offer")} <OfferSpan>{props.offer.name}</OfferSpan>
         </Offer>
       </ImagesCarouselContainer>
     </>
   offer: PropTypes.any,
   onModalClose: PropTypes.any,
   createOffer: PropTypes.bool,
+  images: PropTypes.array
 };
 
 export default ImagesCarousel;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

   const offer = useMemo(() => {
     if (props.offer) {
       if (
-        props.offer.offer._id === routeMatch.params?.offerId ||
-        props.createOffer
+        props.offer._id === routeMatch.params?.offerId &&
+        !props?.createOffer
       ) {
         return props.offer;
       }
+      if (props.createOffer) return props.offer.offer;
     }
     return itemDetailsData;
   }, [props.offer, props.createOffer, routeMatch.params]);
   }, []);
 
   useEffect(() => {
-    if (offer?.offer?._id) {
-      increaseOfferCounter(offer?.offer?._id);
+    if (offer?._id) {
+      increaseOfferCounter(offer?._id);
     }
   }, [offer]);
 
-  const date = formatDateLocale(new Date(offer?.offer?._created));
+  const date = formatDateLocale(new Date(offer?._created));
 
   const startExchange = () => {
-    startChat(chats, offer?.offer, userId);
+    startChat(chats, offer, userId);
   };
 
   const showDeleteOfferModalHandler = () => {
     dispatch(
       toggleDeleteOfferModal({
-        offer: offer.offer,
+        offer: offer,
         isAdmin: props.isAdmin,
       })
     );
     dispatch(
       toggleEditOfferModal({
         editOffer: true,
-        offer: offer?.offer,
+        offer: offer,
         isAdmin: props.isAdmin,
-        customUserId: offer?.offer?.userId,
+        customUserId: offer?.user?._id,
       })
     );
   };
   const showPinOfferModalHandler = () => {
     dispatch(
       toggleDeleteOfferModal({
-        offer: offer?.offer,
+        offer: offer,
         pin: true,
-        pinnedOffer: offer?.offer?.pinned,
+        pinnedOffer: offer?.pinned,
         deleteOffer: false,
       })
     );
   };
 
+  console.log(props)
   return (
     <>
       <ItemDetailsCardContainer
           <Info>
             <Information
               icon={<CategoryIcon />}
-              value={offer?.offer?.category?.name}
+              value={offer?.category?.name}
             />
             <Information
               icon={<SubcategoryIcon />}
-              value={offer?.offer?.subcategory}
-            />
-            <Information
-              icon={<QuantityIcon />}
-              value={offer?.offer?.condition}
+              value={offer?.subcategory}
             />
+            <Information icon={<QuantityIcon />} value={offer?.condition} />
             {!props.hideViews && (
-              <Information
-                icon={<EyeIcon />}
-                value={offer?.offer?.views?.count}
-              />
+              <Information icon={<EyeIcon />} value={offer?.views?.count} />
             )}
           </Info>
           <PostDate previewCard={props.previewCard}>{date}</PostDate>
             <DateButtonsContainer>
               {props.isMyOffer && (
                 <ButtonsContainer>
-                  <PinIconContainer onClick={showPinOfferModalHandler}>
-                    {offer?.offer?.pinned ? <UnpinIcon /> : <PinIcon />}
-                  </PinIconContainer>
+                  {props?.isAdmin && (
+                    <PinIconContainer onClick={showPinOfferModalHandler}>
+                      {offer?.pinned ? <UnpinIcon /> : <PinIcon />}
+                    </PinIconContainer>
+                  )}
                   <EditIconContainer onClick={showEditOfferModalHandler}>
                     <EditIcon />
                   </EditIconContainer>

src/components/Cards/ItemDetailsCard/OfferDetails/OfferDetails.js

   const [imagesCarouselModal, setImagesCarouselModal] = useState(false);
 
   useEffect(() => {
-    if (props?.offer?.offer?.images) {
-      props.offer.offer.images.map((file) => {
+    if (props?.offer?.images) {
+      props.offer.images.map((file) => {
         if (file) {
           if (typeof file !== "string") {
             var reader = new FileReader();
         }
       });
     }
-  }, [props?.offer?.offer?.images]);
-  const date = formatDateLocale(new Date(offer?.offer?._created));
+    return () => {
+      setImages([]);
+    };
+  }, [props?.offer?.images]);
+  const date = formatDateLocale(new Date(offer?._created));
   const onModalClose = () => {
     setImagesCarouselModal(false);
   };
+  console.log(props);
   return (
     <>
       <Details
       >
         {!isMobile && props.singleOffer && (
           <ScrollerVertical>
-            {props?.offer?.offer?.images.map((item, index) => (
+            {images.map((item, index) => (
               <OfferImage
-                src={
-                  props.createOffer
-                    ? images[index]
-                    : getImageUrl(item, variants.offerCard, isMobile)
-                }
+                src={images[index]}
                 alt={t("offer.imageAlt")}
                 key={item}
                 previewCard={props.previewCard}
           singleOffer={props.singleOffer}
           previewCard={props.previewCard}
         >
-          <OfferTitle singleOffer={props.singleOffer}>
-            {offer?.offer?.name}
-          </OfferTitle>
+          <OfferTitle singleOffer={props.singleOffer}>{offer?.name}</OfferTitle>
           {isMobile && (
             <ScrollerHorizontal>
-              {props?.offer?.offer?.images.map((item, index) => {
+              {images.map((item, index) => {
                 if (!item) return;
                 return (
                   <OfferImage
-                    src={
-                      props.createOffer
-                        ? images[index]
-                        : getImageUrl(item, variants.offerCard, isMobile)
-                    }
+                    src={images[index]}
                     key={item}
                     previewCard={props.previewCard}
                     onClick={() =>
               {t("itemDetailsCard.description")}
             </OfferDescriptionTitle>
             <OfferDescriptionText showBarterButton={props.showExchangeButton}>
-              {offer?.offer?.description}
+              {offer?.description}
             </OfferDescriptionText>
             <DesciprtionPostDate previewCard={props.previewCard}>
               {date}
         </OfferInfoContainer>
       </Details>
       {imagesCarouselModal && (
-        <ImagesCarousel offer={props.offer} onModalClose={onModalClose} />
+        <ImagesCarousel
+          offer={props.offer}
+          images={images}
+          onModalClose={onModalClose}
+        />
       )}
     </>
   );

src/components/Cards/LittleOfferCard/LittleOfferCard.styled.js

     display: flex;
     flex-direction: row;
     position: relative;
+    @media (max-width: 600px) {
+        width: 211px;
+    }
 `
 export const OfferImage = styled.img`
     width: 54px;
 `
 export const OfferDetails = styled(Box)`
     display: flex;
+    text-align: left;
     flex-direction: column;
     margin-top: 25px;
     margin-left: 9px;
     position: relative;
     top: 1.5px;
     right: 2px;
+    & path {
+        stroke-width: 1;
+    }
 `
 export const OfferSwapsIconContainer = styled(Icon)`
     width: 40px;
         width: 40px;
         height: 40px;
     }
+    @media (max-width: 600px) {
+        width: 32px;
+        height: 32px;
+        top: -15px;
+        right: -15px;
+    }
 `
 export const OfferSwapsIcon = styled(Swaps)`
     width: 18px;
     height: 18px;
     position: relative;
     top: 10px;
+    @media (max-width: 600px) {
+        width: 14px;
+        height: 14px;
+        top: 2px;
+        left: -4px;
+    }
 `

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

   overflow: hidden;
   border-radius: 100%;
   @media (max-width: 600px) {
-    display: none;
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
   }
 `;
 export const MessageContent = styled(Box)`
   min-width: 110px;
   @media (max-width: 600px) {
     width: 100%;
+    margin: 0;
+    ${props => props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
   }
 `;
 export const MessageText = styled(Typography)`

src/components/Cards/MiniChatCard/MiniChatCard.js

 import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 import { DIRECT_CHAT_PAGE } from "../../../constants/pages";
 import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import { selectUserId } from "../../../store/selectors/loginSelectors";
 
 const MiniChatCard = (props) => {
   const { t } = useTranslation();
   const { isMobile } = useIsMobile();
+  const userId = useSelector(selectUserId);
   const changeChat = () => {
     history.push(
       replaceInRoute(DIRECT_CHAT_PAGE, {
-        chatId: props?.chat?.chat?._id,
+        chatId: props?.chat?._id,
       })
     );
   };
+  const interlocutorData = useMemo(() => {
+    if (props?.chat?.participants) {
+      let interlocutor = props?.chat?.participants[0]._id === userId ? 1 : 0;
+      return props?.chat?.participants[interlocutor];
+    }
+    return {};
+  }, [props?.chat]);
   return (
     <MiniChatCardContainer selected={props.selected} onClick={changeChat}>
       <ProfileImage
-        src={getImageUrl(
-          props?.chat?.interlocutorData?.image,
-          variants.chatCard,
-          isMobile
-        )}
+        src={getImageUrl(interlocutorData?.image, variants.chatCard, isMobile)}
       />
-      <ProfileDetails isBlocked={props.chat.interlocutorData?._blocked}>
+      <ProfileDetails isBlocked={interlocutorData?._blocked}>
         <ProfileNameContainer>
           <ProfileName selected={props.selected}>
-            {props?.chat?.interlocutorData?.name}
+            {interlocutorData?.company?.name}
           </ProfileName>
-          {(props.chat.interlocutorData?._blocked ||
-            props.chat.interlocutorData?._deleted) && (
+          {(interlocutorData?._blocked || interlocutorData?._deleted) && (
             <BlockedProfile
               redText
               chatCard
               shortText
               aboveTitle
               hideIcon
-              deleted={props.chat.interlocutorData?._deleted}
+              deleted={interlocutorData?._deleted}
             />
           )}
         </ProfileNameContainer>
           {t("messages.cardProduct")}
         </ProfileProduct>
         <ProfileProductName selected={props.selected}>
-          {props?.chat?.offerData?.name}
+          {props?.chat?.offer?.name}
         </ProfileProductName>
       </ProfileDetails>
     </MiniChatCardContainer>

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

 import useIsMobile from "../../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
 import { selectQueryString } from "../../../../store/selectors/queryStringSelectors";
-import OfferDescription from "./OfferDescription/OfferDescription";
 import CancelButton from "./CancelButton/CancelButton";
 import SaveButton from "./SaveButton/SaveButton";
 import { closeModal } from "../../../../store/actions/modal/modalActions";
 import {
   dynamicRouteMatches,
+  replaceInRoute,
   routeMatches,
 } from "../../../../util/helpers/routeHelpers";
 import {
   ITEM_DETAILS_PAGE,
   PROFILE_PAGE,
 } from "../../../../constants/pages";
+import { OfferDescriptionContainer } from "./DeleteOfferLabeledCard/DeleteOfferLabeledCard.styled";
 
 const DeleteOffer = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const queryString = useSelector(selectQueryString);
   const history = useHistory();
-  const userId = props.offer.userId;
+  const userId = props.offer.user._id;
   const { isMobile } = useIsMobile();
   const offerId = props.offer._id;
   const closeDeleteModalHandler = () => {
       dynamicRouteMatches(PROFILE_PAGE) ||
       dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)
     )
-      dispatch(fetchProfileOffers(userId));
+      dispatch(fetchProfileOffers({ idProfile: userId, isAdmin: true }));
     if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE))
       dispatch(fetchOffers({ queryString }));
-    if (
-      dynamicRouteMatches(ITEM_DETAILS_PAGE) ||
-      dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE)
-    ) {
+    if (dynamicRouteMatches(ITEM_DETAILS_PAGE)) {
+      history.push(
+        replaceInRoute(PROFILE_PAGE, {
+          profileId: userId,
+        })
+      );
+    }
+    if (dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE)) {
       if (props.pin) dispatch(fetchOneOffer(props.offer?._id));
-      else history.goBack();
+      else
+        history.push(
+          replaceInRoute(ADMIN_SINGLE_USER_PAGE, { profileId: userId })
+        );
     }
   };
 
               )}
             />
           </OfferImageContainer>
-          <OfferDescription
+          <OfferDescriptionContainer
             offerName={props.offer.name}
             categoryName={props.offer.category.name}
           />

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

   border-radius: 2px;
 
   @media screen and (max-width: 600px) {
-    margin-right: 13px;
+    /* margin-right: 13px; */
   }
 `;
 

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

 import React from "react";
 import PropTypes from "prop-types";
 import {
+  OfferDescriptionContainer,
   OfferImage,
   OfferImageContainer,
   OfferInfo,
   getImageUrl,
   variants,
 } from "../../../../../util/helpers/imageUrlGetter";
-import OfferDescription from "../OfferDescription/OfferDescription";
 import useIsMobile from "../../../../../hooks/useIsMobile";
 
 const DeleteOfferLabeledCard = (props) => {
           )}
         />
       </OfferImageContainer>
-      <OfferDescription
+      <OfferDescriptionContainer
         offerName={props.offer.name}
         categoryName={props.offer.category.name}
       />

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

 import selectedTheme from "../../../../../themes";
 import { ReactComponent as Remove } from "../../../../../assets/images/svg/trash-gold.svg";
 import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import OfferDescription from "../OfferDescription/OfferDescription";
 export const OfferInfo = styled(Box)`
   width: 211px;
   height: 90px;
   border-radius: 2px;
 
   @media screen and (max-width: 600px) {
-    margin-right: 13px;
+    /* margin-right: 13px; */
   }
 `;
 
 export const RemoveIcon = styled(Remove)`
   cursor: default;
 `;
+export const OfferDescriptionContainer = styled(OfferDescription)`
+  margin-left: 0;
+`

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

 import {
   CategoryIcon,
   CategoryIconContainer,
+  OfferCategoryContainer,
   OfferDescriptionCategory,
   OfferDescriptionContainer,
   OfferDescriptionTitle,
 
 const OfferDescription = (props) => {
   return (
-    <OfferDescriptionContainer>
+    <OfferDescriptionContainer className={props?.className}>
       <OfferDescriptionTitle>{props.offerName}</OfferDescriptionTitle>
-      <OfferDescriptionCategory>
+      <OfferCategoryContainer>
         <CategoryIconContainer
           color={selectedTheme.colors.iconStrokeDisabledColor}
           component="span"
         >
           <CategoryIcon />
         </CategoryIconContainer>
-        {props.categoryName}
-      </OfferDescriptionCategory>
+        <OfferDescriptionCategory>
+          {props.categoryName}
+        </OfferDescriptionCategory>
+      </OfferCategoryContainer>
     </OfferDescriptionContainer>
   );
 };
 OfferDescription.propTypes = {
   offerName: PropTypes.string,
   categoryName: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default OfferDescription;

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

   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryDarkText};
 `;
+export const OfferCategoryContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+`
 
 export const CategoryIconContainer = styled(Icon)`
   margin-right: 4px;
   position: relative;
   top: 2px;
+  display: inline;
   & svg {
     width: 14px;
     position: relative;
-    top: -6px;
+    top: -4px;
   }
 `;
 export const CategoryIcon = styled(Category)``;

src/components/Cards/OfferCard/OfferCard.js

           })
         );
       } else {
-        history.push(
-          replaceInRoute(ITEM_DETAILS_PAGE, {
+        history.push({
+          pathname: replaceInRoute(ITEM_DETAILS_PAGE, {
             offerId: itemId,
-          })
-        );
+          }),
+          state: {
+            view: true,
+          },
+        });
       }
     }
   };
         editOffer: true,
         offer: props.offer,
         isAdmin: props.isAdmin,
-        customUserId: props?.offer?.userId,
+        customUserId: props?.offer?.user._id,
       })
     );
   };

src/components/Cards/ProfileCard/ProfileControl/ProfileControl.js

     );
   };
   const handleEditProfile = () => {
-    if (!props.profile?._blocked) {
+    console.log("edit")
+    console.log(props)
+    if (!props.profile?._blocked || props?.isAdmin) {
+      console.log("edit2")
       dispatch(
         toggleEditProfileModal({
           userId: props.profile._id,
       );
     }
   };
+  console.log(props)
   return (
     <ButtonsContainer>
-      {props.profile?._blocked && !props.isMobile && <BlockedProfile />}
+      {props.profile?._blocked && !props.isMobile && !props?.isAdmin && <BlockedProfile />}
       {props.isAdmin && (
         <>
           {props.profile?._blocked ? (

src/components/Cards/RequestExchangeCard/RequestExchangeCard.js

   const requester = useSelector(selectRequester);
   const exchange = useSelector(selectExchange);
   const amIBuyer = useMemo(
-    () => exchange?.buyer?.userId === userId,
+    () => exchange?.buyer?.user?._id === userId,
     [exchange, userId]
   );
   const haveIAccepted = useMemo(
     () => (amIBuyer ? exchange?.buyer?.accepted : exchange?.seller?.accepted),
     [amIBuyer, exchange]
   );
-  const interlucatorUserId = useMemo(
-    () => (amIBuyer ? exchange?.seller?.userId : exchange?.buyer?.userId),
+  const interlocutorUserId = useMemo(
+    () => (amIBuyer ? exchange?.seller?.user?._id : exchange?.buyer?.user?._id),
     [exchange, amIBuyer]
   );
   const message = useMemo(() => {
           </MessageText>
         );
       }
-    } else if (requester === requesterStatus.INTERLUCATOR) {
+    } else if (requester === requesterStatus.interlocutor) {
       return (
         <RequestExchangeMessage
           haveIAccepted={haveIAccepted}
           chatId={props.chatId}
           userId={userId}
-          interlucatorUserId={interlucatorUserId}
+          interlocutorUserId={interlocutorUserId}
         />
       );
     }
     return "";
-  }, [requester, t, haveIAccepted, interlucatorUserId, userId, exchange]);
+  }, [requester, t, haveIAccepted, interlocutorUserId, userId, exchange]);
   return (
     <RequestExchangeCardContainer ismymessage={props.isMyMessage}>
       <InfoIcon />

src/components/Cards/RequestExchangeCard/RequestExchangeCard.styled.js

   min-width: 110px;
   @media (max-width: 600px) {
     width: 100%;
+    margin: 0;
+    ${props => props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
   }
 `;
 export const MessageText = styled(Typography)`

src/components/Cards/RequestExchangeCard/RequestExchangeMessage/RequestExchangeMessage.js

 import { useTranslation } from "react-i18next";
 import { acceptExchangeSocket } from "../../../../socket/socket";
 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 { convertLocalDateToUTCDate } from "../../../../util/helpers/dateHelpers";
 import requesterStatus from "../../../../constants/requesterStatus";
   const exchange = useSelector(selectExchange);
   const requester = useSelector(selectRequester);
 
-  const handleAcceptExchange = () => {
+  const handleAcceptExchangeSuccess = () => {
+    console.log("accept salje i prima 3 POZVANA RESPONSE FUNKCIJA");
     acceptExchangeSocket(
       props.chatId,
       props.userId,
-      props.interlucatorUserId,
+      props.interlocutorUserId,
       () => {
-        dispatch(
-          acceptExchange({
-            exchangeId: exchange._id,
-          })
-        );
+        console.log("accept salje i prima 4 SOCKET FUNKCIJA");
         dispatch(
           addNewMessage({
             _id: props.chatId,
             message: {
-              userId: props.userId,
+              user: {
+                _id: props.userId,
+              },
               text: "",
               isAcceptRequest: true,
               _created: convertLocalDateToUTCDate(new Date()),
       }
     );
   };
+  const handleAcceptExchange = () => {
+    console.log("accept salje i prima 1 POZVANA FUNKCIJA");
+    dispatch(
+      acceptExchange({
+        exchangeId: exchange._id,
+        handleApiResponseSuccess: handleAcceptExchangeSuccess,
+      })
+    );
+  };
   return (
     <RequestExchangeMessageContainer>
       <RequestExchangeMessageText>
           onClick={handleAcceptExchange}
           disabled={props.haveIAccepted}
         >
-          {props.haveIAccepted ? t("messages.acceptedRequest") : t("messages.acceptRequest")}
+          {props.haveIAccepted
+            ? t("messages.acceptedRequest")
+            : t("messages.acceptRequest")}
         </RequestExchangeMessageButton>
       </RequestExchangeMessageButtonsContainer>
     </RequestExchangeMessageContainer>
   children: PropTypes.node,
   chatId: PropTypes.string,
   userId: PropTypes.string,
-  interlucatorUserId: PropTypes.string,
+  interlocutorUserId: PropTypes.string,
   haveIAccepted: PropTypes.any,
 };
 

src/components/Cards/UserReviewsCard/UserReviewsCard.js

         ...props.review,
       };
     }
+    let userWhoGaveReview =
+      props?.review?.exchange?.buyer?.user?._id === props?.review?.user?._id
+        ? "buyer"
+        : "seller";
+    let userWhoRevievedReview =
+      userWhoGaveReview === "buyer" ? "seller" : "buyer";
     let isSuccessfulSwap = reviewEnum.YES.mainText.toUpperCase();
     if (
       props.review.succeeded === reviewEnum.NO.backendText ||
       isGoodCommunication = reviewEnum.NO.mainText.toUpperCase();
     return {
       _id: props.review._id,
-      name:
-        props.review?.reviewAdditionalData?.userWhoGave?.company?.name ||
-        props.review?.offer?.name,
-      image:
-        props.review?.reviewAdditionalData?.userWhoGave?.image ||
-        props.review?.offer?.image,
-      userId: props.review.userId,
+      name: props?.review?.exchange[userWhoGaveReview]?.user?.company?.name,
+      image: props?.review?.exchange[userWhoGaveReview]?.user?.image,
+      userId: props.review.user?._id,
       isGoodCommunication,
       isSuccessfulSwap,
       quote: props?.review?.message,
-      offerName:
-        props?.review?.reviewAdditionalData?.offerData?.name ||
-        props?.review?.userWhoGaveReview?.name,
-      offerImage:
-        props?.review?.reviewAdditionalData?.offerData?.firstImage ||
-        props?.review?.userWhoGaveReview?.image,
+      offerName: props?.review?.exchange?.offer?.name,
+      offerImage: props?.review?.exchange?.offer?.images[0],
       userWhoReceived:
-        props?.review?.reviewAdditionalData?.userWhoReceived?.company?.name,
+        props?.review?.exchange[userWhoRevievedReview]?.user?.company?.name,
       _deleted: props?.review?._deleted,
     };
   }, [props.review]);
       handleRemove={handleRemove}
       hasGivenReview={props.hasGivenReview}
       rightReviews={props.rightReviews}
+      isProfileReviews={props?.isProfileReviews}
       isAdmin={props.isAdmin}
     />
   );
   hasGivenReview: PropTypes.bool,
   rightReviews: PropTypes.bool,
   isAdmin: PropTypes.bool,
+  userId: PropTypes.string,
 };
 UserReviewsCard.defaultProps = {
   isProfileReviews: false,

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/RemoveButton/RemoveButton.js

 import { RemoveButtonContainer, RemoveIcon } from "./RemoveButton.styled";
 
 const RemoveButton = (props) => {
+  console.log(props)
   return (
     <RemoveButtonContainer
       isRemoved={props.isRemoved}
       onClick={props.onClick}
       hasGivenReview={props.hasGivenReview}
+      isProfileReviews={props?.isProfileReviews}
     >
       <RemoveIcon isRemoved={props.isRemoved} />
     </RemoveButtonContainer>
   onClick: PropTypes.func,
   hasGivenReview: PropTypes.bool,
   isRemoved: PropTypes.bool,
+  isProfileReviews: PropTypes.any
 };
 
 export default RemoveButton;

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/RemoveButton/RemoveButton.styled.js

 
 export const RemoveButtonContainer = styled(IconButton)`
   position: absolute;
-  top: ${(props) => (props.hasGivenReview ? "79px" : "16px")};
+  top: ${(props) =>
+    props.hasGivenReview && props.isProfileReviews ? "79px" : "16px"};
   right: 16px;
-  background-color: ${props => props.isRemoved ? "transparent" : selectedTheme.colors.primaryIconBackgroundColor};
+  background-color: ${(props) =>
+    props.isRemoved
+      ? "transparent"
+      : selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   width: 32px;
   height: 32px;
-  ${props => props.isRemoved && css`
-    & button:hover {
-      background-color: transparent;
-      cursor: auto;
-    }
-  `}
+  ${(props) =>
+    props.isRemoved &&
+    css`
+      & button:hover {
+        background-color: transparent;
+        cursor: auto;
+      }
+    `}
   & button {
     width: 32px;
     height: 32px;
 `;
 export const RemoveIcon = styled(Remove)`
   & path {
-    stroke: ${props => props.isRemoved && selectedTheme.colors.blockedColor};
+    stroke: ${(props) => props.isRemoved && selectedTheme.colors.blockedColor};
   }
 `;

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/ReviewQuote/ReviewQuote.styled.js

 export const ThumbContainer = styled(Grid)`
   max-width: 20px;
 `;
-export const ReviewQuoteTextContainer = styled(Grid)``;
+export const ReviewQuoteTextContainer = styled(Box)`
+  flex: 1;
+`;
 export const ReviewQuoteText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/UserReviewsSingleCard.js

         <RemoveButton
           review={props.review}
           onClick={handleRemove}
+          isProfileReviews={props?.isProfileReviews}
           hasGivenReview={props.hasGivenReview}
           isRemoved={props.review?._deleted}
         />
   isAdmin: PropTypes.bool,
   className: PropTypes.string,
   lastReview: PropTypes.bool,
+  isProfileReviews: PropTypes.any,
 };
 UserReviewsSingleCard.defaultProps = {
   lastReview: false,

src/components/ChatColumn/ChatColumn.js

   fetchChats,
 } from "../../store/actions/chat/chatActions";
 import useSorting from "../../hooks/useOffers/useSorting";
-import { addMesageListener, removeMessageListener } from "../../socket/socket";
+import { addMessageListener, removeMessageListener } from "../../socket/socket";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";
 import SkeletonChatColumn from "./SkeletonChatColumn/SkeletonChatColumn";
       history.goBack();
       return;
     }
-    addMesageListener(({ succeed, data }) => {
+    addMessageListener(({ succeed, data }) => {
+
       if (succeed) {
         dispatch(
           addNewMessage({

src/components/CreateReview/CreateReview.js

 import FirstStepCreateReview from "./FirstStep/FirstStepCreateReview";
 import SecondStepCreateReview from "./SecondStep/SecondStepCreateReview";
 import ThirdStepCreateReview from "./ThirdStep/ThirdStepCreateReview";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { giveReview } from "../../store/actions/review/reviewActions";
-import { selectUserId } from "../../store/selectors/loginSelectors";
 import { reviewEnum } from "../../enums/reviewEnum";
 import { fetchExchange } from "../../store/actions/exchange/exchangeActions";
 import { closeModal } from "../../store/actions/modal/modalActions";
   const [informations, setInformations] = useState({});
   const [currentStep, setCurrentStep] = useState(1);
   const dispatch = useDispatch();
-  const userId = useSelector(selectUserId);
   const closeModalHandler = () => {
     dispatch(closeModal());
   };
-  setTimeout(() => {
-    dispatch(closeModal());
-  }, 3000);
   const handleApiResponseSuccess = () => {
     dispatch(fetchExchange(props.exchange._id));
   };
     dispatch(
       giveReview({
         review: {
-          exchangeId: props.exchange._id,
-          userId: userId,
+          exchange: {
+            _id: props.exchange._id,
+          },
           succeeded,
           communication,
           message: informations.comment,

src/components/CreateReview/CreateReview.styled.js

     max-width: 100vw;
     left: 0;
     top: 0;
-    padding: 0 30px;
+    padding: 0 18px;
   }
 `;
 export const NextButton = styled(PrimaryButton)`
   @media (max-width: 600px) {
     height: 42px;
     position: absolute;
-    bottom: 15px;
-    width: calc(100% - 48px);
+    bottom: 9px;
+    width: calc(100vw - 36px);
     left: 0;
-    margin-left: 24px;
+    margin-left: 9px;
   }
 `;
 export const CloseButton = styled(IconButton)`
   top: 36px;
   right: 36px;
   @media (max-width: 600px) {
-    top: 24px;
-    right: 24px;
+    top: 32px;
+    right: 22px;
   }
 `;
 export const CloseIcon = styled(Close)`
   left: 36px;
 
   @media (max-width: 600px) {
-    top: 24px;
+    top: 40px;
     left: 24px;
     width: 18px;
     height: 18px;
     margin-bottom: 24px;
   }
 `;
+export const CreateReviewFlexContainer = styled(Box)`
+  @media (max-width: 600px) {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+`

src/components/CreateReview/FirstStep/FirstStepCreateReview.js

 const FirstStepCreateReview = (props) => {
   const offer = props.offer;
   const interlocutor = props.interlocutor;
+  console.log(props);
   const { t } = useTranslation();
   const handleSubmit = (values) => {
     props.goToNextStep(values);
           )}
         />
       </ProfileImageContainer>
-      <ProfileName>{interlocutor.name}</ProfileName>
+      <ProfileName>{interlocutor.company.name}</ProfileName>
       <LittleOfferCard
         image={offer?.images[0]}
         name={offer?.name}

src/components/CreateReview/FirstStep/FirstStepCreateReview.styled.js

   text-align: center;
   padding: 36px;
   @media (max-width: 600px) {
-    padding: 18px;
+    padding: 0;
+    padding-top: 36px;
+    flex: 1;
   }
 `;
 export const CreateReviewTitle = styled(Typography)`
   text-align: left;
   ${props => props.exchange && `background-color: ${selectedTheme.colors.backgroundSponsoredColor};`}
   @media (max-width: 600px) {
-    height: 33px;
+    height: 40px;
     font-size: 14px;
-    margin-bottom: 12px;
+    margin-bottom: 18px;
   }
 `;
 export const SelectOption = styled(Option)`

src/components/CreateReview/SecondStep/SecondStepCreateReview.js

           : t("reviews.modalTitle")}
       </CreateReviewTitle>
       <ReviewCard
-        givingReview
-        profileReviews={[
-          {
-            name: mineProfile?.company?.name,
-            image: mineProfile?.image,
-            offerName: props?.offer?.name,
-            offerImage: props?.offer?.images[0],
-            isGoodCommunication: props.review?.correctCommunication,
-            isSuccessfulSwap: props.review?.exchangeSucceed,
-            quote: props.review.comment,
-          },
-        ]}
+        givingReview={{
+          name: mineProfile?.company?.name,
+          image: mineProfile?.image,
+          offerName: props?.offer?.name,
+          offerImage: props?.offer?.images[0],
+          isGoodCommunication: props.review?.correctCommunication,
+          isSuccessfulSwap: props.review?.exchangeSucceed,
+          quote: props.review.comment,
+        }}
+      />
+      <NextButton
+        removingReview={props.removingReview}
+        onClick={goToNextStep}
       />
-      <NextButton removingReview={props.removingReview} onClick={goToNextStep} />
     </SecondStepCreateReviewContainer>
   );
 };

src/components/CreateReview/SecondStep/SecondStepCreateReview.styled.js

 export const SecondStepCreateReviewContainer = styled(Box)`
   padding: 36px;
   @media (max-width: 600px) {
-    padding: 18px;
+    padding: 0;
+    padding-top: 36px;
   }
 `;
 export const ReviewCard = styled(UserReviews)`
       margin: 0;
     }
   }
+  & * {
+    overflow:hidden;
+  }
+  @media (max-width: 600px) {
+    position: relative;
+    top: -24px;
+    & > div {
+      position: static;
+      margin-top: 0px;
+    }
+  }
 `;

src/components/CreateReview/ThirdStep/ThirdStepCreateReview.js

   ThirdStepCreateReviewContainer,
 } from "./ThirdStepCreateReview.styled";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { closeModal } from "../../../store/actions/modal/modalActions";
 
 const ThirdStepCreateReview = () => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+  setTimeout(() => {
+    dispatch(closeModal());
+  }, 3000);
   return (
     <ThirdStepCreateReviewContainer>
       <LogoImage />

src/components/DirectChat/DirectChat.js

 import { selectUserId } from "../../store/selectors/loginSelectors";
 import {
   acceptExchangeSocket,
-  addMesageListener,
+  addMessageListener,
   removeMessageListener,
 } from "../../socket/socket";
 import { makeErrorToastMessage } from "../../store/utils/makeToastMessage";
 } from "../../store/selectors/exchangeSelector";
 import {
   acceptExchange,
+  fetchExchange,
   setRequester,
 } from "../../store/actions/exchange/exchangeActions";
 import { convertLocalDateToUTCDate } from "../../util/helpers/dateHelpers";
 import requesterStatus from "../../constants/requesterStatus";
 import exchangeStatus from "../../constants/exchangeStatus";
+import { NEW_CHAT } from "../../constants/chatConstants";
 
 const DirectChat = () => {
   const chat = useSelector(selectSelectedChat);
 
   const offerObject = useMemo(() => {
     if (location?.state?.offerId) {
-      return offer?.offer;
+      return offer;
     }
-    return chat?.offer?.offer;
+    return chat?.offer;
   }, [chat, location.state, offer]);
 
   const chatObject = useMemo(() => {
   }, [chat, location.state]);
 
   const amIBuyer = useMemo(
-    () => exchange.buyer?.userId === userId,
+    () => exchange.buyer?.user?._id === userId,
     [exchange, userId]
   );
 
       let haveIAccepted = amIBuyer
         ? exchange.buyer?.accepted
         : exchange.seller?.accepted;
-      let haveInterlucatorAccepted = amIBuyer
+      let haveinterlocutorAccepted = amIBuyer
         ? exchange.seller?.accepted
         : exchange.buyer?.accepted;
       let haveIReviewed = amIBuyer
         ? exchange.buyer.givenReview
         : exchange.seller.givenReview;
       if (haveIAccepted) {
-        if (haveInterlucatorAccepted) {
+        if (haveinterlocutorAccepted) {
           if (haveIReviewed) {
             return exchangeStatus.REVIEWED;
           } else {
           return exchangeStatus.I_OFFERED;
         }
       } else {
-        if (haveInterlucatorAccepted) {
+        if (haveinterlocutorAccepted) {
           return exchangeStatus.I_AM_OFFERED;
         } else {
           return exchangeStatus.INITIAL;
 
   const interlocutorObject = useMemo(() => {
     if (location?.state?.offerId) {
-      return {
-        image: offer?.companyData?.image,
-        name: offer?.companyData?.company?.name,
-        location: offer?.companyData?.company?.contacts?.location,
-        userId: offer?.offer?.userId,
-        telephone: offer?.companyData?.company?.contacts?.telephone,
-      };
+      return offer?.user;
     }
-    return {
-      ...chat?.interlocutor,
-      userId:
-        chat?.chat?.participants[0] === userId
-          ? chat?.chat?.participants[1]
-          : chat?.chat?.participants[0],
-    };
+    if (chat?.participants) {
+      let interlocutor = userId === chat?.participants[0]._id ? 1 : 0;
+      return chat?.participants[interlocutor];
+    }
+    return {};
   }, [chat, location.state, offer]);
 
   // Fetch chat after it is created
 
   // Listener to socket.IO chat
   useEffect(() => {
-    addMesageListener(({ succeed, data }) => {
+    addMessageListener(({ succeed, data }) => {
       if (succeed) {
         if (
           [...allChats].find((item) => {
-            return item.chat._id === data.chatId;
+            return item._id === data.chatId;
           })
         ) {
           dispatch(
               message: data.message,
             })
           );
-          if (
-            data.message?.isAcceptRequest &&
-            requester === requesterStatus.NOONE
-          ) {
-            dispatch(setRequester(requesterStatus.INTERLUCATOR));
+          if (data.message?.isAcceptRequest) {
+            dispatch(fetchExchange(exchange?._id));
+            if (requester === requesterStatus.NOONE) {
+              dispatch(setRequester(requesterStatus.interlocutor));
+            }
           }
         } else {
           dispatch(fetchChats());
       }
     });
     return () => removeMessageListener();
-  }, [allChats, routeMatch]);
-
+  }, [allChats, routeMatch, requester]);
 
   const refreshChat = () => {
-    if (routeMatch.params?.chatId === "newMessage") {
+    if (routeMatch.params?.chatId === NEW_CHAT) {
       dispatch(fetchOneOffer(location.state.offerId));
       dispatch(setOneChat({}));
     } else {
       dispatch(fetchOneChat(routeMatch.params?.chatId));
     }
   };
-  const handleAcceptExchange = () => {
+  const handleAcceptExchangeSuccess = () => {
+    let interlocutor = userId === chat?.participants[0]._id ? 1 : 0;
     acceptExchangeSocket(
-      chat?.chat?._id,
+      chat?._id,
       userId,
-      chat?.interlocutor?._id,
+      chat?.participants[interlocutor]._id,
       () => {
-        dispatch(
-          acceptExchange({
-            exchangeId: exchange._id,
-          })
-        );
         dispatch(
           addNewMessage({
-            _id: chat?.chat?._id,
+            _id: chat?._id,
             message: {
-              userId,
+              user: {
+                _id: userId,
+              },
               isAcceptRequest: true,
               text: "",
               _created: convertLocalDateToUTCDate(new Date()),
       }
     );
   };
+  const handleAcceptExchange = () => {
+    console.log("accept salje i prima 1 POZVANA FUNKCIJA")
+    dispatch(
+      acceptExchange({
+        exchangeId: exchange._id,
+        handleApiResponseSuccess: handleAcceptExchangeSuccess,
+      })
+    );
+  };
   return (
     <DirectChatContainer>
       {isLoadingDirectChat || isLoadingDirectChat === undefined ? (
       <DirectChatContent
         chat={chatObject}
         exchangeState={exchangeState}
-        interlucator={interlocutorObject}
+        interlocutor={interlocutorObject}
         refreshChat={refreshChat}
       />
     </DirectChatContainer>

src/components/DirectChat/DirectChatContent/DirectChatContent.js

   const myProfileImage = useSelector(selectMineProfilePicture);
   const messagesRef = useRef(null);
   const requester = useSelector(selectRequester);
-  const interlucatorProfileImage = props?.interlucator?.image;
+  const interlocutorProfileImage = props?.interlocutor?.image;
   const isLoadingChatContent = useSelector(
     selectIsLoadingByActionType(CHAT_SCOPE)
   );
-  const messages = props?.chat?.chat?.messages;
+  const messages = props?.chat?.messages;
   useEffect(() => {
     messagesRef.current?.scrollTo({
       top: messagesRef.current.scrollHeight,
       behaviour: "smooth",
     });
     window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
-  }, [props?.chat?.chat?.messages, messagesRef, isLoadingChatContent]);
+  }, [props?.chat?.messages, messagesRef, isLoadingChatContent]);
 
   const handleRefresh = () => {
     props.refreshChat();
       ) : (
         <DirectChatContentContainer>
           <DirectChatContentHeader
-            interlucator={props?.interlucator}
+            interlocutor={props?.interlocutor}
             exchangeState={props.exchangeState}
           />
           <MessagesList ref={messagesRef} exchangeState={props?.exchangeState}>
             {messages?.map((item) => {
-              const isMyMessage = userId === item.userId;
+              const isMyMessage = userId === item.user?._id;
               const image = isMyMessage
                 ? myProfileImage
-                : interlucatorProfileImage;
-              if (requester === requesterStatus.INTERLUCATOR && isMyMessage && item?.isAcceptRequest)
+                : interlocutorProfileImage;
+              if (
+                requester === requesterStatus.interlocutor &&
+                isMyMessage &&
+                item?.isAcceptRequest
+              )
                 return;
               return (
                 <MessageContainer key={item?._id || item?._created}>
                     <RequestExchangeCard
                       isMyMessage={isMyMessage}
                       message={item}
-                      chatId={props?.chat?.chat?._id}
+                      chatId={props?.chat?._id}
                     />
                   ) : (
                     <MessageCard
           <DirectChatNewMessage
             chat={props?.chat}
             refreshChat={handleRefresh}
-            interlucator={props.interlucator}
+            interlocutor={props.interlocutor}
           />
         </DirectChatContentContainer>
       )}
 DirectChatContent.propTypes = {
   children: PropTypes.node,
   chat: PropTypes.any,
-  interlucator: PropTypes.any,
+  interlocutor: PropTypes.any,
   refreshChat: PropTypes.func,
   exchangeState: PropTypes.any,
 };

src/components/DirectChat/DirectChatContent/DirectChatContent.styled.js

   /* justify-content: flex-end; */
   /* align-items: flex-end; */
   @media (max-width: 600px) {
-    padding: 18px 0;
+    padding: 18px 18px;
   }
   &::-webkit-scrollbar {
     width: 5px;

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.js

   const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null);
   const { isMobile } = useIsMobile();
   const mineProfileBlocked = useSelector(selectAmIBlocked);
-
   const togglePhonePopover = (event) => {
-    if (props.interlucator?.telephone) {
+    if (props.interlocutor?.company?.contacts?.telephone) {
       setShowPhonePopover((prevState) => !prevState);
       setPhonePopoverAnchorEl((prevState) => {
         if (prevState) return null;
     }
   };
   const routeToUser = () => {
-    if (!props?.interlucator?._blocked)
+    if (!props?.interlocutor?._blocked)
       history.push(
         replaceInRoute(PROFILE_PAGE, {
-          profileId: props?.interlucator?.userId,
+          profileId: props?.interlocutor?._id,
         })
       );
   };
           <ProfileImage
             onClick={routeToUser}
             src={getImageUrl(
-              props?.interlucator?.image,
+              props?.interlocutor?.image,
               variants.chatHeader,
               isMobile
             )}
           />
           <ProfileDetails>
             <ProfileName onClick={routeToUser}>
-              {props?.interlucator?.name}
+              {props?.interlocutor?.company?.name}
             </ProfileName>
             <ProfileLocation>
               <ProfileLocationIcon />
               <ProfileLocationText>
-                {props?.interlucator?.location}
+                {props?.interlocutor?.company?.contacts?.location}
               </ProfileLocationText>
             </ProfileLocation>
           </ProfileDetails>
           <PhoneIconContainer
             disabled={
               mineProfileBlocked ||
-              props?.interlucator?._blocked ||
-              !props.interlucator?.telephone
+              props?.interlocutor?._blocked ||
+              !props.interlocutor?.company?.contacts?.telephone
             }
             onClick={togglePhonePopover}
           >
           open={showPhonePopover}
           anchorRight
           onClose={togglePhonePopover}
-          content={<PhonePopover phoneNumber={props.interlucator?.telephone} />}
+          content={
+            <PhonePopover
+              phoneNumber={props.interlocutor?.company?.contacts?.telephone}
+            />
+          }
         />
       </DirectChatContentHeaderContainer>
       {(props.exchangeState === exchangeStatus.I_OFFERED ||
         <DirectChatHeaderStatusContainer>
           <DirectChatHeaderStatusText>
             {props.exchangeState === exchangeStatus.I_OFFERED
-              ? t("messages.requestSentLong")
+              ? isMobile
+                ? t("messages.requestSentShort")
+                : t("messages.requestSentLong")
+              : isMobile
+              ? t("messages.requestSuccessfulShort")
               : t("messages.requestSuccessfulLong")}
           </DirectChatHeaderStatusText>
         </DirectChatHeaderStatusContainer>
 
 DirectChatContentHeader.propTypes = {
   children: PropTypes.node,
-  interlucator: PropTypes.any,
+  interlocutor: PropTypes.any,
   exchangeState: PropTypes.bool,
 };
 

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.styled.js

   height: 39px;
   width: 100%;
   padding: 9px 36px;
+  @media (max-width: 600px) {
+    height: 36px;
+    padding: 8px 18px;
+  }
 `;
 export const DirectChatHeaderStatusText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 21px;
   color: white;
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;

src/components/DirectChat/DirectChatHeader/DirectChatHeader.js

 import { useSelector } from "react-redux";
 import { selectExchange } from "../../../store/selectors/exchangeSelector";
 import { useDispatch } from "react-redux";
-import { fetchExchange } from "../../../store/actions/exchange/exchangeActions";
+import {
+  fetchExchange,
+  setExchange,
+} from "../../../store/actions/exchange/exchangeActions";
 import { selectSelectedChat } from "../../../store/selectors/chatSelectors";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import { toggleCreateReviewModal } from "../../../store/actions/modal/modalActions";
+import { setOneChat } from "../../../store/actions/chat/chatActions";
 
 const DirectChatHeader = (props) => {
   const exchange = useSelector(selectExchange);
   const chat = useSelector(selectSelectedChat);
 
   useEffect(() => {
-    if (chat?.chat?.exchangeId) refetchExchange();
-  }, [chat]);
+    return () => {
+      dispatch(setExchange({}));
+      dispatch(setOneChat({}));
+    };
+  }, []);
+
+  useEffect(() => {
+    if (chat?.exchange?._id) refetchExchange();
+  }, [chat?.exchange]);
 
   const isDisabledReviews = useMemo(() => {
     if (!exchange.valid) return true;
-    if (exchange.seller?.userId === userId && exchange.seller?.givenReview)
+    if (exchange.seller?.user._id === userId && exchange.seller?.givenReview)
       return true;
-    if (exchange.buyer?.userId === userId && exchange.buyer?.givenReview)
+    if (exchange.buyer?.user._id === userId && exchange.buyer?.givenReview)
       return true;
+    if (chat?.offer?._deleted) return true;
+    if (props.interlocutor?._blocked) return true;
+    return false;
+  }, [exchange, userId, props.interlocutor, chat]);
+
+  const isDisabledCheckButton = useMemo(() => {
+    if (props?.interlocutor?._blocked) return true;
+    if (chat?.offer?._deleted) return true;
     return false;
-  }, [exchange, userId]);
+  }, [props.interlocutor, chat]);
 
   const showReviewModal = () => {
     dispatch(
   };
 
   const refetchExchange = () => {
-    dispatch(fetchExchange(chat.chat.exchangeId));
+    dispatch(fetchExchange(chat.exchange?._id));
   };
 
   const acceptExchange = () => {
       <OfferCard
         offer={props.offer}
         aboveChat
-        disabledReviews={props.interlocutor?._blocked || isDisabledReviews}
+        disabledReviews={isDisabledReviews}
         makeReview={showReviewModal}
         acceptExchange={acceptExchange}
         exchangeState={props?.exchangeState}
         dontShowViews
-        disabledCheckButton={
-          props.interlocutor?._blocked || props?.offer?._deleted
-        }
+        disabledCheckButton={isDisabledCheckButton}
       />
     </DirectChatHeaderContainer>
   );

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

   const userId = useSelector(selectUserId);
   const handleSend = useCallback(
     (newChatId = undefined) => {
-      if (props.chat?.chat?._id) {
-        const chatId = props.chat?.chat?._id || newChatId;
-        sendMessage(chatId, userId, typedValue, props.interlucator.userId);
+      if (typedValue?.length === 0) return;
+      if (props?.chat?._id) {
+        const chatId = props.chat?._id || newChatId;
+        sendMessage(chatId, userId, typedValue, props.interlocutor._id);
         dispatch(
           addNewMessage({
             _id: chatId,
             message: {
-              userId,
+              user: {
+                _id: userId,
+              },
               text: typedValue,
               _created: convertLocalDateToUTCDate(new Date()),
             },
           })
         );
-        if (props.chat?.chat?._id) {
-          if (!exchange.valid && exchange.seller.userId === userId) {
+        if (props.chat?._id) {
+          if (!exchange.valid && exchange.seller.user._id === userId) {
             dispatch(validateExchange(exchange._id));
           }
         }
       }
       setTypedValue("");
     },
-    [typedValue, props.chat?.chat?._id, userId, props.interlucator.userId]
+    [typedValue, props.chat?._id, userId, props.interlocutor]
   );
   const handleMessageSendSuccess = (newChatId) => {
     history.replace(`${newChatId}`);
       startNewChat({
         offerId,
         message: typedValue,
-        interlucatorUserId: props.interlucator.userId,
+        interlocutorUserId: props.interlocutor._id,
         handleMessageSendSuccess,
       })
     );
   };
+  console.log(props)
   if (mineProfileBlocked) {
     return <NotAllowedChat mineProfileBlocked />;
   }
-  if (props?.chat?.interlocutor?._deleted) {
+  if (props?.interlocutor?._deleted) {
     return <NotAllowedChat deleted />;
   }
-  if (props?.chat?.offer?.offer?._deleted) {
+  if (props?.chat?.offer?._deleted) {
     return <NotAllowedChat />;
   }
-  if (props?.chat?.interlocutor?._blocked) {
+  if (props?.interlocutor?._blocked) {
     return <NotAllowedChat blocked />;
   }
   return (
   children: PropTypes.node,
   chatId: PropTypes.any,
   refreshChat: PropTypes.func,
-  interlucator: PropTypes.any,
+  interlocutor: PropTypes.any,
   chat: PropTypes.any,
 };
 

src/components/DirectChat/MiniChatColumn/MiniChatColumn.js

   const newChat = useMemo(() => {
     if (location.state?.offerId) {
       return {
-        interlocutorData: {
-          image: offer?.companyData?.image,
-          name: offer?.companyData?.company?.name,
-        },
-        offerData: {
-          name: offer?.offer?.name,
+        participants: [
+          {
+            image: offer?.user?.image,
+            company: {
+              name: offer?.user?.company?.name,
+            },
+          },
+        ],
+        offer: {
+          name: offer?.name,
         },
       };
     }
                 <MiniChatCard
                   key={Date.now() * Math.random()}
                   chat={item}
-                  selected={item?.chat?._id === selectedChat?.chat?._id}
+                  selected={item?._id === selectedChat?._id}
                 />
               );
             })}

src/components/Header/Drawer/Buttons/MyProfileButton/MyProfileButton.js

 import { selectProfileName } from "../../../../../store/selectors/profileSelectors";
 import { selectUserId } from "../../../../../store/selectors/loginSelectors";
 import history from "../../../../../store/utils/history";
+import { PROFILE_PAGE } from "../../../../../constants/pages";
+import { replaceInRoute } from "../../../../../util/helpers/routeHelpers";
 
 const MyProfileButton = (props) => {
   const name = useSelector(selectProfileName);
   const { t } = useTranslation();
   const handleClick = () => {
     props.toggleDrawer();
-    history.push(`/profile/${userId}`);
+    history.push(
+      replaceInRoute(PROFILE_PAGE, {
+        profileId: userId,
+      })
+    );
   };
   return (
     <DrawerButton onClick={handleClick}>

src/components/Header/Header.js

           logo: true,
         },
       });
-      searchRef.current.value = "";
+      if (searchRef?.current) searchRef.current.value = "";
     }
   };
 

src/components/Header/SearchInput/SearchInput.js

   const { t } = useTranslation();
   const handleSearch = () => {
     if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) {
+      console.log("uslo unutra")
       debounceHelper(() => props.handleSearch(ref.current.value), 500);
     }
   };
+  console.log(routeMatches(HOME_PAGE))
   const handleManualSearch = () => {
     debounceHelper(() => {}, 500);
     props.handleSearch(ref.current.value);

src/components/ItemDetails/ItemDetails.js

     selectIsLoadingByActionType(ONE_OFFER_SCOPE)
   );
   let isMyProfile = useMemo(() => {
-    if (
-      offer?.offer?.userId?.toString() === userId?.toString() ||
-      props.isAdmin
-    )
+    if (offer?.user?._id?.toString() === userId?.toString() || props.isAdmin)
       return true;
     return false;
   }, [offer, userId, props.isAdmin]);
       ) : (
         <>
           {!props.singleOffer && (
-            <ItemDetailsHeaderCard offer={offer} isMyProfile={isMyProfile} />
+            <ItemDetailsHeaderCard
+              offer={offer}
+              isMyProfile={isMyProfile}
+              isAdmin={props?.isAdmin}
+            />
           )}
           {props.singleOffer && (
             <OfferIconContainer>
               <OfferIconText>{t("offer.product")}</OfferIconText>
             </OfferIconContainer>
           )}
-          <ItemDetailsCard offer={offer} isMyOffer={isMyProfile} isAdmin={props.isAdmin} singleOffer />
+          <ItemDetailsCard
+            offer={offer}
+            isMyOffer={isMyProfile}
+            isAdmin={props.isAdmin}
+            singleOffer
+          />
         </>
       )}
     </ItemDetailsContainer>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

 import itemDetailsData from "../../../notFoundData/itemDetailsData";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import {
+  ADMIN_SINGLE_USER_PAGE,
+  DIRECT_CHAT_PAGE,
+  PROFILE_PAGE,
+} from "../../../constants/pages";
+import { NEW_CHAT } from "../../../constants/chatConstants";
 
 const ItemDetailsHeaderCard = (props) => {
   const history = useHistory();
   const { t } = useTranslation();
   const offer = useMemo(() => {
     if (props.offer) {
-      if (props.offer.offer._id === routeMatch.params.offerId) {
+      if (props.offer._id === routeMatch.params.offerId) {
         return props.offer;
       }
     }
   const { isMobile } = useIsMobile();
 
   const handleGoProfile = () => {
-    history.push(`/profile/${offer?.offer?.userId}`);
+    if (props?.isAdmin) {
+      history.push(
+        replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
+          profileId: props?.offer?.user?._id,
+        })
+      );
+    } else {
+      history.push(
+        replaceInRoute(PROFILE_PAGE, {
+          profileId: props?.offer?.user?._id,
+        })
+      );
+    }
   };
   const messageUser = (offer) => {
-    const chatItem = chats.find(
-      (item) => item.chat.offerId === offer?.offer?._id
-    );
+    const chatItem = chats.find((item) => item.offer._id === offer?._id);
     if (chatItem !== undefined) {
-      history.push(`/messages/${chatItem.chat._id}`);
+      history.push(DIRECT_CHAT_PAGE, {
+        chatId: chatItem._id,
+      });
     } else {
-      if (offer?.offer?.userId !== userId) {
-        history.push(`/messages/newMessage`, {
-          offerId: offer?.offer?._id,
+      if (offer?.user?._id !== userId) {
+        history.push({
+          pathname: replaceInRoute(DIRECT_CHAT_PAGE, {
+            chatId: NEW_CHAT,
+          }),
+          state: {
+            offerId: offer?._id,
+          },
         });
       }
     }
       <HeaderTop>
         <OfferImage
           src={getImageUrl(
-            offer?.companyData?.image ? offer.companyData.image : "",
+            offer?.user?.image ? offer.user.image : "",
             variants.profileImage,
             isMobile
           )}
         />
         <OfferDetails>
           <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}>
-            {offer?.companyData?.company?.name}
+            {offer?.user?.company?.name}
           </OfferTitle>
           <PIBDetail offer={offer} isMyProfile={props.isMyProfile} />
           <CategoryDetail offer={offer} isMyProfile={props.isMyProfile} />
   offer: PropTypes.any,
   isMyProfile: PropTypes.bool,
   singleOffer: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 ItemDetailsHeaderCard.defaultProps = {
   halfwidth: false,

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.js

         <LocationIcon />
       </DetailIcon>
       <DetailText ismyprofile={props.isMyProfile}>
-        {offer.offer?.location?.city}
+        {offer?.location?.city}
       </DetailText>
     </DetailContainer>
   );

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/PIB/PIBDetail.js

         <PIB />
       </PIBIcon>
       <DetailText isMyProfile={props.isMyProfile}>
-        {`${t("itemDetailsCard.PIB")}${offer?.companyData?.company?.PIB}`}
+        {`${t("itemDetailsCard.PIB")}${offer?.user?.company?.PIB}`}
       </DetailText>
     </DetailContainer>
   );

src/components/ItemDetails/ItemDetailsHeaderCard/StatisticDetails/StatisticDetails.js

   const { t } = useTranslation();
   const offer = props.offer;
   const percentOfSucceededExchanges = useMemo(() => {
-    if (offer?.companyData?.statistics?.exchanges?.succeeded === 0) {
+    if (offer?.user?.statistics?.exchanges?.succeeded === 0) {
       return 0 + "%";
     } else {
       return (
         Math.ceil(
-          (offer?.companyData?.statistics?.exchanges?.total /
-            offer?.companyData?.statistics?.exchanges?.succeeded) *
+          (offer?.user?.statistics?.exchanges?.total /
+            offer?.user?.statistics?.exchanges?.succeeded) *
             100
         ) + "%"
       );
       <BottomDetails>
         <StatusText>
           <StatusValue>
-            {offer?.companyData?.statistics?.publishes?.count}
+            {offer?.user?.statistics?.publishes?.count}
           </StatusValue>
           {t("itemDetailsCard.offers")}
         </StatusText>
         <StatusText>
           <StatusValue>
-            {offer?.companyData?.statistics?.views?.count}
+            {offer?.user?.statistics?.views?.count}
           </StatusValue>
           {t("itemDetailsCard.totalViews")}
         </StatusText>

src/components/MarketPlace/Header/Header.js

             headerTitle={headerTitle}
             headerIcon={headerIcon}
             offers={props?.offers}
+            myOffers={props?.myOffers}
             hideBackButton={props?.hideBackButton}
           />
           {/* ^^^^^^ */}
             />
 
             {/* Select option to choose sorting */}
-            <HeaderSelect
-              myOffers={props?.myOffers}
-              sorting={sorting}
-              hideSorting={props?.hideSorting}
-            />
+            {!props?.hideSorting && (
+              <HeaderSelect
+                myOffers={props?.myOffers}
+                sorting={sorting}
+                hideSorting={props?.hideSorting}
+              />
+            )}
             {/* ^^^^^^ */}
           </HeaderOptions>
         </HeaderContainer>

src/components/MarketPlace/Header/TooltipHeader/TooltipHeader.js

   const handleClickCategory = () => {
     props?.offers?.filters?.locations.clear();
     props?.offers?.filters?.subcategory.clear();
+    props?.offers?.filters?.companies?.clear();
     props?.offers?.applyFilters();
   };
   const handleClickSubcategory = () => {
     props?.offers?.filters?.locations.clear();
+    props?.offers?.filters?.companies?.clear();
     props?.offers?.applyFilters();
   };
   const goBack = () => {
     history.goBack();
   };
+  console.log(props)
   return (
     <Tooltip title={headerString.text}>
       <TooltipInnerContainer>

src/components/MarketPlace/Offers/Offers.js

 const Offers = (props) => {
   const offers = props?.offers;
   const arrayForMapping = Array.apply(null, Array(4)).map(() => {});
+  console.log("rerender");
+
   return (
     <>
-      <OffersFilterButton />
+      <OffersFilterButton
+        offers={props?.offers}
+        isAdmin={props?.isAdmin}
+        myOffers={props?.myOffers}
+        toggleFilters={props?.toggleFilters}
+      />
       <OffersSearchField />
-      <OffersNotFound />
+      {!props?.skeleton && <OffersNotFound />}
       <OffersList
         loading={props?.skeleton}
         offers={offers}
         isGrid={props?.isGrid}
         isUsers={props?.isUsers}
         users={props?.users}
+        myOffers={props?.myOffers}
       />
       {props?.skeleton &&
         arrayForMapping.map((item, index) => (

src/components/MarketPlace/Offers/OffersList/OffersList.js

 import React from "react";
 import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { selectTotalOffers } from "../../../../store/selectors/offersSelectors";
 import { OffersContainer } from "./OffersList.styled";
 import BigProfileCard from "../../../Cards/ProfileCard/BigProfileCard/BigProfileCard";
 import { startChat } from "../../../../util/helpers/chatHelper";
 import { selectLatestChats } from "../../../../store/selectors/chatSelectors";
 import { selectUserId } from "../../../../store/selectors/loginSelectors";
+import { setRequester } from "../../../../store/actions/exchange/exchangeActions";
+import requesterStatus from "../../../../constants/requesterStatus";
 
 const OffersList = (props) => {
   const totalOffers = useSelector(selectTotalOffers);
   const chats = useSelector(selectLatestChats);
   const userId = useSelector(selectUserId);
+  const dispatch = useDispatch();
   const offers = props?.offers;
   const messageOneUser = (offer) => {
+    dispatch(setRequester(requesterStatus.NOONE));
     startChat(chats, offer, userId);
   };
   return (
                 offer={item}
                 halfwidth={props?.isGrid}
                 messageUser={messageOneUser}
-                isMyOffer={item?.userId === userId || props?.isAdmin}
+                isMyOffer={item?.user._id === userId || props?.isAdmin}
                 isAdmin={props?.isAdmin}
               />
             );

src/components/Modals/EditCategory/EditCategory.js

   };
 
   const handleApiResponseSuccess = () => {
-    if (clickedOnNext) {
+    if (clickedOnNext && props?.showSecondButton) {
       formik.resetForm();
       inputRef.current.focus();
     } else closeModalHandler();

src/components/Popovers/MyMessages/MyMessages.js

 import PropTypes from "prop-types";
 import { makeErrorToastMessage } from "../../../store/utils/makeToastMessage";
 import { EyeIcon } from "./MyMessages.styled";
+import { DIRECT_CHAT_PAGE } from "../../../constants/pages";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 
 export const MyMessages = (props) => {
   const { t } = useTranslation();
 
   const convertMessages = (messages) => {
     return messages
-      .map((item) => ({
-        src: item.interlocutorData.image,
-        title: item.interlocutorData.name,
-        onClick: () => goToMessage(item?.chat?._id),
-        text: "Proizvod: ",
-        bigText: item.offerData.name,
-      }))
+      .map((item) => {
+        let interlocutor = userId === item.participants[0]._id ? 1 : 0;
+        return {
+          src: item.participants[interlocutor]?.image,
+          title: item.participants[interlocutor]?.company?.name,
+          onClick: () => goToMessage(item?._id),
+          text: "Proizvod: ",
+          bigText: item.offer.name,
+        };
+      })
       .slice(0, 2);
   };
 
   }, [chats]);
   const goToMessages = () => {
     if (lastChats.length !== 0) {
-      history.push(`/messages/${chats[0].chat?._id}`);
+      console.log(chats);
+      history.push({
+        pathname: replaceInRoute(DIRECT_CHAT_PAGE, {
+          chatId: chats[0]._id,
+        }),
+      });
       props.closePopover();
     } else {
       makeErrorToastMessage(t("messages.noMessagesToast"));
     }
   };
   const goToMessage = (chatId) => {
-    history.push(`/messages/${chatId}`);
+    history.push(
+      replaceInRoute(DIRECT_CHAT_PAGE, {
+        chatId,
+      })
+    );
     props.closePopover();
   };
   return (

src/components/Popovers/MyPosts/MyPosts.js

 import { fetchMineHeaderOffers } from "../../../store/actions/offers/offersActions";
 import { selectProfileName } from "../../../store/selectors/profileSelectors";
 import { useHistory } from "react-router-dom";
-import { MY_OFFERS_PAGE } from "../../../constants/pages";
+import { ITEM_DETAILS_PAGE, MY_OFFERS_PAGE } from "../../../constants/pages";
 import { useMemo } from "react";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 
 export const MyPosts = (props) => {
   const { t } = useTranslation();
   }, [arrayOfMineOffers, mineOffers]);
 
   const goToOffer = (id) => {
-    history.push(`/proizvodi/${id}`);
+    history.push(
+      replaceInRoute(ITEM_DETAILS_PAGE, {
+        offerId: id,
+      })
+    );
     props.closePopover();
   };
   const goToMySwaps = () => {

src/components/Profile/ProfileOffers/ProfileOffers.js

   const dispatch = useDispatch();
   const searchRef = useRef(null);
 
+  useEffect(() => {
+    return () => {
+      dispatch(setProfileOffers([]));
+    };
+  }, []);
+
   useEffect(() => {
     dispatch(
       fetchProfileOffers({
         sortOption: sortOption,
         append: isMobile && append,
         page: paging.currentPage,
+        isAdmin: props?.isAdmin,
       })
     );
     setAppend(true);
           <ProfileOffersHeaderSkeleton />
           {isMobile ? (
             <SkeletonContainer>
-              <SkeletonOfferCard vertical />
-              <SkeletonOfferCard vertical />
-              <SkeletonOfferCard vertical />
+              <SkeletonOfferCard vertical skeleton />
+              <SkeletonOfferCard vertical skeleton />
+              <SkeletonOfferCard vertical skeleton />
             </SkeletonContainer>
           ) : (
             <>
               {arrayForMapping.map((item, index) => (
-                <SkeletonOfferCard key={index} />
+                <SkeletonOfferCard key={index} skeleton />
               ))}
             </>
           )}

src/components/UserReviews/ReviewsSorting/ReviewsSorting.js

   const [value, setValue] = useState();
   const changeValue = (event) => {
     if (props.isAdmin) {
-        // if(event.target.value.value === 1) {
-        //   dispatch(setReviews(reviews.givenReviews));
-        // } else {
-        //   dispatch(setReviews(reviews.receivedReviews));
-        // }
-
-
+      // if(event.target.value.value === 1) {
+      //   dispatch(setReviews(reviews.givenReviews));
+      // } else {
+      //   dispatch(setReviews(reviews.receivedReviews));
+      // }
     } else {
       dispatch(
         setReviews(
   const sortEnum = useMemo(() => {
     if (props.isAdmin) return sortAdminEnum;
     return reviewSortEnum;
-  });
+  }, [props.isAdmin]);
+
+  const initialSortOption = useMemo(() => {
+    if (props.isAdmin) return sortAdminEnum.GIVEN;
+    return reviewSortEnum.INITIAL;
+  }, [props.isAdmin]);
+
   useImperativeHandle(ref, () => ({
     sortValue: value,
-    hasGivenReview: value?.value === sortAdminEnum.GIVEN.value
-  }))
+    hasGivenReview: value?.value === sortAdminEnum.GIVEN.value,
+  }));
   return (
     <HeaderSelect
-      value={value || sortEnum.INITIAL}
+      value={value || initialSortOption}
       IconComponent={DownArrowIcon}
       onChange={changeValue}
     >
-      <SelectOption style={{ display: "none" }} value={sortEnum.INITIAL}>
-        {sortEnum.INITIAL.mainText}
+      <SelectOption style={{ display: "none" }} value={initialSortOption}>
+        {initialSortOption.mainText}
       </SelectOption>
       {Object.keys(sortEnum).map((property) => {
         if (sortEnum[property].value === 0) return;

src/components/UserReviews/UserReviews.js

 import { selectOffer } from "../../store/selectors/offersSelectors";
 import { selectSelectedReviews } from "../../store/selectors/reviewSelector";
 import { useRouteMatch } from "react-router-dom";
-import {
-  fetchReviews,
-  setReviews,
-  fetchReviewsAsAdmin,
-} from "../../store/actions/review/reviewActions";
+import { fetchReviews } from "../../store/actions/review/reviewActions";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import SkeletonUserReviews from "./SkeletonUserReviews/SkeletonUserReviews";
 import { ONE_OFFER_SCOPE } from "../../store/actions/offers/offersActionConstants";
-import {
-  REVIEW_GET_SCOPE,
-  REVIEW_GET_AS_ADMIN_SCOPE,
-} from "../../store/actions/review/reviewActionConstants";
+import { REVIEW_GET_SCOPE } from "../../store/actions/review/reviewActionConstants";
 import ReviewsSorting from "./ReviewsSorting/ReviewsSorting";
-import { sortReviews } from "../../util/helpers/reviewsHelper";
-// import { selectUserId } from "../../store/selectors/loginSelectors";
+import { dynamicRouteMatches } from "../../util/helpers/routeHelpers";
+import {
+  ADMIN_SINGLE_USER_PAGE,
+  DIRECT_CHAT_PAGE,
+  PROFILE_PAGE,
+} from "../../constants/pages";
+import { selectUserId } from "../../store/selectors/loginSelectors";
 
 const UserReviews = (props) => {
   const [isGiven, setIsGiven] = useState(true);
   const dispatch = useDispatch();
   const listRef = useRef(null);
   const sortRef = useRef(null);
-  // const userId = useSelector(selectUserId);
+  const mineUserId = useSelector(selectUserId);
 
   const isLoadingReview = useSelector(
     selectIsLoadingByActionType(
-      props.isAdmin
-        ? REVIEW_GET_AS_ADMIN_SCOPE
-        : props.isProfileReviews
-        ? REVIEW_GET_SCOPE
-        : ONE_OFFER_SCOPE
+      props.givingReview ? ONE_OFFER_SCOPE : REVIEW_GET_SCOPE
     )
   );
 
+  const userId = useMemo(() => {
+    if (
+      dynamicRouteMatches(PROFILE_PAGE) ||
+      dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)
+    ) {
+      return routeMatch.params.profileId;
+    }
+    if (dynamicRouteMatches(DIRECT_CHAT_PAGE)) {
+      return mineUserId;
+    }
+    return offer?.user?._id;
+  }, [offer, routeMatch.params]);
 
   useEffect(() => {
-    let idProfile = routeMatch.params?.profileId;
-    if (idProfile) {
-      if (props.isAdmin) {
-        dispatch(fetchReviewsAsAdmin(idProfile));
-      } else {
-        dispatch(fetchReviews(idProfile));
-      }
+    if (!props?.givingReview && userId) {
+      dispatch(fetchReviews(userId));
     }
+  }, [props.givingReview, userId]);
 
-    // if (props.profileReviews && routeMatch.params?.profileId) {
-    //   let idProfile = routeMatch.params?.profileId;
-    //   dispatch(fetchReviews(idProfile));
-    // }
-  }, [props.profileReviews, routeMatch]);
+  console.log(props);
   const lastThreeReviews = useMemo(() => {
-    if (props.isAdmin) {
-      if (isGiven) {
-        return reviews.givenReviews;
-      } else {
-        return reviews.receivedReviews;
-      }
+    if (props.givingReview) return [props.givingReview];
+    if (props.isProfileReviews && Array.isArray(reviews) && !props.isAdmin) {
+      return reviews.filter((singleReview) => {
+        let userWhoRecievedReview =
+          singleReview?.exchange?.buyer?.user?._id === singleReview?.user?._id
+            ? "seller"
+            : "buyer";
+        return (
+          singleReview?.exchange[userWhoRecievedReview]?.user?._id === userId
+        );
+      });
     }
-    if (props.isProfileReviews) {
-      return reviews;
-    }
-    if (props.givingReview) {
-      return [...props.profileReviews];
-    }
-    if (offer?.companyData?.lastThreeReviews) {
-      // Making array of reviews in same order(sorting) so when comparing
-      // them, I can make valid condition
-      if (
-        JSON.stringify(sortReviews(reviews)) !==
-        JSON.stringify(sortReviews(offer?.companyData?.lastThreeReviews))
-      ) {
-        dispatch(setReviews([...offer?.companyData.lastThreeReviews]));
-      }
-      return [...offer?.companyData?.lastThreeReviews];
+    if (Array.isArray(reviews)) {
+      return reviews.reduce((result, singleReview) => {
+        let userWhoGaveReview =
+          singleReview?.exchange?.buyer?.user?._id === singleReview?.user?._id
+            ? "buyer"
+            : "seller";
+        let userWhoRevievedReview =
+          userWhoGaveReview === "buyer" ? "seller" : "buyer";
+        if (props.isAdmin) {
+          if (isGiven) {
+            if (
+              userId === singleReview?.exchange[userWhoGaveReview]?.user?._id
+            ) {
+              result.push(singleReview);
+            }
+          } else {
+            if (
+              userId ===
+              singleReview?.exchange[userWhoRevievedReview]?.user?._id
+            ) {
+              result.push(singleReview);
+            }
+          }
+        }
+        return result;
+      }, []);
     }
     return [];
   }, [props.profileReviews, offer, props.isProfileReviews, reviews, isGiven]);
   };
 
   return (
-    <UserReviewsContainer className={props.className}>
+    <UserReviewsContainer
+      className={props.className}
+      givingReview={props.givingReview}
+    >
       {!props.givingReview &&
       (isLoadingReview || isLoadingReview === undefined) ? (
         <SkeletonUserReviews />
                   showRemoveIcon={props.isAdmin}
                   review={review}
                   key={index}
+                  isProfileReviews={props?.isProfileReviews}
+                  userId={userId}
                   isAdmin={props.isAdmin}
                   hasGivenReview={isGiven}
                   givingReview={props.givingReview}

src/components/UserReviews/UserReviews.styled.js

 import selectedTheme from "../../themes";
 import { ReactComponent as DownArrow } from "../../assets/images/svg/up-arrow.svg";
 
-export const UserReviewsContainer = styled(Box)``;
+export const UserReviewsContainer = styled(Box)`
+  ${(props) => props.givingReview && `overflow: hidden;`}
+`;
 
 export const ReviewsBox = styled(Box)`
   width: 100%;
         : "350px"};
     padding: 0;
     width: 100%;
-    margin: 0 ${(props) => (props.isAdmin ? "18px" : "0")};
+    margin: 0
+      ${(props) => (props.isAdmin && props.isProfileReviews ? "18px" : "0")};
     margin-top: 60px;
   }
 `;

src/constants/chatConstants.js

+export const NEW_CHAT = "newChat"

src/constants/requesterStatus.js

 export default {
     NOONE: 0,
     ME: 1,
-    INTERLUCATOR: 2
+    interlocutor: 2
 }

src/hooks/useOffers/useCategoryFilter.js

 
   // Set selected category locally in state
   // If second argument is true, then selected category is also updated in redux
-  const setSelectedCategory = (category, immediateApply = false) => {
+  const setSelectedCategory = (category) => {
     setSelectedCategoryLocally(category);
-    if (immediateApply) {
-      dispatch(setFilteredCategory(category));
-    }
+    // if (immediateApply) {
+    //   dispatch(setFilteredCategory(category));
+    // }
   };
 
   // Find category object by providing its name

src/hooks/useOffers/useFilters.js

 import useLocationsFilter from "./useLocationsFilter";
 import useSubcategoryFilter from "./useSubcategoryFilter";
 
-const useFilters = (clearAll = false, applyFilters) => {
+const useFilters = (clearAll = false, applyFilters = () => {}) => {
   const category = useCategoryFilter();
   const subcategory = useSubcategoryFilter(applyFilters);
   const locations = useLocationsFilter();

src/hooks/useOffers/useMyOffers.js

 import useSorting from "./useSorting";
 
 const useMyOffers = () => {
+  const applyFilters = () => {
+    paging.changePage(1);
+    setAppliedFilters(false);
+  };
   const filters = useFilters(true);
   const sorting = useSorting();
   const mineOffers = useSelector(selectMineOffers);
 
   useEffect(() => {
     dispatch(fetchMineOffers());
+    return () => {
+      filters.clear();
+      
+    }
   }, []);
 
   const clear = () => {
     setAppliedFilters(false);
   }
 
-  const apply = () => {
-    paging.changePage(1);
-    setAppliedFilters(false);
-  };
-
   // Filter, search and sort all mine offers
   const allOffersToShow = useMemo(() => {
     let mineOffersFiltered = [...mineOffers];
     search,
     allOffersToShow,
     totalOffers,
-    apply,
+    applyFilters,
     clear,
   };
 };

src/hooks/useOffers/useOffers.js

   const applyFilters = () => {
     setFiltersCleared(true);
   };
-
+  
   const clearFiltersAndApply = () => {
     clear();
     setFiltersCleared(true);
   };
-
+  
   const applySorting = () => {
     paging.changePage(1);
     setFiltersCleared(true);
   };
-
+  
   const applySearch = () => {
     paging.changePage(1);
     setFiltersCleared(true);
   const clearOnlyFiltersAndApply = () => {
     filters.clear();
     paging.changePage(1);
-
     setFiltersCleared(true);
   };
 

src/hooks/useOffers/useSearch.js

 const useSearch = (applyAllFilters) => {
   const [searchStringLocally, setSearchStringLocally] = useState("");
   const [isInitallyLoaded, setIsInitiallyLoaded] = useState(false);
+  const [appliedSearch, setAppliedSearch] = useState(false);
   const dispatch = useDispatch();
   const searchString = useSelector(selectSearchString);
   const history = useHistory();
     }
   }, [history.location.pathname]);
 
+  useEffect(() => {
+    if (appliedSearch) {
+      applyAllFilters();
+      setAppliedSearch(false);
+    }
+  }, [appliedSearch]);
+
   // On every local change of search string, global state of search string should be also updated
   useEffect(() => {
     if (isInitallyLoaded && applyAllFilters) {
   const searchOffersImmediately = (searchValue) => {
     setIsInitiallyLoaded(true);
     searchOffers(searchValue);
-    applyAllFilters();
+    setAppliedSearch(true);
   };
 
   const setSearchStringManually = (searchValue) => {

src/hooks/useOffers/useSubcategoryFilter.js

 import { setFilteredSubcategory } from "../../store/actions/filters/filtersActions";
 import { selectSelectedSubcategory } from "../../store/selectors/filtersSelectors";
 
-const useSubcategoryFilter = (applyFilters) => {
+const useSubcategoryFilter = (applyFilters = () => {}) => {
   const selectedSubcategory = useSelector(selectSelectedSubcategory);
   const dispatch = useDispatch();
   const initialOption = {
   const setSelectedSubcategory = (subcategory) => {
     setSelectedSubcategoryLocally(subcategory);
     // if (immediateApply) {
-    dispatch(setFilteredSubcategory(subcategory));
+      dispatch(setFilteredSubcategory(subcategory));
     // }
   };
 
   const apply = () => {
-    dispatch(setFilteredSubcategory(selectedSubcategoryLocally));
+    if (
+      Number(selectedSubcategory?._id) !==
+      Number(selectedSubcategoryLocally?._id)
+    )
+      dispatch(setFilteredSubcategory(selectedSubcategoryLocally));
   };
 
   const clear = () => {

src/hooks/useSearch.js

-// import useQueryString from "./useOffers/useQueryString";
-
-export const useSearch = () => {
-  // const queryStringHook = useQueryString();
-  const searchOffers = () => {
-    // if (searchString?.length !== 0) {
-    //   queryStringHook.appendToQueryString("oname", searchString);
-    // } else {
-    //   const newQueryString = new URLSearchParams(queryStringHook.queryString);
-    //   if (newQueryString.has("oname")) {
-    //     queryStringHook.deleteFromQueryString("oname");
-    //   }
-    // }
-  };
-
-  return {
-    searchOffers,
-  };
-};

src/i18n/resources/rs.js

     acceptedRequest: "Prihvaćeno",
     declineRequest: "Odbij",
     requestSuccessfulLong: "Uspešno ste ostvarili trampu sa ovom kompanijom.",
+    requestSuccessfulShort: "Uspešno ste otvarili trampu.",
     requestSentLong: "Ponudili ste trampu kompaniji. Čeka se odgovor...",
+    requestSentShort: "Ponudili ste trampu kompaniji.",
   },
   editProfile: {
     website: "Web Sajt",

src/initialValues/createOfferInitialValues/secondPartCreateOfferInitialValues.js

 export default (informations, offer, images) => ({
   images: informations?.image || offer?.images || images,
-  condition: informations?.condition || offer?.condition || "default",
+  condition:
+    informations?.condition ||
+    (typeof offer?.condition === "string" &&
+      offer?.condition?.charAt(0)?.toUpperCase() +
+        offer?.condition?.slice(1)) ||
+    "default",
 });

src/layouts/ProfileLayout/ProfileLayout.js

       {props.children}
       <ContentRightCardContainer container spacing={2}>
         <Content sm={12} md={8} lg={8} xl={9} item>{props.content}</Content>
-        <RightCard sm={0} md={4} lg={4} xl={3} item singleOffer={props.singleOffer} profile={props.profile}>
+        <RightCard sm={12} md={4} lg={4} xl={3} item singleOffer={props.singleOffer} profile={props.profile}>
           {props.rightCard}
         </RightCard>
       </ContentRightCardContainer>

src/layouts/ProfileLayout/ProfileLayout.styled.js

   /* flex: 1; */
   height: 100%;
   @media (max-width: 1350px) {
-    padding-right: ${props => props.isAdmin ? "36px" : "0"};
+    padding-right: ${(props) => (props.isAdmin ? "36px" : "0")};
   }
   @media (max-width: 600px) {
     padding-left: 0;
   padding-left: 0;
   ${(props) => props.profile && `min-width: 350px;`}
 
-  
   @media screen and (min-width: 600px) {
     margin-top: 34px;
     margin-left: ${(props) => (props.profile ? "0" : "36px")};
     margin-left: 0;
   }
   @media (max-width: 600px) {
+    width: 100%;
     min-width: 0;
   }
 `;

src/notFoundData/itemDetailsData.js

 import defaultImage from "../constants/defaultImage";
 
 export default {
-    companyData: {
-        company: {
-            PIB: i18next.t("notFoundData.PIB"),
-            name: i18next.t("notFoundData.companyName")
-        },
-        image: defaultImage,
-        lastThreeReviews: [],
-        statistics: {
-            exchanges: {
-                failed: 0,
-                succeeded: 0,
-                total: 0,
-            },
-            publishes: {
-                count: 0,
-            },
-            views: {
-                count: 0,
-            }
-        }
-    },
-    offer: {
         category: {
             name: i18next.t("notFoundData.categoryName")
         },
             count: 0
         },
         _created: new Date().toString()
-    }
 }

src/pages/AdminHomePage/AdminItemDetailsPage/AdminItemDetailsPage.js

           content={<ItemDetails singleOffer isAdmin />}
           rightCard={
             <>
-              <ProfileMini /> <UserReviews rightReviews />
+              <ProfileMini /> <UserReviews isAdmin rightReviews />
             </>
           }
         />

src/pages/AdminHomePage/AdminLocationsPage/AdminLocationsPage.styled.js

     padding: 18px;
     min-height: (100vh - 72px);
     padding-bottom: 100px;
-    top: 65px;
+    top: 38px;
   }
 `;
 export const AdminLocationsHeader = styled(Header)`
   top: 0;
   @media (max-width: 600px) {
-    top: -5px;
+    top: 0px;
     margin-top: 0px;
     & > div {
-      margin-top: -10px;
+      margin-top: 0px;
     }
-    & > div > div > div:nth-child(1) {
-      top: 15px;
+    & > div > div > div {
+      top: 25px;
       left: 0;
     }
   }

src/pages/HomePage/HomePage.js

   const toggleFilters = () => {
     setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened);
   };
-
   return (
     <HomePageContainer>
       <MainLayout

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

 import UserReviews from "../../components/UserReviews/UserReviews";
 import { selectOffer } from "../../store/selectors/offersSelectors";
 import ProfileMini from "../../components/ProfileMini/ProfileMini";
+import history from "../../store/utils/history";
 
 const ItemDetailsPage = (props) => {
   const dispatch = useDispatch();
   const offerId = props.match.params.offerId;
 
   useEffect(() => {
-    dispatch(fetchOneOffer(offerId));
+    const view = history?.location?.state?.view;
+    console.log(view)
+    dispatch(fetchOneOffer({ offerId, view }));
     () => dispatch(clearSelectedOffer());
   }, []);
 

src/request/apiEndpoints.js

     setFingerprint: "/affiliate/fingerprint",
   },
   offers: {
-    getOneOffer: "offers",
+    getOneOffer: "offers/{offerId}",
     getOffers: "offers",
     getFeaturedOffers: "offers/featured",
     addOffer: "/users/{userId}/offers",
     locations: "locations",
     mineOffers: "users",
     profileOffers: "users/{userId}/offers",
+    profileOffersAsAdmin: "admin/users/{userId}/offers",
     removeOffer: "/users/{userId}/offers/{offerId}",
     removeOfferAsAdmin: "/admin/offers/{offerId}",
     pinOffer: "admin/offers/{id}/pin",
   },
   chat: {
     getChat: "chats",
-    getUserChats: "users/{userId}/chat",
+    getUserChats: "users/{userId}/chats",
     getOneChat: "users/{userId}/chats/{chatId}",
     createChat: "users/{userId}/offers/{offerId}/chat",
     sendMessage: "chats",
   exchange: {
     getExchange: "exchanges",
     validateExchange: "exchanges",
-    acceptExchange: "users/{userId}/exchanges/{exchangeId}/accept"
+    acceptExchange: "users/{userId}/exchanges/{exchangeId}/accept",
   },
   reviews: {
     getUserReviews: "/users/{userId}/reviews",

src/request/index.js

 import axios from "axios";
-import queryString from "qs";
+// import queryString from "qs";
 
 const request = axios.create({
   // baseURL: "http://192.168.88.150:3001/", // DJOLE
     "Content-Type": "application/json",
   },
   // withCredentials: true,
-  paramsSerializer: (params) =>
-    queryString.stringify(params, { arrayFormat: "comma" }),
+  // paramsSerializer: (params) =>
+  //   queryString.stringify(params, { arrayFormat: "comma" }),
 });
 
 export const getRequest = (url, params = null, options = null) => {

src/request/offersRequest.js

   return getRequest(apiEndpoints.offers.getOffers);
 };
 export const attemptFetchOneOffer = (payload) => {
-  const url = `${apiEndpoints.offers.getOneOffer}/${payload}`;
-  return getRequest(url);
+  return getRequest(
+    replaceInUrl(apiEndpoints.offers.getOneOffer, {
+      offerId: payload.offerId,
+    }),
+    payload.queryObject
+  );
 };
 export const attemptFetchMoreOffers = (page, payload) => {
   if (payload)
     }) + `?${queryString}`
   );
 };
+export const attemptFetchProfileOffersAsAdmin = (userId, queryString = "") => {
+  return getRequest(
+    replaceInUrl(apiEndpoints.offers.profileOffersAsAdmin, {
+      userId: userId,
+    }) + `?${queryString}`
+  );
+};
 export const attemptRemoveOffer = (payload, offerId) => {
   return deleteRequest(
     replaceInUrl(apiEndpoints.offers.removeOffer, {

src/socket/socket.js

 import io from "socket.io-client";
 
 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"],
   reconnectionAttempts: 5,
 });
     chatId,
     receiverUserId,
     message: {
-      userId,
+      user: {
+        _id: userId,
+      },
       text,
     },
   });
 };
-export const acceptExchangeSocket = (chatId, userId, receiverUserId, callbackFn) => {
+export const acceptExchangeSocket = (
+  chatId,
+  userId,
+  receiverUserId,
+  callbackFn
+) => {
   socket.emit("private_message", {
     chatId,
     receiverUserId,
     message: {
-      userId,
+      user: {
+        _id: userId
+      },
       isAcceptRequest: true,
-      text: ""
+      text: "",
     },
   });
   callbackFn();
 };
 
-export const addMesageListener = (listener) => {
+export const addMessageListener = (listener) => {
   socket.on("private_message", (data) =>
     listener({
       succeed: true,

src/store/middleware/accessTokensMiddleware.js

       // If refresh token is expired, log out user
       if (new Date() > new Date(refreshTokenDecoded?.exp * 1000)) {
         dispatch(logoutUser());
+        return Promise.resolve(response)
       }
       // If access token is expired, refresh access token
       if (new Date() > new Date(jwtTokenDecoded.exp * 1000)) {

src/store/reducers/chat/chatReducer.js

 function setChatsTotal(state, action) {
   return {
     ...state,
-    total: action.payload
+    total: action.payload,
   };
 }
 function setOneChat(state, action) {
 }
 function addNewMessage(state, { payload }) {
   let allChats = [...state.latestChats];
-  let chat = allChats.find((item) => item.chat._id === payload._id);
+  let chat = allChats.find((item) => item._id === payload._id);
   if (chat) {
     chat = {
       ...chat,
-      chat: {
-        ...chat.chat,
-        messages: [...chat.chat.messages, payload.message],
-      },
+      messages: [...chat.messages, payload.message],
     };
-    allChats = allChats.filter((item) => item.chat._id !== chat.chat._id);
+    allChats = allChats.filter((item) => item._id !== chat._id);
     allChats = [chat, ...allChats];
   }
   let newSelectedChat = {};
-  if (state.selectedChat.chat) {
-    newSelectedChat = { ...state.selectedChat };
-    if (newSelectedChat.chat._id === chat.chat._id)
-      newSelectedChat = { ...newSelectedChat, chat: chat.chat };
-  } else {
-    newSelectedChat = { ...chat };
-  }
+  if (state.selectedChat.chat) newSelectedChat = { ...state.selectedChat };
+  newSelectedChat = { ...chat };
   return {
     ...state,
     latestChats: [...allChats],