Finished bugfix 530

package-lock.json

         "react-transition-group": "^4.3.0"
       }
     },
+    "react-toastify": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.3.tgz",
+      "integrity": "sha512-0QZJk0SqYBxouRBGCFU3ymvjlwimRRhVH7SzqGRiVrQ001KSoUNbGKx9Yq42aoPv18n45yJzEFG82zqv3HnASg==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",

package.json

     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-select": "^4.3.1",
+    "react-toastify": "^9.0.3",
     "redux": "^4.1.0",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-filter": "0.0.20",

src/App.js

 import Header from "./components/Header/Header";
 import { StyledEngineProvider } from "@mui/material";
 import GlobalStyle from "./components/Styles/globalStyles";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 // const URL = "http://192.168.88.143:3001";
 // const socket = io(URL, {autoConnect: true, transports: ['websocket']});
   //   // });
   //   socket.on('povratna', (data) => {
   //     console.log(data)
- 
+
   // })
 
   //   // socket.open;
         
       </Helmet>
       <StyledEngineProvider injectFirst>
-        {/* <button onClick={handleClick}>Kik</button> */}
         <Header />
         <GlobalStyle />
+        <ToastContainer />
         {/* <div>
           <p>Connected: {"" + isConnected}</p>
           <br />
         </div> */}
         <AppRoutes />
       </StyledEngineProvider>
-      {/* </main> */}
     </Router>
   );
 };

src/AppRoutes.js

       <PrivateRoute path={CHAT_MESSAGE_PAGE} component={ChatMessagesPage} />
       <PrivateRoute path={CHAT_PAGE} component={ChatPage} />
       <PrivateRoute path={MY_OFFERS_PAGE} component={MyOffers} />
-
       <Redirect from="*" to={NOT_FOUND_PAGE} />
     </Switch>
   );

src/assets/styles/_base.scss

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-anchor: none;
-  background-color: #F5F5F5;
 }
 
 * {

src/assets/styles/_functions.scss

 @function pxToRem($target, $context: $base-font-size) {
-  @return calc($target / $context) * 1rem;
+  @return ($target / $context) * 1rem;
 }
 
 @function pxToRemMd($target, $context: $base-font-size-md) {
-  @return calc($target / $context) * 1rem;
+  @return ($target / $context) * 1rem;
 }

src/components/Cards/FilterCard/FilterCard.js

 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);
       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 */}
       <FilterFooter
         closeResponsive={props.closeResponsive}
         responsiveOpen={props.responsiveOpen}
+        filters={filters}
       />
     </FilterCardContainer>
   );
   responsiveOpen: PropTypes.bool,
   closeResponsive: PropTypes.func,
   myOffers: PropTypes.bool,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
 };
 
 FilterCard.defaultProps = {

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

   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;
   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) =>
         : "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

 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();
 (FilterFooter.propTypes = {
   responsiveOpen: PropTypes.bool,
   closeResponsive: PropTypes.func,
+  filters: PropTypes.any,
 }),
   (FilterFooter.defaultProps = {
     responsiveOpen: false,

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

 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();
 
 FilterHeader.propTypes = {
   children: PropTypes.node,
+  filters: PropTypes.any,
 };
 
 export default FilterHeader;

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

+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

+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

+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

+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

+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

+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

+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

+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

+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

+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/ItemDetailsCard/ItemDetailsCard.styled.js

     height: 44px;
   }
 `;
-export const Details = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  ${(props) => props.hasScrollBar && !props.exchange && `height: 300px;`}
-  overflow-y: auto;
-  overflow-x: hidden;
-  ::-webkit-scrollbar {
-    width: 5px;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: #c4c4c4;
-    border-radius: 3px;
-  }
-
-  @media screen and (max-width: 600px) {
-    margin-top: 15px;
-    ${(props) =>
-      !props.hasScrollBar &&
-      props.exchange &&
-      `
-    overflow: hidden;
-    max-height: none;`}
-  }
-`;
 // export const OfferImage = styled.img`
 // `
 

src/components/Cards/OfferCard/OfferCard.js

   messageUser: PropTypes.func,
   makeReview: PropTypes.func,
   dontShowViews: PropTypes.bool,
+  skeleton: PropTypes.bool,
 };
 OfferCard.defaultProps = {
   halfwidth: false,

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

 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

+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

+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/CreateReview/CreateReview.js

     }
   };
   const goToPrevStep = () => {
-    if (currentStep === 2) {
-      setInformations({});
-      setCurrentStep(1);
-    }
-    if (currentStep === 3) {
-      setCurrentStep(2);
-    }
+    setCurrentStep(prevCurrentStep => prevCurrentStep - 1);
   };
   return (
     <CreateReviewContainer currentStep={currentStep}>
         <FirstStepCreateReview
           offer={offer}
           interlocutor={props.interlocutor}
+          informations={informations}
           goToNextStep={goToNextStep}
         />
       )}

