add filter by location and type

src/features/CardList/CardList.module.scss

@@ -61,6 +61,12 @@
     display: flex;
     flex-direction: column;
     gap: 50px;
-    justify-content: center;
     align-items: center;
+}
+
+.not_found {
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }

src/features/CardList/CardList.tsx

@@ -6,14 +6,20 @@ import {Loader} from "@/shared/ui/Loader/ui/Loader";
 import {Button, ButtonTheme} from "@/shared/ui/Button/Button";
 import {useDispatch, useSelector} from "react-redux";
 import {campersActions} from "@/features/CardList/model/slice/camperSlice";
-import {selectCampers} from "@/features/CardList/model/selectors/getAllCampers";
+import {selectCampers, selectFilter} from "@/features/CardList/model/selectors/getAllCampers";
+import {filterCampers} from "@/shared/lib/filterCampers/filterCampers";
 
 export const CardList = () => {
     const [camper, setCamper] = useState([]);
     const [isLoadingServer, setIsLoadingServer] = useState(false);
     const [visibleCamperCount, setVisibleCamperCount] = useState(4);
     const dispatch = useDispatch();
     const campers = useSelector(selectCampers);
+    const filtered = useSelector(selectFilter);
+
+    useEffect(() => {
+        if(filtered) setCamper(filterCampers(campers, filtered));
+    }, [filtered]);
 
     useEffect(() => {
         setIsLoadingServer(true);
@@ -22,20 +28,19 @@ export const CardList = () => {
                 setCamper(response.data);
                 dispatch(campersActions.addCamper(response.data))
             })
-            .catch(error => {
-                console.log('error', error);
-            })
+            .catch(error => console.log('error', error))
             .finally(() => setIsLoadingServer(false));
     }, []);
 
     useEffect(() => {
-        if(campers.length > 0) {
-            setCamper(campers);
-        }
+        if(campers.length > 0) setCamper(campers);
     }, []);
 
-    const loadMore = () => {
-        setVisibleCamperCount(prevCount => prevCount + 4);
+    const loadMore = () => setVisibleCamperCount(prevCount => prevCount + 4);
+
+    const handleReset = () => {
+        dispatch(campersActions.clearFilter());
+        setCamper(campers);
     };
 
     return (
@@ -48,17 +53,24 @@ export const CardList = () => {
             ) : (
                 <section className={cls.container_list}>
                     <ul className={cls.list}>
-                        {camper.length > 0 && camper.slice(0, visibleCamperCount).map((item: any, index: number) => (
+                        {camper.length > 0
+                            ? camper.slice(0, visibleCamperCount).map((item: any, index: number) => (
                             <li key={`${item.name} + ${index}`}>
                                 <Card {...item} />
                             </li>
-                        ))}
+                        ))
+                            : <li className={cls.not_found}>
+                                <h3>Нажаль, нічого не знайдено</h3>
+                                <Button theme={ButtonTheme.SEARCH} onClick={handleReset}>Reset</Button>
+                            </li>
+                        }
                     </ul>
                     {camper.length > visibleCamperCount && (
                         <Button theme={ButtonTheme.LOAD_MORE} onClick={loadMore}>
                             Load more
                         </Button>
                     )}
+
                 </section>
             )}
         </>

src/features/CardList/model/selectors/getAllCampers.ts

@@ -1,2 +1,4 @@
 
-export const selectCampers = (state) => state.campers.campers
+export const selectCampers = (state) => state.campers.campers;
+
+export const selectFilter = (state) => state.campers.filter;

src/features/CardList/model/slice/camperSlice.ts

@@ -2,18 +2,22 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
     campers: [],
-    filter: {}
+    filter: null
 }
 
 export const camperSlice = createSlice({
     name: 'campers',
     initialState,
     reducers: {
         addCamper: (state, action) => {
-            state.campers.push(action.payload)
+            state.campers = action.payload
         },
         addFilter: (state, action) => {
             state.filter = action.payload
+        },
+
+        clearFilter: (state) => {
+            state.filter = null
         }
     },
 });

src/features/FilterSection/VehicleEquipment/VehicleEquipment.module.scss

@@ -1,4 +1,5 @@
 .container {
+  width: 360px;
     margin-top: 32px;
     display: flex;
     flex-direction: column;

src/shared/lib/filterCampers/filterCampers.ts

@@ -0,0 +1,18 @@
+import {DetailsItem} from "@/shared/types/card";
+
+export const filterCampers = (original: any, filters: any) => {
+    const byLocation = original.filter((item: any) => item.location === filters.location);
+    if(filters.equipment.length === 0 && filters.type.length === 0) {return byLocation}
+
+    if(filters.type.length > 0) {
+        const byType: DetailsItem[] = [];
+        byLocation.forEach((item: any) => {
+            if(filters.type.includes(item.form)) {
+                byType.push(item)
+            }
+        })
+        return byType
+    }
+
+
+}

src/shared/ui/Select/Select.tsx

@@ -17,7 +17,7 @@ export const Select = ({getLocation} : SelectProps) => {
 
     useEffect(() => {
         if (campers.length > 0) {
-            const uniqueLocations = [...new Set(campers[0].map((item: any) => item.location))];
+            const uniqueLocations = [...new Set(campers.map((item: any) => item.location))];
             // @ts-ignore
             setOptions(uniqueLocations.map((location: string, index: number) => ({ id: index + 1, name: location })));
         }