Merge branch 'bugfix/ad_image' of Neca/HRCenter into FE_dev

src/assets/styles/components/_ads.scss

@@ -444,7 +444,8 @@ h3 {
   }
 }
 
-.add-ad-btn {
+.add-ad-btn,
+.delete-filters-btn {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -455,6 +456,7 @@ h3 {
   height: 51px;
   background: #226cb0;
   border-radius: 9px;
+  margin-top: 9px;
   @include media-below($bp-xl) {
     width: 147px;
   }

src/components/Ads/Ad.js

@@ -1,11 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
-import logoReact from "../../assets/images/logo_react.png";
+// import logoReact from "../../assets/images/logo_react.png";
 import { useTheme } from "@emotion/react";
 import { useMediaQuery } from "@mui/material";
 import linkedin from "../../assets/images/linkedin.png";
 import facebook from "../../assets/images/facebook.png";
 import instagram from "../../assets/images/instagram.png";
+import { selectLogo } from "../../util/helpers/technologiesLogos";
 
 const Ad = ({
   title,
@@ -32,7 +33,7 @@ const Ad = ({
       </div>
 
       <div className="ad-card-logo">
-        <img src={logoReact} alt="logo-react" />
+        <img src={selectLogo(title)} alt="logo-react" />
       </div>
 
       <div className="ad-card-experience">

src/components/Ads/AdFilters.js

@@ -11,12 +11,14 @@ import x from "../../assets/images/x.png";
 import { changeIsCheckedValue } from "../../store/actions/technologies/technologiesActions";
 import { useDispatch } from "react-redux";
 import { setFilteredAdsReq } from "../../store/actions/ads/adsAction";
+import { useHistory } from "react-router-dom";
 
 const AdFilters = ({ open, handleClose, technologies }) => {
   const [sliderValue, setSliderValue] = useState([0, 10]);
   const [employmentType, setEmploymentType] = useState("Work");
   const [workHour, setWorkHour] = useState("FullTime");
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const handleSliderChange = (_, newValue) => {
     setSliderValue(newValue);
@@ -27,10 +29,6 @@ const AdFilters = ({ open, handleClose, technologies }) => {
       .filter((tech) => tech.isChecked === true)
       .map((tech) => tech.name);
 
-    if(tech.length === 0) {
-      return;
-    }
-
     dispatch(
       setFilteredAdsReq({
         minExperience: sliderValue[0],
@@ -41,6 +39,16 @@ const AdFilters = ({ open, handleClose, technologies }) => {
       })
     );
 
+    let technologiesQuery = "";
+    for (let i = 0; i < tech.length; i++) {
+      technologiesQuery += `technologies=${tech[i]}&`;
+    }
+
+    history.push({
+      pathname: "/ads",
+      search: `?minExperience=${sliderValue[0]}&maxExperience=${sliderValue[1]}&workHour=${workHour}&employmentType=${employmentType}&${technologiesQuery}`,
+    });
+
     handleClose();
   };
 

src/components/Ads/ArchiveAd.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import net_icon from "../../assets/images/.net_icon.png";
+import { selectLogo } from "../../util/helpers/technologiesLogos";
 
 const ArchiveAd = ({
   className,
@@ -22,7 +22,7 @@ const ArchiveAd = ({
         <h3>{title}</h3>
       </div>
       <div className="archive-ad-image">
-        <img src={net_icon} alt=".net icon" />
+        <img src={selectLogo(title)} alt=".net icon" />
       </div>
       <div className="archive-ad-experience">
         {minimumExperience > 0 ? (

src/pages/AdsPage/AdDetailsPage.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { IconButton, useMediaQuery } from "@mui/material";
-import aspNetIcon from "../../assets/images/.net_icon.png";
+// import aspNetIcon from "../../assets/images/.net_icon.png";
 import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
@@ -14,6 +14,7 @@ import "slick-carousel/slick/slick-theme.css";
 import arrow_left from "../../assets/images/arrow_left.png";
 import arrow_right from "../../assets/images/arrow_right.png";
 import AdDetailsCandidateCard from "../../components/Ads/AdDetailsCandidateCard";
+import { selectLogo } from "../../util/helpers/technologiesLogos";
 
 const AdDetailsPage = () => {
   const theme = useTheme();
@@ -39,7 +40,7 @@ const AdDetailsPage = () => {
         settings: {
           slidesToShow: 3,
           slidesToScroll: 3,
-          infinite: true,
+          infinite: false,
           dots: false,
         },
       },
@@ -95,7 +96,7 @@ const AdDetailsPage = () => {
           <div className="ad-details-tech-logo">
             <div className="ad-details-tech-logo-title">
               <div className="ad-details-tech-logo-title-img">
-                <img src={aspNetIcon} alt="asp-net-icon" />
+                <img src={selectLogo(ad.title)} alt="asp-net-icon" />
               </div>
               <div className="ad-details-tech-logo-title-title">
                 <h1>{ad.title}</h1>

src/pages/AdsPage/AdsPage.js

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import AddAdModal from "../../components/Ads/AddAdModal";
 import AdFilters from "../../components/Ads/AdFilters";
 import { useDispatch } from "react-redux";
-import { setAdsReq } from "../../store/actions/ads/adsAction";
+import { setAdsReq, setFilteredAdsReq } from "../../store/actions/ads/adsAction";
 import { useSelector } from "react-redux";
 import { selectAds } from "../../store/selectors/adsSelectors";
 import { AD_DETAILS_PAGE } from "../../constants/pages";
@@ -24,6 +24,7 @@ import { setArchiveAdsReq } from "../../store/actions/archiveAds/archiveAdsActio
 import noActiveAds from "../../assets/images/no_active_ads.png";
 import { setTechnologiesReq } from "../../store/actions/technologies/technologiesActions";
 import { selectTechnologies } from "../../store/selectors/technologiesSelectors";
+import { useLocation } from "react-router-dom";
 
 const AdsPage = ({ history }) => {
   const theme = useTheme();
@@ -37,13 +38,41 @@ const AdsPage = ({ history }) => {
   const archiveAdsSliderRef = useRef();
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const { search } = useLocation();
 
   useEffect(() => {
     dispatch(setTechnologiesReq());
-    dispatch(setAdsReq());
     dispatch(setArchiveAdsReq());
   }, []);
 
+  useEffect(() => {
+    if (search) {
+      // history.push("/ads");
+      
+      const searchParams = search.split('?')[1]
+      const technologyParams = searchParams.split('&').filter(x => x.includes('technologies'))
+      const technologies = []
+      technologyParams.forEach(p => {
+        const tech = p.split('=')
+        technologies.push(tech[1])
+      });
+
+      const params = new URLSearchParams(search);
+
+      dispatch(
+        setFilteredAdsReq({
+          minExperience: params.get('minExperience'),
+          maxExperience: params.get('maxExperience'),
+          technologies,
+          workHour: params.get('workHour'),
+          employmentType: params.get('employmentType'),
+        })
+      );
+    } else {
+      dispatch(setAdsReq());
+    }
+  }, [])
+
   const handleToggleFiltersDrawer = () => {
     setToggleFiltersDrawer((oldState) => !oldState);
   };
@@ -101,6 +130,11 @@ const AdsPage = ({ history }) => {
     archiveAdsSliderRef.current.slickNext();
   };
 
+  const deleteFiltersHandler = () => {
+    history.push("/ads");
+    dispatch(setAdsReq());
+  };
+
   const getDummyAds = (len) => {
     const ads = [];
 
@@ -205,6 +239,16 @@ const AdsPage = ({ history }) => {
                 Dodaj Oglas
               </IconButton>
             </div>
+            {search && (
+              <div>
+                <IconButton
+                  className="c-btn c-btn--primary delete-filters-btn"
+                  onClick={deleteFiltersHandler}
+                >
+                  Obrisite filtere
+                </IconButton>
+              </div>
+            )}
           </div>
         )}
         {archiveAds && archiveAds.length > 0 && (

src/store/actions/ads/adsActionConstants.js

@@ -1,7 +1,15 @@
-export const FETCH_ADS_REQ = 'FETCH_ADS_REQ';
-export const FETCH_ADS_ERR = 'FETCH_ADS_ERR';
-export const FETCH_ADS_SUCCESS = 'FETCH_ADS_SUCCESS';
+import {
+  createFetchType,
+  createSuccessType,
+  createErrorType,
+} from "../actionHelpers";
 
-export const FETCH_FILTERED_ADS_REQ = 'FETCH_FILTERED_ADS_REQ';
-export const FETCH_FILTERED_ADS_ERR = 'FETCH_FILTERED_ADS_ERR';
-export const FETCH_FILTERED_ADS_SUCCESS = 'FETCH_FILTERED_ADS_SUCCESS';
+const CREATE_AD_SCOPE = "FETCH_ADS";
+
+export const FETCH_ADS_REQ = createFetchType(CREATE_AD_SCOPE);
+export const FETCH_ADS_ERR = createErrorType(CREATE_AD_SCOPE);
+export const FETCH_ADS_SUCCESS = createSuccessType(CREATE_AD_SCOPE);
+
+export const FETCH_FILTERED_ADS_REQ = "FETCH_FILTERED_ADS_REQ";
+export const FETCH_FILTERED_ADS_ERR = "FETCH_FILTERED_ADS_ERR";
+export const FETCH_FILTERED_ADS_SUCCESS = "FETCH_FILTERED_ADS_SUCCESS";

src/util/helpers/technologiesLogos.js

@@ -0,0 +1,44 @@
+import aspnet from "../../assets/images/.net_icon.png";
+import backend from "../../assets/images/backend.png";
+import dataanalyst from "../../assets/images/dataanalyst.png";
+import devops from "../../assets/images/devops.png";
+import qa from "../../assets/images/qa.png";
+import logo_react from "../../assets/images/logo_react.png";
+import hr from "../../assets/images/HR.png";
+
+export const technologiesLogos = {
+  '.net': aspnet,
+  'backend': backend,
+  'dataanalyst': dataanalyst,
+  'devops': devops,
+  'qa': qa,
+  'react': logo_react,
+  'hr': hr,
+};
+
+const takeLogo = (title) => {
+    if(!title) {
+        return technologiesLogos['hr']
+    }
+
+    switch(true) {
+        case title.toLowerCase().includes('.net'):
+            return technologiesLogos['.net'];
+        case title.toLowerCase().includes('backend'):
+            return technologiesLogos['backend'];
+        case title.toLowerCase().includes('dataanalyst'):
+            return technologiesLogos['dataanalyst'];
+        case title.toLowerCase().includes('devops'):
+            return technologiesLogos['devops'];
+        case title.toLowerCase().includes('qa'):
+            return technologiesLogos['qa'];
+        case title.toLowerCase().includes('react'):
+            return technologiesLogos['react'];
+        default:
+            return technologiesLogos['hr']
+    }
+}
+
+export const selectLogo = (title) => {
+    return takeLogo(title)
+}