Merge branch 'feature/1473' of https://git.dilig.net/selenaaasi/trampa-frontend

src/components/Profile/ProfileOffers/NoProfileOffers.js/NoProfileOffers.styled.js

@@ -11,6 +11,7 @@ export const NoProfileOffersContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  margin-top: 36px;
 `;
 export const NoProfileOffersIcon = styled(HalfLogo)`
   margin-top: 85px;

src/components/Profile/ProfileOffers/ProfileOffers.js

@@ -12,7 +12,6 @@ import { useSelector } from "react-redux";
 import OfferCard from "../../Cards/OfferCard/OfferCard";
 import { selectProfileOffers } from "../../../store/selectors/offersSelectors";
 import { selectLatestChats } from "../../../store/selectors/chatSelectors";
-import { useHistory } from "react-router-dom";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import NoProfileOffers from "./NoProfileOffers.js/NoProfileOffers";
 import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
@@ -23,8 +22,7 @@ import ProfileOffersHeaderSkeleton from "./ProfileOffersHeaderSkeleton/ProfileOf
 import SelectSortField from "./SelectSortField/SelectSortField";
 import HeaderTitle from "./HeaderTitle/HeaderTitle";
 import SearchBar from "./SearchBar/SearchBar";
-import { replaceInRoute } from "../../../util/helpers/routeHelpers";
-import { CHAT_MESSAGE_PAGE } from "../../../constants/pages";
+import { messageUserHelper } from "../../../util/helpers/messageHelper";
 
 const ProfileOffers = (props) => {
   const [offersToShow, setOffersToShow] = useState([]);
@@ -34,28 +32,11 @@ const ProfileOffers = (props) => {
   const chats = useSelector(selectLatestChats);
   const profileOffers = useSelector(selectProfileOffers);
   const { isMobile } = useIsMobile();
-  const history = useHistory();
   const userId = useSelector(selectUserId);
   const arrayForMapping = Array.apply(null, Array(4)).map(() => {});
 
   const messageUser = (offer) => {
-    const chatItem = chats.find(
-      (item) => item.chat.offerId === offer?.offer?._id
-    );
-    if (chatItem !== undefined) {
-      history.push(
-        replaceInRoute(CHAT_MESSAGE_PAGE, { idChat: chatItem.chat._id })
-      );
-    } else {
-      if (offer?.offer?.userId !== userId) {
-        history.push(
-          replaceInRoute(CHAT_MESSAGE_PAGE, { idChat: "newMessage" }),
-          {
-            offerId: offer?.offer?._id,
-          }
-        );
-      }
-    }
+    messageUserHelper(chats, offer, userId);
   };
 
   useEffect(() => {
@@ -72,32 +53,32 @@ const ProfileOffers = (props) => {
   return (
     <ProfileOffersContainer isAdmin={props.isAdmin}>
       {isLoadingMineOffers || isLoadingMineOffers === undefined ? (
-        <ProfileOffersHeaderSkeleton />
-      ) : (
         <>
+          <ProfileOffersHeaderSkeleton />
+          {isMobile ? (
+            <SkeletonContainer>
+              <SkeletonOfferCard vertical />
+              <SkeletonOfferCard vertical />
+              <SkeletonOfferCard vertical />
+            </SkeletonContainer>
+          ) : (
+            <>
+              {arrayForMapping.map((item, index) => (
+                <SkeletonOfferCard key={index} />
+              ))}
+            </>
+          )}
+        </>
+      ) : (
+        <OffersContainer>
           <SelectSortField
             offersToShow={offersToShow}
             setOffersToShow={setOffersToShow}
           />
           <HeaderTitle isMyProfile={props.isMyProfile && !props.isAdmin} />
           <SearchBar handleSearch={handleSearch} />
-        </>
-      )}
-
-      {isLoadingMineOffers || isLoadingMineOffers === undefined ? (
-        <SkeletonContainer>
-          <SkeletonOfferCard vertical />
-          <SkeletonOfferCard vertical />
-          <SkeletonOfferCard vertical />
-        </SkeletonContainer>
-      ) : (
-        <OffersContainer>
           {!isMobile ? (
-            isLoadingMineOffers || isLoadingMineOffers === undefined ? (
-              arrayForMapping.map((item, index) => (
-                <SkeletonOfferCard key={index} />
-              ))
-            ) : offersToShow.length !== 0 ? (
+            offersToShow.length !== 0 ? (
               offersToShow.map((item) => (
                 <OfferCard
                   isAdmin={props.isAdmin}

src/components/Profile/ProfileOffers/ProfileOffersHeaderSkeleton/ProfileOffersHeaderSkeleton.styled.js

@@ -9,6 +9,9 @@ export const ProfileOffersHeaderSkeletonContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 18px;
+  @media (max-width: 600px) {
+    margin-bottom: 18px;
+  }
 `;
 export const ProfileOffersHeaderSkeletonGroupOne = styled(Box)`
   display: flex;
@@ -28,12 +31,22 @@ export const ProfileOffersHeaderSkeletonLineOne = styled(
 )`
   width: 148px;
   height: 18px;
+  @media (max-width: 600px) {
+    width: 72px;
+    height: 18px;
+    position: relative;
+    top: 5px;
+  }
 `;
 export const ProfileOffersHeaderSkeletonLineSecond = styled(
   SkeletonBackgroundColor
 )`
   width: 209px;
   height: 34px;
+  @media (max-width: 600px) {
+    width: 137px;
+    height: 29px;
+  }
 `;
 export const ProfileOffersHeaderSkeletonLineThird = styled(
   SkeletonItemBackgroundColor
@@ -41,10 +54,16 @@ export const ProfileOffersHeaderSkeletonLineThird = styled(
   width: 120px;
   margin-top: 2px;
   height: 14px;
+  @media (max-width: 600px) {
+    width: 108px;
+  }
 `;
 export const ProfileOffersHeaderSkeletonLineForth = styled(
   SkeletonItemBackgroundColor
 )`
   width: 18px;
   height: 18px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;

src/util/helpers/messageHelper.js

@@ -0,0 +1,23 @@
+import { CHAT_MESSAGE_PAGE } from "../../constants/pages";
+import history from "../../store/utils/history";
+import { replaceInRoute } from "./routeHelpers";
+
+export const messageUserHelper = (chats, userId, offer) => {
+    const chatItem = chats.find(
+        (item) => item.chat.offerId === offer?.offer?._id
+      );
+      if (chatItem !== undefined) {
+        history.push(
+          replaceInRoute(CHAT_MESSAGE_PAGE, { idChat: chatItem.chat._id })
+        );
+      } else {
+        if (offer?.offer?.userId !== userId) {
+          history.push(
+            replaceInRoute(CHAT_MESSAGE_PAGE, { idChat: "newMessage" }),
+            {
+              offerId: offer?.offer?._id,
+            }
+          );
+        }
+      }
+}