try to filter

src/components/CarsList/CarsList.jsx

@@ -1,12 +1,19 @@
 import { useSelector } from "react-redux";
-import { selectfilteredCars } from "../../redux/cars/carsSelectors";
+import {
+ // selectFilteredByType,
+ selectFilteredCarsByInput,
+ // selectfilteredCarsByEquipment,
+} from "../../redux/cars/carsSelectors";
 import { Car } from "../Car/Car";
 import { CarList, ListContainer, LoadMore } from "./CarsList.styled";
 
 export const CarsList = () => {
  // const cars = useSelector(selectCars);
- const filteredCars = useSelector(selectfilteredCars);
+ const filteredCars = useSelector(selectFilteredCarsByInput);
 
+ // const equip = useSelector(selectfilteredCarsByEquipment);
+ // const type = useSelector(selectFilteredByType);
+ // console.log(equip);
  return (
  <ListContainer>
  <CarList>

src/components/FilterButton/FilterButton.jsx

@@ -1,15 +1,17 @@
 // import { useState } from "react";
+import { useDispatch } from "react-redux";
 import { Icon } from "../Icon/Icon";
 import {
  ButtonContentContainer,
  FilterButtonStyled,
 } from "./FilterButton.styled";
+import { toogleEquipmentFilter } from "../../redux/filter/filterSlice";
 
 export const FilterButton = ({ id, iconType, text }) => {
  // const [isSelected, setIsSelected] = useState(false);
-
+ const dispatch = useDispatch();
  return (
- <FilterButtonStyled onClick={() => console.log(text)}>
+ <FilterButtonStyled onClick={() => dispatch(toogleEquipmentFilter(text))}>
  <ButtonContentContainer>
  <Icon
  iconId={id}

src/redux/cars/carsSelectors.js

@@ -1,14 +1,17 @@
 import { createSelector } from "@reduxjs/toolkit";
-import { selectInputValue } from "../filter/filterSelectors";
+import {
+ selectEquipmentFilter,
+ selectInputValue,
+ selectTypeFilter,
+} from "../filter/filterSelectors";
 
 export const selectCars = (state) => state.cars.cars;
 
-export const selectfilteredCars = createSelector(
- [selectCars, selectInputValue],
+export const selectFilteredCarsByInput = createSelector(
+ [selectCars, selectInputValue, selectEquipmentFilter],
  (cars, inputValue) => {
  return cars.filter((el) => {
  const { car } = el;
- // console.log(car);
  const carName = car.name.toLowerCase();
  const carLocation = car.location.toLowerCase();
 
@@ -19,3 +22,37 @@ export const selectfilteredCars = createSelector(
  });
  }
 );
+
+export const selectfilteredCarsByEquipment = createSelector(
+ [selectCars, selectEquipmentFilter],
+ (cars, equipmentFilter) => {
+ return cars.filter(({ car }) => {
+ const { transmission, details } = car;
+ const KeysOfEquipment = [transmission];
+
+ Object.entries(details).map(([key, value]) => {
+ if (value !== 0) {
+ KeysOfEquipment.push(key);
+ }
+ });
+
+ return equipmentFilter.some((equip) => KeysOfEquipment.includes(equip));
+ });
+ }
+);
+
+export const selectFilteredByType = createSelector(
+ [selectFilteredCarsByInput, selectTypeFilter],
+ (cars, byType) => {
+ if (byType.length === 0) {
+ return cars;
+ }
+
+ return cars.filter((el) => {
+ const { car } = el;
+ const carForm = car.form.toLowerCase();
+
+ return byType.some((type) => carForm.includes(type.toLowerCase()));
+ });
+ }
+);

src/redux/filter/filterSelectors.js

@@ -1 +1,5 @@
 export const selectInputValue = (state) => state.filter.inputValue;
+
+export const selectEquipmentFilter = (state) => state.filter.equipment;
+
+export const selectTypeFilter = (state) => state.filter.type;

src/redux/filter/filterSlice.js

@@ -4,15 +4,20 @@ const filterSlice = createSlice({
  name: "filter",
  initialState: {
  inputValue: "",
- equipment: [],
- type: [],
+ equipment: ["mechanic"],
+ // equipment: ["ac", "automatic", "kitchen", "tv", "shower"],
+ type: ["fullyintegrated"],
+ // type: ["paneltruck", "fullyintegrated", "alcove"],
  },
  reducers: {
  changeInputFilter: (state, action) => {
  state.inputValue = action.payload;
  },
+ toogleEquipmentFilter: (state, action) => {
+ state.equipment.push(action.payload);
+ },
  },
 });
 
-export const { changeInputFilter } = filterSlice.actions;
+export const { changeInputFilter, toogleEquipmentFilter } = filterSlice.actions;
 export const filterReducer = filterSlice.reducer;