client: cache post list page data in history

2 files changed, 36 insertions, 6 deletions

diff --git a/client/js/models/abstract_list.js b/client/js/models/abstract_list.js
index 7505905..754b8e2 100644
--- a/client/js/models/abstract_list.js
+++ b/client/js/models/abstract_list.js
@@ -10,6 +10,7 @@ class AbstractList extends events.EventTarget {
 
     static fromResponse(response) {
         const ret = new this();
+        ret.raw_data = response;
         for (let item of response) {
             const addedItem = this._itemClass.fromResponse(item);
             if (addedItem.addEventListener) {
diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js
index d728edc..aad9ea3 100644
--- a/client/js/views/endless_page_view.js
+++ b/client/js/views/endless_page_view.js
@@ -1,5 +1,6 @@
 "use strict";
 
+const PostList = require("../models/post_list.js");
 const router = require("../router.js");
 const views = require("../util/views.js");
 
@@ -38,13 +39,18 @@ class EndlessPageView {
         this.defaultLimit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
 
         const initialOffset = parseInt(ctx.parameters.offset || 0);
-        this._loadPage(ctx, initialOffset, this.defaultLimit, true).then(
-            (pageNode) => {
-                if (initialOffset !== 0) {
-                    pageNode.scrollIntoView();
+        if (ctx.browserState.cachedPageData) {
+            this._loadCachedPages(ctx);
+        } else {
+            ctx.browserState.cachedPageData = {};
+            this._loadPage(ctx, initialOffset, this.defaultLimit, true).then(
+                (pageNode) => {
+                    if (initialOffset !== 0) {
+                        pageNode.scrollIntoView();
+                    }
                 }
-            }
-        );
+            );
+        }
 
         this._timeout = window.setInterval(() => {
             window.requestAnimationFrame(() => {
@@ -138,6 +144,22 @@ class EndlessPageView {
         }
     }
 
+    _loadCachedPages(ctx) {
+        // k-v map of page offset to raw response
+        const pageData = ctx.browserState.cachedPageData;
+        window.requestAnimationFrame(() => {
+            for (const [offset, data] of Object.entries(pageData)) {
+                const response = {
+                    offset: data.offset,
+                    limit: data.limit,
+                    total: data.total,
+                    results: PostList.fromResponse(data.raw_data)
+                };
+                this._renderPage(ctx, true, response);
+            }
+        });
+    }
+
     _loadPage(ctx, offset, limit, append) {
         this._runningRequests++;
         return new Promise((resolve, reject) => {
@@ -147,6 +169,13 @@ class EndlessPageView {
                         this._runningRequests--;
                         return Promise.reject();
                     }
+                    // Need to extract raw_data, otherwise it can't be stored in history
+                    ctx.browserState.cachedPageData[offset] = {
+                        offset: response.offset,
+                        limit: response.limit,
+                        total: response.total,
+                        raw_data: response.results.raw_data,
+                    };
                     window.requestAnimationFrame(() => {
                         let pageNode = this._renderPage(ctx, append, response);
                         this._runningRequests--;