75 lines
1.8 KiB
JavaScript
75 lines
1.8 KiB
JavaScript
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';
|
|
|
|
function Feed({ updateCache }) {
|
|
const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch('/api')
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => {
|
|
const updated = !stories || stories[0].id !== result.stories[0].id;
|
|
console.log('updated:', updated);
|
|
|
|
setStories(result.stories);
|
|
localStorage.setItem('stories', JSON.stringify(result.stories));
|
|
|
|
if (updated) {
|
|
localForage.clear();
|
|
result.stories.forEach((x, i) => {
|
|
fetch('/api/' + x.id)
|
|
.then(res => res.json())
|
|
.then(result => {
|
|
localForage.setItem(x.id, result.story)
|
|
.then(console.log('preloaded', x.id, x.title));
|
|
updateCache(x.id, result.story);
|
|
}, error => {}
|
|
);
|
|
});
|
|
}
|
|
},
|
|
(error) => {
|
|
setError(true);
|
|
}
|
|
);
|
|
}, [updateCache]);
|
|
|
|
return (
|
|
<div className='container'>
|
|
<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>
|
|
|
|
<span className='source'>
|
|
({sourceLink(x)})
|
|
</span>
|
|
</div>
|
|
|
|
{infoLine(x)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
:
|
|
<p>loading...</p>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Feed;
|