89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import { useEffect } from 'react';
|
||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import ArticleItem from './ArticleItem';
|
||
import {
|
||
setArticlesNameFilter,
|
||
setArticlesTagFilter,
|
||
setMenuActivePage,
|
||
} from '../../../redux/slices/store';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { fetchArticles } from '../../../redux/slices/articles';
|
||
import Filters from './Filter';
|
||
|
||
const Articles = () => {
|
||
const dispatch = useAppDispatch();
|
||
const navigate = useNavigate();
|
||
|
||
// ✅ Берём данные из нового состояния
|
||
const articles = useAppSelector(
|
||
(state) => state.articles.fetchArticles.articles,
|
||
);
|
||
const tagsFilter = useAppSelector(
|
||
(state) => state.store.articles.articleTagFilter,
|
||
);
|
||
const nameFilter = useAppSelector(
|
||
(state) => state.store.articles.filterName,
|
||
);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage('articles'));
|
||
dispatch(fetchArticles({ tags: tagsFilter }));
|
||
}, []);
|
||
|
||
const filterTagsHandler = (value: string[]) => {
|
||
dispatch(setArticlesTagFilter(value));
|
||
dispatch(fetchArticles({ tags: value }));
|
||
};
|
||
|
||
// ========================
|
||
// Основной контент
|
||
// ========================
|
||
return (
|
||
<div className="h-full w-full box-border p-[20px]">
|
||
<div className="h-full box-border">
|
||
{/* Заголовок */}
|
||
<div className="relative flex items-center mb-[20px]">
|
||
<div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
|
||
Статьи
|
||
</div>
|
||
<SecondaryButton
|
||
onClick={() => navigate('/article/create')}
|
||
text="Создать статью"
|
||
className="absolute right-0"
|
||
/>
|
||
</div>
|
||
|
||
{/* Фильтры */}
|
||
<Filters
|
||
onChangeTags={(value: string[]) => {
|
||
filterTagsHandler(value);
|
||
}}
|
||
onChangeName={(value: string) => {
|
||
dispatch(setArticlesNameFilter(value));
|
||
}}
|
||
/>
|
||
|
||
{/* Список статей */}
|
||
<div className="mt-[20px]">
|
||
{articles.length === 0 ? (
|
||
<div className="text-liquid-light text-[16px]">
|
||
Пока нет статей
|
||
</div>
|
||
) : (
|
||
articles
|
||
.filter((v) =>
|
||
v.name
|
||
.toLocaleLowerCase()
|
||
.includes(nameFilter.toLocaleLowerCase()),
|
||
)
|
||
.map((v) => <ArticleItem key={v.id} {...v} />)
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Articles;
|