Fetch page content... as penguins attack!

This commit is contained in:
Dorian 2019-08-02 21:35:21 -04:00
parent 30eb6a4914
commit 40fe2841dc
1 changed files with 15 additions and 4 deletions

View File

@ -33,6 +33,7 @@ export class App extends React.Component {
}
const UPDATE_ROUTE_EVENT = "rookeries-router-push";
const PAGE_CONTENT_FETCHED_EVENT = "rookeries-content-fetched";
export class RookeriesApp extends HTMLElement {
static get observedAttributes() {
@ -45,7 +46,8 @@ export class RookeriesApp extends HTMLElement {
connectedCallback() {
this.render();
this.addEventListener(UPDATE_ROUTE_EVENT, this.historyChanged);
this.addEventListener(UPDATE_ROUTE_EVENT, this.render);
this.addEventListener(PAGE_CONTENT_FETCHED_EVENT, this.render);
}
static isLocalLink(url) {
@ -71,8 +73,16 @@ export class RookeriesApp extends HTMLElement {
rookeriesApp.dispatchEvent(new Event(UPDATE_ROUTE_EVENT));
}
historyChanged() {
this.render();
async fetchPageContent(pageSlug) {
const response = await fetch(`/api/pages/${pageSlug}.json`);
const json = await response.json();
const articleContent = Reflect.get(json, "content");
if (articleContent === undefined) {
throw Error(`The article content for the page "${pageSlug}" is undefined`);
}
window.localStorage.setItem(pageSlug, articleContent);
}
render() {
@ -95,7 +105,8 @@ export class RookeriesApp extends HTMLElement {
const pageContent = window.localStorage.getItem(currentPage);
if (!pageContent) {
// TODO: Fetch the page...
// TODO: Remember to dispatch to trigger a re-render.
this.fetchPageContent(pageContent).then();
}
const content = pageContent || `<h1>Loading...</h1>`;