Cache articles in memory for speed

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 {
 						<Route path='/(|search)' component={Search} />
 					</div>
 
-					<Route path='/' exact component={Feed} />
+					<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
 					<Switch>
 						<Route path='/search' component={Results} />
-						<Route path='/:id' exact component={Article} />
+						<Route path='/:id' exact render={(props) => <Article {...props} cache={this.cache} />} />
 					</Switch>
-					<Route path='/:id/c' exact component={Comments} />
+					<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
 
 					<ScrollToTop />
 				</Router>

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,
 		};
 	}

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;
 

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 => {}
 							);
 						});