Working on the news feed

README.md

@@ -30,25 +30,26 @@ TODO: more info.
 
 # TODO list
 
-- Account system
+- ~~Account system~~
 	- ~~sign up~~
 	- ~~validate email~~
 	- ~~login (with cookies)~~
 	- ~~logout (with cookies)~~
 	- ~~account deletion~~
 	- ~~annoying "This site uses cookies" message~~
+- Administration Panel
+	- ~~Exclusive to admin accounts~~
+	- inspect aggregate user data
 - News blog system (microservice)
 	- ~~build the microservice to provide the news feed~~
-	- access an external news feed
+	- ~~access an external news feed~~
-	- built-in panel for publishing and editing news (admin panel)
+	- admin panel for publishing and editing news
-- Administration Panel
+	- "created at" and "updated at" in the response
-	- Exclusive to admin accounts
+- Chat system (microservice)
-	- ban/unban accounts
-	- inspect user data
-- Chat system (microservice?)
 	- Based on usernames
 	- Chat logs
 	- Direct Messages & rooms
+	- admin panel banning/unbanning (currently borked)
 - Achievements?
 - Privacy policy & data collection notice
 

client/components/pages/admin.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { useCookies } from 'react-cookie';
 
-import BannedEmails from '../panels/banned-emails';
+//import BannedEmails from '../panels/banned-emails';
 import NewsPublisher from '../panels/news-publisher';
 
 const Admin = props => {
@@ -16,7 +16,6 @@ const Admin = props => {
 	return (
 		<div className='page'>
 			<h1 className='centered'>Administration</h1>
-			<BannedEmails />
 			<NewsPublisher />
 		</div>
 	);

client/components/pages/homepage.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
+import NewsFeed from '../panels/news-feed';
+
 const HomePage = props => {
+	//TODO: move the URIs into the config files
 	return (
 		<div className='page'>
 			<p>This is the MERN template homepage.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<NewsFeed uri='http://dev-news.eggtrainer.com:3100/news' />
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 		</div>
 	);
 };

client/components/panels/news-feed.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+//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>
+			<h2 className='centered'>News Feed</h2>
+			{(articles || []).map((article, index) => {
+				return (
+					<div key={index}>
+						<hr />
+						<h2>{article.title}</h2>
+						<h3>{article.author}</h3>
+						{ article.edits > 0 ? <p><em>{`${article.edits} edit${article.edits > 1 ? 's': ''}`}</em></p> : null }
+						<p>{article.body}</p>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default NewsFeed;