Reorganize admin components to help bundling

web/components/admin/NewsFeed.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable camelcase */
+/* eslint-disable react/no-danger */
+import React, { useState, useEffect, FC } from 'react';
+import { Collapse, Typography, Skeleton } from 'antd';
+import format from 'date-fns/format';
+
+import { fetchExternalData } from '../../utils/apis';
+
+const { Panel } = Collapse;
+const { Title, Link } = Typography;
+
+const OWNCAST_FEED_URL = 'https://owncast.online/news/index.json';
+const OWNCAST_BASE_URL = 'https://owncast.online';
+
+export type ArticleProps = {
+  title: string;
+  url: string;
+  content_html: string;
+  date_published: string;
+};
+
+const ArticleItem: FC<ArticleProps> = ({
+  title,
+  url,
+  content_html: content,
+  date_published: date,
+}) => {
+  const dateObject = new Date(date);
+  const dateString = format(dateObject, 'MMM dd, yyyy, HH:mm');
+  return (
+    <article>
+      <Collapse>
+        <Panel header={title} key={url}>
+          <p className="timestamp">
+            {dateString} (
+            <Link href={`${OWNCAST_BASE_URL}${url}`} target="_blank" rel="noopener noreferrer">
+              Link
+            </Link>
+            )
+          </p>
+          <div dangerouslySetInnerHTML={{ __html: content }} />
+        </Panel>
+      </Collapse>
+    </article>
+  );
+};
+
+export const NewsFeed = () => {
+  const [feed, setFeed] = useState<ArticleProps[]>([]);
+  const [loading, setLoading] = useState<Boolean>(true);
+
+  const getFeed = async () => {
+    setLoading(false);
+
+    try {
+      const result = await fetchExternalData(OWNCAST_FEED_URL);
+      if (result?.items.length > 0) {
+        setFeed(result.items);
+      }
+    } catch (error) {
+      console.log('==== error', error);
+    }
+  };
+
+  useEffect(() => {
+    getFeed();
+  }, []);
+
+  const loadingSpinner = loading ? <Skeleton loading active /> : null;
+  const noNews = !loading && feed.length === 0 ? <div>No news.</div> : null;
+
+  return (
+    <section className="news-feed form-module">
+      <Title level={2}>News &amp; Updates from Owncast</Title>
+      {loadingSpinner}
+      {feed.map(item => (
+        <ArticleItem {...item} key={item.url} />
+      ))}
+
+      {noNews}
+    </section>
+  );
+};