Ratstail91
1aa047c3d9
Turns out traefik handles port routing, so the project doesn't need to know the news services' port.
49 lines
1.2 KiB
React
49 lines
1.2 KiB
React
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',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*'
|
|
},
|
|
})
|
|
.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;
|