update articles slice

src/views/home/articles/Articles.tsx

@@ -7,51 +7,84 @@ import { useNavigate } from 'react-router-dom';
 import { fetchArticles } from '../../../redux/slices/articles';
 import Filters from './Filter';
 
-export interface Article {
-    id: number;
-    name: string;
-    tags: string[];
-}
-
 const Articles = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
-    const articles = useAppSelector((state) => state.articles.articles);
-    const status = useAppSelector((state) => state.articles.statuses.fetchAll);
+    // ✅ Берём данные из нового состояния
+    const articles = useAppSelector(
+        (state) => state.articles.fetchArticles.articles,
+    );
+    const status = useAppSelector(
+        (state) => state.articles.fetchArticles.status,
+    );
+    const error = useAppSelector((state) => state.articles.fetchArticles.error);
 
     useEffect(() => {
         dispatch(setMenuActivePage('articles'));
         dispatch(fetchArticles({}));
-    }, []);
+    }, [dispatch]);
 
-    if (status == 'loading') return <div>Загрузка...</div>;
+    // ========================
+    // Состояния загрузки / ошибки
+    // ========================
+    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>
+        );
+    }
+
+    // ========================
+    // Основной контент
+    // ========================
     return (
-        <div className=" h-full w-full box-border p-[20px] pt-[20px]">
+        <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');
-                        }}
+                        onClick={() => navigate('/article/create')}
                         text="Создать статью"
                         className="absolute right-0"
                     />
                 </div>
 
+                {/* Фильтры */}
                 <Filters />
 
-                <div>
-                    {articles.map((v, i) => (
-                        <ArticleItem key={i} {...v} />
-                    ))}
+                {/* Список статей */}
+                <div className="mt-[20px]">
+                    {articles.length === 0 ? (
+                        <div className="text-liquid-light text-[16px]">
+                            Пока нет статей
+                        </div>
+                    ) : (
+                        articles.map((v) => <ArticleItem key={v.id} {...v} />)
+                    )}
                 </div>
 
-                <div>pages</div>
+                {/* Пагинация (пока заглушка) */}
+                <div className="mt-[20px] text-liquid-light text-[14px]">
+                    pages
+                </div>
             </div>
         </div>
     );