Connected partly with BE

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -14,18 +14,25 @@ import {
   OfferDescriptionTitle,
   Details,
   OfferDetails,
+  OfferImage,
 } from "./ItemDetailsCard.styled";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
 import { ReactComponent as Subcategory } from "../../../assets/images/svg/subcategory.svg";
 import { ReactComponent as Quantity } from "../../../assets/images/svg/quantity.svg";
 import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
 import selectedTheme from "../../../themes";
-import { Offer as offerMock } from "./MockupOfferDetails";
 import HorizontalScroller from "../../Scroller/HorizontalScroller";
-import {ReactComponent as DummyImage1 } from "../../../assets/images/svg/dummyImages/offer-1.svg"
+// import {ReactComponent as DummyImage1 } from "../../../assets/images/svg/dummyImages/offer-1.svg"
 
 
 const ItemDetailsCard = (props) => {
+  const offer = props.offer;
+  const dateCreated = new Date(offer?.offer?._created);
+  const dayCreated = dateCreated.getDate() < 10 ? "0" + dateCreated.getDate() : dateCreated.getDate();
+  const monthCreated = dateCreated.getMonth() < 10 ? "0" + (dateCreated.getMonth() + 1) : (dateCreated.getMonth() + 1);
+  const yearCreated = dateCreated.getFullYear();
+  console.log(offer);
+  // console.log(new Date(props.offer.offer._created))
 
   useEffect(() => {
     console.log(props.offer);
@@ -38,45 +45,39 @@ const ItemDetailsCard = (props) => {
           <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
               <Category width={"14px"} />
             </InfoIcon>
-          <InfoText>{offerMock.category}</InfoText>
+          <InfoText>{offer?.offer?.category?.name}</InfoText>
           </InfoGroup>
           <InfoGroup>
           <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
               <Subcategory width={"14px"} />
             </InfoIcon>
-          <InfoText>{offerMock.subcategory}</InfoText>
+          <InfoText>{offer?.offer?.subcategory}</InfoText>
           </InfoGroup>
           <InfoGroup>
           <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
           <Quantity width={"22px"} height={"16px"} />
             </InfoIcon>
-          <InfoText>{props.offer.condition}</InfoText>
+          <InfoText>{offer?.offer?.condition}</InfoText>
           </InfoGroup>
           <InfoGroup>
           <InfoIcon color={"black"} component="span" size="12px">
              <Eye width={"18px"} height={"20px"} />
             </InfoIcon>
-          <InfoText>{offerMock.numberOfViews}</InfoText>
+          <InfoText>{offer?.offer?.views?.viewers?.length}</InfoText>
           </InfoGroup>
         </Info>
-        <PostDate>Objavljeno: 04.04.2022</PostDate>
+        <PostDate>Objavljeno: {dayCreated}.{monthCreated}.{yearCreated}</PostDate>
       </OfferInfo>
       <Details>
         <OfferTitle>{props.offer.name}</OfferTitle>
         <HorizontalScroller>
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
-          <DummyImage1 />
+          {offer?.offer?.images?.map(item => (
+            <OfferImage src={item} key={item} />
+          ))}
         </HorizontalScroller>
         <OfferDetails>
           <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
-          <OfferDescriptionText>{offerMock.description}</OfferDescriptionText>
+          <OfferDescriptionText>{offer?.offer?.description}</OfferDescriptionText>
         </OfferDetails>
       </Details>
       {!props.halfwidth ? (
@@ -121,19 +122,19 @@ ItemDetailsCard.propTypes = {
   numberOfViews: PropTypes.number,
   halfwidth: PropTypes.bool,
   sponsored: PropTypes.bool,
-
-  offer: PropTypes.shape({
-    images: PropTypes.any,
-    name:PropTypes.string,
-    description:PropTypes.string,
-    condition:PropTypes.string,
-    category:PropTypes.shape({
-      name:PropTypes.string
-    }),
-    location:PropTypes.shape({
-      city:PropTypes.string
-    })
-  })
+  offer: PropTypes.any,
+  // offer: PropTypes.shape({
+  //   images: PropTypes.any,
+  //   name:PropTypes.string,
+  //   description:PropTypes.string,
+  //   condition:PropTypes.string,
+  //   category:PropTypes.shape({
+  //     name:PropTypes.string
+  //   }),
+  //   location:PropTypes.shape({
+  //     city:PropTypes.string
+  //   })
+  // })
 };
 ItemDetailsCard.defaultProps = {
   halfwidth: false,

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -19,7 +19,11 @@ export const ItemDetailsCardContainer = styled(Container)`
   max-width: 2000px;
   position: relative;
 `;
-export const OfferImage = styled(Box)``;
+export const OfferImage = styled.img`
+  width: 144px;
+  height: 144px;
+  border-radius: 4px;
+`;
 export const OfferInfo = styled(Box)`
   display: flex;
   flex: 2;
@@ -162,3 +166,5 @@ export const Details = styled(Box)`
   flex-direction:column;
   gap:12px;
 `;
+// export const OfferImage = styled.img`
+// `

src/components/Cards/OfferCard/OfferCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import {
   CheckButton,
@@ -32,11 +32,6 @@ import { useHistory } from "react-router-dom";
 const OfferCard = (props) => {
   const history = useHistory();
 
-
-  useEffect(() => {
-    console.log(props.offer._id);
-  }, []);
-
   const routeToItem = (itemId) => {
     history.push(`/proizvodi/${itemId}`)
   }

src/components/ItemDetails/Header/Header.js

@@ -16,7 +16,7 @@ const Header = () => {
   const history = useHistory();
 
   const handleBackButton = () => {
-    history.push('/home');
+    history.goBack()
   };
 
  

src/components/ItemDetails/ItemDetails.js

@@ -5,12 +5,12 @@ import { ItemDetailsContainer } from './ItemDetails.styled';
 import ItemDetailsCard from "../Cards/ItemDetailsCard/ItemDetailsCard";
 import ItemDetailsHeaderCard from "./ItemDetailsHeaderCard/ItemDetailsHeaderCard";
 import { selectOffer } from '../../store/selectors/offersSelectors';
+// import { useHistory } from 'react-router-dom';
 
 
 
 const ItemDetails = () => {
     const offer = useSelector(selectOffer);
-
     return (
         <ItemDetailsContainer>
             <Header/>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -11,58 +11,86 @@ import {
   HeaderTop,
   HeaderDetails,
   BottomDetails,
-  StatusText
+  StatusText,
 } from "./ItemDetailsHeaderCard.styled";
 import { ItemDetailsHeaderContainer } from "./ItemDetailsHeaderCard.styled";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
-//import { ReactComponent as Quantity } from "../../../assets/images/svg/quantity.svg";
-//import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
-import { ReactComponent as PIB} from "../../../assets/images/svg/pib.svg";
+import { ReactComponent as PIB } from "../../../assets/images/svg/pib.svg";
 import { ReactComponent as MessageColor } from "../../../assets/images/svg/mailColor.svg";
 import selectedTheme from "../../../themes";
-import { Author as author } from "../MockupdataDetails";
 
 const ItemDetailsHeaderCard = (props) => {
+  console.log("header offer: ", props.offer);
+  const offer = props.offer;
+  if (!props.offer) {
+    return (
+      <div>
+        Loading...
+      </div>
+    )
+  }
+  let percentOfSucceededExchanges;
+  if (offer?.companyData?.statistics?.exchanges?.succeeded === 0) {
+    percentOfSucceededExchanges = 0;
+  } else {
+    percentOfSucceededExchanges = Math.ceil(
+      (offer?.companyData?.statistics?.exchanges?.total /
+        offer?.companyData?.statistics?.exchanges?.succeeded) *
+        100
+    );
+  }
   return (
-    <ItemDetailsHeaderContainer sponsored={props.sponsored.toString()} halfwidth={props.halfwidth ? 1 : 0}>
+    <ItemDetailsHeaderContainer
+      sponsored={props.sponsored.toString()}
+      halfwidth={props.halfwidth ? 1 : 0}
+    >
       <HeaderTop>
-      <OfferImage>{author.image}</OfferImage>
+        <OfferImage src={offer?.companyData?.image}/>
         <OfferDetails>
-         <OfferTitle>{author.title}</OfferTitle>
-         <DetailContainer>
-           <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+          <OfferTitle>{offer?.companyData?.company?.name}</OfferTitle>
+          <DetailContainer>
+            <DetailIcon
+              color={selectedTheme.iconStrokeColor}
+              component="span"
+              size="22px"
+            >
               <PIB width={"22px"} />
             </DetailIcon>
-          <DetailText>PIB - {author.pib}</DetailText>
-         </DetailContainer>
-         <DetailContainer>
-            <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+            <DetailText>PIB - {offer?.companyData?.company?.PIB}</DetailText>
+          </DetailContainer>
+          <DetailContainer>
+            <DetailIcon
+              color={selectedTheme.iconStrokeColor}
+              component="span"
+              size="22px"
+            >
               <Category width={"22px"} />
             </DetailIcon>
-          <DetailText>{author.location}</DetailText>
-         </DetailContainer>
-        </OfferDetails>       
+            <DetailText>
+              {offer?.companyData?.company?.contacts?.location}
+            </DetailText>
+          </DetailContainer>
+        </OfferDetails>
         <MessageIcon>
-        <MessageColor />
+          <MessageColor />
         </MessageIcon>
       </HeaderTop>
       <HeaderDetails>
-      <BottomDetails>
+        <BottomDetails>
           <StatusText>
-            <b>{author.numberOfOffers}</b> objava
+            <b>{offer?.companyData?.statistics?.publishes?.count}</b> objava
           </StatusText>
           <StatusText>
-            <b>{author.numberOfViews}</b> ukupnih pregleda
+            <b>{offer?.companyData?.statistics?.views?.count}</b> ukupnih pregleda
           </StatusText>
           <StatusText>
-            <b>{author.successSwapsProcent}</b> uspesnih trampi
+            <b>{percentOfSucceededExchanges}</b> % uspesnih trampi
           </StatusText>
           <StatusText>
-            <b>{author.goodCommunicationProcent}</b> korektna komunikacija
+            <b>{percentOfSucceededExchanges}</b> % korektna komunikacija
           </StatusText>
         </BottomDetails>
       </HeaderDetails>
- 
     </ItemDetailsHeaderContainer>
   );
 };
@@ -81,18 +109,18 @@ ItemDetailsHeaderCard.propTypes = {
   numberOfViews: PropTypes.number,
   halfwidth: PropTypes.bool,
   sponsored: PropTypes.bool,
-
-  offer: PropTypes.shape({
-    images: PropTypes.any,
-    name:PropTypes.string,
-    description:PropTypes.string,
-    category:PropTypes.shape({
-      name:PropTypes.string
-    }),
-    location:PropTypes.shape({
-      city:PropTypes.string
-    })
-  })
+  offer: PropTypes.any,
+  // offer: PropTypes.shape({
+  //   images: PropTypes.any,
+  //   name:PropTypes.string,
+  //   description:PropTypes.string,
+  //   category:PropTypes.shape({
+  //     name:PropTypes.string
+  //   }),
+  //   location:PropTypes.shape({
+  //     city:PropTypes.string
+  //   })
+  // })
 };
 ItemDetailsHeaderCard.defaultProps = {
   halfwidth: false,

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

@@ -46,8 +46,10 @@ export const BottomDetails = styled(Box)`
   grid-row-gap: 12px; 
   padding: 18px;
 `;
-export const OfferImage = styled(Box)`
+export const OfferImage = styled.img`
     border-radius: 50%;
+    width: 144px;
+    height: 144px;
 `;
 export const OfferInfo = styled(Box)`
   display: flex;

src/components/MarketPlace/Header/Header.js

@@ -71,7 +71,7 @@ const Header = (props) => {
     for (const sortOption in sortEnum) {
       if (sortEnum[sortOption].value === event.target.value) {
         chosenOption = sortEnum[sortOption];
-        sorting.setSelectedSortOption(chosenOption);
+        sorting.changeSorting(chosenOption)
       }
     }
   };

src/components/MarketPlace/Offers/Offers.js

@@ -56,7 +56,7 @@ const Offers = (props) => {
       const queryObject = new URLSearchParams(queryStringHook.queryString);
       if (queryObject.has("page")) {
         if (queryObject.get("page") !== page.toString())
-        setPage(parseInt(queryObject.get("page")));
+          setPage(parseInt(queryObject.get("page")));
       } else {
         setPage(1);
       }
@@ -70,32 +70,16 @@ const Offers = (props) => {
   }, [queryStringHook.loadedFromURL, queryStringHook.queryString]);
 
   useEffect(() => {
-    // if (page !== 1) {
-      const queryObject = new URLSearchParams(queryStringHook.queryString);
-      if (queryObject.has("page")) {
-        if (queryObject.get("page") !== page.toString()) {
-          queryStringHook.appendToQueryString("page", page);
-        }
-      } else {
+    const queryObject = new URLSearchParams(queryStringHook.queryString);
+    if (queryObject.has("page")) {
+      if (queryObject.get("page") !== page.toString()) {
         queryStringHook.appendToQueryString("page", page);
       }
-      console.log("PAGE KONZOLAAAAAAAAAAAAAAAAAAAAAA")
-    // }
+    } else {
+      queryStringHook.appendToQueryString("page", page);
+    }
   }, [page]);
 
-  // useEffect(() => {
-  //   if (filters.queryString) {
-  //     if (filters.queryString.length > 1) {
-  //       if (initialLoad) {
-  //         dispatch(fetchOffers({ page: 1, queryString: filters.queryString }));
-  //         setInitialLoad(false);
-  //       }
-  //     } else {
-  //       setInitialLoad(false);
-  //     }
-  //   }
-  // }, [filters.queryString, initialLoad]);
-
   const handleDifferentPage = (pageNum) => {
     setPage(pageNum);
   };

src/components/UserReviewsCard/UserReviewsCard.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { ReviewList, ReviewsBox } from "./UserReviewsCard.styled";
+import { ReviewList, ReviewsBox, ThumbDown, ThumbUp } from "./UserReviewsCard.styled";
 
 import {
   Avatar,
@@ -10,17 +10,16 @@ import {
   Typography,
   Divider,
 } from "@mui/material";
-
 import Mockupdata from "./Mockupdata";
-
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import StarBorderIcon from "@mui/icons-material/StarBorder";
 import selectedTheme from "../../themes";
+import { useSelector } from "react-redux";
+import { selectOffer } from "../../store/selectors/offersSelectors";
 
 const UserReviewsCard = (props) => {
   var dataMockupdata = JSON.parse(JSON.stringify(Mockupdata));
-
+  const offer = useSelector(selectOffer);
+  console.log("user reviews: ", offer);
   return (
     <>
       <ReviewsBox>
@@ -58,9 +57,9 @@ const UserReviewsCard = (props) => {
               >
                 <Grid item xs={1}>
                   {review.isGood ? (
-                    <ThumbUpIcon color="success" />
+                    <ThumbUp color="success" />
                   ) : (
-                    <ThumbDownIcon color="error" />
+                    <ThumbDown color="error" />
                   )}
                 </Grid>
                 <Grid item xs={11}>

src/components/UserReviewsCard/UserReviewsCard.styled.js

@@ -1,13 +1,14 @@
-import styledComponents from "styled-components";
+import styled from "styled-components";
 import { List, Box } from "@mui/material";
-//import { PRIMARY_PURPLE_COLOR, PRIMARY_YELLOW_COLOR } from '../../constants/stylesConstants';
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 
-export const ReviewsBox = styledComponents(Box)`
+export const ReviewsBox = styled(Box)`
     width: 100%;
     height: calc(100% - 90px);
 `;
 
-export const ReviewList = styledComponents(List)`
+export const ReviewList = styled(List)`
     background: white;
     padding: 2rem;
     border-radius: 4px 0 0 4px;
@@ -25,3 +26,12 @@ export const ReviewList = styledComponents(List)`
     scrollbar-width: thin;
     scrollbar-color: #ddd;
 `;
+
+export const ThumbUp = styled(ThumbUpIcon)`
+  position: relative;
+  left: -8px;
+`
+export const ThumbDown = styled(ThumbDownIcon)`
+  position: relative;
+  left: -8px;
+`

src/hooks/useFilters.js

@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
-// import { useHistory } from "react-router-dom";
 import { fetchCategories } from "../store/actions/categories/categoriesActions";
 import {
   setFilteredCategory,
   setFilteredLocations,
   setFilteredSubcategory,
   setIsAppliedStatus,
-  // setQueryString,
 } from "../store/actions/filters/filtersActions";
 import { fetchLocations } from "../store/actions/locations/locationsActions";
 import {
@@ -17,18 +15,12 @@ import {
 } from "../store/selectors/categoriesSelectors";
 import {
   selectAppliedStatus,
-  // selectQueryString,
   selectSelectedCategory,
   selectSelectedLocations,
   selectSelectedSubcategory,
 } from "../store/selectors/filtersSelectors";
 import { selectLocations } from "../store/selectors/locationsSelectors";
-// import { fetchOffers } from "../store/actions/offers/offersActions";
-// import { HOME_PAGE } from "../constants/pages";
-// import { convertQueryString } from "../util/helpers/queryHelpers";
-// import qs from "query-string";
 import { useQueryString } from "./useQueryString";
-// import qs from "query-string";
 
 
 
@@ -55,12 +47,6 @@ const useFilters = () => {
     }
   }, [categories, locations]);
 
-  // useEffect(() => {
-  //   if (loadedFromQS) {
-  //     makeQueryString();
-  //   }
-  // }, [selectedCategory, selectedLocations, selectedSubcategory, loadedFromQS]);
-
   useEffect(() => {
     const queryObject = new URLSearchParams(queryStringHook.queryString);
     if (categories?.length > 0 && locations?.length > 0) {

src/hooks/useSorting.js

@@ -38,7 +38,7 @@ const useSorting = () => {
     }
   }, [queryStringHook.queryString, queryStringHook.loadedFromURL]);
 
-  const setSelectedSortOption = (payload) => {
+  const setSelectedSortOption = (payload, shouldGoFirstPage = false) => {
     dispatch(setFilteredSortOption(payload));
     console.log("konzola sort: ", payload)
     let _des_date = null;
@@ -52,25 +52,30 @@ const useSorting = () => {
     if (payload.value === sortOptions.POPULAR.value) {
       _des_popular = true;
     }
+    let queryArray = [];
     if (_des_date !== null) {
-      queryStringHook.appendMultipleToQueryString([
-        { key: "_des_date", value: `${_des_date}` },
-        { key: "_des_popular" },
-      ]);
+      queryArray.push({ key: "_des_date", value: `${_des_date}` });
+      queryArray.push({ key: "_des_popular" });
     }
     if (_des_popular !== null) {
-      queryStringHook.appendMultipleToQueryString([
-        { key: "_des_popular", value: `${_des_popular}` },
-        { key: "_des_date" },
-      ]);
+      queryArray.push({ key: "_des_popular", value: `${_des_popular}` });
+      queryArray.push({ key: "_des_date" })
     }
+    if (shouldGoFirstPage) {
+      queryArray.push({key: "page", value: "1"});
+    }
+    queryStringHook.appendMultipleToQueryString(queryArray);
   };
 
+  const changeSorting = (payload) => {
+    setSelectedSortOption(payload, true)
+  }
+
   return {
     selectedSortOption,
     setSelectedSortOption,
     sortOptions,
-    // loadedQS
+    changeSorting
   };
 };
 export default useSorting;

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

@@ -20,7 +20,9 @@ const ItemDetailsPage = (props) => {
   const offerId = props.match.params.idProizvod;
 
   useEffect(() => {
-    dispatch(fetchOneOffer(offerId));
+    if (offerId) {
+      dispatch(fetchOneOffer(offerId));
+    }
   }, [offerId]);
 
   useEffect(() => {

src/request/apiEndpoints.js

@@ -159,6 +159,7 @@ export default {
     setFingerprint: '/affiliate/fingerprint',
   },
   offers: {
+    getOneOffer: 'offers',
     getOffers: 'offers',
     addOffer: 'offers',
     categories: 'categories',

src/request/offersRequest.js

@@ -7,7 +7,7 @@ export const attemptFetchOffers = (payload) => {
 }
 export const attemptFetchOneOffer = (payload) => {
    // console.log(payload);
-   const url = `${apiEndpoints.offers.getOneOffer}/${payload.payload}`;
+   const url = `${apiEndpoints.offers.getOneOffer}/${payload.payload}/frontend`;
     return getRequest(url);
 }
 export const attemptFetchMoreOffers = (page, payload) => {

src/store/saga/offersSaga.js

@@ -47,10 +47,6 @@ function* fetchOffers(payload) {
       attemptFetchOffers,
       "?" + newQueryString.toString()
     );
-    console.log("if (payload.payload.queryString) {");
-    // if (payload.payload.queryString) {
-    //   yield put(setQueryString(payload.payload.queryString));
-    // }
     yield put(setTotalOffers(data.data.total));
     yield put(setOffers(data.data.items.regularOffers));
     yield put(setPinnedOffers(data.data.items.pinnedOffers));
@@ -105,7 +101,7 @@ function* fetchOneOffer(payload) {
   try {
     console.log(payload);
     const data = yield call(attemptFetchOneOffer, payload)
-    //console.log(data.data);
+    console.log(data.data);
     yield put(setOffer(data.data))
   } catch (e) {
     console.log(e);