add inputFilter

src/components/CarsList/CarsList.jsx

@@ -1,15 +1,16 @@
 import { useSelector } from "react-redux";
-import { selectCars } from "../../redux/cars/carsSelectors";
+import { selectfilteredCars } from "../../redux/cars/carsSelectors";
 import { Car } from "../Car/Car";
 import { CarList, ListContainer, LoadMore } from "./CarsList.styled";
 
 export const CarsList = () => {
- const cars = useSelector(selectCars);
+ // const cars = useSelector(selectCars);
+ const filteredCars = useSelector(selectfilteredCars);
 
  return (
  <ListContainer>
  <CarList>
- {cars.map((car) => {
+ {filteredCars.map((car) => {
  return <Car key={car.id} car={car.car} />;
  })}
  </CarList>

src/components/FilterButton/FilterButton.jsx

@@ -1,12 +1,12 @@
-import { useState } from "react";
+// import { useState } from "react";
 import { Icon } from "../Icon/Icon";
 import {
  ButtonContentContainer,
  FilterButtonStyled,
 } from "./FilterButton.styled";
 
 export const FilterButton = ({ id, iconType, text }) => {
- const [isSelected, setIsSelected] = useState(false);
+ // const [isSelected, setIsSelected] = useState(false);
 
  return (
  <FilterButtonStyled onClick={() => console.log(text)}>

src/components/Filters/Filters.jsx

@@ -1,3 +1,4 @@
+import { useDispatch } from "react-redux";
 import { FilterButton } from "../FilterButton/FilterButton";
 import {
  CategoriesLine,
@@ -8,13 +9,21 @@ import {
  Location,
  SearchButton,
 } from "./Filters.styled";
+import { changeInputFilter } from "../../redux/filter/filterSlice";
 
 export const Filters = () => {
+ const dispatch = useDispatch();
+
  return (
  <div>
  <div>
  <Location>Location</Location>
- <FilterInput name="location" type="text" placeholder="Kyiv, Ukraine" />
+ <FilterInput
+ onChange={(e) => dispatch(changeInputFilter(e.target.value))}
+ name="location"
+ type="text"
+ placeholder="Kyiv, Ukraine"
+ />
  </div>
  <FilterText>Filters</FilterText>
  <div>

src/redux/cars/carsSelectors.js

@@ -1 +1,21 @@
+import { createSelector } from "@reduxjs/toolkit";
+import { selectInputValue } from "../filter/filterSelectors";
+
 export const selectCars = (state) => state.cars.cars;
+
+export const selectfilteredCars = createSelector(
+ [selectCars, selectInputValue],
+ (cars, inputValue) => {
+ return cars.filter((el) => {
+ const { car } = el;
+ // console.log(car);
+ const carName = car.name.toLowerCase();
+ const carLocation = car.location.toLowerCase();
+
+ return (
+ carName.includes(inputValue.toLowerCase()) ||
+ carLocation.includes(inputValue.toLowerCase())
+ );
+ });
+ }
+);

src/redux/filter/filterSelectors.js

@@ -0,0 +1 @@
+export const selectInputValue = (state) => state.filter.inputValue;

src/redux/filter/filterSlice.js

@@ -7,7 +7,12 @@ const filterSlice = createSlice({
  equipment: [],
  type: [],
  },
- reducers: {},
+ reducers: {
+ changeInputFilter: (state, action) => {
+ state.inputValue = action.payload;
+ },
+ },
 });
 
+export const { changeInputFilter } = filterSlice.actions;
 export const filterReducer = filterSlice.reducer;