articles view

src/views/home/articles/ArticleItem.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
 
 export interface ArticleItemProps {
@@ -7,14 +8,18 @@ export interface ArticleItemProps {
 }
 
 const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
+    const navigate = useNavigate();
     return (
         <div
             className={cn(
                 'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
                 // type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
                 'gap-[20px] px-[20px] py-[10px] box-border ',
-                'border-b-[1px] border-b-liquid-lighter',
+                'border-b-[1px] border-b-liquid-lighter cursor-pointer hover:bg-liquid-lighter transition-all duration-300',
             )}
+            onClick={() => {
+                navigate(`/article/${id}`);
+            }}
         >
             <div className="h-[23px] flex ">
                 <div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">

src/views/home/articles/Articles.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { SecondaryButton } from '../../../components/button/SecondaryButton';
-import { useAppDispatch } from '../../../redux/hooks';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import ArticleItem from './ArticleItem';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { useNavigate } from 'react-router-dom';
+import { fetchArticles } from '../../../redux/slices/articles';
 
 export interface Article {
     id: number;
@@ -15,123 +16,16 @@ const Articles = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
-    const articles: Article[] = [
-        {
-            id: 1,
-            name: 'Todo List App',
-            tags: ['Sertificated', 'state', 'list'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-        {
-            id: 2,
-            name: 'Search Filter Component',
-            tags: ['filter', 'props', 'hooks'],
-        },
-        {
-            id: 3,
-            name: 'User Card List',
-            tags: ['components', 'props', 'array'],
-        },
-        {
-            id: 4,
-            name: 'Theme Switcher',
-            tags: ['Sertificated', 'theme', 'hooks'],
-        },
-    ];
+    const articles = useAppSelector((state) => state.articles.articles);
+    const status = useAppSelector((state) => state.articles.statuses.fetchAll);
 
     useEffect(() => {
         dispatch(setMenuActivePage('articles'));
+        dispatch(fetchArticles({}));
     }, []);
 
+    if (status == 'loading') return <div>Загрузка...</div>;
+
     return (
         <div className=" h-full w-full box-border p-[20px] pt-[20px]">
             <div className="h-full box-border">