Fixed minor bugs, added skeleton screen

src/components/Cards/FilterCard/FilterFooter/FilterFooter.js

@@ -19,7 +19,7 @@ const FilterFooter = (props) => {
     if (props.isMyOffers) {
       filters.clear();
     } else {
-      filters.clearFiltersAndApply();
+      filters.clearOnlyFiltersAndApply();
     }
     props.toggleFilters();
     props.closeAllSections();

src/components/Cards/FilterCard/FilterHeader/FilterHeader.js

@@ -13,7 +13,7 @@ const FilterHeader = (props) => {
     if (props.isMyOffers) {
       filters.clear();
     } else {
-      filters.clearFiltersAndApply();
+      filters.clearOnlyFiltersAndApply();
     }
     props.toggleFilters();
     props.closeAllSections();

src/components/Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard.js

@@ -22,32 +22,32 @@ import {
 
 const SkeletonOfferCard = (props) => {
   return (
-    <SkeletonOfferCardContainer skeleton={props.skeleton} animationStage={props.animationStage}>
-      <LeftPart animationStage={props.animationStage}>
-        <SkeletonImage animationStage={props.animationStage} />
-        <SkeletonColumnContainer animationStage={props.animationStage}>
-          <SkeletonTitle animationStage={props.animationStage} />
-          <SkeletonGroup animationStage={props.animationStage}>
-            <SkeletonAuthor animationStage={props.animationStage} />
-            <SkeletonLocation animationStage={props.animationStage} />
+    <SkeletonOfferCardContainer skeleton={props.skeleton}>
+      <LeftPart>
+        <SkeletonImage />
+        <SkeletonColumnContainer>
+          <SkeletonTitle />
+          <SkeletonGroup>
+            <SkeletonAuthor />
+            <SkeletonLocation />
           </SkeletonGroup>
-          <SkeletonRowGroup animationStage={props.animationStage}>
-            <SkeletonDetail animationStage={props.animationStage} />
-            <SkeletonDetail animationStage={props.animationStage} />
-            <SkeletonDetail animationStage={props.animationStage} />
+          <SkeletonRowGroup>
+            <SkeletonDetail />
+            <SkeletonDetail />
+            <SkeletonDetail />
           </SkeletonRowGroup>
         </SkeletonColumnContainer>
       </LeftPart>
       <SpreadLine />
-      <RightPart animationStage={props.animationStage}>
-        <SkeletonDescription animationStage={props.animationStage} />
-        <SkeletonDescriptionLine animationStage={props.animationStage} />
-        <SkeletonDescriptionLine animationStage={props.animationStage} />
-        <SkeletonDescriptionLine animationStage={props.animationStage} />
-        <SkeletonDescriptionLine animationStage={props.animationStage} />
+      <RightPart>
+        <SkeletonDescription />
+        <SkeletonDescriptionLine />
+        <SkeletonDescriptionLine />
+        <SkeletonDescriptionLine />
+        <SkeletonDescriptionLine />
       </RightPart>
-      <SkeletonExchangeButton animationStage={props.animationStage}>
-        <SkeletonExchangeLine animationStage={props.animationStage} />
+      <SkeletonExchangeButton>
+        <SkeletonExchangeLine />
       </SkeletonExchangeButton>
       <SkeletonMessageButton />
     </SkeletonOfferCardContainer>

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

@@ -1,12 +1,22 @@
 import { Box } from "@mui/material";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import selectedTheme from "../../../../themes";
 import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
 
+export const SkeletonItemAnimation = keyframes`
+  0% {
+    background-color: ${selectedTheme.filterSkeletonItems};
+  }
+  50% {
+    background-color: ${selectedTheme.filterSkeletonItemsSecond};
+  }
+  100% {
+    background-color: ${selectedTheme.filterSkeletonItems};
+  }
+`
+
 export const ItemsTransition = styled(Box)`
-  transition-duration: 0.4s;
-  transition-property: background-color;
-  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonItems : selectedTheme.filterSkeletonItemsSecond} !important;
+  animation: ${SkeletonItemAnimation} 1.6s infinite;
 `;
 
 export const SkeletonOfferCardContainer = styled(BackgroundTransition)`

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

@@ -30,7 +30,7 @@ const DirectChatNewMessage = (props) => {
   const userId = useSelector(selectUserId);
   const handleSend = useCallback(
     (newChatId = undefined) => {
-      if (props.chat?.chat?._id || newChatId) {
+      if (props.chat?.chat?._id) {
         const chatId = props.chat?.chat?._id || newChatId;
         sendMessage(chatId, userId, typedValue, props.interlucator.userId);
         dispatch(
@@ -74,6 +74,7 @@ const DirectChatNewMessage = (props) => {
 
   const initiateNewChat = (typedValue) => {
     const offerId = location.state.offerId;
+    console.log("here");
     dispatch(
       startNewChat({
         offerId,

src/components/DirectChat/MiniChatColumn/MiniChatColumn.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
-import { MiniChatColumnContainer } from "./MiniChatColumn.styled";
+import { MiniChatColumnContainer, MinIChatColumnList } from "./MiniChatColumn.styled";
 import MiniChatCard from "../../Cards/MiniChatCard/MiniChatCard";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -49,16 +49,20 @@ const MiniChatColumn = () => {
       ) : (
         <MiniChatColumnContainer>
           <MiniChatColumnHeader />
-          {location.state?.offerId && <MiniChatCard chat={newChat} selected />}
-          {chats.map((item) => {
-            return (
-              <MiniChatCard
-                key={Date.now() * Math.random()}
-                chat={item}
-                selected={item?.chat?._id === selectedChat?.chat?._id}
-              />
-            );
-          })}
+          <MinIChatColumnList>
+            {location.state?.offerId && (
+              <MiniChatCard chat={newChat} selected />
+            )}
+            {chats.map((item) => {
+              return (
+                <MiniChatCard
+                  key={Date.now() * Math.random()}
+                  chat={item}
+                  selected={item?.chat?._id === selectedChat?.chat?._id}
+                />
+              );
+            })}
+          </MinIChatColumnList>
         </MiniChatColumnContainer>
       )}
     </>

src/components/DirectChat/MiniChatColumn/MiniChatColumn.styled.js

@@ -2,7 +2,23 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 
 export const MiniChatColumnContainer = styled(Box)`
-    @media (max-width: 600px) {
-        display: none;
-    }
-`
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+export const MinIChatColumnList = styled(Box)`
+  max-height: calc(100vh - 173px);
+  overflow-y: auto;
+  padding-right: 5px;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #ddd;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #777;
+  }
+  scrollbar-width: thin;
+  scrollbar-color: #ddd;
+`;

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

@@ -1,11 +1,21 @@
 import { Box } from "@mui/material";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import selectedTheme from "../../../../themes";
 
+const SkeletonBackgroundAnimation = keyframes`
+  0% {
+    background-color: ${selectedTheme.filterSkeletonBackground};
+  }
+  50% {
+    background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  }
+  100% {
+    background-color: ${selectedTheme.filterSkeletonBackground};
+  }
+`
+
 export const BackgroundTransition = styled(Box)`
-  transition-duration: 0.4s;
-  transition-property: background-color;
-  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonBackground : selectedTheme.filterSkeletonBackgroundSecond} !important;
+  animation: ${SkeletonBackgroundAnimation} 1.6s infinite;
 `;
 
 export const SkeletonHeaderContainer = styled(Box)`

src/components/Profile/ProfileOffers/ProfileOffers.js

@@ -30,6 +30,7 @@ import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSel
 import { OFFERS_PROFILE_SCOPE } from "../../../store/actions/offers/offersActionConstants";
 import SkeletonOfferCard from "../../Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard";
 import useIsMobile from "../../../hooks/useIsMobile";
+import ProfileOffersHeaderSkeleton from "./ProfileOffersHeaderSkeleton/ProfileOffersHeaderSkeleton";
 
 const ProfileOffers = (props) => {
   const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
@@ -120,58 +121,66 @@ const ProfileOffers = (props) => {
 
   return (
     <ProfileOffersContainer>
-        <HeaderSelect
-          value={sortOption?.value ? sortOption.value : sortEnum.INITIAL.value}
-          IconComponent={DownArrow}
-          onChange={handleChangeSelect}
-        >
-          <SelectOption
-            value={sortEnum.INITIAL.value}
-            key={sortEnum.INITIAL.value}
-            style={{ display: "none" }}
+      {isLoadingMineOffers || isLoadingMineOffers === undefined ? (
+        <ProfileOffersHeaderSkeleton />
+      ) : (
+        <>
+          <HeaderSelect
+            value={
+              sortOption?.value ? sortOption.value : sortEnum.INITIAL.value
+            }
+            IconComponent={DownArrow}
+            onChange={handleChangeSelect}
           >
-            {sortEnum.INITIAL.mainText}
-          </SelectOption>
-          {Object.keys(sortEnum).map((property) => {
-            if (sortEnum[property].value === sortEnum.INITIAL.value) return;
-            return (
-              <SelectOption
-                value={sortEnum[property].value}
-                key={sortEnum[property].value}
-              >
-                {sortEnum[property].mainText}
-              </SelectOption>
-            );
-          })}
-        </HeaderSelect>
-      <Grid
-        container
-        direction="row"
-        justifyContent="start"
-        alignItems="center"
-        sx={{ mb: 1.4 }}
-      >
-        <OffersIcon />
-        <HeaderTitle>
-          {props.isMyProfile ? "Moje objave" : "Objave kompanije"}
-        </HeaderTitle>
-      </Grid>
-        <SearchInput
-          fullWidth
-          ref={searchRef}
-          onFocus={handleFocusSearch}
-          onBlur={handleBlurSearch}
-          // ref={searchRef}
-          placeholder={t("header.searchOffers")}
-          italicPlaceholder
-          InputProps={{
-            endAdornment: (
-              <IconContainer onClick={handleSearch}>
-                <SearchIcon />
-              </IconContainer>
-            ),
-          }}
-        />
+            <SelectOption
+              value={sortEnum.INITIAL.value}
+              key={sortEnum.INITIAL.value}
+              style={{ display: "none" }}
+            >
+              {sortEnum.INITIAL.mainText}
+            </SelectOption>
+            {Object.keys(sortEnum).map((property) => {
+              if (sortEnum[property].value === sortEnum.INITIAL.value) return;
+              return (
+                <SelectOption
+                  value={sortEnum[property].value}
+                  key={sortEnum[property].value}
+                >
+                  {sortEnum[property].mainText}
+                </SelectOption>
+              );
+            })}
+          </HeaderSelect>
+          <Grid
+            container
+            direction="row"
+            justifyContent="start"
+            alignItems="center"
+            sx={{ mb: 1.4 }}
+          >
+            <OffersIcon />
+            <HeaderTitle>
+              {props.isMyProfile ? "Moje objave" : "Objave kompanije"}
+            </HeaderTitle>
+          </Grid>
+          <SearchInput
+            fullWidth
+            ref={searchRef}
+            onFocus={handleFocusSearch}
+            onBlur={handleBlurSearch}
+            // ref={searchRef}
+            placeholder={t("header.searchOffers")}
+            italicPlaceholder
+            InputProps={{
+              endAdornment: (
+                <IconContainer onClick={handleSearch}>
+                  <SearchIcon />
+                </IconContainer>
+              ),
+            }}
+          />
+        </>
+      )}
       <OffersContainer>
         {!isMobile ? (
           isLoadingMineOffers || isLoadingMineOffers === undefined ? (

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ProfileOffersHeaderSkeletonContainer, ProfileOffersHeaderSkeletonGroupOne, ProfileOffersHeaderSkeletonGroupSecond, ProfileOffersHeaderSkeletonLineForth, ProfileOffersHeaderSkeletonLineOne, ProfileOffersHeaderSkeletonLineSecond, ProfileOffersHeaderSkeletonLineThird } from './ProfileOffersHeaderSkeleton.styled'
+
+const ProfileOffersHeaderSkeleton = () => {
+  return (
+    <ProfileOffersHeaderSkeletonContainer>
+        <ProfileOffersHeaderSkeletonGroupOne>
+            <ProfileOffersHeaderSkeletonLineOne />
+            <ProfileOffersHeaderSkeletonLineSecond />
+        </ProfileOffersHeaderSkeletonGroupOne>
+        <ProfileOffersHeaderSkeletonGroupSecond>
+            <ProfileOffersHeaderSkeletonLineThird />
+            <ProfileOffersHeaderSkeletonLineForth />
+        </ProfileOffersHeaderSkeletonGroupSecond>
+    </ProfileOffersHeaderSkeletonContainer>
+  )
+}
+
+ProfileOffersHeaderSkeleton.propTypes = {
+    children: PropTypes.node,
+}
+
+export default ProfileOffersHeaderSkeleton

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

@@ -0,0 +1,50 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import {
+  SkeletonBackgroundColor,
+  SkeletonItemBackgroundColor,
+} from "../../../ProfileCard/SkeletonProfileCard/SkeletonProfileCard.styled";
+
+export const ProfileOffersHeaderSkeletonContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+`;
+export const ProfileOffersHeaderSkeletonGroupOne = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const ProfileOffersHeaderSkeletonGroupSecond = styled(
+  SkeletonBackgroundColor
+)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 15.5px;
+`;
+export const ProfileOffersHeaderSkeletonLineOne = styled(
+  SkeletonBackgroundColor
+)`
+  width: 148px;
+  height: 18px;
+`;
+export const ProfileOffersHeaderSkeletonLineSecond = styled(
+  SkeletonBackgroundColor
+)`
+  width: 209px;
+  height: 34px;
+`;
+export const ProfileOffersHeaderSkeletonLineThird = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 120px;
+  margin-top: 2px;
+  height: 14px;
+`;
+export const ProfileOffersHeaderSkeletonLineForth = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 18px;
+  height: 18px;
+`;

src/components/ProfileCard/ProfileCard.js

@@ -25,10 +25,14 @@ import ProfileMainInfo from "./ProfileMainInfo/ProfileMainInfo";
 import ProfileContact from "./ProfileContact/ProfileContact";
 import ProfileStats from "./ProfileStats/ProfileStats";
 import { useTranslation } from "react-i18next";
+import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import { PROFILE_SCOPE } from "../../store/actions/profile/profileActionConstants";
+import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard";
 
 const ProfileCard = () => {
   const [isMyProfile, setIsMyProfile] = useState(false);
   const [editProfileModal, setEditProfileModal] = useState(false);
+  const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
   const routeMatch = useRouteMatch();
   const dispatch = useDispatch();
   const profile = useSelector(selectProfile);
@@ -71,34 +75,40 @@ const ProfileCard = () => {
 
   return (
     <>
-      <ProfileCardContainer>
-        <ProfileCardHeader>
-          <PersonOutlineIcon color="action" sx={{ mr: 0.9 }} />
-          <HeaderTitle>{t("profile.myProfile")}</HeaderTitle>
-        </ProfileCardHeader>
-        <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}>
-          {isMyProfile ? (
-            <EditButton onClick={() => setEditProfileModal(true)}>
-              <EditIcon />
-            </EditButton>
-          ) : (
-            <MessageButton>
-              <MessageIcon />
-            </MessageButton>
-          )}
-          <ProfileInfoContainer>
-            {/* Profile Main Info  */}
-            <ProfileMainInfo profile={profile} isMyProfile={isMyProfile} />
-            {/* Profile Contact */}
-            <ProfileContact profile={profile} isMyProfile={isMyProfile} />
-            {/* Profile Stats */}
-            <ProfileStats
-              profile={profile}
-              percentOfSucceededExchanges={percentOfSucceededExchanges}
-            />
-          </ProfileInfoContainer>
-        </ProfileCardWrapper>
-      </ProfileCardContainer>
+      {isLoading ? (
+        <SkeletonProfileCard />
+      ) : (
+        <>
+          <ProfileCardContainer>
+            <ProfileCardHeader>
+              <PersonOutlineIcon color="action" sx={{ mr: 0.9 }} />
+              <HeaderTitle>{t("profile.myProfile")}</HeaderTitle>
+            </ProfileCardHeader>
+            <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}>
+              {isMyProfile ? (
+                <EditButton onClick={() => setEditProfileModal(true)}>
+                  <EditIcon />
+                </EditButton>
+              ) : (
+                <MessageButton>
+                  <MessageIcon />
+                </MessageButton>
+              )}
+              <ProfileInfoContainer>
+                {/* Profile Main Info  */}
+                <ProfileMainInfo profile={profile} isMyProfile={isMyProfile} />
+                {/* Profile Contact */}
+                <ProfileContact profile={profile} isMyProfile={isMyProfile} />
+                {/* Profile Stats */}
+                <ProfileStats
+                  profile={profile}
+                  percentOfSucceededExchanges={percentOfSucceededExchanges}
+                />
+              </ProfileInfoContainer>
+            </ProfileCardWrapper>
+          </ProfileCardContainer>
+        </>
+      )}
       {editProfileModal && (
         <EditProfile
           profile={profile}

src/components/ProfileCard/SkeletonProfileCard/SkeletonProfileCard.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SkeletonProfileCardBigCircle,
+  SkeletonProfileCardCircleLineOne,
+  SkeletonProfileCardCircleLines,
+  SkeletonProfileCardCircleLineSecond,
+  SkeletonProfileCardContainer,
+  SkeletonProfileCardContent,
+  SkeletonProfileCardFooter,
+  SkeletonProfileCardFooterLineForth,
+  SkeletonProfileCardFooterLineOne,
+  SkeletonProfileCardFooterLineSecond,
+  SkeletonProfileCardFooterLineThird,
+  SkeletonProfileCardGroup,
+  SkeletonProfileCardHeader,
+  SkeletonProfileCardLeftPart,
+  SkeletonProfileCardLine,
+  SkeletonProfileCardLowerPart,
+  SkeletonProfileCardSmallCircle,
+  SkeletonProfileCardUpperPart,
+} from "./SkeletonProfileCard.styled";
+
+const SkeletonProfileCard = () => {
+  return (
+    <SkeletonProfileCardContainer>
+      <SkeletonProfileCardHeader />
+      <SkeletonProfileCardContent>
+        <SkeletonProfileCardUpperPart>
+          <SkeletonProfileCardLeftPart>
+            <SkeletonProfileCardBigCircle />
+            <SkeletonProfileCardCircleLines>
+              <SkeletonProfileCardCircleLineOne />
+              <SkeletonProfileCardCircleLineSecond />
+            </SkeletonProfileCardCircleLines>
+          </SkeletonProfileCardLeftPart>
+          <SkeletonProfileCardSmallCircle />
+        </SkeletonProfileCardUpperPart>
+        <SkeletonProfileCardLowerPart>
+          <SkeletonProfileCardLine />
+          <SkeletonProfileCardLine />
+          <SkeletonProfileCardLine />
+        </SkeletonProfileCardLowerPart>
+        <SkeletonProfileCardFooter>
+          <SkeletonProfileCardGroup>
+            <SkeletonProfileCardFooterLineOne />
+            <SkeletonProfileCardFooterLineSecond />
+          </SkeletonProfileCardGroup>
+          <SkeletonProfileCardGroup>
+            <SkeletonProfileCardFooterLineThird />
+            <SkeletonProfileCardFooterLineForth />
+          </SkeletonProfileCardGroup>
+        </SkeletonProfileCardFooter>
+      </SkeletonProfileCardContent>
+    </SkeletonProfileCardContainer>
+  );
+};
+
+SkeletonProfileCard.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SkeletonProfileCard;

src/components/ProfileCard/SkeletonProfileCard/SkeletonProfileCard.styled.js

@@ -0,0 +1,150 @@
+import { Box } from "@mui/material";
+import styled, { keyframes } from "styled-components";
+import selectedTheme from "../../../themes";
+
+const skeletonAnimation = keyframes`
+    0% { 
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.63;
+    }
+    100% {
+        opacity: 1
+    }
+`;
+const skeletonBackgroundAnimation = keyframes`
+    0% { 
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.63;
+    }
+    100% {
+        opacity: 1
+    }
+`;
+
+export const SkeletonItemBackgroundColor = styled(Box)`
+  background-color: ${selectedTheme.filterSkeletonItems};
+  animation: ${skeletonAnimation} 1.2s infinite;
+`;
+export const SkeletonBackgroundColor = styled(Box)`
+  background-color: ${selectedTheme.filterSkeletonBackground};
+  animation: ${skeletonBackgroundAnimation} 1.2s infinite;
+`;
+
+export const SkeletonProfileCardContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  margin: 0 50px;
+  margin-top: 20px;
+  @media (max-width: 1200px) {
+    margin-left: 0;
+    margin-right: 36px;
+  }
+`;
+export const SkeletonProfileCardHeader = styled(SkeletonItemBackgroundColor)`
+  width: 148px;
+  height: 18px;
+`;
+export const SkeletonProfileCardContent = styled(SkeletonBackgroundColor)`
+  height: 347px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 39px;
+  position: relative;
+`;
+export const SkeletonProfileCardUpperPart = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 18px;
+  padding-bottom: 0;
+`;
+export const SkeletonProfileCardLeftPart = styled(Box)`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 18px;
+`;
+export const SkeletonProfileCardBigCircle = styled(SkeletonItemBackgroundColor)`
+  width: 144px;
+  height: 144px;
+  border-radius: 100%;
+`;
+export const SkeletonProfileCardCircleLines = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+`;
+export const SkeletonProfileCardCircleLineOne = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 90px;
+  height: 27px;
+`;
+export const SkeletonProfileCardCircleLineSecond = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 117px;
+  height: 18px;
+`;
+export const SkeletonProfileCardSmallCircle = styled(
+  SkeletonItemBackgroundColor
+)`
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+`;
+export const SkeletonProfileCardLowerPart = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 27px;
+  padding-left: 18px;
+`;
+export const SkeletonProfileCardLine = styled(SkeletonItemBackgroundColor)`
+  width: 108px;
+  height: 18px;
+`;
+export const SkeletonProfileCardFooter = styled(SkeletonItemBackgroundColor)`
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  height: 88px;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 36px;
+  padding-left: 18px;
+`;
+export const SkeletonProfileCardGroup = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 20px;
+`;
+export const SkeletonProfileCardFooterLineOne = styled(SkeletonBackgroundColor)`
+  height: 18px;
+  width: 107px;
+`;
+export const SkeletonProfileCardFooterLineSecond = styled(
+  SkeletonBackgroundColor
+)`
+  height: 18px;
+  width: 144px;
+`;
+export const SkeletonProfileCardFooterLineThird = styled(
+  SkeletonBackgroundColor
+)`
+  height: 18px;
+  width: 197px;
+`;
+export const SkeletonProfileCardFooterLineForth = styled(
+  SkeletonBackgroundColor
+)`
+  height: 18px;
+  width: 144px;
+`;

src/hooks/useOffers/useOffers.js

@@ -142,6 +142,13 @@ const useOffers = () => {
     }
   }, [search.searchString]);
 
+  // Clears only filters(does not clear sorting and search)
+  const clearOnlyFiltersAndApply = () => {
+    filters.clear();
+    paging.changePage(1);
+    setFiltersCleared(true);
+  }
+
   const clear = () => {
     filters.clear();
     sorting.clear();
@@ -157,6 +164,7 @@ const useOffers = () => {
     allOffersToShow,
     totalOffers,
     clearFiltersAndApply,
+    clearOnlyFiltersAndApply,
     apply,
     clear,
   };

src/request/index.js

@@ -5,8 +5,8 @@ const request = axios.create({
   // baseURL: "http://192.168.88.150:3001/", // DJOLE
   // baseURL: "http://192.168.88.175:3005/",
   // baseURL: "http://192.168.88.143:3001/", // DULE
-  baseURL: "https://trampa-api-test.dilig.net/",
-  // baseURL: "http://localhost:3001/",
+  // baseURL: "https://trampa-api-test.dilig.net/",
+  baseURL: "http://localhost:3001/",
   headers: {
     "Content-Type": "application/json",
   },

src/socket/socket.js

@@ -1,6 +1,7 @@
 import io from "socket.io-client";
 
-export const socket = io("https://trampa-api-test.dilig.net/", {
+// export const socket = io("https://trampa-api-test.dilig.net/", {
+export const socket = io("http://localhost:3001/", {
   transports: ["websocket"],
   reconnectionAttempts: 5,
 });

src/store/actions/profile/profileActionConstants.js

@@ -6,7 +6,7 @@ import {
   createSuccessType,
 } from "../actionHelpers";
 
-const PROFILE_SCOPE = "PROFILE_SCOPE";
+export const PROFILE_SCOPE = "PROFILE_SCOPE";
 export const PROFILE_FETCH = createFetchType(PROFILE_SCOPE);
 export const PROFILE_SUCCESS = createSuccessType(PROFILE_SCOPE);
 export const PROFILE_ERROR = createErrorType(PROFILE_SCOPE);

src/store/middleware/accessTokensMiddleware.js

@@ -15,9 +15,9 @@ import { logoutUser, refreshUserToken } from "../actions/login/loginActions";
 //Change URL with .env
 // const baseURL = "http://192.168.88.143:3001/"; // DULE
 // const baseURL = "http://192.168.88.175:3005/";
-const baseURL = "https://trampa-api-test.dilig.net/";
+// const baseURL = "https://trampa-api-test.dilig.net/";
 // const baseURL = "http://192.168.88.150:3001/"; // DJOLE
-// const baseURL = "http://localhost:3001/";
+const baseURL = "http://localhost:3001/";
 
 //Interceptor unique name
 export const accessTokensMiddlewareInterceptorName = "ACCESS_TOKEN_INTERCEPTOR";