Finished indicator and selector

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -71,7 +71,7 @@ const CreateOffer = ({ history, closeCreateOfferModal, editOffer, offer }) => {
     selectIsLoadingByActionType(LOGIN_USER_LOADING)
   );
 
-  const handleApiResponseSuccess = (status) => {
+  const handleApiResponseSuccess = () => {
     if (editOffer === undefined) {
       const userId = historyRouter.location.pathname.slice(
         9,

src/components/Cards/FilterCard/FilterCard.js

@@ -8,6 +8,7 @@ import FilterFooter from "./FilterFooter/FilterFooter";
 import CategoryChoser from "./Choser/CategoryChoser/CategoryChoser";
 import SubcategoryChoser from "./Choser/SubcategoryChoser/SubcategoryChoser";
 import LocationChoser from "./Choser/LocationChoser/LocationChoser";
+import SkeletonFilterCard from "./Skeleton/SkeletonFilterCard";
 
 const FilterCard = (props) => {
   const filters = useFilters(props.myOffers);
@@ -16,11 +17,14 @@ const FilterCard = (props) => {
       responsiveOpen={props.responsiveOpen}
       responsive={props.responsive}
       myOffers={props.myOffers}
+      skeleton={props.skeleton}
     >
+
+      <SkeletonFilterCard animationStage={props.animationStage} skeleton={props.skeleton} />
       {/* Header title for my offers */}
       {props.myOffers && <HeaderBack />}
 
-      <FilterHeader />
+      <FilterHeader filters={filters} />
 
       <ContentContainer>
         {/* Categories */}
@@ -36,6 +40,7 @@ const FilterCard = (props) => {
       <FilterFooter
         closeResponsive={props.closeResponsive}
         responsiveOpen={props.responsiveOpen}
+        filters={filters}
       />
     </FilterCardContainer>
   );
@@ -48,6 +53,8 @@ FilterCard.propTypes = {
   responsiveOpen: PropTypes.bool,
   closeResponsive: PropTypes.func,
   myOffers: PropTypes.bool,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
 };
 
 FilterCard.defaultProps = {

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -8,7 +8,7 @@ export const FilterCardContainer = styled(Box)`
   border-top-right-radius: 4px;
   height: ${(props) =>
     props.myOffers ? `calc(100% - 153px)` : `calc(100% - 90px)`};
-  padding: 36px;
+  padding: ${props => props.skeleton ? "0" : "36px"};
   background-color: white;
   width: calc(100% / 12 * 3.5);
   left: 0;
@@ -23,13 +23,13 @@ export const FilterCardContainer = styled(Box)`
   min-width: 285px !important;
   z-index: 9;
   margin-top: -24px;
-  transition: all ease-in-out 0.36s;
+  transition: all ease-in-out 1s;
+  transition: padding 0s;
 
   & header {
     position: absolute;
     top: -73px;
   }
-
   @media (max-width: 900px) {
     margin-left: -400px;
     ${(props) =>
@@ -45,6 +45,9 @@ export const FilterCardContainer = styled(Box)`
         : "display: none"};
     transition: all ease-in-out 0.36s;
   }
+  & * {
+    ${props => props.skeleton && 'display: none;'}
+  }
   @media (max-width: 600px) {
     margin-top: -14px;
   }

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

@@ -4,11 +4,10 @@ import { FilterFooterContainer } from "./FilterFooter.styled";
 import selectedTheme from "../../../../themes";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { useTranslation } from "react-i18next";
-import useFilters from "../../../../hooks/useFilters";
 
 const FilterFooter = (props) => {
   const { t } = useTranslation();
-  const filters = useFilters();
+  const filters = props.filters;
   const handleFilters = () => {
     filters.applyFilters();
     if (props.closeResponsive) props.closeResponsive();
@@ -53,6 +52,7 @@ const FilterFooter = (props) => {
 (FilterFooter.propTypes = {
   responsiveOpen: PropTypes.bool,
   closeResponsive: PropTypes.func,
+  filters: PropTypes.any,
 }),
   (FilterFooter.defaultProps = {
     responsiveOpen: false,

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

@@ -2,11 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FilterHeaderContainer, Title } from "./FilterHeader.styled";
 import { useTranslation } from "react-i18next";
-import useFilters from "../../../../hooks/useFilters";
 import Link from "../../../Link/Link";
 
-const FilterHeader = () => {
-  const filters = useFilters();
+const FilterHeader = (props) => {
+  const filters = props.filters;
   const { t } = useTranslation();
   const clearFilters = () => {
     filters.clearFilters();
@@ -23,6 +22,7 @@ const FilterHeader = () => {
 
 FilterHeader.propTypes = {
   children: PropTypes.node,
+  filters: PropTypes.any,
 };
 
 export default FilterHeader;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserHeader/SkeletonChooserHeader.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CircleOne,
+  CircleSecond,
+  LeftContainer,
+  Line,
+  SkeletonChooserContainer,
+} from "./SkeletonChooserHeader.styled";
+
+const SkeletonChooserHeader = (props) => {
+  return (
+    <SkeletonChooserContainer>
+      <LeftContainer>
+        <CircleOne animationStage={props.animationStage}/>
+        <Line animationStage={props.animationStage}/>
+      </LeftContainer>
+      <CircleSecond animationStage={props.animationStage}/>
+    </SkeletonChooserContainer>
+  );
+};
+
+SkeletonChooserHeader.propTypes = {
+  children: PropTypes.node,
+  animationStage: PropTypes.any,
+};
+
+export default SkeletonChooserHeader;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserHeader/SkeletonChooserHeader.styled.js

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { ItemsTransition } from "../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+
+export const SkeletonChooserContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 39px;
+  margin-bottom: 3px;
+`;
+
+export const CircleOne = styled(ItemsTransition)`
+  width: 24px;
+  height: 24px;
+  border-radius: 100% !important;
+  position: relative;
+  bottom: 3px;
+`;
+export const Line = styled(ItemsTransition)`
+  width: 117px;
+  height: 18px;
+`;
+export const CircleSecond = styled(ItemsTransition)`
+  width: 18px;
+  height: 18px;
+  border-radius: 100% !important;
+`;
+export const LeftContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 9px;
+`;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserTitle/SkeletonChooserTitle.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SkeletonChooserTitleContainer, SkeletonChooserTitleLine } from './SkeletonChooserTitle.styled'
+
+const SkeletonChooserTitle = (props) => {
+  return (
+    <SkeletonChooserTitleContainer center={props.center} animationStage={props.animationStage} >
+        <SkeletonChooserTitleLine center={props.center} animationStage={props.animationStage}/>
+    </SkeletonChooserTitleContainer>
+  )
+}
+
+SkeletonChooserTitle.propTypes = {
+    children: PropTypes.any,
+    center: PropTypes.bool,
+    animationStage: PropTypes.number,
+}
+
+export default SkeletonChooserTitle

src/components/Cards/FilterCard/Skeleton/SkeletonChooserTitle/SkeletonChooserTitle.styled.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { BackgroundTransition } from "../../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
+import { ItemsTransition } from "../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+
+export const SkeletonChooserTitleContainer = styled(ItemsTransition)`
+  margin-top: ${(props) => (props.center ? "44px" : "18px")};
+  width: 100%;
+  height: 40px;
+  padding: 13px 18px;
+`;
+export const SkeletonChooserTitleLine = styled(BackgroundTransition)`
+  width: 108px;
+  height: 14px;
+  ${(props) =>
+    props.center &&
+    `
+        margin: auto;
+    `}
+`;

src/components/Cards/FilterCard/Skeleton/SkeletonFilterCard.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SkeletonFilterCardContainer,
+  SkeletonHeader,
+  SkeletonHeaderLineOne,
+  SkeletonHeaderLineSecond,
+} from "./SkeletonFilterCard.styled";
+import SkeletonChooserHeader from "./SkeletonChooserHeader/SkeletonChooserHeader";
+import SkeletonChooserTitle from "./SkeletonChooserTitle/SkeletonChooserTitle";
+import SkeletonSection from "./SkeletonSection/SkeletonSection";
+
+const SkeletonFilterCard = (props) => {
+
+  return (
+    <SkeletonFilterCardContainer animationStage={props.animationStage} skeleton={props.skeleton}>
+      <SkeletonHeader>
+        <SkeletonHeaderLineOne animationStage={props.animationStage}  />
+        <SkeletonHeaderLineSecond animationStage={props.animationStage} />
+      </SkeletonHeader>
+      <SkeletonChooserHeader animationStage={props.animationStage}/>
+      <SkeletonChooserTitle animationStage={props.animationStage} />
+      <SkeletonSection numberOfOptions={14} animationStage={props.animationStage} />
+      <SkeletonChooserHeader animationStage={props.animationStage} />
+      <SkeletonChooserHeader animationStage={props.animationStage} />
+      <SkeletonChooserTitle animationStage={props.animationStage} />
+      <SkeletonSection numberOfOptions={3} animationStage={props.animationStage} />
+      <SkeletonChooserTitle center animationStage={props.animationStage} />
+    </SkeletonFilterCardContainer>
+  );
+};
+
+SkeletonFilterCard.propTypes = {
+  children: PropTypes.any,
+  animationStage: PropTypes.number,
+  skeleton: PropTypes.bool,
+};
+
+export default SkeletonFilterCard;

src/components/Cards/FilterCard/Skeleton/SkeletonFilterCard.styled.js

@@ -0,0 +1,30 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
+import { ItemsTransition } from "../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+
+export const SkeletonFilterCardContainer = styled(BackgroundTransition)`
+  display: ${props => props.skeleton ? "block" : "none"};
+  width: 100%;
+  height: 100%;
+  padding: 36px;
+  & * {
+    display: flex;
+    border-radius: 4px;
+  }
+`;
+export const SkeletonHeader = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const SkeletonHeaderLineOne = styled(ItemsTransition)`
+  width: 90px;
+  height: 27px;
+`;
+export const SkeletonHeaderLineSecond = styled(ItemsTransition)`
+  width: 78px;
+  height: 14px;
+  position: relative;
+  top: 7px;
+`;

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSection.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SkeletonSectionContainer } from "./SkeletonSection.styled";
+import SkeletonSectionOption from "./SkeletonSectionOption/SkeletonSectionOption";
+
+const SkeletonSection = (props) => {
+  const arrayForMapping = Array.apply(null, Array(props.numberOfOptions)).map(
+    () => {}
+  );
+  return (
+    <SkeletonSectionContainer>
+      {arrayForMapping.map((item, index) => (
+        <SkeletonSectionOption key={index} animationStage={props.animationStage} />
+      ))}
+    </SkeletonSectionContainer>
+  );
+};
+
+SkeletonSection.propTypes = {
+  children: PropTypes.node,
+  numberOfOptions: PropTypes.number,
+  animationStage: PropTypes.number,
+};
+
+export default SkeletonSection;

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSection.styled.js

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const SkeletonSectionContainer = styled(Box)`
+    padding-left: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+    margin-top: 18px;
+`

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSectionOption/SkeletonSectionOption.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Circle, EndLine, Line, OptionLeftContainer, SkeletonSectionOptionContainer } from './SkeletonSectionOption.styled'
+
+const SkeletonSectionOption = (props) => {
+  return (
+    <SkeletonSectionOptionContainer>
+        <OptionLeftContainer>
+            <Circle animationStage={props.animationStage} />
+            <Line animationStage={props.animationStage} />
+        </OptionLeftContainer>
+        <EndLine animationStage={props.animationStage} />
+    </SkeletonSectionOptionContainer>
+  )
+}
+
+SkeletonSectionOption.propTypes = {
+    children: PropTypes.any,
+    animationStage: PropTypes.number,
+}
+
+export default SkeletonSectionOption

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSectionOption/SkeletonSectionOption.styled.js

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { ItemsTransition } from "../../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+
+export const SkeletonSectionOptionContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const OptionLeftContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 9px;
+`;
+export const Circle = styled(ItemsTransition)`
+  width: 14px;
+  height: 14px;
+  border-radius: 100% !important;
+`;
+export const Line = styled(ItemsTransition)`
+  width: 86px;
+  height: 14px;
+`;
+export const EndLine = styled(ItemsTransition)`
+  width: 23px;
+  height: 14px;
+`;

src/components/Cards/OfferCard/OfferCard.js

@@ -235,6 +235,7 @@ OfferCard.propTypes = {
   messageUser: PropTypes.func,
   makeReview: PropTypes.func,
   dontShowViews: PropTypes.bool,
+  skeleton: PropTypes.bool,
 };
 OfferCard.defaultProps = {
   halfwidth: false,

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

@@ -10,7 +10,7 @@ import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
 import { ReactComponent as Star } from "../../../assets/images/svg/star.svg";
 
 export const OfferCardContainer = styled(Container)`
-  display: flex;
+  display: ${props => props.skeleton ? "none" : "flex"};
   flex-direction: column;
   width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
   box-sizing: border-box;

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

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  LeftPart,
+  RightPart,
+  SkeletonAuthor,
+  SkeletonColumnContainer,
+  SkeletonDescription,
+  SkeletonDescriptionLine,
+  SkeletonDetail,
+  SkeletonExchangeButton,
+  SkeletonExchangeLine,
+  SkeletonGroup,
+  SkeletonImage,
+  SkeletonLocation,
+  SkeletonMessageButton,
+  SkeletonOfferCardContainer,
+  SkeletonRowGroup,
+  SkeletonTitle,
+  SpreadLine,
+} from "./SkeletonOfferCard.styled";
+
+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} />
+          </SkeletonGroup>
+          <SkeletonRowGroup animationStage={props.animationStage}>
+            <SkeletonDetail animationStage={props.animationStage} />
+            <SkeletonDetail animationStage={props.animationStage} />
+            <SkeletonDetail animationStage={props.animationStage} />
+          </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>
+      <SkeletonExchangeButton animationStage={props.animationStage}>
+        <SkeletonExchangeLine animationStage={props.animationStage} />
+      </SkeletonExchangeButton>
+      <SkeletonMessageButton />
+    </SkeletonOfferCardContainer>
+  );
+};
+
+SkeletonOfferCard.propTypes = {
+  children: PropTypes.node,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
+};
+
+export default SkeletonOfferCard;

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

@@ -0,0 +1,133 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
+
+export const ItemsTransition = styled(Box)`
+  transition-duration: 0.4s;
+  transition-property: background-color;
+  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonItems : selectedTheme.filterSkeletonItemsSecond} !important;
+`;
+
+export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 14px 0;
+  border-radius: 4px;
+  ${(props) =>
+    props.sponsored === "true" &&
+    `border: 1px solid ${selectedTheme.borderSponsoredColor};`}
+  padding: 16px;
+  max-width: 2000px;
+  height: 180px;
+  position: relative;
+  & * {
+    border-radius: 4px;
+  }
+  @media (max-width: 550px) {
+    height: 184px;
+    padding: 18px;
+    padding-top: 12px;
+    ${(props) =>
+      props.vertical &&
+      `
+      height: 330px;
+      width: 180px;
+      margin: 0 18px;
+    `}
+  }
+`;
+export const LeftPart = styled(Box)`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  margin-right: 40px;
+`;
+export const SpreadLine = styled(Box)`
+  height: 108px;
+  margin-top: auto;
+  margin-bottom: auto;
+  opacity: 0.12;
+  border: 1px solid black;
+`;
+export const RightPart = styled(Box)`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: 36px;
+  padding-top: 20px;
+`;
+export const SkeletonImage = styled(ItemsTransition)`
+  width: 144px;
+  height: 144px;
+`;
+export const SkeletonColumnContainer = styled(Box)`
+  display: flex;
+  margin-left: 18px;
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: column;
+`;
+export const SkeletonTitle = styled(ItemsTransition)`
+  width: 90px;
+  height: 27px;
+`;
+export const SkeletonGroup = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const SkeletonAuthor = styled(ItemsTransition)`
+  width: 117px;
+  height: 18px;
+`;
+export const SkeletonLocation = styled(ItemsTransition)`
+  width: 90px;
+  height: 18px;
+`;
+export const SkeletonRowGroup = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const SkeletonDetail = styled(ItemsTransition)`
+  width: 72px;
+  height: 14px;
+  background-color: ${selectedTheme.filterSkeletonItems};
+`;
+export const SkeletonDescription = styled(ItemsTransition)`
+  width: 72px;
+  height: 14px;
+  background-color: ${selectedTheme.filterSkeletonItems};
+`;
+export const SkeletonDescriptionLine = styled(ItemsTransition)`
+  width: 221px;
+  height: 18px;
+  background-color: ${selectedTheme.filterSkeletonItems};
+`;
+export const SkeletonMessageButton = styled(ItemsTransition)`
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background-color: ${selectedTheme.filterSkeletonItems};
+  top: 18px;
+  right: 18px;
+`;
+export const SkeletonExchangeButton = styled(ItemsTransition)`
+  width: 180px;
+  height: 48px;
+  background-color: ${selectedTheme.filterSkeletonItems};
+  bottom: 18px;
+  right: 18px;
+  position: absolute;
+  padding-top: 17px;
+`;
+export const SkeletonExchangeLine = styled(BackgroundTransition)`
+  width: 108px;
+  height: 14px;
+  background-color: ${selectedTheme.filterSkeletonBackground};
+  margin: auto;
+`;

src/components/Header/Header.js

@@ -56,7 +56,7 @@ import { fetchMineProfile } from "../../store/actions/profile/profileActions";
 import CreateOffer from "../Cards/CreateOfferCard/CreateOffer";
 import { Drawer as HeaderDrawer } from "./Drawer/Drawer";
 
-const Header = (props) => {
+const Header = () => {
   const [openFilters, setOpenFilters] = useState(false);
   const [showSearchBar, setShowSearchBar] = useState(true);
   const [numberOfFilters, setNumberOfFilters] = useState(0);
@@ -137,7 +137,6 @@ const Header = (props) => {
 
   useEffect(() => {
     let shouldShowHeader = true;
-    console.log(props);
     if (
       location.pathname === LOGIN_PAGE ||
       location.pathname === REGISTER_PAGE ||

src/components/MarketPlace/Header/Header.js

@@ -27,6 +27,7 @@ import {
   COMMA,
   SPREAD,
 } from "../../../constants/marketplaceHeaderTitle";
+import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
@@ -91,7 +92,9 @@ const Header = (props) => {
   };
 
   return (
-    <HeaderContainer>
+    <>
+    <SkeletonHeader skeleton={props.skeleton} animationStage={props.animationStage} />
+    <HeaderContainer skeleton={props.skeleton}>
       {/* Setting appropriate header title if page is market place or my offers */}
       <Tooltip title={headerString}>
         {!props.myOffers ? (
@@ -166,6 +169,7 @@ const Header = (props) => {
         {/* ^^^^^^ */}
       </HeaderOptions>
     </HeaderContainer>
+    </>
   );
 };
 
@@ -176,6 +180,8 @@ Header.propTypes = {
   filters: PropTypes.any,
   category: PropTypes.string,
   myOffers: PropTypes.bool,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
 };
 Header.defaultProps = {
   isGrid: false,

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

@@ -8,7 +8,7 @@ import { ReactComponent as Refresh } from "../../../assets/images/svg/refresh.sv
 
 export const HeaderContainer = styled(Box)`
   margin-top: 20px;
-  display: flex;
+  display: ${props => props.skeleton ? "none" : "flex"};
   justify-content: space-between;
   align-items: center;
 `;

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CircleGroup, SkeletonHeaderCircle, SkeletonHeaderContainer, SkeletonHeaderLine, SkeletonHeaderRightLine, SkeletonRowGroup } from './SkeletonHeader.styled'
+
+const SkeletonHeader = (props) => {
+  return (
+    <SkeletonHeaderContainer skeleton={props.skeleton}>
+        <SkeletonHeaderLine animationStage={props.animationStage} />
+        <SkeletonRowGroup>
+            <CircleGroup>
+                <SkeletonHeaderCircle animationStage={props.animationStage} />
+                <SkeletonHeaderCircle animationStage={props.animationStage} />
+            </CircleGroup>
+            <SkeletonHeaderRightLine animationStage={props.animationStage} />
+        </SkeletonRowGroup>
+    </SkeletonHeaderContainer>
+  )
+}
+
+SkeletonHeader.propTypes = {
+    skeleton: PropTypes.bool,
+    animationStage: PropTypes.number,
+}
+
+export default SkeletonHeader

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

@@ -0,0 +1,48 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+
+export const BackgroundTransition = styled(Box)`
+  transition-duration: 0.4s;
+  transition-property: background-color;
+  background-color: ${props => props.animationStage === 1 ? selectedTheme.filterSkeletonBackground : selectedTheme.filterSkeletonBackgroundSecond} !important;
+`;
+
+export const SkeletonHeaderContainer = styled(Box)`
+  display: ${(props) => (props.skeleton ? "flex" : "none")};
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 36px;
+`;
+export const SkeletonHeaderLine = styled(BackgroundTransition)`
+  background-color: ${selectedTheme.filterSkeletonBackground};
+  width: 234px;
+  height: 18px;
+`;
+export const SkeletonRowGroup = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+  top: -11px;
+`;
+export const CircleGroup = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 18px;
+  position: relative;
+  top: -3px;
+  margin-right: 46px;
+`;
+export const SkeletonHeaderCircle = styled(BackgroundTransition)`
+  width: 40px;
+  height: 40px;
+  background-color: ${selectedTheme.filterSkeletonBackground};
+  border-radius: 100%;
+`;
+export const SkeletonHeaderRightLine = styled(BackgroundTransition)`
+  width: 209px;
+  height: 34px;
+  background-color: ${selectedTheme.filterSkeletonBackground};
+`;

src/components/MarketPlace/MarketPlace.js

@@ -9,8 +9,8 @@ const MarketPlace = (props) => {
 
   return (
     <MarketPlaceContainer>
-      <Header isGrid={isGrid} setIsGrid={setIsGrid} myOffers={props.myOffers}/>
-      <Offers isGrid={isGrid} myOffers={props.myOffers} />
+      <Header isGrid={isGrid} setIsGrid={setIsGrid} myOffers={props.myOffers} skeleton={props.skeleton} animationStage={props.animationStage}/>
+      <Offers isGrid={isGrid} myOffers={props.myOffers} animationStage={props.animationStage} skeleton={props.skeleton} />
     </MarketPlaceContainer>
   );
 };
@@ -18,6 +18,8 @@ const MarketPlace = (props) => {
 MarketPlace.propTypes = {
   children: PropTypes.node,
   myOffers: PropTypes.bool,
+  animationStage: PropTypes.number,
+  skeleton: PropTypes.bool,
 };
 
 export default MarketPlace;

src/components/MarketPlace/Offers/Offers.js

@@ -10,44 +10,57 @@ import { startChat } from "../../../util/helpers/chatHelper";
 import useOffers from "../../../hooks/useOffers";
 import OffersNotFound from "./OffersNotFound";
 import HeadersMyOffers from "./HeaderMyOffers.js/HeadersMyOffers";
+import SkeletonOfferCard from "../../Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard";
 
 const Offers = (props) => {
   const chats = useSelector(selectLatestChats);
   const offersRef = useRef(null);
   const userId = useSelector(selectUserId);
   const offers = useOffers(props.myOffers);
+  const arrayForMapping = Array.apply(null, Array(4)).map(
+    () => {}
+  );
 
   const messageOneUser = (offer) => {
     startChat(chats, offer, userId);
   };
 
-  console.log(offers.allOffersToShow);
   return (
     <>
-      {props.myOffers && (
-        <HeadersMyOffers searchMyOffers={offers.searchMyOffers} />
-      )}
-      {offers.allOffersToShow.length === 0 ? (
-        <OffersNotFound />
-      ) : (
-        <OffersContainer ref={offersRef}>
-          {offers.allOffersToShow.map((item) => {
-            return (
-              <OfferCard
-                key={item._id}
-                offer={item}
-                halfwidth={props.isGrid}
-                messageUser={messageOneUser}
+      {!props.skeleton ? (
+        <>
+          {props.myOffers && (
+            <HeadersMyOffers searchMyOffers={offers.searchMyOffers} />
+          )}
+          {offers.allOffersToShow.length === 0 ? (
+            <OffersNotFound />
+          ) : (
+            <OffersContainer ref={offersRef}>
+              {offers.allOffersToShow.map((item) => {
+                return (
+                  <OfferCard
+                    key={item._id}
+                    offer={item}
+                    halfwidth={props.isGrid}
+                    messageUser={messageOneUser}
+                  />
+                );
+              })}
+              <Paging
+                totalElements={offers.totalOffers}
+                elementsPerPage={10}
+                current={offers.page}
+                changePage={offers.handleDifferentPage}
               />
-            );
-          })}
-          <Paging
-            totalElements={offers.totalOffers}
-            elementsPerPage={10}
-            current={offers.page}
-            changePage={offers.handleDifferentPage}
-          />
-        </OffersContainer>
+            </OffersContainer>
+          )}
+        </>
+      ) : (
+        <>
+        {arrayForMapping.map((item, index)=> (
+          <SkeletonOfferCard key={index} skeleton animationStage={props.animationStage} />
+        ))}
+        </>
       )}
     </>
   );
@@ -57,6 +70,8 @@ Offers.propTypes = {
   children: PropTypes.node,
   isGrid: PropTypes.bool,
   myOffers: PropTypes.bool,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
 };
 
 Offers.defaultProps = {

src/hooks/useFilters.js

@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
 import { fetchCategories } from "../store/actions/categories/categoriesActions";
@@ -6,7 +7,7 @@ import {
   setFilteredCategory,
   setFilteredLocations,
   setFilteredSubcategory,
-  setIsAppliedStatus,
+  // setIsAppliedStatus,
 } from "../store/actions/filters/filtersActions";
 import { fetchLocations } from "../store/actions/locations/locationsActions";
 import {
@@ -27,7 +28,6 @@ const useFilters = (myOffers) => {
   const selectedSubcategory = useSelector(selectSelectedSubcategory);
   const selectedLocations = useSelector(selectSelectedLocations);
   const [loadedFromQS, setLoadedFromQS] = useState(false);
-  const [loaded, setLoadedStatus] = useState(false);
   const isApplied = useSelector(selectAppliedStatus);
   const categories = useSelector(selectCategories);
   const subcategories = useSelector(
@@ -36,13 +36,18 @@ const useFilters = (myOffers) => {
   const locations = useSelector(selectLocations);
   const dispatch = useDispatch();
   const queryStringHook = useQueryString();
-  useEffect(() => {
-    if (!loaded) {
+
+  const fetchCategoriesAndLocations = useCallback(
+    _.once(() => {
       dispatch(fetchCategories());
       dispatch(fetchLocations());
-      setLoadedStatus(true);
-    }
-  }, [categories, locations]);
+    }),
+    []
+  );
+
+  useEffect(() => {
+    fetchCategoriesAndLocations();
+  }, []);
 
   useEffect(() => {
     const queryObject = new URLSearchParams(queryStringHook.queryString);
@@ -82,7 +87,7 @@ const useFilters = (myOffers) => {
         setSelectedLocations([]);
       }
     }
-    dispatch(setIsAppliedStatus(true));
+    // dispatch(setIsAppliedStatus(true));
   }, [queryStringHook.queryString, categories, locations]);
 
   // Apply everything
@@ -128,7 +133,7 @@ const useFilters = (myOffers) => {
   // Setters
   const setSelectedCategory = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedCategory)) {
       dispatch(setFilteredCategory(payload));
@@ -136,7 +141,7 @@ const useFilters = (myOffers) => {
   };
   const setSelectedSubcategory = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedSubcategory)) {
       dispatch(setFilteredSubcategory(payload));
@@ -147,7 +152,7 @@ const useFilters = (myOffers) => {
   };
   const setSelectedLocations = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedLocations)) {
       dispatch(setFilteredLocations(payload));

src/pages/HomePage/HomePageMUI.js

@@ -1,15 +1,49 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { HomePageContainer } from "./HomePage.styled";
 import FilterCard from "../../components/Cards/FilterCard/FilterCard";
 import MainLayout from "../../layouts/MainLayout/MainLayout";
 import MarketPlace from "../../components/MarketPlace/MarketPlace";
+import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import { useSelector } from "react-redux";
+import { OFFERS_SCOPE } from "../../store/actions/offers/offersActionConstants";
 
 const HomePage = () => {
+  const [animationStage, setAnimationStage] = useState(1);
+  const isLoadingOffers = useSelector(
+    selectIsLoadingByActionType(OFFERS_SCOPE)
+  );
+
+  const timeout = useCallback(() => {
+    setAnimationStage((prevAnimationStage) => {
+      if (prevAnimationStage === 2) return 1;
+      return prevAnimationStage + 1;
+    });
+  }, [animationStage]);
+
+  useEffect(() => {
+    let newTimeout;
+    if (isLoadingOffers) {
+      newTimeout = setTimeout(timeout, 900);
+    }
+    return () => clearTimeout(newTimeout);
+  }, [timeout, isLoadingOffers]);
   return (
     <HomePageContainer>
-      <MainLayout leftCard={<FilterCard />} content={<MarketPlace />} />
+      <MainLayout
+        leftCard={
+          <FilterCard
+            skeleton={isLoadingOffers}
+            animationStage={animationStage}
+          />
+        }
+        content={
+          <MarketPlace
+            skeleton={isLoadingOffers}
+            animationStage={animationStage}
+          />
+        }
+      />
     </HomePageContainer>
   );
-}
+};
 export default HomePage;
-

src/store/actions/app/appActionConstants.js

@@ -1,4 +1,5 @@
 import { createLoadingType } from '../actionHelpers';
 
 export const APP_LOADING = createLoadingType('APP_LOADING');
-export const UPDATE_LOADER = createLoadingType("UPDATE_LOADER")
+export const ADD_LOADER = createLoadingType("ADD_LOADER");
+export const REMOVE_LOADER = createLoadingType("REMOVE_LOADER");

src/store/actions/app/appActions.js

@@ -1,6 +1,10 @@
-import { APP_LOADING } from './appActionConstants';
+import { ADD_LOADER, REMOVE_LOADER } from "./appActionConstants";
 
-export const setAppReady = (payload) => ({
-  type: APP_LOADING,
-  payload: payload
+export const addLoader = (payload) => ({
+  type: ADD_LOADER,
+  payload
 });
+export const removeLoader = (payload) => ({
+  type: REMOVE_LOADER,
+  payload
+})

src/store/actions/categories/categoriesActionConstants.js

@@ -1,6 +1,8 @@
-import { createFetchType } from "../actionHelpers";
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
 const CATEGORIES_SCOPE = "CATEGORIES";
 export const CATEGORIES_FETCH = createFetchType(CATEGORIES_SCOPE);
+export const CATEGORIES_FETCH_SUCCESS = createSuccessType(CATEGORIES_SCOPE);
+export const CATEGORIES_FETCH_ERROR = createErrorType(CATEGORIES_SCOPE);
 
-export const CATEGORIES_SET = "CATEGORIES_SET";
+export const CATEGORIES_SET = createSetType("CATEGORIES_SET");

src/store/actions/categories/categoriesActions.js

@@ -1,4 +1,4 @@
-import { CATEGORIES_FETCH, CATEGORIES_SET } from "./categoriesActionConstants";
+import { CATEGORIES_FETCH, CATEGORIES_FETCH_ERROR, CATEGORIES_FETCH_SUCCESS, CATEGORIES_SET } from "./categoriesActionConstants";
 
 export const fetchCategories = () => ({
     type: CATEGORIES_FETCH
@@ -7,4 +7,10 @@ export const fetchCategories = () => ({
 export const setCategories = (payload) => ({
     type: CATEGORIES_SET,
     payload
+})
+export const fetchCategoriesSuccess = () => ({
+    type: CATEGORIES_FETCH_SUCCESS
+})
+export const fetchCategoriesError = () => ({
+    type: CATEGORIES_FETCH_ERROR
 })

src/store/actions/chat/chatActionConstants.js

@@ -1,4 +1,4 @@
-import { createFetchType } from "../actionHelpers";
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
 const CHAT_SCOPE = "CHAT_SCOPE";
 const CHAT_HEADER_SCOPE = "CHAT_HEADER_SCOPE";
@@ -7,12 +7,26 @@ const CHAT_SEND_SCOPE = "CHAT_SEND_SCOPE";
 const CHAT_NEW_SCOPE = "CHAT_NEW_SCOPE";
 
 export const CHAT_FETCH = createFetchType(CHAT_SCOPE);
+export const CHAT_FETCH_SUCCESS = createSuccessType(CHAT_SCOPE);
+export const CHAT_FETCH_ERROR = createErrorType(CHAT_SCOPE);
+
 export const CHAT_SEND_FETCH = createFetchType(CHAT_SEND_SCOPE);
+export const CHAT_SEND_SUCCESS = createSuccessType(CHAT_SEND_SCOPE);
+export const CHAT_SEND_ERROR = createErrorType(CHAT_SEND_SCOPE);
+
 export const CHAT_HEADER_FETCH = createFetchType(CHAT_HEADER_SCOPE);
+export const CHAT_HEADER_FETCH_SUCCESS = createSuccessType(CHAT_HEADER_SCOPE);
+export const CHAT_HEADER_FETCH_ERROR = createErrorType(CHAT_HEADER_SCOPE);
+
 export const CHAT_ONE_FETCH = createFetchType(CHAT_ONE_SCOPE);
+export const CHAT_ONE_FETCH_SUCCESS = createSuccessType(CHAT_ONE_SCOPE);
+export const CHAT_ONE_FETCH_ERROR = createErrorType(CHAT_ONE_SCOPE);
+
 export const CHAT_NEW_FETCH = createFetchType(CHAT_NEW_SCOPE);
+export const CHAT_NEW_FETCH_SUCCESS = createSuccessType(CHAT_NEW_SCOPE);
+export const CHAT_NEW_FETCH_ERROR = createErrorType(CHAT_NEW_SCOPE);
 
-export const CHAT_SET = "CHAT_SET";
-export const CHAT_ONE_SET = "CHAT_ONE_SET";
-export const CHAT_CLEAR = "CHAT_CLEAR";
+export const CHAT_SET = createSetType("CHAT_SET");
+export const CHAT_ONE_SET = createSetType("CHAT_ONE_SET");
+export const CHAT_CLEAR = createSetType("CHAT_CLEAR");
 // export const ADD_ONE_CHAT = "CHAT_ONE_ADD";

src/store/actions/chat/chatActions.js

@@ -1,4 +1,4 @@
-import { CHAT_CLEAR, CHAT_FETCH, CHAT_HEADER_FETCH, CHAT_NEW_FETCH, CHAT_ONE_FETCH, CHAT_ONE_SET, CHAT_SEND_FETCH, CHAT_SET } from "./chatActionConstants";
+import { CHAT_CLEAR, CHAT_FETCH, CHAT_FETCH_ERROR, CHAT_FETCH_SUCCESS, CHAT_HEADER_FETCH, CHAT_HEADER_FETCH_ERROR, CHAT_HEADER_FETCH_SUCCESS, CHAT_NEW_FETCH, CHAT_NEW_FETCH_ERROR, CHAT_NEW_FETCH_SUCCESS, CHAT_ONE_FETCH, CHAT_ONE_FETCH_ERROR, CHAT_ONE_FETCH_SUCCESS, CHAT_ONE_SET, CHAT_SEND_ERROR, CHAT_SEND_FETCH, CHAT_SEND_SUCCESS, CHAT_SET } from "./chatActionConstants";
 
 export const fetchChats = (payload) => ({
     type: CHAT_FETCH,
@@ -30,4 +30,34 @@ export const clearChat = () => ({
 export const startNewChat = (payload) => ({
     type: CHAT_NEW_FETCH,
     payload
+})
+export const fetchChatsSuccess = () => ({
+    type: CHAT_FETCH_SUCCESS
+})
+export const fetchHeaderChatsSuccess = () => ({
+    type: CHAT_HEADER_FETCH_SUCCESS
+})
+export const fetchOneChatSuccess = () => ({
+    type: CHAT_ONE_FETCH_SUCCESS
+})
+export const sendMessageSuccess = () => ({
+    type: CHAT_SEND_SUCCESS
+})
+export const startNewChatSuccess = () => ({
+    type: CHAT_NEW_FETCH_SUCCESS
+})
+export const fetchChatsError = () => ({
+    type: CHAT_FETCH_ERROR
+})
+export const fetchHeaderChatsError = () => ({
+    type: CHAT_HEADER_FETCH_ERROR
+})
+export const fetchOneChatError = () => ({
+    type: CHAT_ONE_FETCH_ERROR
+})
+export const sendMessageError = () => ({
+    type: CHAT_SEND_ERROR
+})
+export const startNewChatError = () => ({
+    type: CHAT_NEW_FETCH_ERROR
 })

src/store/actions/counter/counterActionConstants.js

@@ -1,4 +1,10 @@
-import { createFetchType } from "../actionHelpers";
+import {
+  createErrorType,
+  createFetchType,
+  createSuccessType,
+} from "../actionHelpers";
 
 const COUNTER_SCOPE = "COUNTER_SCOPE";
-export const COUNTER_INCREASE = createFetchType(COUNTER_SCOPE);
+export const COUNTER_INCREASE = createFetchType(COUNTER_SCOPE);
+export const COUNTER_INCREASE_SUCCESS = createSuccessType(COUNTER_SCOPE);
+export const COUNTER_INCREASE_ERROR = createErrorType(COUNTER_SCOPE);

src/store/actions/counter/counterActions.js

@@ -1,6 +1,12 @@
-import { COUNTER_INCREASE } from "./counterActionConstants";
+import { COUNTER_INCREASE, COUNTER_INCREASE_ERROR, COUNTER_INCREASE_SUCCESS } from "./counterActionConstants";
 
 export const increaseCounter = (payload) => ({
     type: COUNTER_INCREASE,
     payload,
+})
+export const increaseCounterSuccess = () => ({
+    type: COUNTER_INCREASE_SUCCESS
+})
+export const increaseCounterError = () => ({
+    type: COUNTER_INCREASE_ERROR
 })

src/store/actions/exchange/exchangeActionConstants.js

@@ -1,9 +1,22 @@
-import { createFetchType } from "../actionHelpers";
+import {
+  createErrorType,
+  createFetchType,
+  createSetType,
+  createSuccessType,
+} from "../actionHelpers";
 
 const EXCHANGE_SCOPE = "EXCHANGE_SCOPE";
-const EXCHANGE_VALIDATE_SCOPE = "EXCHANGE_VALIDATE_SCOPE";
 export const EXCHANGE_FETCH = createFetchType(EXCHANGE_SCOPE);
-export const EXCHANGE_VALIDATE_FETCH = createFetchType(EXCHANGE_VALIDATE_SCOPE);
+export const EXCHANGE_FETCH_SUCCESS = createSuccessType(EXCHANGE_SCOPE);
+export const EXCHANGE_FETCH_ERROR = createErrorType(EXCHANGE_SCOPE);
 
+const EXCHANGE_VALIDATE_SCOPE = "EXCHANGE_VALIDATE_SCOPE";
+export const EXCHANGE_VALIDATE_FETCH = createFetchType(EXCHANGE_VALIDATE_SCOPE);
+export const EXCHANGE_VALIDATE_FETCH_SUCCESS = createSuccessType(
+  EXCHANGE_VALIDATE_SCOPE
+);
+export const EXCHANGE_VALIDATE_FETCH_ERROR = createErrorType(
+  EXCHANGE_VALIDATE_SCOPE
+);
 
-export const EXCHANGE_SET = "EXCHANGE_SET";
+export const EXCHANGE_SET = createSetType("EXCHANGE_SET");

src/store/actions/exchange/exchangeActions.js

@@ -1,4 +1,4 @@
-import { EXCHANGE_FETCH, EXCHANGE_SET, EXCHANGE_VALIDATE_FETCH } from "./exchangeActionConstants";
+import { EXCHANGE_FETCH, EXCHANGE_FETCH_ERROR, EXCHANGE_FETCH_SUCCESS, EXCHANGE_SET, EXCHANGE_VALIDATE_FETCH, EXCHANGE_VALIDATE_FETCH_ERROR, EXCHANGE_VALIDATE_FETCH_SUCCESS } from "./exchangeActionConstants";
 
 export const fetchExchange = (payload) => ({
     type: EXCHANGE_FETCH,
@@ -11,4 +11,16 @@ export const setExchange = (payload) => ({
 export const validateExchange = (payload) => ({
     type: EXCHANGE_VALIDATE_FETCH,
     payload,
+})
+export const fetchExchangeSuccess = () => ({
+    type: EXCHANGE_FETCH_SUCCESS
+})
+export const fetchExchangeError = () => ({
+    type: EXCHANGE_FETCH_ERROR
+})
+export const validateExchangeSuccess = () => ({
+    type: EXCHANGE_VALIDATE_FETCH_SUCCESS
+})
+export const validateExchangeError = () => ({
+    type: EXCHANGE_VALIDATE_FETCH_ERROR
 })

src/store/actions/filters/filtersActionConstants.js

@@ -3,9 +3,9 @@ import { createClearType, createSetType } from "../actionHelpers"
 const FILTERS_SCOPE = "FILTERS"
 export const SET_FILTERS = createSetType(FILTERS_SCOPE);
 export const CLEAR_FILTERS = createClearType(FILTERS_SCOPE);
-export const SET_CATEGORY = "FILTERS_SET_CATEGORY";
-export const SET_SUBCATEGORY = "FILTERS_SET_SUBCATEGORY";
-export const SET_LOCATIONS = "FILTERS_SET_LOCATIONS";
-export const SET_SORT_OPTION = "FILTERS_SET_SORT_OPTION";
-export const SET_IS_APPLIED = "FILTERS_SET_IS_APPLIED";
-export const SET_QUERY_STRING = "FILTERS_SET_QUERY_STRING";
+export const SET_CATEGORY = createSetType("FILTERS_SET_CATEGORY");
+export const SET_SUBCATEGORY = createSetType("FILTERS_SET_SUBCATEGORY");
+export const SET_LOCATIONS = createSetType("FILTERS_SET_LOCATIONS");
+export const SET_SORT_OPTION = createSetType("FILTERS_SET_SORT_OPTION");
+export const SET_IS_APPLIED = createSetType("FILTERS_SET_IS_APPLIED");
+export const SET_QUERY_STRING = createSetType("FILTERS_SET_QUERY_STRING");

src/store/actions/locations/locationsActionConstants.js

@@ -1,6 +1,8 @@
-import { createFetchType } from "../actionHelpers";
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
 const LOCATIONS_SCOPE = "LOCATIONS_SCOPE";
 export const LOCATIONS_FETCH = createFetchType(LOCATIONS_SCOPE);
+export const LOCATIONS_FETCH_SUCCESS = createSuccessType(LOCATIONS_SCOPE);
+export const LOCATIONS_FETCH_ERROR = createErrorType(LOCATIONS_SCOPE);
 
-export const LOCATIONS_SET = "LOCATIONS_SET";
+export const LOCATIONS_SET = createSetType("LOCATIONS_SET");

src/store/actions/locations/locationsActions.js

@@ -1,4 +1,4 @@
-import { LOCATIONS_FETCH, LOCATIONS_SET } from "./locationsActionConstants";
+import { LOCATIONS_FETCH, LOCATIONS_FETCH_ERROR, LOCATIONS_FETCH_SUCCESS, LOCATIONS_SET } from "./locationsActionConstants";
 
 export const fetchLocations = () => ({
   type: LOCATIONS_FETCH,
@@ -7,4 +7,10 @@ export const fetchLocations = () => ({
 export const setLocations = (payload) => ({
     type: LOCATIONS_SET,
     payload
+})
+export const fetchLocationsSuccess = () => ({
+  type: LOCATIONS_FETCH_SUCCESS
+})
+export const fetchLocationsError = () => ({
+    type: LOCATIONS_FETCH_ERROR 
 })

src/store/actions/login/loginActionConstants.js

@@ -5,6 +5,7 @@ import {
   createLoadingType,
   createSuccessType,
   createSubmitType,
+  createUpdateType,
 } from '../actionHelpers';
 
 
@@ -18,11 +19,11 @@ export const CLEAR_LOGIN_USER_ERROR = createClearType(
 export const LOGIN_USER_LOADING = createLoadingType(LOGIN_USER_SCOPE);
 
 
-export const UPDATE_USER_JWT_TOKEN = 'UPDATE_USER_JWT_TOKEN';
-export const RESET_LOGIN_STATE = 'RESET_LOGIN_STATE';
-export const AUTHENTICATE_USER = 'AUTHENTICATE_USER';
-export const LOGOUT_USER = 'LOGOUT_USER';
-export const REFRESH_TOKEN = 'REFRESH_TOKEN';
+export const UPDATE_USER_JWT_TOKEN = createUpdateType('UPDATE_USER_JWT_TOKEN');
+export const RESET_LOGIN_STATE = createClearType('UPDATE_USER_JWT_TOKEN');
+export const AUTHENTICATE_USER = createUpdateType('AUTHENTICATE_USER');
+export const LOGOUT_USER = createUpdateType('LOGOUT_USER');
+export const REFRESH_TOKEN = createUpdateType('REFRESH_TOKEN');
 
 const GENERATE_TOKEN_SCOPE = 'GENERATE_TOKEN';
 export const GENERATE_TOKEN = createSubmitType(GENERATE_TOKEN_SCOPE);

src/store/actions/offers/offersActionConstants.js

@@ -2,40 +2,57 @@ import {
   createClearType,
   createErrorType,
   createFetchType,
+  createSetType,
   createSuccessType,
 } from "../actionHelpers";
 
-const OFFERS_SCOPE = "OFFERS_SCOPE";
-const ONE_OFFER_SCOPE = "ONE_OFFER_SCOPE";
-
-const OFFERS_MORE_SCOPE = "OFFERS_MORE_SCOPE";
-export const OFFERS_FETCH_MORE = createFetchType(OFFERS_MORE_SCOPE);
-
-const OFFERS_MINE_SCOPE = "OFFERS_MINE_SCOPE";
-export const OFFERS_MINE_FETCH = createFetchType(OFFERS_MINE_SCOPE);
+export const OFFERS_SCOPE = "OFFERS_SCOPE";
 export const OFFERS_FETCH = createFetchType(OFFERS_SCOPE);
 export const OFFERS_SUCCESS = createSuccessType(OFFERS_SCOPE);
 export const OFFERS_ERROR = createErrorType(OFFERS_SCOPE);
 export const OFFERS_CLEAR = createClearType(OFFERS_SCOPE);
 
-const OFFERS_PROFILE_SCOPE = "OFFERS_PROFILE_SCOPE";
+export const OFFERS_MORE_SCOPE = "OFFERS_MORE_SCOPE";
+export const OFFERS_FETCH_MORE = createFetchType(OFFERS_MORE_SCOPE);
+export const OFFERS_FETCH_MORE_SUCCESS = createSuccessType(OFFERS_MORE_SCOPE)
+export const OFFERS_FETCH_MORE_ERROR = createErrorType(OFFERS_MORE_SCOPE)
+
+export const OFFERS_MINE_SCOPE = "OFFERS_MINE_SCOPE";
+export const OFFERS_MINE_FETCH = createFetchType(OFFERS_MINE_SCOPE);
+export const OFFERS_MINE_FETCH_SUCCESS = createSuccessType(OFFERS_MINE_SCOPE);
+export const OFFERS_MINE_FETCH_ERROR = createErrorType(OFFERS_MINE_SCOPE);
+
+export const OFFERS_PROFILE_SCOPE = "OFFERS_PROFILE_SCOPE";
 export const OFFERS_PROFILE_FETCH = createFetchType(OFFERS_PROFILE_SCOPE);
+export const OFFERS_PROFILE_SUCCESS = createSuccessType(OFFERS_PROFILE_SCOPE);
+export const OFFERS_PROFILE_ERROR = createErrorType(OFFERS_PROFILE_SCOPE);
 
+export const ONE_OFFER_SCOPE = "ONE_OFFER_SCOPE";
 export const ONE_OFFER_FETCH = createFetchType(ONE_OFFER_SCOPE);
-export const ONE_OFFER_SUCCESS = createSuccessType(ONE_OFFER_FETCH);
+export const ONE_OFFER_SUCCESS = createSuccessType(ONE_OFFER_SCOPE);
 export const ONE_OFFER_ERROR = createErrorType(ONE_OFFER_SCOPE);
 
-export const OFFERS_PINNED_SET = "OFFERS_PINNED_SET";
-export const OFFERS_PINNED_ADD = "OFFERS_PINNED_ADD";
-export const OFFERS_SET = "OFFERS_SET";
-export const OFFER_SET = "OFFER_SET";
-export const OFFERS_ADD = "OFFERS_ADD";
-export const OFFERS_NO_MORE = "OFFERS_NO_MORE";
-export const OFFERS_SET_TOTAL = "OFFERS_SET_TOTAL";
-export const OFFERS_MINE_SET = "OFFERS_MY_ADD";
-export const OFFER_ADD = "OFFER_ADD";
-export const OFFERS_PROFILE_SET = "OFFERS_PROFILE_SET";
-
-export const OFFER_REMOVE = "OFFER_REMOVE";
-
-export const OFFER_EDIT = "OFFER_EDIT";
+export const OFFERS_PINNED_SET = createSetType("OFFERS_PINNED_SET");
+export const OFFERS_PINNED_ADD = createSetType("OFFERS_PINNED_ADD");
+export const OFFERS_SET = createSetType("OFFERS_SET");
+export const OFFER_SET = createSetType("OFFER_SET");
+export const OFFERS_ADD = createSetType("OFFERS_ADD");
+export const OFFERS_NO_MORE = createSetType("OFFERS_NO_MORE");
+export const OFFERS_SET_TOTAL = createSetType("OFFERS_SET_TOTAL");
+export const OFFERS_PROFILE_SET = createSetType("OFFERS_PROFILE_SET");
+export const OFFERS_MINE_SET = createSetType("OFFERS_MY_ADD");
+
+export const OFFER_ADD_SCOPE = "OFFER_ADD_SCOPE";
+export const OFFER_ADD = createFetchType(OFFER_ADD_SCOPE);
+export const OFFER_ADD_SUCCESS = createSuccessType(OFFER_ADD_SCOPE);
+export const OFFER_ADD_ERROR = createErrorType(OFFER_ADD_SCOPE);
+
+export const OFFER_REMOVE_SCOPE = "OFFER_REMOVE_SCOPE";
+export const OFFER_REMOVE = createFetchType(OFFER_REMOVE_SCOPE);
+export const OFFER_REMOVE_SUCCESS = createSuccessType(OFFER_REMOVE_SCOPE);
+export const OFFER_REMOVE_ERROR = createErrorType(OFFER_REMOVE_SCOPE);
+
+export const OFFER_EDIT_SCOPE = "OFFER_EDIT_SCOPE";
+export const OFFER_EDIT = createFetchType(OFFER_EDIT_SCOPE);
+export const OFFER_EDIT_SUCCESS = createSuccessType(OFFER_EDIT_SCOPE);
+export const OFFER_EDIT_ERROR = createErrorType(OFFER_EDIT_SCOPE);

src/store/actions/offers/offersActions.js

@@ -4,25 +4,38 @@ import {
   OFFERS_ERROR,
   OFFERS_FETCH,
   OFFERS_FETCH_MORE,
+  OFFERS_FETCH_MORE_ERROR,
+  OFFERS_FETCH_MORE_SUCCESS,
   OFFERS_MINE_FETCH,
+  OFFERS_MINE_FETCH_ERROR,
+  OFFERS_MINE_FETCH_SUCCESS,
   OFFERS_MINE_SET,
   OFFERS_NO_MORE,
   OFFERS_PINNED_ADD,
   OFFERS_PINNED_SET,
+  OFFERS_PROFILE_ERROR,
   OFFERS_PROFILE_FETCH,
   OFFERS_PROFILE_SET,
+  OFFERS_PROFILE_SUCCESS,
   OFFERS_SET,
   OFFERS_SET_TOTAL,
   OFFERS_SUCCESS,
   OFFER_ADD,
+  OFFER_ADD_ERROR,
+  OFFER_ADD_SUCCESS,
   OFFER_EDIT,
+  OFFER_EDIT_ERROR,
+  OFFER_EDIT_SUCCESS,
   OFFER_REMOVE,
+  OFFER_REMOVE_ERROR,
+  OFFER_REMOVE_SUCCESS,
   OFFER_SET,
   ONE_OFFER_ERROR,
   ONE_OFFER_FETCH,
   ONE_OFFER_SUCCESS,
 } from "./offersActionConstants";
 
+// Fetch offers
 export const fetchOffers = (payload) => ({
   type: OFFERS_FETCH,
   payload,
@@ -38,57 +51,111 @@ export const fetchOffersError = (payload) => ({
 export const clearOffers = () => ({
   type: OFFERS_CLEAR,
 });
-export const setOffers = (payload) => ({
-  type: OFFERS_SET,
+
+// Fetch more offers
+export const fetchMoreOffers = (payload) => ({
+  type: OFFERS_FETCH_MORE,
   payload,
 });
-export const setPinnedOffers = (payload) => ({
-  type: OFFERS_PINNED_SET,
+export const fetchMoreOffersSuccess = () => ({
+  type: OFFERS_FETCH_MORE_SUCCESS,
+});
+export const fetchMoreOffersError = () => ({
+  type: OFFERS_FETCH_MORE_ERROR,
+});
+
+// Fetch mine offers
+export const fetchMineOffers = () => ({
+  type: OFFERS_MINE_FETCH,
+});
+export const fetchMineOffersSuccess = () => ({
+  type: OFFERS_MINE_FETCH_SUCCESS,
+});
+export const fetchMineOffersError = () => ({
+  type: OFFERS_MINE_FETCH_ERROR,
+});
+
+// Fetch profile offers
+export const fetchProfileOffers = (payload) => ({
+  type: OFFERS_PROFILE_FETCH,
   payload,
 });
-export const addPinnedOffers = (payload) => ({
-  type: OFFERS_PINNED_ADD,
+export const fetchProfileOffersSuccess = () => ({
+  type: OFFERS_PROFILE_SUCCESS,
+});
+export const fetchProfileOffersError = () => ({
+  type: OFFERS_PROFILE_ERROR,
+});
+
+// One offer
+export const fetchOneOffer = (payload) => ({
+  type: ONE_OFFER_FETCH,
   payload,
 });
-export const addOffers = (payload) => ({
-  type: OFFERS_ADD,
+export const fetchOneOfferError = (payload) => ({
+  type: ONE_OFFER_ERROR,
+  payload,
+});
+export const fetchOneOfferSuccess = (payload) => ({
+  type: ONE_OFFER_SUCCESS,
   payload,
 });
+
+// Add offer
 export const addOffer = (payload) => ({
   type: OFFER_ADD,
   payload,
 });
+export const addOfferSuccess = () => ({
+  type: OFFER_ADD_SUCCESS,
+});
+export const addOfferError = () => ({
+  type: OFFER_ADD_ERROR,
+});
+
+// Remove offer
 export const removeOffer = (payload) => ({
   type: OFFER_REMOVE,
   payload,
 });
+export const removeOfferSuccess = () => ({
+  type: OFFER_REMOVE_SUCCESS,
+});
+export const removeOfferError = () => ({
+  type: OFFER_REMOVE_ERROR
+})
+
+// Edit offer
 export const editOneOffer = (payload) => ({
   type: OFFER_EDIT,
   payload,
 });
+export const editOfferSuccess = () => ({
+  type: OFFER_EDIT_SUCCESS,
+});
+export const editOfferError = () => ({
+    type: OFFER_EDIT_ERROR
+})
 
-export const fetchOneOffer = (payload) => ({
-  type: ONE_OFFER_FETCH,
+
+
+export const setOffers = (payload) => ({
+  type: OFFERS_SET,
   payload,
 });
-export const fetchOneOfferError = (payload) => ({
-  type: ONE_OFFER_ERROR,
+export const setPinnedOffers = (payload) => ({
+  type: OFFERS_PINNED_SET,
   payload,
 });
-export const fetchOneOfferSuccess = (payload) => ({
-  type: ONE_OFFER_SUCCESS,
+export const addPinnedOffers = (payload) => ({
+  type: OFFERS_PINNED_ADD,
   payload,
 });
-
-export const setOffer = (payload) => ({
-  type: OFFER_SET,
+export const addOffers = (payload) => ({
+  type: OFFERS_ADD,
   payload,
 });
 
-export const fetchMoreOffers = (payload) => ({
-  type: OFFERS_FETCH_MORE,
-  payload,
-});
 export const setNoMoreOffersStatus = (payload) => ({
   type: OFFERS_NO_MORE,
   payload,
@@ -97,18 +164,15 @@ export const setTotalOffers = (payload) => ({
   type: OFFERS_SET_TOTAL,
   payload,
 });
-export const fetchMineOffers = () => ({
-  type: OFFERS_MINE_FETCH,
-});
 export const setMineOffers = (payload) => ({
   type: OFFERS_MINE_SET,
   payload,
 });
-export const fetchProfileOffers = (payload) => ({
-  type: OFFERS_PROFILE_FETCH,
-  payload,
-});
 export const setProfileOffers = (payload) => ({
   type: OFFERS_PROFILE_SET,
   payload,
 });
+export const setOffer = (payload) => ({
+  type: OFFER_SET,
+  payload,
+});

src/store/actions/products/productsActionConstants.js

@@ -1,5 +0,0 @@
-export const LOAD_DATA = 'LOAD_DATA';
-export const UPDATE_PAGE = 'UPDATE_PAGE';
-export const UPDATE_ITEMS_PER_PAGE = 'UPDATE_ITEMS_PER_PAGE';
-export const UPDATE_FILTER = 'UPDATE_FILTER';
-export const UPDATE_SORT = 'UPDATE_SORT';

src/store/actions/products/productsActions.js

@@ -1,32 +0,0 @@
-import {
-	LOAD_DATA,
-	UPDATE_PAGE,
-	UPDATE_ITEMS_PER_PAGE,
-    UPDATE_FILTER,
-    UPDATE_SORT
-} from './randomDataActionConstants';
-
-export const loadData = (payload) => ({
-	type: LOAD_DATA,
-	payload,
-});
-
-export const updatePage = (payload) => ({
-	type: UPDATE_PAGE,
-	payload,
-});
-
-export const updateItemsPerPage = (payload) => ({
-	type: UPDATE_ITEMS_PER_PAGE,
-	payload,
-});
-
-export const updateFilter = (payload) => ({
-    type: UPDATE_FILTER,
-	payload,
-})
-
-export const updateSort = (payload) => ({
-    type: UPDATE_SORT,
-	payload,
-})

src/store/actions/profile/profileActionConstants.js

@@ -1,8 +1,9 @@
 import {
+  createClearType,
   createErrorType,
   createFetchType,
+  createSetType,
   createSuccessType,
-  createUpdateType,
 } from "../actionHelpers";
 
 const PROFILE_SCOPE = "PROFILE_SCOPE";
@@ -12,11 +13,15 @@ export const PROFILE_ERROR = createErrorType(PROFILE_SCOPE);
 
 const PROFILE_MINE_SCOPE = "PROFILE_MINE_SCOPE";
 export const PROFILE_MINE_FETCH = createFetchType(PROFILE_MINE_SCOPE);
+export const PROFILE_MINE_FETCH_SUCCESS = createSuccessType(PROFILE_MINE_SCOPE);
+export const PROFILE_MINE_FETCH_ERROR = createErrorType(PROFILE_MINE_SCOPE);
 
-export const PROFILE_SET = "PROFILE_SET";
-export const PROFILE_MINE_SET = "PROFILE_MINE_SET";
+export const PROFILE_SET = createSetType("PROFILE_SET");
+export const PROFILE_MINE_SET = createSetType("PROFILE_MINE_SET");
 
 const PROFILE_EDIT_SCOPE = "PROFILE_EDIT_SCOPE";
-export const PROFILE_EDIT = createUpdateType(PROFILE_EDIT_SCOPE);
+export const PROFILE_EDIT = createFetchType(PROFILE_EDIT_SCOPE);
+export const PROFILE_EDIT_SUCCESS = createSuccessType(PROFILE_EDIT_SCOPE)
+export const PROFILE_EDIT_ERROR = createErrorType(PROFILE_EDIT_SCOPE);
 
-export const PROFILE_CLEAR = "PROFILE_CLEAR";
+export const PROFILE_CLEAR = createClearType("PROFILE_CLEAR");

src/store/actions/profile/profileActions.js

@@ -1,42 +1,60 @@
 import {
-  PROFILE_CLEAR, PROFILE_ERROR,
+  PROFILE_CLEAR,
+  PROFILE_ERROR,
   PROFILE_FETCH,
   PROFILE_MINE_FETCH,
   PROFILE_MINE_SET,
   PROFILE_SET,
   PROFILE_SUCCESS,
   PROFILE_EDIT,
+  PROFILE_MINE_FETCH_SUCCESS,
+  PROFILE_EDIT_SUCCESS,
+  PROFILE_MINE_FETCH_ERROR,
+  PROFILE_EDIT_ERROR,
 } from "./profileActionConstants";
 
 export const fetchProfile = (payload) => ({
   type: PROFILE_FETCH,
   payload,
 });
-export const fetchSuccessProfile = (payload) => ({
+export const fetchProfileSuccess = (payload) => ({
   type: PROFILE_SUCCESS,
   payload,
 });
-
 export const fetchErrorProfile = (payload) => ({
   type: PROFILE_ERROR,
   payload,
 });
-export const setProfile = (payload) => ({
-  type: PROFILE_SET,
-  payload,
-});
-export const setMineProfile = (payload) => ({
-  type: PROFILE_MINE_SET,
-  payload,
-});
+
 export const fetchMineProfile = () => ({
   type: PROFILE_MINE_FETCH,
 });
+export const fetchMineProfileSuccess = () => ({
+  type: PROFILE_MINE_FETCH_SUCCESS,
+});
+export const fetcHMineProfileError = () => ({
+  type: PROFILE_MINE_FETCH_ERROR,
+});
+
 export const editMineProfile = (payload) => ({
   type: PROFILE_EDIT,
   payload,
 });
+export const editMineProfileSuccess = () => ({
+  type: PROFILE_EDIT_SUCCESS,
+});
+export const editMineProfileError = () => ({
+  type: PROFILE_EDIT_ERROR,
+});
 
 export const clearProfile = () => ({
-    type: PROFILE_CLEAR
-})
+  type: PROFILE_CLEAR,
+});
+export const setProfile = (payload) => ({
+  type: PROFILE_SET,
+  payload,
+});
+export const setMineProfile = (payload) => ({
+  type: PROFILE_MINE_SET,
+  payload,
+});

src/store/actions/queryString/queryStringActionConstants.js

@@ -1,2 +1,4 @@
-export const QUERY_STRING_SET = "QUERY_STRING_SET";
-export const QUERY_STRING_SET_REDUX = "QUERY_STRING_SET_REDUX";
+import { createSetType } from "../actionHelpers";
+
+export const QUERY_STRING_SET = createSetType("QUERY_STRING_SET");
+export const QUERY_STRING_SET_REDUX = createSetType("QUERY_STRING_SET_REDUX");

src/store/actions/randomData/randomDataActionConstants.js

@@ -1,5 +0,0 @@
-export const LOAD_DATA = 'LOAD_DATA';
-export const UPDATE_PAGE = 'UPDATE_PAGE';
-export const UPDATE_ITEMS_PER_PAGE = 'UPDATE_ITEMS_PER_PAGE';
-export const UPDATE_FILTER = 'UPDATE_FILTER';
-export const UPDATE_SORT = 'UPDATE_SORT';

src/store/actions/randomData/randomDataActions.js

@@ -1,32 +0,0 @@
-import {
-	LOAD_DATA,
-	UPDATE_PAGE,
-	UPDATE_ITEMS_PER_PAGE,
-    UPDATE_FILTER,
-    UPDATE_SORT
-} from './randomDataActionConstants';
-
-export const loadData = (payload) => ({
-	type: LOAD_DATA,
-	payload,
-});
-
-export const updatePage = (payload) => ({
-	type: UPDATE_PAGE,
-	payload,
-});
-
-export const updateItemsPerPage = (payload) => ({
-	type: UPDATE_ITEMS_PER_PAGE,
-	payload,
-});
-
-export const updateFilter = (payload) => ({
-    type: UPDATE_FILTER,
-	payload,
-})
-
-export const updateSort = (payload) => ({
-    type: UPDATE_SORT,
-	payload,
-})

src/store/actions/register/registerActionConstants.js

@@ -1,4 +1,11 @@
-import { createFetchType } from "../actionHelpers";
+import {
+  createErrorType,
+  createFetchType,
+  createSuccessType,
+} from "../actionHelpers";
 
 const REGISTER_USER_SCOPE = "REGISTER_USER";
-export const REGISTER_USER_FETCH = createFetchType(REGISTER_USER_SCOPE);
+export const REGISTER_USER_FETCH = createFetchType(REGISTER_USER_SCOPE);
+export const REGISTER_USER_FETCH_ERROR = createErrorType(REGISTER_USER_SCOPE);
+export const REGISTER_USER_FETCH_SUCCESS =
+  createSuccessType(REGISTER_USER_SCOPE);

src/store/actions/register/registerActions.js

@@ -1,6 +1,12 @@
-import { REGISTER_USER_FETCH } from "./registerActionConstants";
+import { REGISTER_USER_FETCH, REGISTER_USER_FETCH_ERROR, REGISTER_USER_FETCH_SUCCESS } from "./registerActionConstants";
 
 export const fetchRegisterUser = (payload) => ({
     type: REGISTER_USER_FETCH,
     payload
+})
+export const fetchRegisterUserSuccess = () => ({
+    type: REGISTER_USER_FETCH_SUCCESS
+})
+export const fetchRegisterUserError = () => ({
+    type: REGISTER_USER_FETCH_ERROR
 })

src/store/actions/review/reviewActionConstants.js

@@ -1,9 +1,13 @@
-import { createFetchType } from "../actionHelpers";
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
 const REVIEW_GIVE_SCOPE = "REVIEW_GIVE_SCOPE";
-const REVIEW_GET_SCOPE = "REVIEW_GET_SCOPE";
-
 export const REVIEW_GIVE = createFetchType(REVIEW_GIVE_SCOPE);
+export const REVIEW_GIVE_SUCCESS = createSuccessType(REVIEW_GIVE_SCOPE);
+export const REVIEW_GIVE_ERROR = createErrorType(REVIEW_GIVE_SCOPE);
+
+const REVIEW_GET_SCOPE = "REVIEW_GET_SCOPE";
 export const REVIEW_GET = createFetchType(REVIEW_GET_SCOPE);
+export const REVIEW_GET_SUCCESS = createSuccessType(REVIEW_GET_SCOPE);
+export const REVIEW_GET_ERROR = createErrorType(REVIEW_GET_SCOPE);
 
-export const REVIEW_SET = "REVIEW_SET";
+export const REVIEW_SET = createSetType("REVIEW_SET");

src/store/actions/review/reviewActions.js

@@ -1,13 +1,25 @@
-import { REVIEW_GET, REVIEW_GIVE, REVIEW_SET } from "./reviewActionConstants";
+import { REVIEW_GET, REVIEW_GET_ERROR, REVIEW_GET_SUCCESS, REVIEW_GIVE, REVIEW_GIVE_ERROR, REVIEW_GIVE_SUCCESS, REVIEW_SET } from "./reviewActionConstants";
 
 export const fetchReviews = (payload) => ({
     type: REVIEW_GET,
     payload,
 })
+export const fetchReviewsSuccess = () => ({
+    type: REVIEW_GET_SUCCESS
+})
+export const fetchReviewsError = () => ({
+    type: REVIEW_GET_ERROR
+})
 export const giveReview = (payload) => ({
     type: REVIEW_GIVE,
     payload,
 })
+export const giveReviewSuccess = () => ({
+    type: REVIEW_GIVE_SUCCESS
+})
+export const giveReviewError = () => ({
+    type: REVIEW_GIVE_ERROR
+})
 export const setReviews = (payload) => ({
     type: REVIEW_SET,
     payload,

src/store/actions/user/userActionConstants.js

@@ -1,7 +1,17 @@
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
-export const SET_USER = 'SET_USER';
-export const SET_USER_ERROR = 'SET_USER_ERROR';
-export const FORGOT_PASSWORD = "FORGOT_PASSWORD";
-export const RESET_PASSWORD = "RESET_PASSWORD";
-export const SET_USER_ACCESS_TOKEN = "SET_USER_ACCESS_TOKEN";
-export const SET_USER_REFRESH_TOKEN = "SET_USER_REFRESH_TOKEN";
+
+const FORGOT_PASSWORD_SCOPE = "FORGOT_PASSWORD"
+export const FORGOT_PASSWORD = createFetchType(FORGOT_PASSWORD_SCOPE);
+export const FORGOT_PASSWORD_SUCCESS = createSuccessType(FORGOT_PASSWORD_SCOPE);
+export const FORGOT_PASSWORD_ERROR = createErrorType(FORGOT_PASSWORD_SCOPE);
+
+const RESET_PASSWORD_SCOPE = "RESET_PASSWORD";
+export const RESET_PASSWORD = createFetchType(RESET_PASSWORD_SCOPE);
+export const RESET_PASSWORD_SUCCESS = createSuccessType(RESET_PASSWORD_SCOPE);
+export const RESET_PASSWORD_ERROR = createErrorType(RESET_PASSWORD_SCOPE);
+
+export const SET_USER_ACCESS_TOKEN = createSetType("SET_USER_ACCESS_TOKEN");
+export const SET_USER_REFRESH_TOKEN = createSetType("SET_USER_REFRESH_TOKEN");
+export const SET_USER = createSetType('SET_USER');
+export const SET_USER_ERROR = createSetType('SET_USER_ERROR');

src/store/actions/user/userActions.js

@@ -1,34 +1,52 @@
 import {
   FORGOT_PASSWORD,
+  FORGOT_PASSWORD_ERROR,
+  FORGOT_PASSWORD_SUCCESS,
   RESET_PASSWORD,
+  RESET_PASSWORD_ERROR,
+  RESET_PASSWORD_SUCCESS,
   SET_USER,
   SET_USER_ACCESS_TOKEN,
   SET_USER_ERROR,
   SET_USER_REFRESH_TOKEN,
-} from './userActionConstants';
+} from "./userActionConstants";
 
-export const setUser = (payload) => ({
-  type: SET_USER,
+export const forgotPassword = (payload) => ({
+  type: FORGOT_PASSWORD,
   payload,
 });
+export const forgotPasswordSuccess = () => ({
+  type: FORGOT_PASSWORD_SUCCESS
+})
+export const forgotPasswordError = () => ({
+    type: FORGOT_PASSWORD_ERROR
+})
 
-export const setUserError = (payload) => ({
-  type: SET_USER_ERROR,
+export const resetPassword = (payload) => ({
+  type: RESET_PASSWORD,
   payload,
 });
-export const forgotPassword = (payload) => ({
-  type: FORGOT_PASSWORD,
-  payload
+export const resetPasswordSuccess = () => ({
+    type: RESET_PASSWORD_SUCCESS
 })
-export const resetPassword = (payload) => ({
-  type: RESET_PASSWORD,
-  payload
+export const resetPasswordError = () => ({
+    type: RESET_PASSWORD_ERROR
 })
+
 export const setUserAccessToken = (payload) => ({
   type: SET_USER_ACCESS_TOKEN,
-  payload
-})
+  payload,
+});
 export const setUserRefreshToken = (payload) => ({
   type: SET_USER_REFRESH_TOKEN,
-  payload
-})
+  payload,
+});
+export const setUser = (payload) => ({
+  type: SET_USER,
+  payload,
+});
+
+export const setUserError = (payload) => ({
+  type: SET_USER_ERROR,
+  payload,
+});

src/store/middleware/loadingMiddleware.js

@@ -6,6 +6,7 @@ import {
   UPDATE,
   SUBMIT,
 } from "../actions/actionHelpers";
+import { addLoader, removeLoader } from "../actions/app/appActions";
 
 const promiseTypes = [FETCH, UPDATE, DELETE, SUBMIT];
 
@@ -17,28 +18,16 @@ export default ({ dispatch }) =>
       action.type.includes(promiseType)
     );
     if (promiseType) {
-      dispatch({
-        type: "UPDATE_LOADER",
-        payload: {
-          actionType: action.type.replace(promiseType, "[LOADING]"),
-          isLoading: true,
-        },
-      });
+      dispatch(addLoader(action.type));
       return next(action);
     }
 
     if (action.type.includes(SUCCESS) || action.type.includes(ERROR)) {
-      const actionType = action.type.includes(SUCCESS)
-        ? action.type.replace(SUCCESS, "[LOADING]")
-        : action.type.replace(ERROR, "[LOADING]");
+      // const actionType = action.type.includes(SUCCESS)
+      //   ? action.type.replace(SUCCESS, "[LOADING]")
+      //   : action.type.replace(ERROR, "[LOADING]");
 
-      dispatch({
-        type: "UPDATE_LOADER",
-        payload: {
-          actionType,
-          isLoading: false,
-        },
-      });
+      dispatch(removeLoader(action.type));
       return next(action);
     }
     next(action);

src/store/reducers/index.js

@@ -2,7 +2,6 @@ import { combineReducers } from "redux";
 import loginReducer from "./login/loginReducer";
 import loadingReducer from "./loading/loadingReducer";
 import userReducer from "./user/userReducer";
-import randomDataReducer from "./randomData/randomDataReducer";
 import storage from "redux-persist/lib/storage";
 import createFilter from "redux-persist-transform-filter";
 import persistReducer from "redux-persist/es/persistReducer";
@@ -28,22 +27,6 @@ const userPersistConfig = {
   transform: [createFilter("user", ["user"])],
 };
 
-const randomDataPersistConfig = {
-  key: "randomData",
-  storage: storage,
-  transform: [
-    createFilter("randomData", [
-      "items",
-      "filteredItems",
-      "count",
-      "page",
-      "itemsPerPage",
-      "filter",
-      "sort",
-    ]),
-  ],
-};
-
 const categoriesPersistConfig = {
   key: "categories",
   storage: storage,
@@ -71,7 +54,6 @@ export default combineReducers({
   user: persistReducer(userPersistConfig, userReducer),
   loading: loadingReducer,
   filters: filtersReducer,
-  randomData: persistReducer(randomDataPersistConfig, randomDataReducer),
   offers: offersReducer,
   categories: persistReducer(categoriesPersistConfig, categoriesReducer),
   locations: persistReducer(locationsPersistConfig, locationsReducer),

src/store/reducers/loading/loadingReducer.js

@@ -1,40 +1,47 @@
 import {
-  APP_LOADING,
-  UPDATE_LOADER,
+  ADD_LOADER,
+  REMOVE_LOADER,
 } from "../../actions/app/appActionConstants";
-import { RESET_LOGIN_STATE } from "../../actions/login/loginActionConstants";
 import createReducer from "../../utils/createReducer";
 
 const initialState = {
-  [APP_LOADING]: true,
+  loaderCount: 0,
 };
 
 export default createReducer(
   {
-    [UPDATE_LOADER]: updateLoader,
-    [APP_LOADING]: updateAppReadyLoader,
-    [RESET_LOGIN_STATE]: setAppNotReady,
+    [ADD_LOADER]: addLoader,
+    [REMOVE_LOADER]: removeLoader,
   },
   initialState
 );
 
-function updateLoader(state, action) {
+function addLoader(state, action) {
+  // console.log("ADD", "state: ", state, "action: ", action);
+  let loaderCount = state.loaderCount;
+  let actionType = action.payload.replace("[FETCH]", "");
+  if (!state[actionType]) {
+    loaderCount++;
+  }
   return {
     ...state,
-    [action.payload.actionType]: action.payload.isLoading,
+    [actionType]: true,
+    loaderCount,
   };
 }
 
-function updateAppReadyLoader(state) {
+function removeLoader(state, action) {
+  // console.log("REMOVE", "state: ", state, "action: ", action);
+  let actionType = action.payload
+    .replace("[SUCCESS]", "")
+    .replace("[ERROR]", "");
+  let loaderCount = state.loaderCount;
+  if (state[actionType] === true) {
+    loaderCount--;
+  }
   return {
     ...state,
-    [APP_LOADING]: false,
-  };
-}
-
-function setAppNotReady(state) {
-  return {
-    ...state,
-    [APP_LOADING]: true,
+    [actionType]: false,
+    loaderCount,
   };
 }

src/store/reducers/randomData/randomDataReducer.js

@@ -1,103 +0,0 @@
-import createReducer from '../../utils/createReducer';
-import {
-	LOAD_DATA,
-	UPDATE_PAGE,
-	UPDATE_ITEMS_PER_PAGE,
-	UPDATE_FILTER,
-	UPDATE_SORT,
-} from '../../actions/randomData/randomDataActionConstants.js';
-import generate from '../../../util/helpers/randomData';
-
-const initialState = {
-	items: [],
-	filteredItems: [],
-	count: 0,
-	page: 0,
-	itemsPerPage: 12,
-	filter: '',
-	sort: '',
-};
-
-export default createReducer(
-	{
-		[LOAD_DATA]: loadRandomData,
-		[UPDATE_PAGE]: updatePage,
-		[UPDATE_ITEMS_PER_PAGE]: updateItemsPerPage,
-		[UPDATE_FILTER]: updateFilter,
-		[UPDATE_SORT]: updateSort,
-	},
-	initialState
-);
-
-function loadRandomData(state, action) {
-	const count = action.payload;
-	const items = generate(count);
-
-	return {
-		...state,
-		items,
-		filteredItems: items,
-		count: items.length,
-	};
-}
-
-function updatePage(state, action) {
-	const page = action.payload;
-
-	return {
-		...state,
-		page,
-	};
-}
-
-function updateItemsPerPage(state, action) {
-	const itemsPerPage = action.payload;
-
-	return {
-		...state,
-		itemsPerPage,
-	};
-}
-
-function updateFilter(state, action) {
-	const filter = action.payload;
-	const filteredItems = filter
-		? state.items.filter((item) => item.name.toLowerCase().includes(filter.toLowerCase())) : state.items;
-
-	return {
-		...state,
-		filter,
-		filteredItems,
-		count: filteredItems.length,
-	};
-}
-
-function updateSort(state, action) {
-	const sort = action.payload;
-	const [field, direction] = sort.split('-');
-
-	const sortDirection = direction === 'asc' ? 1 : -1;
-	const dataItems = state.filteredItems.length
-		? state.filteredItems
-		: state.items;
-
-	const sorted = dataItems.sort((a, b) => {
-		if (a[field] > b[field]) {
-			return sortDirection;
-		}
-		if (b[field] > a[field]) {
-			return sortDirection * -1;
-		}
-        return 0;
-	});
-
-	const filteredItems = state.filteredItems.length
-		? sorted
-		: state.filteredItems;
-
-	return {
-		...state,
-		sort,
-		filteredItems,
-	};
-}

src/store/saga/categoriesSaga.js

@@ -1,18 +1,16 @@
 import { all, call, put, takeLatest } from "@redux-saga/core/effects";
 import { attemptFetchCategories } from "../../request/categoriesRequest";
 import { CATEGORIES_FETCH } from "../actions/categories/categoriesActionConstants";
-import { setCategories } from "../actions/categories/categoriesActions";
+import { fetchCategoriesError, fetchCategoriesSuccess, setCategories } from "../actions/categories/categoriesActions";
 
 function* fetchCategories() {
   try {
     const { data } = yield call(attemptFetchCategories);
-    if (data) {
-      yield put(setCategories(data));
-    }
-    return true;
-  } catch (e) {
+    yield put(setCategories(data));
+    yield put(fetchCategoriesSuccess());
+  } catch(e) {
+    yield put(fetchCategoriesError());
     console.log(e);
-    return false;
   }
 }
 

src/store/saga/chatSaga.js

@@ -14,7 +14,7 @@ import {
   CHAT_ONE_FETCH,
   CHAT_SEND_FETCH,
 } from "../actions/chat/chatActionConstants";
-import { setChats, setOneChat } from "../actions/chat/chatActions";
+import { fetchChatsError, fetchChatsSuccess, fetchHeaderChatsError, fetchHeaderChatsSuccess, fetchOneChatError, fetchOneChatSuccess, sendMessageError, sendMessageSuccess, setChats, setOneChat, startNewChatError, startNewChatSuccess } from "../actions/chat/chatActions";
 import { validateExchange } from "../actions/exchange/exchangeActions";
 import { selectSelectedChat } from "../selectors/chatSelectors";
 import { selectExchange } from "../selectors/exchangeSelector";
@@ -25,7 +25,9 @@ function* fetchChats() {
     const userId = yield select(selectUserId);
     const data = yield call(attemptFetchChats, userId);
     yield put(setChats([...data.data]));
+    yield put(fetchChatsSuccess());
   } catch (e) {
+    yield put(fetchChatsError());
     console.log(e);
   }
 }
@@ -35,15 +37,15 @@ function* fetchHeaderChats() {
     const userId = yield select(selectUserId);
     const data = yield call(attemptFetchHeaderChats, userId);
     yield put(setChats([...data.data]));
+    yield put(fetchHeaderChatsSuccess());
   } catch (e) {
+    yield put(fetchHeaderChatsError());
     console.log(e);
   }
 }
 function* fetchOneChat(payload) {
   try {
-    console.log(payload.payload);
     const chatData = yield call(attemptFetchOneChat, payload.payload);
-    console.log(chatData.data.chat.offerId);
     const offerData = yield call(
       attemptFetchOneOffer,
       chatData.data.chat.offerId
@@ -54,7 +56,9 @@ function* fetchOneChat(payload) {
       interlocutor: chatData.data.interlocutorData,
     };
     yield put(setOneChat(chat));
+    yield put(fetchOneChatSuccess());
   } catch (e) {
+    yield put(fetchOneChatError());
     console.log(e);
   }
 }
@@ -72,30 +76,32 @@ function* sendMessage(payload) {
       yield put(validateExchange(exchange._id));
     }
     yield call(fetchChats);
+    yield put(sendMessageSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
   } catch (e) {
+    yield put(sendMessageError());
     console.log(e);
   }
 }
 function* startNewChat(payload) {
   try {
-    yield call(console.log, payload);
     const newChatData = yield call(
       attemptCreateNewChat,
       payload.payload.offerId
     );
-    yield call(console.log, newChatData);
     const newChatId = newChatData.data.chatId;
     const messageObject = {
       text: payload.payload.message,
     };
     yield call(attemptSendMessage, newChatId, messageObject);
+    yield put(startNewChatSuccess());
     if (payload.payload.handleMessageSendSuccess) {
       yield call(payload.payload.handleMessageSendSuccess, newChatId);
     }
   } catch (e) {
+    yield put(startNewChatError());
     console.log(e);
   }
 }

src/store/saga/counterSaga.js

@@ -1,11 +1,14 @@
-import { all, takeLatest, call } from "@redux-saga/core/effects";
+import { all, takeLatest, call, put } from "@redux-saga/core/effects";
 import { attemptIncreaseCounter } from "../../request/counterRequest";
 import { COUNTER_INCREASE } from "../actions/counter/counterActionConstants";
+import { increaseCounterError, increaseCounterSuccess } from "../actions/counter/counterActions";
 
 function* increaseCounter(payload) {
     try {
         yield call(attemptIncreaseCounter, payload.payload);
+        yield put(increaseCounterSuccess());
     } catch(e) {
+        yield put(increaseCounterError());
         console.log(e);
     }
 }

src/store/saga/exchangeSaga.js

@@ -1,14 +1,16 @@
 import { all, takeLatest, call, put } from "@redux-saga/core/effects";
 import { attemptFetchExchange, attemptValidateExchange } from "../../request/exchangeRequest";
 import { EXCHANGE_FETCH, EXCHANGE_VALIDATE_FETCH } from "../actions/exchange/exchangeActionConstants";
-import { setExchange } from "../actions/exchange/exchangeActions";
+import { fetchExchangeError, fetchExchangeSuccess, setExchange, validateExchangeError, validateExchangeSuccess } from "../actions/exchange/exchangeActions";
 
 function* fetchExchange(payload) {
     try {
         const data = yield call(attemptFetchExchange, payload.payload);
         yield put(setExchange(data.data));
+        yield put(fetchExchangeSuccess());
     }
     catch (e) {
+        yield put(fetchExchangeError());
         console.log(e);
     }
 }
@@ -18,8 +20,10 @@ function* validateExchange(payload) {
         yield call(attemptValidateExchange, payload.payload);
         const data = yield call(attemptFetchExchange, payload.payload);
         yield put(setExchange(data.data));
+        yield put(validateExchangeSuccess());
     }
     catch(e) {
+        yield put(validateExchangeError());
         console.log(e);
     }
 }

src/store/saga/forgotPasswordSaga.js

@@ -1,12 +1,13 @@
-import { all, takeLatest, call } from "@redux-saga/core/effects";
+import { all, takeLatest, call, put } from "@redux-saga/core/effects";
 import { forgotPasswordRequest, resetPasswordRequest } from "../../request/forgotPasswordRequest";
 import { FORGOT_PASSWORD, RESET_PASSWORD } from "../actions/user/userActionConstants";
+import { forgotPasswordError, forgotPasswordSuccess } from "../actions/user/userActions";
 
 function* forgotPassword({payload}) {
     try {
         const data = yield call(forgotPasswordRequest, payload.email);
-        console.log(data);
         if (data) {
+            yield put(forgotPasswordSuccess());
             if (payload.handleResponseSuccess) {
                 yield call(payload.handleResponseSuccess);
             }
@@ -17,6 +18,7 @@ function* forgotPassword({payload}) {
         if (payload.handleResponseError) {
             yield call(payload.handleResponseError);
         }
+        yield put(forgotPasswordError());
     }
 }
 function* resetPassword({payload}) {

src/store/saga/locationsSaga.js

@@ -1,17 +1,19 @@
 import { all, call, put, takeLatest } from "@redux-saga/core/effects";
 import { attemptFetchLocations } from "../../request/locationsRequest";
 import { LOCATIONS_FETCH } from "../actions/locations/locationsActionConstants";
-import { setLocations } from "../actions/locations/locationsActions";
+import {
+  fetchLocationsError,
+  fetchLocationsSuccess,
+  setLocations,
+} from "../actions/locations/locationsActions";
 
 function* fetchLocations() {
   try {
     const { data } = yield call(attemptFetchLocations);
-    console.log(data);
-    if (data) {
-      yield put(setLocations(data));
-    }
+    yield put(setLocations(data));
+    yield put(fetchLocationsSuccess());
   } catch (e) {
-    console.log(e);
+    yield put(fetchLocationsError());
   }
 }
 

src/store/saga/loginSaga.js

@@ -39,7 +39,6 @@ import { clearChat } from "../actions/chat/chatActions";
 
 function* fetchLogin({ payload }) {
   try {
-    console.log('barem ide')
     const { data } = yield call(attemptLogin, payload);
     if (data.token) {
       const token = data.token;
@@ -58,9 +57,9 @@ function* fetchLogin({ payload }) {
       yield call(authScopeSetHelper, JWT_TOKEN, token);
       yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, refresh);
       yield call(addHeaderToken, token);
-      yield put(fetchUserSuccess({JwtToken: accessToken, RefreshToken: refreshToken, userId}));
       const profileData = yield call(attemptFetchProfile, userId);
       if (profileData) yield put(setMineProfile(profileData.data));
+      yield put(fetchUserSuccess({JwtToken: accessToken, RefreshToken: refreshToken, userId}));
       if (payload.handleApiResponseSuccess) {
         yield call(payload.handleApiResponseSuccess);
       }
@@ -106,7 +105,6 @@ function* logout(payload) {
   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
     const user = yield call(jwt.decode, JwtToken);
-    console.log(payload);
     if (user) {
       const requestBody = {token: JwtToken}
       yield call(logoutUserRequest, requestBody);
@@ -115,7 +113,6 @@ function* logout(payload) {
   } catch (error) {
     console.log(error); // eslint-disable-line
   } finally {
-    console.log('ovde');
     yield call(authScopeClearHelper);
     yield call(removeHeaderToken);
     yield put(resetLoginState());

src/store/saga/offersSaga.js

@@ -15,8 +15,23 @@ import {
 } from "../actions/offers/offersActionConstants";
 import {
   setOffers,
-  setOffer,
   setProfileOffers,
+  fetchOneOfferSuccess,
+  addOfferSuccess,
+  fetchMineOffersSuccess,
+  fetchProfileOffersSuccess,
+  removeOfferSuccess,
+  editOfferSuccess,
+  fetchOffersSuccess,
+  fetchOffersError,
+  fetchMoreOffersSuccess,
+  fetchMoreOffersError,
+  addOfferError,
+  fetchOneOfferError,
+  fetchMineOffersError,
+  fetchProfileOffersError,
+  removeOfferError,
+  editOfferError,
 } from "../actions/offers/offersActions";
 import { all, takeLatest, call, put, select } from "@redux-saga/core/effects";
 import {
@@ -57,11 +72,12 @@ function* fetchOffers(payload) {
       attemptFetchOffers,
       "?" + newQueryString.toString()
     );
-    console.log('data::::::::: ', data.data)
     yield put(setTotalOffers(data.data.total));
     yield put(setOffers(data.data.items.regularOffers));
     yield put(setPinnedOffers(data.data.items.pinnedOffers));
+    yield put(fetchOffersSuccess());
   } catch (e) {
+    yield put(fetchOffersError());
     yield call(console.log, e);
   }
 }
@@ -92,35 +108,36 @@ function* fetchMoreOffers(payload) {
     ) {
       yield put(setNoMoreOffersStatus(true));
     }
+    yield put(fetchMoreOffersSuccess());
   } catch (e) {
+    yield put(fetchMoreOffersError());
     console.log(e);
   }
 }
 
 function* createOffer(payload) {
-  console.log(payload);
   try {
-    const data = yield call(attemptAddOffer, payload.payload.values.offerData);
-    console.log(data);
+    yield call(attemptAddOffer, payload.payload.values.offerData);
+    yield put(addOfferSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
   } catch (e) {
+    yield put(addOfferError());
     console.log(e);
   }
 }
 
 function* fetchOneOffer(payload) {
   try {
-    console.log(payload);
     const data = yield call(attemptFetchOneOffer, payload.payload)
-    console.log(data.data);
-    yield put(setOffer(data.data));
+    yield put(fetchOneOfferSuccess(data.data));
   } catch (e) {
     console.log(e.response.status);
     if (e.response.status === 400) {
       yield call(history.push, NOT_FOUND_PAGE);
     }
+    yield put(fetchOneOfferError());
   }
 }
 
@@ -130,7 +147,9 @@ function* fetchMineOffers() {
     const userId = yield select(selectUserId);
     const data = yield call(attemptFetchProfileOffers, userId);
     yield put(setMineOffers(data.data));
+    yield put(fetchMineOffersSuccess());
   } catch (e) {
+    yield put(fetchMineOffersError());
     console.log(e);
   }
 }
@@ -141,38 +160,41 @@ function* fetchProfileOffers(payload) {
     if (!userId || userId?.length === 0) throw new Error("User id is not defined!");
     const data = yield call(attemptFetchProfileOffers, userId);
     yield put(setProfileOffers(data.data));
+    yield put(fetchProfileOffersSuccess());
   } catch (e) {
     console.log(e);
     if (e.response.status === 400) {
       yield call(history.push, NOT_FOUND_PAGE);
     }
+    yield put(fetchProfileOffersError());
   }
 }
 
 function* removeOffer(payload) {
-  console.log(payload);
   try {
     const offerId = payload.payload.offerId;
     yield call(attemptRemoveOffer, offerId);
+    yield put(removeOfferSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
   } catch (e) {
+    yield put(removeOfferError());
     console.log(e);
   }
 }
 
 function* editOffer(payload) {
-  yield console.log(payload);
-
   try {
     const offerId = payload.payload.offerId;
     const editedData = payload.payload.offerData;
     yield call(attemptEditOffer, offerId, editedData);
+    yield put(editOfferSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
   } catch (e) {
+    yield put(editOfferError());
     console.log(e);
   }
 }

src/store/saga/profileSaga.js

@@ -9,6 +9,12 @@ import {
   PROFILE_EDIT,
 } from "../actions/profile/profileActionConstants";
 import {
+  editMineProfileError,
+  editMineProfileSuccess,
+  fetchErrorProfile,
+  fetcHMineProfileError,
+  fetchMineProfileSuccess,
+  fetchProfileSuccess,
   //   editMineProfile,
   setMineProfile,
   setProfile,
@@ -17,11 +23,11 @@ import { selectUserId } from "../selectors/loginSelectors";
 
 function* fetchProfile(payload) {
   try {
-    console.log(payload);
     const data = yield call(attemptFetchProfile, payload.payload);
-    console.log(data.data);
     if (data) yield put(setProfile(data.data));
+    yield put(fetchProfileSuccess());
   } catch (e) {
+    yield put(fetchErrorProfile());
     console.log(e);
   }
 }
@@ -29,22 +35,18 @@ function* fetchProfile(payload) {
 function* fetchMineProfile() {
   try {
     const userId = yield select(selectUserId);
-    if (userId) {
-      const data = yield call(attemptFetchProfile, userId);
-      console.log(data);
-      if (data) yield put(setMineProfile(data.data));
-    }
+    const data = yield call(attemptFetchProfile, userId);
+    if (data) yield put(setMineProfile(data.data));
+    yield put(fetchMineProfileSuccess());
   } catch (e) {
+    yield put(fetcHMineProfileError());
     console.log(e);
   }
 }
 
 function* changeMineProfile(payload) {
   try {
-    yield console.log(payload);
-
     let image;
-
     if (payload.payload.firmLogo.includes("data:image")) {
       image = payload.payload.firmLogo
         .replace("data:image/jpeg;base64,", "")
@@ -71,11 +73,13 @@ function* changeMineProfile(payload) {
 
     const userId = yield select(selectUserId);
     const data = yield call(attemptEditProfile, userId, reqData);
+    yield put(editMineProfileSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
     console.log(data);
   } catch (e) {
+    yield put(editMineProfileError());
     console.log(e);
   }
 }

src/store/saga/queryStringSaga.js

@@ -7,8 +7,6 @@ import { setQueryStringRedux } from "../actions/queryString/queryStringActions";
 
 function* setQueryString(payload) {
   try {
-    // console.log("trenutni queryString: ", payload.payload);
-    // console.log(payload);
     // const currentQS = yield select(selectQueryString);
     // let newQueryString = payload.payload
     // if (currentQS?.length > 0) {
@@ -18,7 +16,7 @@ function* setQueryString(payload) {
     //     payload.payload,
     //   );
     // }
-    const newQueryString = convertQueryStringBackend(payload.payload)
+    const newQueryString = convertQueryStringBackend(payload.payload);
     yield put(setQueryStringRedux(newQueryString));
   } catch (e) {
     console.log(e);

src/store/saga/registerSaga.js

@@ -1,6 +1,11 @@
 import { all, takeLatest, call } from "@redux-saga/core/effects";
+import { putRequest } from "../../request";
 import { attemptRegister } from "../../request/registerRequest";
 import { REGISTER_USER_FETCH } from "../actions/register/registerActionConstants";
+import {
+  fetchRegisterUserError,
+  fetchRegisterUserSuccess,
+} from "../actions/register/registerActions";
 
 function* fetchRegisterUser({ payload }) {
   try {
@@ -28,11 +33,10 @@ function* fetchRegisterUser({ payload }) {
     if (payload.values.website?.length === 0)
       delete requestData.company.contacts.web;
     yield call(attemptRegister, requestData);
-    console.log('jos nije crash')
     if (payload.handleResponseSuccess) {
       yield call(payload.handleResponseSuccess);
     }
-    return true;
+    yield putRequest(fetchRegisterUserSuccess());
   } catch (e) {
     console.log(e)
     let type = "server";
@@ -53,7 +57,7 @@ function* fetchRegisterUser({ payload }) {
     if (payload.handleResponseError) {
       yield call(payload.handleResponseError, error);
     }
-    return false;
+    yield putRequest(fetchRegisterUserError());
   }
 }
 

src/store/saga/reviewSaga.js

@@ -1,35 +1,47 @@
 import { all, takeLatest, call, put } from "@redux-saga/core/effects";
-import { attemptFetchReview, attemptGiveReview } from "../../request/reviewRequest";
-import { REVIEW_GET, REVIEW_GIVE } from "../actions/review/reviewActionConstants";
-import { setReviews } from "../actions/review/reviewActions";
+import {
+  attemptFetchReview,
+  attemptGiveReview,
+} from "../../request/reviewRequest";
+import {
+  REVIEW_GET,
+  REVIEW_GIVE,
+} from "../actions/review/reviewActionConstants";
+import {
+  fetchReviewsError,
+  fetchReviewsSuccess,
+  giveReviewError,
+  giveReviewSuccess,
+  setReviews,
+} from "../actions/review/reviewActions";
 
 function* fetchReviews(payload) {
-    try {
-        yield call(console.log, payload);
-        const data = yield call(attemptFetchReview, payload.payload);
-        yield put(setReviews([...data.data].reverse()));
-        yield call(console.log, data);
-    }
-    catch(e) {
-        console.log(e);
-    }
+  try {
+    const data = yield call(attemptFetchReview, payload.payload);
+    yield put(setReviews([...data.data].reverse()));
+    yield put(fetchReviewsSuccess());
+  } catch (e) {
+    yield put(fetchReviewsError());
+    console.log(e);
+  }
 }
 
 function* giveReview(payload) {
-    try {
-        const data = yield call(attemptGiveReview, payload.payload.review)
-        console.log(data);
-        if (payload.payload.handleApiResponseSuccess) {
-            yield call(payload.payload.handleApiResponseSuccess);
-        }
-    } catch(e) {
-        console.log(e);
+  try {
+    yield call(attemptGiveReview, payload.payload.review);
+    if (payload.payload.handleApiResponseSuccess) {
+      yield call(payload.payload.handleApiResponseSuccess);
     }
+    yield put(giveReviewSuccess());
+  } catch (e) {
+    yield put(giveReviewError());
+    console.log(e);
+  }
 }
 
 export default function* reviewSaga() {
-    yield all([
-        takeLatest(REVIEW_GET, fetchReviews),
-        takeLatest(REVIEW_GIVE, giveReview)
-    ])
-}
+  yield all([
+    takeLatest(REVIEW_GET, fetchReviews),
+    takeLatest(REVIEW_GIVE, giveReview),
+  ]);
+}

src/store/selectors/loadingSelectors.js

@@ -1,14 +1,18 @@
-import { createSelector } from 'reselect';
+import { createSelector } from "reselect";
 
 const loadingSelector = (state) => state.loading;
 
 export const selectIsLoadingByActionType = (loadingActionType) =>
   createSelector(
     loadingSelector,
-    (state) => state[`${loadingActionType}`] || false,
+    (state) => state[`${loadingActionType}`]
   );
 
 export const selectIsLoadingByActionTypes = (actionTypes) =>
   createSelector(loadingSelector, (state) =>
-    actionTypes.some((actionType) => state[`${actionType}`]),
+    actionTypes.some((actionType) => state[`${actionType}`])
   );
+export const selectLoaderCount = createSelector(
+  loadingSelector,
+  (state) => state.loaderCount
+);

src/themes/primaryTheme/primaryThemeColors.js

@@ -29,5 +29,8 @@ export const primaryThemeColors = {
     messageText: "#1D1D1D",
     messageDate: "#939393",
     messageMyDate: "#C4C4C4",
-    
+    filterSkeletonBackground: "#E4E4E4",
+    filterSkeletonBackgroundSecond: "#D4D4D4",
+    filterSkeletonItems: "#D4D4D4",
+    filterSkeletonItemsSecond: "#DDDDDD"
 }