src/components/CreateReview/FirstStep/FirstStepCreateReview.js

-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   FirstStepCreateReviewContainer,
 import * as Yup from "yup";
 import useScreenDimensions from "../../../hooks/useScreenDimensions";
 
-// const selectFieldValidation = Yup.string().oneOf(Object.keys(reviewEnum).map(property => reviewEnum[property].mainText));
-
 const FirstStepCreateReview = (props) => {
   const offer = props.offer;
   const interlocutor = props.interlocutor;
     props.goToNextStep(values);
   };
 
+  useEffect(() => {
+    if (props.informations?.exchangeSucceed) {
+      formik.setFieldValue(
+        "exchangeSucceed",
+        props.informations?.exchangeSucceed
+      );
+      formik.setFieldValue(
+        "correctCommunication",
+        props.informations?.correctCommunication
+      );
+      formik.setFieldValue("comment", props.informations?.comment);
+    }
+  }, [props.informations]);
+
   const formik = useFormik({
     initialValues: {
       exchangeSucceed: reviewEnum.YES.mainText,
         leftText={t("reviews.isCorrectCommunication").toUpperCase()}
       />
       <SelectField
-        defaultValue={reviewEnum.YES}
+        defaultValue={formik.values.correctCommunication}
         onChange={(event) =>
-          formik.setFieldValue(
-            "correctCommunication",
-            event.target.value.mainText
-          )
+          formik.setFieldValue("correctCommunication", event.target.value)
         }
       >
         {Object.keys(reviewEnum).map((property) => (
           <SelectOption
             key={reviewEnum[property].value}
-            value={reviewEnum[property]}
+            value={reviewEnum[property].mainText}
           >
             {reviewEnum[property].mainText}
           </SelectOption>
 
       <FieldLabel leftText={t("reviews.hasExchangeSucceed").toUpperCase()} />
       <SelectField
-        defaultValue={reviewEnum.YES}
+        defaultValue={formik.values.exchangeSucceed}
         onChange={(event) =>
-          formik.setFieldValue("exchangeSucceed", event.target.value.mainText)
+          formik.setFieldValue("exchangeSucceed", event.target.value)
         }
       >
         {Object.keys(reviewEnum).map((property) => {
           if (property === "NOT_BAD") return;
           return (
-          <SelectOption
-            key={reviewEnum[property].value}
-            value={reviewEnum[property]}
-          >
-            {reviewEnum[property].mainText}
-          </SelectOption>
-        )})}
+            <SelectOption
+              key={reviewEnum[property].value}
+              value={reviewEnum[property].mainText}
+            >
+              {reviewEnum[property].mainText}
+            </SelectOption>
+          );
+        })}
       </SelectField>
 
       <FieldLabel leftText={t("reviews.comment")} />
   offer: PropTypes.any,
   interlocutor: PropTypes.any,
   goToNextStep: PropTypes.func,
+  informations: PropTypes.shape({
+    exchangeSucceed: PropTypes.string,
+    correctCommunication: PropTypes.string,
+    comment: PropTypes.string,
+  }),
 };
 
 export default FirstStepCreateReview;

src/components/DirectChat/DirectChatHeader/DirectChatHeader.js

       if (exchange.buyer?.givenReview) return true;
     }
     return false;
