add filters

src/views/home/missions/Filter.tsx

@@ -1,51 +1,24 @@
-import {
-    FilterDropDown,
-    FilterItem,
-} from '../../../components/filters/Filter';
-import { SorterDropDown } from '../../../components/filters/Sorter';
+import { FC } from 'react';
+import { TagFilter } from '../../../components/filters/TagFilter';
 import { SearchInput } from '../../../components/input/SearchInput';
 
-const Filters = () => {
-    const items: FilterItem[] = [
-        { text: 'React', value: 'react' },
-        { text: 'Vue', value: 'vue' },
-        { text: 'Angular', value: 'angular' },
-        { text: 'Svelte', value: 'svelte' },
-        { text: 'Next.js', value: 'next' },
-        { text: 'Nuxt', value: 'nuxt' },
-        { text: 'Solid', value: 'solid' },
-        { text: 'Qwik', value: 'qwik' },
-    ];
+interface MissionFiltersProps {
+    onChangeTags: (value: string[]) => void;
+    onChangeName: (value: string) => void;
+}
 
+const Filters: FC<MissionFiltersProps> = ({ onChangeTags, onChangeName }) => {
     return (
         <div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
-            <SearchInput onChange={() => {}} placeholder="Поиск задачи" />
-
-            <SorterDropDown
-                items={[
-                    {
-                        value: '1',
-                        text: 'Сложность',
-                    },
-                    {
-                        value: '2',
-                        text: 'Дата создания',
-                    },
-                    {
-                        value: '3',
-                        text: 'ID',
-                    },
-                ]}
-                onChange={(v) => {
-                    v;
+            <SearchInput
+                onChange={(value: string) => {
+                    onChangeName(value);
                 }}
+                placeholder="Поиск задачи"
             />
-
-            <FilterDropDown
-                items={items}
-                defaultState={[]}
-                onChange={(values) => {
-                    values;
+            <TagFilter
+                onChange={(value: string[]) => {
+                    onChangeTags(value);
                 }}
             />
         </div>

src/views/home/missions/MissionItem.tsx

@@ -1,6 +1,7 @@
 import { cn } from '../../../lib/cn';
 import { IconError, IconSuccess } from '../../../assets/icons/missions';
 import { useNavigate } from 'react-router-dom';
+import { useAppSelector } from '../../../redux/hooks';
 
 export interface MissionItemProps {
     id: number;
@@ -38,6 +39,61 @@ const MissionItem: React.FC<MissionItemProps> = ({
 }) => {
     const navigate = useNavigate();
 
+    const nameFilter = useAppSelector(
+        (state) => state.store.missions.filterName,
+    );
+
+    const highlightZ = (name: string, filter: string) => {
+        if (!filter) return name;
+
+        const s = filter.toLowerCase();
+        const t = name.toLowerCase();
+        const n = t.length;
+        const m = s.length;
+
+        const mark = Array(n).fill(false);
+
+        // Проходимся с конца и ставим отметки
+        for (let i = n - 1; i >= 0; i--) {
+            if (i + m <= n && t.slice(i, i + m) === s) {
+                for (let j = i; j < i + m; j++) {
+                    if (mark[j]) break;
+                    mark[j] = true;
+                }
+            }
+        }
+
+        // === Формируем единые жёлтые блоки ===
+        const result: any[] = [];
+        let i = 0;
+
+        while (i < n) {
+            if (!mark[i]) {
+                // обычный символ
+                result.push(name[i]);
+                i++;
+            } else {
+                // начинаем жёлтый блок
+                let j = i;
+                while (j < n && mark[j]) j++;
+
+                const chunk = name.slice(i, j);
+                result.push(
+                    <span
+                        key={i}
+                        className="bg-yellow-400 text-black rounded px-1"
+                    >
+                        {chunk}
+                    </span>,
+                );
+
+                i = j;
+            }
+        }
+
+        return result;
+    };
+
     return (
         <div
             className={cn(
@@ -55,7 +111,9 @@ const MissionItem: React.FC<MissionItemProps> = ({
             }}
         >
             <div className="text-[18px] font-bold">#{id}</div>
-            <div className="text-[18px] font-bold">{name}</div>
+            <div className="text-[18px] font-bold">
+                {highlightZ(name, nameFilter)}
+            </div>
             <div className="text-[12px] text-right">
                 стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
                 {formatBytesToMB(memoryLimit)}

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} />