qotnews/webclient/src/Article.js

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import localForage from 'localforage';
import { sourceLink, infoLine, ToggleDot } from './utils.js';

const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];

function Article({ cache }) {
	const { id } = useParams();

	if (id in cache) console.log('cache hit');

	const [story, setStory] = useState(cache[id] || false);
	const [error, setError] = useState('');
	const [pConv, setPConv] = useState([]);
	const [copyButtonText, setCopyButtonText] = useState('\ue92c');

	useEffect(() => {
		localForage.getItem(id)
			.then(
				(value) => {
					if (value) {
						setStory(value);
					}
				}
			);

		fetch('/api/' + id)
			.then(res => {
				if (!res.ok) {
					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
				}
				return res.json();
			})
			.then(
				(result) => {
					setStory(result.story);
					localForage.setItem(id, result.story);
				},
				(error) => {
					const errorMessage = `Failed to fetch new article content (ID: ${id}). Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
					setError(errorMessage);
				}
			);
	}, [id]);

	const copyLink = () => {
		navigator.clipboard.writeText(`${story.title}:\n${window.location.href}`).then(() => {
			setCopyButtonText('\uea10');
			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
		}, () => {
			setCopyButtonText('\uea0f');
			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
		});
	};

	const pConvert = (n) => {
		setPConv(prevPConv => [...prevPConv, n]);
	};

	const isCodeBlock = (v) => {
		return v.localName === 'pre' || v.localName === 'code' || (v.firstElementChild && v.firstElementChild.localName === 'code');
	};

	const renderNodes = (nodes, keyPrefix = '') => {
		return Array.from(nodes).map((v, k) => {
			const key = `${keyPrefix}${k}`;
			if (pConv.includes(key)) {
				return (
					<React.Fragment key={key}>
						{v.textContent.split('\n\n').map((x, i) =>
							<p key={i}>{x}</p>
						)}
					</React.Fragment>
				);
			}

			if (v.nodeName === '#text') {
				// Only wrap top-level text nodes in <p>
				if (keyPrefix === '' && v.data.trim() !== '') {
					return <p key={key}>{v.data}</p>;
				}
				return v.data;
			}

			if (v.nodeType !== Node.ELEMENT_NODE) {
				return null;
			}

			const Tag = v.localName;
			if (isCodeBlock(v)) {
				return (
					<React.Fragment key={key}>
						<Tag dangerouslySetInnerHTML={{ __html: v.innerHTML }} />
						<button onClick={() => pConvert(key)}>Convert Code to Paragraph</button>
					</React.Fragment>
				);
			}

			const props = { key: key };
			if (v.hasAttributes()) {
				for (const attr of v.attributes) {
					const name = attr.name === 'class' ? 'className' : attr.name;
					props[name] = attr.value;
				}
			}

			if (VOID_ELEMENTS.includes(Tag)) {
				return <Tag {...props} />;
			}

			return (
				<Tag {...props}>
					{renderNodes(v.childNodes, `${key}-`)}
				</Tag>
			);
		});
	};

	const nodes = (s) => {
		if (s && s.text) {
			let div = document.createElement('div');
			div.innerHTML = s.text;
			return div.childNodes;
		}
		return null;
	};

	const storyNodes = nodes(story);

	return (
		<div className='article-container'>
			{error &&
				<details style={{marginBottom: '1rem'}}>
					<summary>Connection error? Click to expand.</summary>
					<p>{error}</p>
					{story && <p>Loaded article from cache.</p>}
				</details>
			}
			{story ?
				<div className='article'>
					<Helmet>
						<title>{story.title} | QotNews</title>
						<meta name="robots" content="noindex" />
					</Helmet>

					<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>

					<div className='info'>
						Source: {sourceLink(story)}
					</div>

					{infoLine(story)}

					{storyNodes ?
						<div className='story-text'>
							{renderNodes(storyNodes)}
						</div>
					:
						<p>Problem getting article :(</p>
					}
				</div>
			:
				<p>Loading...</p>
			}
			<ToggleDot id={id} article={false} />
		</div>
	);
}

export default Article;