add filters

src/views/home/missions/Missions.tsx

@@ -2,7 +2,11 @@ import MissionItem from './MissionItem';
 import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { useEffect, useState } from 'react';
-import { setMenuActivePage } from '../../../redux/slices/store';
+import {
+    setMenuActivePage,
+    setMissionsNameFilter,
+    setMissionsTagFilter,
+} from '../../../redux/slices/store';
 import { fetchMissions } from '../../../redux/slices/missions';
 import ModalCreate from './ModalCreate';
 import Filters from './Filter';
@@ -25,10 +29,21 @@ const Missions = () => {
 
     const missions = useAppSelector((state) => state.missions.missions);
 
+    const nameFilter = useAppSelector(
+        (state) => state.store.missions.filterName,
+    );
+    const tagsFilter = useAppSelector(
+        (state) => state.store.articles.articleTagFilter,
+    );
+
     useEffect(() => {
         dispatch(setMenuActivePage('missions'));
-        dispatch(fetchMissions({}));
+        dispatch(fetchMissions({ tags: tagsFilter }));
     }, []);
+    const filterTagsHandler = (value: string[]) => {
+        dispatch(setMissionsTagFilter(value));
+        dispatch(fetchMissions({ tags: value }));
+    };
 
     return (
         <div className=" h-full w-full box-border p-[20px] pt-[20px]">
@@ -46,28 +61,39 @@ const Missions = () => {
                     />
                 </div>
 
-                <Filters />
+                <Filters
+                    onChangeTags={(value: string[]) => {
+                        filterTagsHandler(value);
+                    }}
+                    onChangeName={(value: string) => {
+                        dispatch(setMissionsNameFilter(value));
+                    }}
+                />
 
                 <div>
-                    {missions.map((v, i) => (
-                        <MissionItem
-                            key={i}
-                            id={v.id}
-                            authorId={v.authorId}
-                            name={v.name}
-                            difficulty={'Easy'}
-                            tags={v.tags}
-                            timeLimit={1000}
-                            memoryLimit={256 * 1024 * 1024}
-                            createdAt={v.createdAt}
-                            updatedAt={v.updatedAt}
-                            type={i % 2 == 0 ? 'first' : 'second'}
-                            status={'empty'}
-                        />
-                    ))}
+                    {missions
+                        .filter((v) =>
+                            v.name
+                                .toLowerCase()
+                                .includes(nameFilter.toLocaleLowerCase()),
+                        )
+                        .map((v, i) => (
+                            <MissionItem
+                                key={i}
+                                id={v.id}
+                                authorId={v.authorId}
+                                name={v.name}
+                                difficulty={'Easy'}
+                                tags={v.tags}
+                                timeLimit={1000}
+                                memoryLimit={256 * 1024 * 1024}
+                                createdAt={v.createdAt}
+                                updatedAt={v.updatedAt}
+                                type={i % 2 == 0 ? 'first' : 'second'}
+                                status={'empty'}
+                            />
+                        ))}
                 </div>
-
-                <div>pages</div>
             </div>
 
             <ModalCreate setActive={setModalActive} active={modalActive} />