refactor: Refactor Article component to use hooks

webclient/src/Article.js

@@ -1,32 +1,24 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, ToggleDot } from './utils.js';
 
-class Article extends React.Component {
+function Article({ cache }) {
-	constructor(props) {
+	const { id } = useParams();
-		super(props);
-
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
-		const cache = this.props.cache;
 
 	if (id in cache) console.log('cache hit');
 
-		this.state = {
+	const [story, setStory] = useState(cache[id] || false);
-			story: cache[id] || false,
+	const [error, setError] = useState(false);
-			error: false,
+	const [pConv, setPConv] = useState([]);
-			pConv: [],
-		};
-	}
-	
-	componentDidMount() {
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
 
+	useEffect(() => {
 		localForage.getItem(id)
 			.then(
 				(value) => {
 					if (value) {
-						this.setState({ story: value });
+						setStory(value);
 					}
 				}
 			);
@@ -35,31 +27,27 @@ class Article extends React.Component {
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.setState({ story: result.story });
+					setStory(result.story);
 					localForage.setItem(id, result.story);
 				},
 				(error) => {
-					this.setState({ error: true });
+					setError(true);
 				}
 			);
-	}
+	}, [id]);
 
-	pConvert = (n) => {
+	const pConvert = (n) => {
-		this.setState({ pConv: [...this.state.pConv, n]});
+		setPConv(prevPConv => [...prevPConv, n]);
-	}
+	};
 
-	render() {
+	const nodes = useMemo(() => {
-		const id = this.props.match ? this.props.match.params.id : 'CLOL';
+		if (story && story.text) {
-		const story = this.state.story;
-		const error = this.state.error;
-		const pConv = this.state.pConv;
-		let nodes = null;
-
-		if (story.text) {
 			let div = document.createElement('div');
 			div.innerHTML = story.text;
-			nodes = div.childNodes;
+			return div.childNodes;
 		}
+		return null;
+	}, [story]);
 
 	return (
 		<div className='article-container'>
@@ -83,17 +71,19 @@ class Article extends React.Component {
 						<div className='story-text'>
 							{Object.entries(nodes).map(([k, v]) =>
 								pConv.includes(k) ?
-										v.innerHTML.split('\n\n').map(x =>
+									<React.Fragment key={k}>
-											<p dangerouslySetInnerHTML={{ __html: x }} />
+										{v.innerHTML.split('\n\n').map((x, i) =>
-										)
+											<p key={i} dangerouslySetInnerHTML={{ __html: x }} />
+										)}
+									</React.Fragment>
 								:
 									(v.nodeName === '#text' ?
-											<p>{v.data}</p>
+										<p key={k}>{v.data}</p>
 									:
-											<>
+										<React.Fragment key={k}>
 											<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
-												{v.localName == 'pre' && <button onClick={() => this.pConvert(k)}>Convert Code to Paragraph</button>}
+											{v.localName === 'pre' && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
-											</>
+										</React.Fragment>
 									)
 							)}
 						</div>
@@ -107,7 +97,6 @@ class Article extends React.Component {
 			<ToggleDot id={id} article={false} />
 		</div>
 	);
-	}
 }
 
 export default Article;