84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
/* 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 & Updates from Owncast</Title>
|
|
{loadingSpinner}
|
|
{feed.map(item => (
|
|
<ArticleItem {...item} key={item.url} />
|
|
))}
|
|
|
|
{noNews}
|
|
</section>
|
|
);
|
|
};
|