-  }, [exchange, userId])
+  }, [exchange, userId]);
+
+  useEffect(() => {
+    if (showReviewModal) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [showReviewModal]);
+
   const makeReview = () => {
     setShowReviewModal(true);
   };
   const handleGiveReviewSuccess = () => {
     refetchExchange();
-  }
+  };
   const refetchExchange = () => {
     dispatch(fetchExchange(chat.chat.exchangeId));
-  }
+  };
   return (
     <DirectChatHeaderContainer>
       {showReviewModal && (

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
   DirectChatNewMessageContainer,
 import selectedTheme from "../../../themes";
 import { useDispatch } from "react-redux";
 import {
+  fetchChats,
   sendMessage,
   startNewChat,
 } from "../../../store/actions/chat/chatActions";
 
 const DirectChatNewMessage = (props) => {
   const [typedValue, setTypedValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const location = useLocation();
   const handleApiResponseSuccess = () => {
     props.refreshChat();
   };
-  const handleSend = () => {
+  const handleSend = useCallback(() => {
+    console.log(typedValue);
     if (location.state?.offerId) {
       initiateNewChat(typedValue);
     } else {
       );
     }
     setTypedValue("");
-  };
+  }, [typedValue]);
   const handleMessageSendSuccess = (newChatId) => {
     history.replace(`${newChatId}`);
+    dispatch(fetchChats());
   };
+
+  useEffect(() => {
+    const listener = (event) => {
+      if (event.keyCode === 13) handleSend();
+    };
+    if (isFocused) window.addEventListener("keypress", listener);
+    return () => window.removeEventListener("keypress", listener);
+  }, [typedValue]);
+
   const initiateNewChat = (typedValue) => {
     const offerId = location.state.offerId;
     dispatch(
       <NewMessageField
         placeholder={t("messages.sendPlaceholder")}
         fullWidth
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
         italicPlaceholder
         value={typedValue}
         onChange={(typed) => setTypedValue(typed.target.value)}

src/components/Header/Header.js

 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);
 
   useEffect(() => {
     let shouldShowHeader = true;
-    console.log(props);
     if (
       location.pathname === LOGIN_PAGE ||
       location.pathname === REGISTER_PAGE ||

src/components/ImagePicker/ImagePicker.js

       onClick={!image ? handleChange : () => {}}
       hasImage={props.image}
     >
-      <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
+      <AddFile type="file" ref={fileInputRef} onInput={handleImage} accept=".jpg, .jpeg, .png" />
       {image ? (
         <React.Fragment>
           <ImageUploaded src={image} draggable={false} ref={imageRef} />

src/components/ItemDetails/Header/Header.js

 import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
 import { useTranslation } from "react-i18next";
 
-// const DownArrow = (props) => (
-//   <IconStyled {...props}>
-//     <Down />
-//   </IconStyled>
-// );
-
 const Header = (props) => {
   const history = useHistory();
   const { t } = useTranslation();
     >
       <ButtonContainer>
         <ArrowButton side={"left"}></ArrowButton>
-        {/* <HeaderText>{t("profile.back")}</HeaderText> */}
         <HeaderText>{t("itemDetailsCard.headerTitle")}</HeaderText>
       </ButtonContainer>
     </HeaderContainer>

src/components/MarketPlace/Header/Header.js

   COMMA,
   SPREAD,
 } from "../../../constants/marketplaceHeaderTitle";
+import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
   };
 
   return (
-    <HeaderContainer>
-      {/* Setting appropriate header title if page is market place or my offers */}
-      <Tooltip title={headerString}>
-        {!props.myOffers ? (
-          headerString === "Sve kategorije" &&
-          (sorting.selectedSortOption === sortEnum.INITIAL ||
-            sorting.selectedSortOption === sortEnum.NEW) ? (
-            <React.Fragment>
-              <HeaderLocation initial>{headerString}</HeaderLocation>
-              <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
-            </React.Fragment>
+    <>
+      <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 ? (
+            headerString === "Sve kategorije" &&
+            (sorting.selectedSortOption === sortEnum.INITIAL ||
+              sorting.selectedSortOption === sortEnum.NEW) ? (
+              <React.Fragment>
+                <HeaderLocation initial>{headerString}</HeaderLocation>
+                <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
+              </React.Fragment>
+            ) : (
+              <HeaderLocation>{headerString}</HeaderLocation>
+            )
           ) : (
-            <HeaderLocation>{headerString}</HeaderLocation>
-          )
-        ) : (
-          <MySwapsTitle>
-            <RefreshIcon /> {t("header.myOffers")}
-          </MySwapsTitle>
-        )}
-      </Tooltip>
-      {/* ^^^^^^ */}
+            <MySwapsTitle>
+              <RefreshIcon /> {t("header.myOffers")}
+            </MySwapsTitle>
+          )}
+        </Tooltip>
+        {/* ^^^^^^ */}
 
-      <HeaderOptions>
-        <HeaderButtons>
-          {/* Setting display of offer cards to full width */}
-          <HeaderButton
-            iconColor={
-              props.isGrid
-                ? selectedTheme.iconStrokeColor
-                : selectedTheme.primaryPurple
-            }
-            onClick={() => props.setIsGrid(false)}
-          >
-            <GridLine />
-          </HeaderButton>
-          {/* ^^^^^^ */}
+        <HeaderOptions>
+          <HeaderButtons>
+            {/* Setting display of offer cards to full width */}
+            <HeaderButton
+              iconColor={
+                props.isGrid
+                  ? selectedTheme.iconStrokeColor
+                  : selectedTheme.primaryPurple
+              }
+              onClick={() => props.setIsGrid(false)}
+            >
+              <GridLine />
+            </HeaderButton>
+            {/* ^^^^^^ */}
 
-          {/* Setting display of offer cards to half width (Grid) */}
-          <HeaderButton
-            iconColor={
-              props.isGrid
-                ? selectedTheme.primaryPurple
-                : selectedTheme.iconStrokeColor
-            }
-            onClick={() => props.setIsGrid(true)}
+            {/* Setting display of offer cards to half width (Grid) */}
+            <HeaderButton
+              iconColor={
+                props.isGrid
+                  ? selectedTheme.primaryPurple
+                  : selectedTheme.iconStrokeColor
+              }
+              onClick={() => props.setIsGrid(true)}
+            >
+              <GridSquare />
+            </HeaderButton>
+            {/* ^^^^^^ */}
+          </HeaderButtons>
+
+          {/* Select option to choose sorting */}
+          <HeaderSelect
+            value={sortOption?.value ? sortOption.value : "default"}
+            IconComponent={DownArrow}
+            onChange={handleChangeSelect}
           >
-            <GridSquare />
-          </HeaderButton>
+            <SelectOption style={{ display: "none" }} value="default">
+              Sortiraj po
+            </SelectOption>
+            {Object.keys(sortEnum).map((property) => {
+              if (sortEnum[property].value === 0) return;
+              return (
+                <SelectOption
+                  value={sortEnum[property].value}
+                  key={sortEnum[property].value}
+                >
+                  {sortEnum[property].mainText}
+                </SelectOption>
+              );
+            })}
+          </HeaderSelect>
           {/* ^^^^^^ */}
-        </HeaderButtons>
-
-        {/* Select option to choose sorting */}
-        <HeaderSelect
-          value={sortOption?.value ? sortOption.value : sortEnum.INITIAL.value}
-          IconComponent={DownArrow}
-          onChange={handleChangeSelect}
-        >
-          {Object.keys(sortEnum).map((property) => {
-            return (
-              <SelectOption
-                value={sortEnum[property].value}
-                key={sortEnum[property].value}
-              >
-                {sortEnum[property].mainText}
-              </SelectOption>
-            );
-          })}
-        </HeaderSelect>
-        {/* ^^^^^^ */}
-      </HeaderOptions>
-    </HeaderContainer>
+        </HeaderOptions>
+      </HeaderContainer>
+    </>
   );
 };
 
   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

 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import Option from "../../Select/Option/Option";
 import Select from "../../Select/Select";
-import {ReactComponent as Refresh} from "../../../assets/images/svg/refresh.svg"
+import { ReactComponent as Refresh } from "../../../assets/images/svg/refresh.svg";
 
 export const HeaderContainer = styled(Box)`
   margin-top: 20px;
-  display: flex;
+  display: ${props => props.skeleton ? "none" : "flex"};
   justify-content: space-between;
   align-items: center;
 `;
   line-height: 22px;
   font-size: 16px;
   flex: 2;
-  max-width: ${props => props.initial ? "fit-content" : "50%"};
+  max-width: ${(props) => (props.initial ? "fit-content" : "50%")};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &:after {
-    content: ${props => props.initial ? `":"` : `""`};
+    content: ${(props) => (props.initial ? `":"` : `""`)};
     @media (max-width: 600px) {
-        content: "";
+      content: "";
     }
   }
   @media (max-width: 600px) {
   margin-right: 40px;
 `;
 export const HeaderAltLocation = styled(Typography)`
-    font-family: "Open Sans";
-    font-size: 16px;
-    color: ${selectedTheme.primaryText};
-    margin-left: 5px;
-    @media (max-width: 600px) {
-        display: none;
-    }
-`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: ${selectedTheme.primaryText};
+  margin-left: 5px;
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
 export const RefreshIcon = styled(Refresh)`
   width: 18px;
   height: 18px;
   & path {
     stroke: ${selectedTheme.primaryDarkTextThird};
   }
-`
+`;
 export const MySwapsTitle = styled(Typography)`
   font-family: "Open Sans";
   font-size: 16px;
   color: ${selectedTheme.primaryDarkTextThird};
   position: relative;
   left: 9px;
-`
+`;

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

+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

+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

 
   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>
   );
 };
 MarketPlace.propTypes = {
   children: PropTypes.node,
   myOffers: PropTypes.bool,
+  animationStage: PropTypes.number,
+  skeleton: PropTypes.bool,
 };
 
 export default MarketPlace;

src/components/MarketPlace/Offers/Offers.js

 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}
+            />
+          ))}
+        </>
       )}
     </>
   );
   children: PropTypes.node,
   isGrid: PropTypes.bool,
   myOffers: PropTypes.bool,
+  skeleton: PropTypes.bool,
+  animationStage: PropTypes.number,
 };
 
 Offers.defaultProps = {

src/components/TextFields/TextField/TextField.js

         label={props.showAnimation ? props.placeholder : ""}
         onFocus={props.onFocus}
         onBlur={props.onBlur}
-        
-        
-        italicplaceholder={(props.italicPlaceholder && isFieldEmpty) ? "true" : "false"}
+        italicplaceholder={
+          props.italicPlaceholder && isFieldEmpty ? "true" : "false"
+        }
         focused={props.focused}
       >
         {props.children}

src/hooks/useFilters.js

-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";
   setFilteredCategory,
   setFilteredLocations,
   setFilteredSubcategory,
-  setIsAppliedStatus,
+  // setIsAppliedStatus,
 } from "../store/actions/filters/filtersActions";
 import { fetchLocations } from "../store/actions/locations/locationsActions";
 import {
   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(
   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);
         setSelectedLocations([]);
       }
     }
-    dispatch(setIsAppliedStatus(true));
+    // dispatch(setIsAppliedStatus(true));
   }, [queryStringHook.queryString, categories, locations]);
 
   // Apply everything
   // Setters
   const setSelectedCategory = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedCategory)) {
       dispatch(setFilteredCategory(payload));
   };
   const setSelectedSubcategory = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedSubcategory)) {
       dispatch(setFilteredSubcategory(payload));
   };
   const setSelectedLocations = (payload) => {
     if (isApplied !== false) {
-      dispatch(setIsAppliedStatus(false));
+      // dispatch(setIsAppliedStatus(false));
     }
     if (JSON.stringify(payload) !== JSON.stringify(selectedLocations)) {
       dispatch(setFilteredLocations(payload));

src/i18n/resources/rs.js

     PIBnoOfCharacters: "PIB mora imati 9 karaktera!",
     welcome: "Dobro došli na trampu, želimo vam uspešno trampovanje!",
     imageError: "Slika je obavezna!",
+    serverError: "Greška sa serverom!",
   },
   forgotPassword: {
     title: "Povrati lozinku",

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

   margin-top: 34px;
   border-top-right-radius: 4px;
   width: 100%;
-  /* @media (max-width: 800px) {
-    position: relative;
-    bottom: -500px;
-  } */
 `;
 export const Content = styled(Grid)`
 `;

src/pages/HomePage/HomePageMUI.js

-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/pages/RegisterPages/Register/Register.js

 import ThirdPartOfRegistration from "./ThirdPart/ThirdPartOfRegistration";
 import { useDispatch } from "react-redux";
 import { fetchRegisterUser } from "../../../store/actions/register/registerActions";
+import { makeErrorToastMessage } from "../../../store/utils/makeToastMessage";
 
 const Register = () => {
   const { t } = useTranslation();
       setCurrentStep(1);
       setMailError(mail);
       if (
-        error.error.response.data.toString() ===
+        error?.error?.response?.data?.toString() ===
         "User with email already exists"
       ) {
         setMailErrorMessage(t("register.emailTaken"));
       } else {
         setMailErrorMessage(t("register.emailFormat"));
       }
-    } else {
+    } else if (error?.error?.response?.data?.toString() === "Company with PIB already exists") {
       setInformations({ mail, password, image });
       setCurrentStep(2);
       setPIBError(PIB.toString());
       setPIBErrorMessage(t("register.PIBTaken"));
+    } else {
+      makeErrorToastMessage(t("register.serverError"))
     }
   };
 

src/store/actions/app/appActionConstants.js

 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

-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

-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

-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
 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

-import { createFetchType } from "../actionHelpers";
+import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
 
 const CHAT_SCOPE = "CHAT_SCOPE";
 const CHAT_HEADER_SCOPE = "CHAT_HEADER_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

-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,
 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

-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

-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

-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

-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,
 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

 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

-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

-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,
 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

   createLoadingType,
   createSuccessType,
   createSubmitType,
+  createUpdateType,
 } from '../actionHelpers';
 
 
 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

   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

   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,
 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,
   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

-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

-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

 import {
+  createClearType,
   createErrorType,
   createFetchType,
+  createSetType,
   createSuccessType,
-  createUpdateType,
 } from "../actionHelpers";
 
 const PROFILE_SCOPE = "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

 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

-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

-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

-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

-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

-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

-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

-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

+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

 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/internalServerErrorMiddleware.js

-import { ERROR_PAGE } from "../../constants/pages";
 import { attachPostRequestListener } from "../../request";
-import history from "../utils/history";
 
 //Interceptor unique name
 export const serverErrorMiddlewareInterceptorName =
     if (!error.response) {
       return Promise.reject(error);
     }
-    if (error.response.status === 5000) {
-      return history.push(ERROR_PAGE);
+    if (error.response.status === 500) {
+      return "aaa";
     }
     return Promise.reject(error);
   }, serverErrorMiddlewareInterceptorName);

src/store/middleware/loadingMiddleware.js

   UPDATE,
   SUBMIT,
 } from "../actions/actionHelpers";
+import { addLoader, removeLoader } from "../actions/app/appActions";
 
 const promiseTypes = [FETCH, UPDATE, DELETE, SUBMIT];
 
       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

 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";
   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,
   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

 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

-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

 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() {
-  const { data } = yield call(attemptFetchCategories);
-  yield put(setCategories(data));
+  try {
+    const { data } = yield call(attemptFetchCategories);
+    yield put(setCategories(data));
+    yield put(fetchCategoriesSuccess());
+  } catch(e) {
+    yield put(fetchCategoriesError());
+    console.log(e);
+  }
 }
 
 export default function* categoriesSaga() {

src/store/saga/chatSaga.js

   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";
     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);
   }
 }
     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
       interlocutor: chatData.data.interlocutorData,
     };
     yield put(setOneChat(chat));
+    yield put(fetchOneChatSuccess());
   } catch (e) {
+    yield put(fetchOneChatError());
     console.log(e);
   }
 }
       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

