refactor: Refactor Feed component to functional with hooks

webclient/src/Feed.js

@@ -1,28 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, logos } from './utils.js';
 
-class Feed extends React.Component {
+function Feed({ updateCache }) {
-	constructor(props) {
+	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
-		super(props);
+	const [error, setError] = useState(false);
 
-		this.state = {
+	useEffect(() => {
-			stories: JSON.parse(localStorage.getItem('stories')) || false,
-			error: false,
-		};
-	}
-
-	componentDidMount() {
 		fetch('/api')
 			.then(res => res.json())
 			.then(
 				(result) => {
-					const updated = !this.state.stories || this.state.stories[0].id !== result.stories[0].id;
+					const updated = !stories || stories[0].id !== result.stories[0].id;
 					console.log('updated:', updated);
 
-					this.setState({ stories: result.stories });
+					setStories(result.stories);
 					localStorage.setItem('stories', JSON.stringify(result.stories));
 
 					if (updated) {
@@ -33,53 +27,48 @@ class Feed extends React.Component {
 								.then(result => {
 									localForage.setItem(x.id, result.story)
 										.then(console.log('preloaded', x.id, x.title));
-									this.props.updateCache(x.id, result.story);
+									updateCache(x.id, result.story);
 								}, error => {}
 							);
 						});
 					}
 				},
 				(error) => {
-					this.setState({ error: true });
+					setError(true);
 				}
 			);
-	}
+	}, [updateCache]);
 
-	render() {
+	return (
-		const stories = this.state.stories;
+		<div className='container'>
-		const error = this.state.error;
+			<Helmet>
+				<title>QotNews</title>
+				<meta name="robots" content="index" />
+			</Helmet>
+			{error && <p>Connection error?</p>}
+			{stories ?
+				<div>
+					{stories.map(x =>
+						<div className='item' key={x.id}>
+							<div className='title'>
+								<Link className='link' to={'/' + x.id}>
+									<img className='source-logo' src={logos[x.source]} alt='source logo' /> {x.title}
+								</Link>
 
-		return (
+								<span className='source'>
-			<div className='container'>
+									({sourceLink(x)})
-				<Helmet>
+								</span>
-					<title>QotNews</title>
-					<meta name="robots" content="index" />
-				</Helmet>
-				{error && <p>Connection error?</p>}
-				{stories ?
-					<div>
-						{stories.map(x =>
-							<div className='item' key={x.id}>
-								<div className='title'>
-									<Link className='link' to={'/' + x.id}>
-										<img className='source-logo' src={logos[x.source]} alt='source logo' /> {x.title}
-									</Link>
-
-									<span className='source'>
-										({sourceLink(x)})
-									</span>
-								</div>
-
-								{infoLine(x)}
 							</div>
-						)}
+
-					</div>
+							{infoLine(x)}
-				:
+						</div>
-					<p>loading...</p>
+					)}
-				}
+				</div>
-			</div>
+			:
-		);
+				<p>loading...</p>
-	}
+			}
+		</div>
+	);
 }
 
 export default Feed;