103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
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';
|
|
|
|
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(false);
|
|
const [pConv, setPConv] = useState([]);
|
|
|
|
useEffect(() => {
|
|
localForage.getItem(id)
|
|
.then(
|
|
(value) => {
|
|
if (value) {
|
|
setStory(value);
|
|
}
|
|
}
|
|
);
|
|
|
|
fetch('/api/' + id)
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => {
|
|
setStory(result.story);
|
|
localForage.setItem(id, result.story);
|
|
},
|
|
(error) => {
|
|
setError(true);
|
|
}
|
|
);
|
|
}, [id]);
|
|
|
|
const pConvert = (n) => {
|
|
setPConv(prevPConv => [...prevPConv, n]);
|
|
};
|
|
|
|
const nodes = useMemo(() => {
|
|
if (story && story.text) {
|
|
let div = document.createElement('div');
|
|
div.innerHTML = story.text;
|
|
return div.childNodes;
|
|
}
|
|
return null;
|
|
}, [story]);
|
|
|
|
return (
|
|
<div className='article-container'>
|
|
{error && <p>Connection error?</p>}
|
|
{story ?
|
|
<div className='article'>
|
|
<Helmet>
|
|
<title>{story.title} | QotNews</title>
|
|
<meta name="robots" content="noindex" />
|
|
</Helmet>
|
|
|
|
<h1>{story.title}</h1>
|
|
|
|
<div className='info'>
|
|
Source: {sourceLink(story)}
|
|
</div>
|
|
|
|
{infoLine(story)}
|
|
|
|
{nodes ?
|
|
<div className='story-text'>
|
|
{Object.entries(nodes).map(([k, v]) =>
|
|
pConv.includes(k) ?
|
|
<React.Fragment key={k}>
|
|
{v.innerHTML.split('\n\n').map((x, i) =>
|
|
<p key={i} dangerouslySetInnerHTML={{ __html: x }} />
|
|
)}
|
|
</React.Fragment>
|
|
:
|
|
(v.nodeName === '#text' ?
|
|
<p key={k}>{v.data}</p>
|
|
:
|
|
<React.Fragment key={k}>
|
|
<v.localName dangerouslySetInnerHTML={v.innerHTML ? { __html: v.innerHTML } : null} />
|
|
{v.localName === 'pre' && <button onClick={() => pConvert(k)}>Convert Code to Paragraph</button>}
|
|
</React.Fragment>
|
|
)
|
|
)}
|
|
</div>
|
|
:
|
|
<p>Problem getting article :(</p>
|
|
}
|
|
</div>
|
|
:
|
|
<p>loading...</p>
|
|
}
|
|
<ToggleDot id={id} article={false} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Article;
|