forked from tanner/qotnews
96 lines
2.6 KiB
JavaScript
96 lines
2.6 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(
|
|
async (result) => {
|
|
const newApiStories = result.stories;
|
|
|
|
const updated = !stories || !stories.length || stories[0].id !== newApiStories[0].id;
|
|
console.log('New stories available:', updated);
|
|
|
|
if (!updated) return;
|
|
|
|
const existingStoryIds = new Set(stories ? stories.map(s => s.id) : []);
|
|
|
|
for (const newStory of [...newApiStories].reverse()) {
|
|
if (existingStoryIds.has(newStory.id)) {
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
const storyRes = await fetch('/api/' + newStory.id);
|
|
if (!storyRes.ok) throw new Error('Story fetch failed');
|
|
const storyResult = await storyRes.json();
|
|
const fullStory = storyResult.story;
|
|
|
|
await localForage.setItem(fullStory.id, fullStory);
|
|
console.log('preloaded', fullStory.id, fullStory.title);
|
|
updateCache(fullStory.id, fullStory);
|
|
|
|
setStories(prevStories => {
|
|
const currentStories = Array.isArray(prevStories) ? prevStories : [];
|
|
const updatedStories = [newStory, ...currentStories];
|
|
const poppedStory = updatedStories.pop();
|
|
|
|
if (poppedStory) {
|
|
localForage.removeItem(poppedStory.id);
|
|
}
|
|
|
|
localStorage.setItem('stories', JSON.stringify(updatedStories));
|
|
return updatedStories;
|
|
});
|
|
} catch (error) {
|
|
console.log('Skipping story due to fetch error', newStory.id, 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;
|