Finished feature 1726

src/components/Cards/FilterCard/Choser/CategoryChoser/CategoryChoser.js

@@ -21,7 +21,9 @@ const CategoryChoser = forwardRef((props, ref) => {
   const handleSelectCategory = (category) => {
     filters.category.setSelectedCategory(category);
     filters.subcategory.setSelectedSubcategory({});
+    props.offers.applyFilters();
   };
+  console.log(props);
   useImperativeHandle(ref, () => ({
     closeSection: () => {
       setIsOpened(false);
@@ -60,6 +62,7 @@ const CategoryChoser = forwardRef((props, ref) => {
       setSelected={handleSelectCategory}
       selected={filters.category.selectedCategoryLocally}
       firstOption={firstCategoryOption}
+      offers={props.offers}
     />
   );
 });
@@ -68,6 +71,7 @@ CategoryChoser.displayName = "CategoryChoser";
 
 CategoryChoser.propTypes = {
   filters: PropTypes.any,
+  offers: PropTypes.any,
 };
 
 export default CategoryChoser;

src/components/Cards/FilterCard/Choser/CompanyChoser/CompanyChoser.js

@@ -37,6 +37,7 @@ const CompanyChoser = forwardRef((props, ref) => {
       title={t("filters.company.title")}
       setItemsSelected={filters.companies.setSelectedCompanies}
       companies
+      offers={props.offers}
     />
   );
 });
@@ -45,6 +46,7 @@ CompanyChoser.displayName = "CompanyChoser";
 
 CompanyChoser.propTypes = {
   filters: PropTypes.any,
+  offers: PropTypes.any,
 };
 
 export default CompanyChoser;

src/components/Cards/FilterCard/Choser/LocationChoser/LocationChoser.js

@@ -1,4 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
 import PropTypes from "prop-types";
 import FilterCheckboxDropdown from "../../FilterDropdown/Checkbox/FilterCheckboxDropdown";
 import { LocationIcon } from "./LocationChoser.styled";
@@ -9,7 +15,12 @@ const LocationChoser = forwardRef((props, ref) => {
   const [isOpened, setIsOpened] = useState(false);
   const filters = props.filters;
 
-  const allLocations = useMemo(() => filters.locations.allLocations || [], [filters.locations])
+  console.log(props);
+
+  const allLocations = useMemo(
+    () => filters.locations.allLocations || [],
+    [filters.locations]
+  );
 
   useImperativeHandle(ref, () => ({
     closeSection: () => {
@@ -21,7 +32,7 @@ const LocationChoser = forwardRef((props, ref) => {
     if (filters.locations.selectedLocationsLocally.length > 0 && !isOpened) {
       setIsOpened(true);
     }
-  }, [filters.locations.selectedLocationsLocally])
+  }, [filters.locations.selectedLocationsLocally]);
   return (
     <FilterCheckboxDropdown
       searchPlaceholder={t("filters.location.placeholder")}
@@ -32,6 +43,7 @@ const LocationChoser = forwardRef((props, ref) => {
       icon={<LocationIcon />}
       title={t("filters.location.title")}
       setItemsSelected={filters.locations.setSelectedLocations}
+      offers={props.offers}
     />
   );
 });
@@ -40,6 +52,7 @@ LocationChoser.displayName = "LocationChoser";
 
 LocationChoser.propTypes = {
   filters: PropTypes.any,
+  offers: PropTypes.any,
 };
 
 export default LocationChoser;

src/components/Cards/FilterCard/Choser/SubcategoryChoser/SubcategoryChoser.js

@@ -80,6 +80,7 @@ const SubcategoryChoser = forwardRef((props, ref) => {
       disabled={isDisabled}
       handleOpen={handleOpen}
       firstOption={filters.subcategory.initialOption}
+      offers={props.offers}
     />
   );
 });
@@ -91,6 +92,7 @@ SubcategoryChoser.propTypes = {
   categoryOpened: PropTypes.bool,
   queryStringHook: PropTypes.any,
   isMyOffers: PropTypes.bool,
+  offers: PropTypes.any,
 };
 
 export default SubcategoryChoser;

src/components/Cards/FilterCard/FilterCard.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { ContentContainer, FilterCardContainer } from "./FilterCard.styled";
 import HeaderBack from "../../ItemDetails/Header/Header";
 import FilterHeader from "./FilterHeader/FilterHeader";
-import FilterFooter from "./FilterFooter/FilterFooter";
+// import FilterFooter from "./FilterFooter/FilterFooter";
 import CategoryChoser from "./Choser/CategoryChoser/CategoryChoser";
 import SubcategoryChoser from "./Choser/SubcategoryChoser/SubcategoryChoser";
 import LocationChoser from "./Choser/LocationChoser/LocationChoser";
@@ -42,7 +42,7 @@ const FilterCard = (props) => {
 
       <ContentContainer>
         {/* Categories */}
-        <CategoryChoser filters={filters} ref={categoryRef} />
+        <CategoryChoser filters={filters} ref={categoryRef} offers={offers} />
 
         {/* Subcategories */}
         <SubcategoryChoser
@@ -51,25 +51,26 @@ const FilterCard = (props) => {
           ref={subcategoryRef}
           categoryOpened={categoryRef.current?.isOpened}
           isMyOffers={props.myOffers}
+          offers={offers}
         />
 
         {/* Locations */}
         {!props.myOffers && (
-          <LocationChoser filters={filters} ref={locationRef} />
+          <LocationChoser filters={filters} ref={locationRef} offers={offers} />
         )}
 
         {/* Companies */}
         {!props.myOffers && (
-          <CompanyChoser filters={filters} ref={companyRef} />
+          <CompanyChoser filters={filters} ref={companyRef} offers={offers} />
         )}
       </ContentContainer>
 
-      <FilterFooter
+      {/* <FilterFooter
         toggleFilters={props.toggleFilters}
         filters={offers}
         closeAllSections={closeAllSections}
         isMyOffers={props.myOffers}
-      />
+      /> */}
     </FilterCardContainer>
   );
 };

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/CheckboxDropdownList.js

@@ -17,6 +17,7 @@ const CheckboxDropdownList = (props) => {
   const [isOpened, setIsOpened] = useState(false);
   const handleDelete = (item) => {
     props.setItemsSelected([...props.filters.filter((p) => p !== item)]);
+    props.offers.applyFilters();
   };
   const handleOpen = () => {
     setIsOpened((prevState) => !prevState);
@@ -92,6 +93,7 @@ CheckboxDropdownList.propTypes = {
   open: PropTypes.bool,
   handleOpen: PropTypes.func,
   companies: PropTypes.bool,
+  offers: PropTypes.any,
 };
 
 export default CheckboxDropdownList;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

@@ -9,6 +9,7 @@ const FilterCheckboxDropdown = (props) => {
   const [isOpened, setIsOpened] = useState(false);
   const [toSearch, setToSearch] = useState("");
   const { data } = props;
+  console.log(props);
 
   useEffect(() => {
     setDataToShow([...data]);
@@ -49,8 +50,10 @@ const FilterCheckboxDropdown = (props) => {
             (p) => p?.city?.toString() !== item?.city?.toString()
           ),
         ]);
+        props.offers.applyFilters();
       } else {
         props.setItemsSelected([...props.filters, item]);
+        props.offers.applyFilters();
       }
     }
   };
@@ -72,6 +75,7 @@ const FilterCheckboxDropdown = (props) => {
       handleOpen={handleOpen}
       setItemsSelected={props.setItemsSelected}
       companies={props.companies}
+      offers={props.offers}
     >
       {(isOpened || props?.open) &&
         dataToShow.map((item) => {
@@ -102,6 +106,7 @@ FilterCheckboxDropdown.propTypes = {
   open: PropTypes.bool,
   handleOpen: PropTypes.func,
   companies: PropTypes.bool,
+  offers: PropTypes.any,
 };
 FilterCheckboxDropdown.defaultProps = {
   oneValueAllowed: false,

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSmallDropdown/FilterSmallDropdown.js

@@ -49,8 +49,10 @@ const FilterSmallDropdown = (props) => {
             (p) => p?.companyName?.toString() !== item?.companyName?.toString()
           ),
         ]);
+        props.offers.applyFilters();
       } else {
         props.setItemsSelected([...props.filters, item]);
+        props.offers.applyFilters();
       }
     }
   };
@@ -97,6 +99,7 @@ FilterSmallDropdown.propTypes = {
   companies: PropTypes.bool,
   letters: PropTypes.any,
   dataToShow: PropTypes.array,
+  offers: PropTypes.any,
 };
 FilterSmallDropdown.defaultProps = {
   oneValueAllowed: false,

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterSubDropdown/FilterSubDropdown.js

@@ -62,6 +62,7 @@ const FilterSubDropdown = (props) => {
             filters={props.filters}
             setItemsSelected={props.setItemsSelected}
             companies={props.companies}
+            offers={props.offers}
           />
           <FilterSmallDropdown
             letters={t("filters.company.secondSort")}
@@ -69,6 +70,7 @@ const FilterSubDropdown = (props) => {
             filters={props.filters}
             setItemsSelected={props.setItemsSelected}
             companies={props.companies}
+            offers={props.offers}
           />
           <FilterSmallDropdown
             letters={t("filters.company.thirdSort")}
@@ -76,6 +78,7 @@ const FilterSubDropdown = (props) => {
             filters={props.filters}
             setItemsSelected={props.setItemsSelected}
             companies={props.companies}
+            offers={props.offers}
           />
         </>
       )}
@@ -95,6 +98,7 @@ FilterSubDropdown.propTypes = {
   open: PropTypes.bool,
   handleOpen: PropTypes.func,
   companies: PropTypes.bool,
+  offers: PropTypes.any,
 };
 FilterSubDropdown.defaultProps = {
   oneValueAllowed: false,

src/hooks/useOffers/useFilters.js

@@ -4,9 +4,9 @@ import useCompaniesFilter from "./useCompanyFilter";
 import useLocationsFilter from "./useLocationsFilter";
 import useSubcategoryFilter from "./useSubcategoryFilter";
 
-const useFilters = (clearAll = false) => {
+const useFilters = (clearAll = false, applyFilters) => {
   const category = useCategoryFilter();
-  const subcategory = useSubcategoryFilter();
+  const subcategory = useSubcategoryFilter(applyFilters);
   const locations = useLocationsFilter();
   const companies = useCompaniesFilter();
 

src/hooks/useOffers/useOffers.js

@@ -36,7 +36,19 @@ import { useHistory } from "react-router-dom";
 
 const useOffers = () => {
   const dispatch = useDispatch();
-  const filters = useFilters();
+
+  const apply = () => {
+    filters.apply();
+    const newQueryString = makeQueryStringHelper(
+      filters,
+      paging,
+      search,
+      sorting
+    );
+    dispatch(setQueryString(convertQueryStringForBackend(newQueryString)));
+  };
+
+  const filters = useFilters(false, apply);
   const queryStringHook = useQueryString();
   const pinnedOffers = useSelector(selectPinnedOffers);
   const offers = useSelector(selectOffers);
@@ -125,17 +137,6 @@ const useOffers = () => {
     }
   }, [filtersCleared]);
 
-  const apply = () => {
-    filters.apply();
-    const newQueryString = makeQueryStringHelper(
-      filters,
-      paging,
-      search,
-      sorting
-    );
-    dispatch(setQueryString(convertQueryStringForBackend(newQueryString)));
-  };
-
   const applyFilters = () => {
     setFiltersCleared(true);
   };

src/hooks/useOffers/useSubcategoryFilter.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { setFilteredSubcategory } from "../../store/actions/filters/filtersActions";
 import { selectSelectedSubcategory } from "../../store/selectors/filtersSelectors";
 
-const useSubcategoryFilter = () => {
+const useSubcategoryFilter = (applyFilters) => {
   const selectedSubcategory = useSelector(selectSelectedSubcategory);
   const dispatch = useDispatch();
   const initialOption = {
@@ -17,6 +17,7 @@ const useSubcategoryFilter = () => {
     if (selectedSubcategory)
       if ("_id" in selectedSubcategory) {
         setSelectedSubcategoryLocally(selectedSubcategory);
+        applyFilters();
       }
   }, [selectedSubcategory]);
 
@@ -27,11 +28,11 @@ const useSubcategoryFilter = () => {
       }
   }, [initialOption]);
 
-  const setSelectedSubcategory = (subcategory, immediateApply = false) => {
+  const setSelectedSubcategory = (subcategory) => {
     setSelectedSubcategoryLocally(subcategory);
-    if (immediateApply) {
-      dispatch(setFilteredSubcategory(subcategory));
-    }
+    // if (immediateApply) {
+    dispatch(setFilteredSubcategory(subcategory));
+    // }
   };
 
   const apply = () => {