add filters

src/views/home/articles/Articles.tsx

@@ -2,7 +2,11 @@ import { useEffect } from 'react';
 import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import ArticleItem from './ArticleItem';
-import { setMenuActivePage } from '../../../redux/slices/store';
+import {
+    setArticlesNameFilter,
+    setArticlesTagFilter,
+    setMenuActivePage,
+} from '../../../redux/slices/store';
 import { useNavigate } from 'react-router-dom';
 import { fetchArticles } from '../../../redux/slices/articles';
 import Filters from './Filter';
@@ -15,39 +19,22 @@ const Articles = () => {
     const articles = useAppSelector(
         (state) => state.articles.fetchArticles.articles,
     );
-    const status = useAppSelector(
-        (state) => state.articles.fetchArticles.status,
+    const tagsFilter = useAppSelector(
+        (state) => state.store.articles.articleTagFilter,
+    );
+    const nameFilter = useAppSelector(
+        (state) => state.store.articles.filterName,
     );
-    const error = useAppSelector((state) => state.articles.fetchArticles.error);
 
     useEffect(() => {
         dispatch(setMenuActivePage('articles'));
-        dispatch(fetchArticles({}));
-    }, [dispatch]);
+        dispatch(fetchArticles({ tags: tagsFilter }));
+    }, []);
 
-    // ========================
-    // Состояния загрузки / ошибки
-    // ========================
-    if (status === 'loading') {
-        return (
-            <div className="h-full w-full flex items-center justify-center text-liquid-light text-[18px]">
-                Загрузка статей...
-            </div>
-        );
-    }
-
-    if (status === 'failed') {
-        return (
-            <div className="h-full w-full flex flex-col items-center justify-center text-liquid-red text-[18px]">
-                Ошибка при загрузке статей
-                {error && (
-                    <div className="text-liquid-light text-[14px] mt-2">
-                        {error}
-                    </div>
-                )}
-            </div>
-        );
-    }
+    const filterTagsHandler = (value: string[]) => {
+        dispatch(setArticlesTagFilter(value));
+        dispatch(fetchArticles({ tags: value }));
+    };
 
     // ========================
     // Основной контент
@@ -68,7 +55,14 @@ const Articles = () => {
                 </div>
 
                 {/* Фильтры */}
-                <Filters />
+                <Filters
+                    onChangeTags={(value: string[]) => {
+                        filterTagsHandler(value);
+                    }}
+                    onChangeName={(value: string) => {
+                        dispatch(setArticlesNameFilter(value));
+                    }}
+                />
 
                 {/* Список статей */}
                 <div className="mt-[20px]">
@@ -77,14 +71,15 @@ const Articles = () => {
                             Пока нет статей
                         </div>
                     ) : (
-                        articles.map((v) => <ArticleItem key={v.id} {...v} />)
+                        articles
+                            .filter((v) =>
+                                v.name
+                                    .toLocaleLowerCase()
+                                    .includes(nameFilter.toLocaleLowerCase()),
+                            )
+                            .map((v) => <ArticleItem key={v.id} {...v} />)
                     )}
                 </div>
-
-                {/* Пагинация (пока заглушка) */}
-                <div className="mt-[20px] text-liquid-light text-[14px]">
-                    pages
-                </div>
             </div>
         </div>
     );