Offers Not Found Page

src/assets/images/svg/logo-broken.svg

@@ -0,0 +1,4 @@
+<svg width="171" height="170" viewBox="0 0 171 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="69.7051" cy="38.546" r="21.3907" transform="rotate(45 69.7051 38.546)" fill="#FEB005"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.513 25.5128C98.0459 20.0454 89.1816 20.0454 83.7143 25.5128L55.0688 54.1582C55.0691 54.1584 55.0694 54.1587 55.0696 54.159C63.4232 62.5126 63.4232 76.0564 55.0696 84.41C46.7589 92.7208 33.3109 92.7634 24.9475 84.5379C21.009 90.009 21.5004 97.6828 26.4218 102.604L83.7142 159.897C89.1816 165.364 98.0459 165.364 103.513 159.897L160.806 102.604C166.273 97.1369 166.273 88.2726 160.806 82.8052L103.513 25.5128Z" fill="#FEB005"/>
+</svg>

src/components/MarketPlace/Offers/Offers.js

@@ -13,6 +13,7 @@ import Paging from "../../Paging/Paging";
 import { HOME_PAGE } from "../../../constants/pages";
 import { useHistory } from "react-router-dom";
 import { useQueryString } from "../../../hooks/useQueryString";
+import OffersNotFound from "./OffersNotFound";
 
 const Offers = (props) => {
   const [page, setPage] = useState(1);
@@ -32,11 +33,11 @@ const Offers = (props) => {
 
   useEffect(() => {
     if (history?.location?.state?.logo) {
-      dispatch(fetchOffers({queryString: ""}));
+      dispatch(fetchOffers({ queryString: "" }));
       setPage(1);
       history.location.state = undefined;
     }
-  }, [history.location.state])
+  }, [history.location.state]);
 
   useEffect(() => {
     if (queryStringHook.loadedFromURL) {
@@ -80,28 +81,42 @@ const Offers = (props) => {
   };
 
   return (
-    <OffersContainer ref={offersRef}>
-      <>
-        {pinnedOffers != undefined &&
-          pinnedOffers.map((item) => {
-            return (
-              <OfferCard key={item._id} offer={item} halfwidth={props.isGrid} />
-            );
-          })}
-      </>
-      {offers != undefined &&
-        offers.map((item) => {
-          return (
-            <OfferCard key={item._id} offer={item} halfwidth={props.isGrid} />
-          );
-        })}
-      <Paging
-        totalElements={total}
-        elementsPerPage={10}
-        current={page}
-        changePage={handleDifferentPage}
-      />
-    </OffersContainer>
+    <>
+      {offers.length === 0 ? (
+        <OffersNotFound />
+      ) : (
+        <OffersContainer ref={offersRef}>
+          <>
+            {pinnedOffers != undefined &&
+              pinnedOffers.map((item) => {
+                return (
+                  <OfferCard
+                    key={item._id}
+                    offer={item}
+                    halfwidth={props.isGrid}
+                  />
+                );
+              })}
+          </>
+          {offers != undefined &&
+            offers.map((item) => {
+              return (
+                <OfferCard
+                  key={item._id}
+                  offer={item}
+                  halfwidth={props.isGrid}
+                />
+              );
+            })}
+          <Paging
+            totalElements={total}
+            elementsPerPage={10}
+            current={page}
+            changePage={handleDifferentPage}
+          />
+        </OffersContainer>
+      )}
+    </>
   );
 };
 

src/components/MarketPlace/Offers/OffersNotFound.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-broken.svg";
+import {
+  Button,
+  OffersNotFoundContainer,
+  OffersNotFoundDescription,
+  OffersNotFoundHeading,
+} from "./OffersNotFound.styled";
+import selectedTheme from "../../../themes";
+import { Trans, useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { HOME_PAGE } from "../../../constants/pages";
+import { useDispatch } from "react-redux";
+import { fetchOffers } from "../../../store/actions/offers/offersActions";
+
+const OffersNotFound = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const showAllOffersHandler = () => {
+    dispatch(fetchOffers({ queryString: "" }));
+    history.replace({
+      pathname: HOME_PAGE,
+      state: {
+        from: history.location.pathname,
+      },
+    });
+  };
+
+  return (
+    <OffersNotFoundContainer>
+      <LogoBroken />
+      <OffersNotFoundHeading>
+        {t("offersNotFound.notFound")}
+      </OffersNotFoundHeading>
+      <OffersNotFoundDescription>
+        <Trans i18nKey="offersNotFound.errorMessage" />
+      </OffersNotFoundDescription>
+      <Button
+        variant="contained"
+        width="190px"
+        height="49px"
+        buttoncolor={selectedTheme.primaryYellow}
+        textcolor="black"
+        onClick={showAllOffersHandler}
+      >
+        {t("offersNotFound.showAllOffers")}
+      </Button>
+    </OffersNotFoundContainer>
+  );
+};
+
+export default OffersNotFound;

src/components/MarketPlace/Offers/OffersNotFound.styled.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import selectedTheme from "../../../themes";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+
+export const OffersNotFoundContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 70vh;
+`;
+
+export const OffersNotFoundHeading = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 72px;
+  font-weight: 700;
+  color: ${selectedTheme.primaryPurple};
+`;
+
+export const OffersNotFoundDescription = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: #818181;
+  margin: 9px 0 46px 0;
+  text-align: center;
+`;
+
+export const Button = styled(PrimaryButton)`
+  font-weight: 600;
+  letter-spacing: 1.5px;
+`;

src/i18n/resources/rs.js

@@ -198,4 +198,10 @@ export default {
       "Stranica koju tražite ne postoji <br /> ili je u međuvremenu obirsana.",
     showAllOffers: "Pogledaj sve objave",
   },
+  offersNotFound: {
+    notFound: "Objave nisu pronađene",
+    errorMessage:
+      "Nažalost ne postoji ni jedna objava <br /> za unete kriterijume.",
+    showAllOffers: "Pogledaj sve objave",
+  },
 };