From a83a896dde9bd5500075b703056b8846134c6759 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Thu, 14 Apr 2016 00:41:02 +0200
Subject: [PATCH] client/pager: cache state between navigations

---
 client/js/controllers/users_controller.js |  1 +
 client/js/views/endless_page_view.js      | 43 ++++++++++++++++-------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/client/js/controllers/users_controller.js b/client/js/controllers/users_controller.js
index 07d6f177..e9cf54c8 100644
--- a/client/js/controllers/users_controller.js
+++ b/client/js/controllers/users_controller.js
@@ -53,6 +53,7 @@ class UsersController {
         topNavController.activate('users');
 
         pageController.run({
+            state: ctx.state,
             requestPage: page => {
                 return api.get(
                     '/users/?query={text}&page={page}&pageSize=30'.format({
diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js
index dbe50037..2fda55ae 100644
--- a/client/js/views/endless_page_view.js
+++ b/client/js/views/endless_page_view.js
@@ -5,12 +5,6 @@ const events = require('../events.js');
 const misc = require('../util/misc.js');
 const views = require('../util/views.js');
 
-function removeConsecutiveDuplicates(a) {
-    return a.filter((item, pos, ary) => {
-        return !pos || item != ary[pos - 1];
-    });
-}
-
 class EndlessPageView {
     constructor() {
         this.holderTemplate = views.getTemplate('endless-pager');
@@ -26,11 +20,19 @@ class EndlessPageView {
 
         const threshold = window.innerHeight / 3;
 
-        this.minPageShown = null;
-        this.maxPageShown = null;
-        this.totalPages = null;
+        if (ctx.state && ctx.state.html) {
+            console.log('Loading from state');
+            this.minPageShown = ctx.state.minPageShown;
+            this.maxPageShown = ctx.state.maxPageShown;
+            this.totalPages = ctx.state.totalPages;
+            this.currentPage = ctx.state.currentPage;
+        } else {
+            this.minPageShown = null;
+            this.maxPageShown = null;
+            this.totalPages = null;
+            this.currentPage = null;
+        }
         this.fetching = false;
-        this.currentPage = null;
 
         this.updater = () => {
             let topPage = null;
@@ -45,7 +47,15 @@ class EndlessPageView {
             if (topPage !== this.currentPage) {
                 page.replace(
                     ctx.clientUrl.format({page: topPage}),
-                    null,
+                    {
+                        minPageShown: this.minPageShown,
+                        maxPageShown: this.maxPageShown,
+                        totalPages: this.totalPages,
+                        currentPage: this.currentPage,
+                        html: pagesHolder.innerHTML,
+                        scrollX: window.scrollX,
+                        scrollY: window.scrollY,
+                    },
                     false,
                     false);
                 this.currentPage = topPage;
@@ -66,7 +76,12 @@ class EndlessPageView {
             }
         };
 
-        this.loadPage(pagesHolder, ctx, ctx.initialPage, true);
+        if (ctx.state && ctx.state.html) {
+            pagesHolder.innerHTML = ctx.state.html;
+            window.scroll(ctx.state.scrollX, ctx.state.scrollY);
+        } else {
+            this.loadPage(pagesHolder, ctx, ctx.initialPage, true);
+        }
         window.addEventListener('scroll', this.updater, true);
     }
 
@@ -102,6 +117,10 @@ class EndlessPageView {
                     pagesHolder.appendChild(pageNode);
                 } else {
                     pagesHolder.prependChild(pageNode);
+
+                    // note: with probability of 75%, if the user has scrolled
+                    // with a mouse wheel, chrome 49 doesn't give a slightest
+                    // fuck about this and loads all the way to page 1 at once
                     window.scroll(
                         window.scrollX,
                         window.scrollY + pageNode.offsetHeight);