Imported the directory structure from egg trainer

client/pages/panels/news-feed.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect, useRef } from 'react';
+import dateFormat from 'dateformat';
+
+import MarkdownPanel from '../utilities/markdown-panel';
+
+const NewsFeed = props => {
+	const [articles, setArticles] = useState([]);
+	const aborter = useRef(new AbortController()); //BUGFIX: double-renders = double fetches + react update after unmount
+
+	useEffect(() => {
+		//this... um...
+		fetch(`${process.env.NEWS_URI}/news`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Access-Control-Allow-Origin': '*'
+			},
+			signal: aborter.current.signal //oh dear
+		})
+			.then(blob => blob.json())
+			.then(json => setArticles(json))
+			.catch(e => null) //swallow errors
+		;
+
+		return () => aborter.current.abort(); //This is an ugly, ugly solution, but it's the only one that works
+	}, []);
+
+	return (
+		<div className='panel'>
+			<h1 className='text centered'>News Feed</h1>
+			{articles.map((article, index) => {
+				return (
+					<div key={index} className='panel'>
+						<hr />
+						<h2>{article.title}</h2>
+						<br />
+						<p><em>Written by <strong>{article.author}</strong>, {
+							article.edits > 0 ?
+							<span>Last Updated {dateFormat(article.updatedAt, 'fullDate')} ({`${article.edits} edit${article.edits > 1 ? 's': ''}`})</span> :
+							<span>Published {dateFormat(article.createdAt, 'fullDate')}</span>
+						}</em></p>
+						<br />
+						<MarkdownPanel style={{whiteSpace: 'pre-wrap'}} content={article.body} />
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default NewsFeed;