From 0bcd741fe746136f08a4218ffe0b06a00cdf5282 Mon Sep 17 00:00:00 2001
From: Mykola <53128883+Nikolaus-B@users.noreply.github.com>
Date: Sun, 24 Mar 2024 01:12:56 +0200
Subject: [PATCH] try to filter

---
 src/components/CarsList/CarsList.jsx         | 11 ++++-
 src/components/FilterButton/FilterButton.jsx |  6 ++-
 src/redux/cars/carsSelectors.js              | 45 ++++++++++++++++++--
 src/redux/filter/filterSelectors.js          |  4 ++
 src/redux/filter/filterSlice.js              | 11 +++--
 5 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
index 1a6fc00..ebdf0be 100644
--- a/src/components/CarsList/CarsList.jsx
+++ b/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>
diff --git a/src/components/FilterButton/FilterButton.jsx b/src/components/FilterButton/FilterButton.jsx
index 0ea328d..072c7a6 100644
--- a/src/components/FilterButton/FilterButton.jsx
+++ b/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}
diff --git a/src/redux/cars/carsSelectors.js b/src/redux/cars/carsSelectors.js
index 7bd2b68..3417f59 100644
--- a/src/redux/cars/carsSelectors.js
+++ b/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()));
+    });
+  }
+);
diff --git a/src/redux/filter/filterSelectors.js b/src/redux/filter/filterSelectors.js
index 202db50..6c1534f 100644
--- a/src/redux/filter/filterSelectors.js
+++ b/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;
diff --git a/src/redux/filter/filterSlice.js b/src/redux/filter/filterSlice.js
index daad63d..e310c9d 100644
--- a/src/redux/filter/filterSlice.js
+++ b/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;