trampa-frontend/src/hooks/useFilters.js

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { fetchCategories } from "../store/actions/categories/categoriesActions";
import { fetchLocations } from "../store/actions/locations/locationsActions";
import {
  selectCategories,
  selectSubcategories,
} from "../store/selectors/categoriesSelectors";
// import qs from "query-string";
import { selectLocations } from "../store/selectors/locationsSelectors";

const useFilters = () => {
  const [selectedCategory, setSelectedCategory] = useState();
  const [selectedSubcategory, setSelectedSubcategory] = useState();
  const [selectedLocations, setSelectedLocations] = useState([]);
  const [selectedSortOption, setSelectedSortOption] = useState({});
  const categories = useSelector(selectCategories);
  const subcategories = useSelector(
    selectSubcategories(selectedCategory?.name)
  );
  const locations = useSelector(selectLocations);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchCategories());
    dispatch(fetchLocations());
  }, []);
  useEffect(() => {
    console.log("selectedCategory changed: ", selectedCategory);
  }, [selectedCategory])
  //   useEffect(() => {
  //     if (categories && locations) {
  //       const queryString = history.location.search.substring(1);
  //       const queryObject = qs.parse(queryString);
  //       let category;
  //       if (queryObject.category) {
  //         category = categories.find(
  //           (item) => item.mainText === queryObject.category.toString()
  //         );
  //         setSelectedCategory(category);
  //       }
  //       if (queryObject.subcategory) {
  //         setSelectedSubcategory(
  //           category.subcategories.find(
  //             (item) => item.mainText === queryObject.subcategory.toString()
  //           ).id
  //         );
  //       }
  //       if (queryObject.city) {
  //         let filters = [];
  //         if (Array.isArray(queryObject.city)) {
  //           queryObject.city.forEach((item) => {
  //             filters.push(Mockupdata[0].find((p) => p.string === item).id);
  //           });
  //         } else {
  //           filters.push(
  //             Mockupdata[0].find((p) => p.string === queryObject.city).id
  //           );
  //         }
  //         setAppliedFilters([...filters]);
  //       }
  //     }
  //   }, [categories, locations]);
  useEffect(() => {
    console.log("subcategories: ", subcategories);
  }, [subcategories]);
  return {
    selectedCategory,
    setSelectedCategory,
    selectedSubcategory,
    setSelectedSubcategory,
    selectedLocations,
    setSelectedLocations,
    selectedSortOption,
    setSelectedSortOption,
    categories,
    subcategories,
    locations,
  };
};

export default useFilters;