many new

src/pages/Main/News.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {fetchNews} from "../../api/news";
+import Loading from "../../ui/Loading";
+import {Link} from "react-router-dom";
+import NewsPost from "../../ui/NewsPost/NewsPost";
+
+type State = {
+    news: PostType[]
+}
+
+class News extends React.Component<{}, State> {
+    state: State = {
+        news: []
+    };
+
+    componentDidMount() {
+        fetchNews().then((news: PostType[]) => {
+            news.forEach(p => p.date = new Date(p.date));
+            this.setState({ news })
+        });
+    }
+
+    render() {
+        const { news } = this.state;
+
+        if(news.length === 0) return <Loading/>;
+        return (
+            <div className="News">
+                <div className="News__Title">
+                    <div>Новости</div>
+                    <Link to={'/news'}>Все новости</Link>
+                </div>
+                {news.slice(0, 3).map(post => (
+                    <Link key={post.id} to={`/news/${post.id}`}>
+                        <NewsPost {...post} />
+                    </Link>
+                ))}
+            </div>
+        );
+    }
+}
+
+export default News;