-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);
-    } catch(e) {
-        console.log(e);
-    }
+  try {
+    yield call(attemptIncreaseCounter, payload.payload);
+    yield put(increaseCounterSuccess());
+  } catch (e) {
+    yield put(increaseCounterError());
+    console.log(e);
+  }
 }
 
 export default function* counterSaga() {
-    yield all([
-        takeLatest(COUNTER_INCREASE, increaseCounter)
-    ])
+  yield all([takeLatest(COUNTER_INCREASE, increaseCounter)]);
 }

src/store/saga/exchangeSaga.js

 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);
     }
 }
         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

-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);
             }
         if (payload.handleResponseError) {
             yield call(payload.handleResponseError);
         }
+        yield put(forgotPasswordError());
     }
 }
 function* resetPassword({payload}) {

src/store/saga/locationsSaga.js

 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() {
-    const {data} = yield call(attemptFetchLocations)
+  try {
+    const { data } = yield call(attemptFetchLocations);
     yield put(setLocations(data));
+    yield put(fetchLocationsSuccess());
+  } catch (e) {
+    yield put(fetchLocationsError());
+  }
 }
 
 export default function* locationsSaga() {
-    yield all([
-        takeLatest(LOCATIONS_FETCH, fetchLocations)
-    ])
-}
+  yield all([takeLatest(LOCATIONS_FETCH, fetchLocations)]);
+}

