From 0ff8df44cb3b8d25ca8e3dd977c5d78415ab0f06 Mon Sep 17 00:00:00 2001
From: Ivan Velev <vanecat@gmail.com>
Date: Sat, 5 Feb 2022 17:08:03 -0800
Subject: [PATCH] vue app init: simplified logic in order to facilitate
 loader/progress UI and loader simulator to test various scenarios update: 1.
 use ONE method to set current replay/snapshot (do NOT use a second way: e.g.
 config.initialView to set initial replay! BAD!) 2. use ONE method to set app
 data AND current snapshot (regardless of whether it's from a URL re-load,
 from an iframe bubble-URL change load) 3. make init app method deal ONLY with
 app init and move data-setter into another (see 2.) 4. on VUE APP INIT: add
 specific data-set method

---
 pywb/vueui/src/App.vue  | 35 +++++++++++++++++------------------
 pywb/vueui/src/index.js | 31 +++++++++++++------------------
 2 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/pywb/vueui/src/App.vue b/pywb/vueui/src/App.vue
index cbe890c3..b4ef283c 100644
--- a/pywb/vueui/src/App.vue
+++ b/pywb/vueui/src/App.vue
@@ -67,7 +67,7 @@ export default {
       currentPeriod: null,
       currentSnapshot: null,
       msgs: [],
-      showFullView: false,
+      showFullView: true,
       showTimelineView: true,
       maxTimelineZoomLevel: PywbPeriod.Type.day,
       config: {
@@ -79,7 +79,6 @@ export default {
   },
   components: {Timeline, TimelineBreadcrumbs, CalendarYear},
   mounted: function() {
-    this.init();
   },
   computed: {
     sessionStorageUrlKey() {
@@ -133,21 +132,15 @@ export default {
         window.location.href = this.config.prefix + "*/" + newUrl;
       }
     },
-    init() {
-      this.config.url = this.config.initialView.url;
-      if (this.config.initialView.title) {
-        this.config.title = this.config.initialView.title;
-      }
-      if (this.config.initialView.timestamp === undefined) {
-        this.showFullView = true;
-        this.showTimelineView = true;
-      } else {
-        this.showFullView = false;
-        this.showTimelineView = true;
-        if (this.currentPeriod.children.length) {
-          this.setSnapshot(this.config.initialView);
-        }
-      }
+    setData(/** @type {PywbData} data */ data) {
+      // mark app as DONE loading (i.e. NOT loading)
+      this.isLoading = false;
+
+      // data-set will usually happen at App INIT (from parent caller)
+      this.$set(this, "snapshots", data.snapshots);
+      this.$set(this, "currentPeriod", data.timeline);
+
+      // get last-saved current period from previous page/app refresh (if there was such)
       if (window.sessionStorage) {
         const currentPeriodId = window.sessionStorage.getItem(this.sessionStorageUrlKey);
         if (currentPeriodId) {
@@ -159,10 +152,16 @@ export default {
       }
     },
     setSnapshot(view) {
-      // convert to snapshot objec to support proper rendering of time/date
+      // turn off calendar (aka full) view
+      this.showFullView = false;
+
+      // convert to snapshot object to support proper rendering of time/date
       const snapshot = new PywbSnapshot(view, 0);
+
+      // set config current URL and title
       this.config.url = view.url;
       this.config.title = view.title;
+
       this.gotoSnapshot(snapshot);
     }
   }
diff --git a/pywb/vueui/src/index.js b/pywb/vueui/src/index.js
index 2fac63c1..4d430583 100644
--- a/pywb/vueui/src/index.js
+++ b/pywb/vueui/src/index.js
@@ -43,23 +43,17 @@ class CDXLoader {
       throw new Error("No query URL specified");
     }
 
-    this.opts.initialView = {url, timestamp};
-
-    this.opts.logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
+    const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
 
+    this.app = this.initApp({logoImg, url});
     this.loadCDX(queryURL).then((cdxList) => {
-      this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
+      this.setAppData(cdxList, timestamp ? {url, timestamp}:null);
     });
   }
 
-  initApp(data, config = {}, loadCallback = null) {
+  initApp(config = {}) {
     const app = new Vue(appData);
 
-    const pywbData = new PywbData(data);
-
-    app.$set(app, "snapshots", pywbData.snapshots);
-    app.$set(app, "currentPeriod", pywbData.timeline);
-
     app.$set(app, "config", {...app.config, ...config, prefix: this.prefix});
 
     app.$mount("#app");
@@ -75,9 +69,8 @@ class CDXLoader {
     //     };
     //   }
     // });
-    if (loadCallback) {
-      app.$on("show-snapshot", loadCallback);
-    }
+
+    app.$on("show-snapshot", this.loadSnapshot.bind(this));
 
     return app;
   }
@@ -90,13 +83,15 @@ class CDXLoader {
 
     const cdxList = await this.loadCDX(queryURL);
 
-    const pywbData = new PywbData(cdxList);
+    this.setAppData(cdxList, {url, timestamp});
+  }
 
-    const app = this.app;
-    app.$set(app, "snapshots", pywbData.snapshots);
-    app.$set(app, "currentPeriod", pywbData.timeline);
+  setAppData(cdxList, snapshot=null) {
+    this.app.setData(new PywbData(cdxList));
 
-    app.setSnapshot({url, timestamp});
+    if (snapshot) {
+      this.app.setSnapshot(snapshot);
+    }
   }
 
   async loadCDX(queryURL) {