Added some example front-ends in react

2021-02-03 12:28:32 +11:00
parent aeadf6dd46
commit 74b72527ee
3 changed files with 222 additions and 0 deletions
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import dateFormat from 'dateformat';
+
+//DOCS: props.uri is the address of a live news-server
+const NewsFeed = props => {
+	const [articles, setArticles] = useState(null);
+
+	if (!articles) {
+		fetch(props.uri, { method: 'GET' })
+			.then(a => {
+				if (!a.ok) {
+					throw `Network error ${a.status}: ${a.statusText} ${a.url}`;
+				}
+				return a.json();
+			})
+			.then(a => setArticles(a))
+			.catch(e => console.error(e))
+		;
+	}
+
+	return (
+		<div>
+			<h1 className='centered'>News Feed</h1>
+			{(articles || []).map((article, index) => {
+				return (
+					<div key={index}>
+						<hr />
+						<h2>{article.title}</h2>
+						<p>Written by <strong>{article.author}</strong>, {
+							article.edits > 0 ?
+							<span>Last Updated {dateFormat(articles.updatedAt, 'fullDate')} ({`${article.edits} edit${article.edits > 1 ? 's': ''}`})</span> :
+							<span>Published {dateFormat(articles.createdAt, 'fullDate')}</span>
+						}</p>
+						<p style={{whiteSpace: 'pre-wrap'}}>{article.body}</p>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default NewsFeed;