src/store/saga/loginSaga.js

       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);
       }
       }
       console.log(e.response.status);
       let errorMessage = yield call(rejectErrorCodeHelper, e.response.status);
-      if (e.response.status === 400) {
+      if (e.response.status === 400 || e.response.status === 404) {
         errorMessage = i18next.t("login.wrongCredentials", {
           lng: "rs"
         });
   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);
   } catch (error) {
     console.log(error); // eslint-disable-line
   } finally {
-    console.log('ovde');
     yield call(authScopeClearHelper);
     yield call(removeHeaderToken);
     yield put(resetLoginState());
     yield put(setUserJwtToken({token: payload, exp: newTokenDecoded.exp}));
     yield call(addHeaderToken, payload);
     yield call(authScopeSetHelper, JWT_TOKEN, payload);
+    return true;
   }
   catch(e){
     console.log(e);
+    return false;
   }
 }
 

src/store/saga/offersSaga.js

 } 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 {
     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);
   }
 }
     ) {
       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());
   }
 }
 
     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);
   }
 }
     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

   PROFILE_EDIT,
 } from "../actions/profile/profileActionConstants";
 import {
+  editMineProfileError,
+  editMineProfileSuccess,
+  fetchErrorProfile,
+  fetcHMineProfileError,
+  fetchMineProfileSuccess,
+  fetchProfileSuccess,
   //   editMineProfile,
   setMineProfile,
   setProfile,
 
 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);
   }
 }
   try {
     const userId = yield select(selectUserId);
     const data = yield call(attemptFetchProfile, userId);
-    console.log(data);
     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,", "")
 
     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

 
 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) {
     //     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

 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 {
     if (payload.handleResponseSuccess) {
       yield call(payload.handleResponseSuccess);
     }
+    yield putRequest(fetchRegisterUserSuccess());
   } catch (e) {
-    let type;
+    console.log(e)
+    let type = "server";
     if (
-      e.response?.data?.toString() === "User with email already exists" ||
-      e.response?.data?.toString() === '"email" must be a valid email'
+      e?.response?.data?.toString() === "User with email already exists" ||
+      e?.response?.data?.toString() === '"email" must be a valid email'
     ) {
       type = "mail";
     } else if (
-      e.response?.data?.toString() === "Company with PIB already exists"
+      e?.response?.data?.toString() === "Company with PIB already exists"
     ) {
       type = "PIB";
     }
     if (payload.handleResponseError) {
       yield call(payload.handleResponseError, error);
     }
+    yield putRequest(fetchRegisterUserError());
   }
 }
 

src/store/saga/reviewSaga.js

 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

-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/store/utils/makeToastMessage.js

+import { toast } from 'react-toastify';
+
+const defaultOptions = {
+    position: "top-center",
+    autoClose: 2000,
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: false,
+    draggable: true,
+  }
+
+export const makeToastMessage = (text, options = defaultOptions) => toast(text, options);
+export const makeErrorToastMessage = (text, options = defaultOptions) => toast.error(text, options);

src/themes/primaryTheme/primaryThemeColors.js

     messageText: "#1D1D1D",
     messageDate: "#939393",
     messageMyDate: "#C4C4C4",
-    
+    filterSkeletonBackground: "#E4E4E4",
+    filterSkeletonBackgroundSecond: "#D4D4D4",
+    filterSkeletonItems: "#D4D4D4",
+    filterSkeletonItemsSecond: "#DDDDDD"
 }