many new

src/pages/News/AllNews.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Loading from "../../ui/Loading";
+import {fetchNews} from "../../api/news";
+import NewsPost from "../../ui/NewsPost/NewsPost";
+import {Link} from "react-router-dom";
+
+type State = {
+    news: PostType[]
+}
+
+class AllNews extends React.Component<{}, State> {
+    state: State = {
+        news: []
+    };
+
+    componentDidMount() {
+        document.title = 'Новости';
+        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>
+                {news.map(post => (
+                    <Link key={post.id} to={`/post/${post.id}`}>
+                        <NewsPost {...post} />
+                    </Link>
+                ))}
+            </div>
+        );
+    }
+}
+
+export default AllNews;