diff --git a/webclient/src/App.js b/webclient/src/App.js index 1363295..7b4d8da 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -1,5 +1,6 @@ import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; +import localForage from 'localforage'; import './Style-light.css'; import './Style-dark.css'; import './fonts/Fonts.css'; @@ -17,6 +18,12 @@ class App extends React.Component { this.state = { theme: localStorage.getItem('theme') || '', }; + + this.cache = {}; + } + + updateCache = (key, value) => { + this.cache[key] = value; } light() { @@ -29,6 +36,15 @@ class App extends React.Component { localStorage.setItem('theme', 'dark'); } + componentDidMount() { + if (!this.cache.length) { + localForage.iterate((value, key) => { + this.updateCache(key, value); + }); + console.log('loaded cache from localforage'); + } + } + render() { const theme = this.state.theme; document.body.style.backgroundColor = theme === 'dark' ? '#000' : '#eeeeee'; @@ -46,12 +62,12 @@ class App extends React.Component { - + } /> - +
} /> - + } /> diff --git a/webclient/src/Article.js b/webclient/src/Article.js index 2cbcd80..109b05b 100644 --- a/webclient/src/Article.js +++ b/webclient/src/Article.js @@ -8,8 +8,13 @@ class Article extends React.Component { constructor(props) { super(props); + const id = this.props.match.params.id; + const cache = this.props.cache; + + if (id in cache) console.log('cache hit'); + this.state = { - story: false, + story: cache[id] || false, error: false, }; } diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js index 5997cbc..fb8442d 100644 --- a/webclient/src/Comments.js +++ b/webclient/src/Comments.js @@ -10,12 +10,17 @@ class Article extends React.Component { constructor(props) { super(props); + const id = this.props.match.params.id; + const cache = this.props.cache; + + if (id in cache) console.log('cache hit'); + this.state = { - story: false, + story: cache[id] || false, error: false, }; } - + componentDidMount() { const id = this.props.match.params.id; diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js index 1ced433..c710264 100644 --- a/webclient/src/Feed.js +++ b/webclient/src/Feed.js @@ -33,6 +33,7 @@ class Feed extends React.Component { .then(result => { localForage.setItem(x.id, result.story) .then(console.log('preloaded', x.id, x.title)); + this.props.updateCache(x.id, result.story); }, error => {} ); });