move lastStorageHost to settings localStorage, so its not affected by…

… the new persistence option. Add cache clearing fallback to pwa. Add better indication why a gist failed to fetch
blurymind · Aug 2, 2024 · f89e060 · f89e060
1 parent 50cfab2
commit f89e060
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/src/index.html b/src/index.html
@@ -411,7 +411,7 @@
       <span class="app-title" data-bind="text:`${app.settings.documentType()} syntax`"></span>
       <span class="app-version" data-bind="text:app.version"></span>
       <span class="file-name" data-bind="text:
-      `${data.lastStorageHost()}:${data.editingName()}@${data.editingType()} ${data.isDocumentDirty() ? '*':''}`,
+      `${app.settings.lastStorageHost()}:${data.editingName()}@${data.editingType()} ${data.isDocumentDirty() ? '*':''}`,
       click:app.data.trySaveCurrent"></span>
     </div>
     <div class="title" id="addPwa">🍰Add to Homescreen📲</div>
@@ -632,6 +632,30 @@ <h3>Settings</h3>
   <div class="templates">
   </div>
   <link id="theme-stylesheet" rel="stylesheet" href="./public/themes/dracula.css">
+
+  <script>
+    document.body.addEventListener(
+      "error",
+      (event) => {
+        console.error('ERROR', event)
+        if (event.target && event.target.tagName === "SCRIPT" && event.target.src.startsWith("https://blurymind.github.io/YarnClassic/")) {
+          // if (confirm(`The App has updated and needs to be reloaded to clear cache. Reload? ${event.target.tagName}`) == true) {
+            console.log("RELOAD and clear cache");
+            caches.open("workbox-precache-v2-https://blurymind.github.io/YarnClassic/").then((cache) => {
+              cache.keys().then((keys) => {
+                console.log("Cache keys", keys);
+                keys.forEach(request => {
+                  cache.delete(request);
+                });
+                window.location.href = window.location.href.replace(/#.*$/, '');
+              })
+            });
+          // }
+        }
+      },
+      true
+    );
+  </script>
 </body>
 
 </html>
diff --git a/src/js/classes/app.js b/src/js/classes/app.js
@@ -487,13 +487,13 @@ export var App = function(name, version) {
 
   this.refreshWindowTitle = function() {
     let title = '';
-    if (data.lastStorageHost() === 'LOCAL') {
+    if (app.settings.lastStorageHost() === 'LOCAL') {
       title =
         'Yarn - ' +
         (data.editingPath() || data.editingName()) +
         ' ' +
         (data.isDocumentDirty() ? '*' : '');
-    } else if (data.lastStorageHost() === 'GIST') {
+    } else if (app.settings.lastStorageHost() === 'GIST') {
       title =
         'Gist - ' +
         (data.editingPath() || data.editingName()) +

diff --git a/src/js/classes/data.js b/src/js/classes/data.js
@@ -16,7 +16,6 @@ export const data = {
   editingType: ko.observable('json'),
   editingFolder: ko.observable(null),
   documentHeader: ko.observable(null),
-  lastStorageHost: ko.observable('LOCAL'), // GIST | LOCAL
   lastEditedUnix: ko.observable(new Date()),
   lastSavedUnix: ko.observable(null),
   inkCompiler: null,
@@ -50,7 +49,6 @@ export const data = {
     app.tags([]);
     app.updateNodeLinks();
     app.workspace.warpToNodeByIdx(0);
-    data.lastStorageHost('LOCAL');
     data.isDocumentDirty(true);
     app.refreshWindowTitle();
     data.saveAppStateToLocalStorage();
@@ -73,7 +71,7 @@ export const data = {
       title: 'Create a New File?',
       text: `Any unsaved progress to ${data.editingName()}.${data.editingType()} will be lost!
       Path: ${data.editingPath()}
-      Storage: ${data.lastStorageHost()}
+      Storage: ${app.settings.lastStorageHost()}
       `,
       icon: 'warning',
       showCancelButton: true,
@@ -106,7 +104,7 @@ export const data = {
       editorSelection: app.editor ? app.editor.selection.getRange() : null,
       transform: app.workspace.transform,
       scale: app.workspace.scale,
-      lastStorageHost: data.lastStorageHost(),
+      lastStorageHost: app.settings.lastStorageHost(),
       lastEditedUnix: data.lastEditedUnix() || '',
       lastSavedUnix: data.lastSavedUnix(),
       pluginStorage: app.plugins.pluginStorage,
@@ -117,7 +115,7 @@ export const data = {
       title: 'Are you sure?',
       text: `Are you sure you want to close this file? Any unsaved changes to ${data.editingName()}.${data.editingType()} will be lost!
       Path: ${data.editingPath() || ''}
-      Storage: ${data.lastStorageHost()}
+      Storage: ${app.settings.lastStorageHost()}
       `,
       icon: 'warning',
       showCancelButton: true,
@@ -213,7 +211,6 @@ export const data = {
     if (currentDocState) {
       const {
         editingPath,
-        lastStorageHost,
         editingName,
         editingType,
         documentType,
@@ -237,7 +234,6 @@ export const data = {
       data.editingType(editingType);
       app.settings.documentType(documentType);
       data.editingFolder(editingFolder);
-      data.lastStorageHost(lastStorageHost);
       data.lastEditedUnix(lastEditedUnix);
       data.lastSavedUnix(lastSavedUnix);
       data.documentHeader(documentHeader);
@@ -274,7 +270,7 @@ export const data = {
     data.editingName(fileName.replace(/^.*[\\\/]/, ''));
     data.isDocumentDirty(false);
     data.editingPath(filePath);
-    data.lastStorageHost(lastStorageHost);
+    app.settings.lastStorageHost(lastStorageHost);
     app.refreshWindowTitle();
   },
   openFile: function(file, filename) {
@@ -1079,7 +1075,7 @@ export const data = {
             `The Yarn has been saved to gist ${data.storage.gistId}`,
             'success'
           );
-          data.lastStorageHost('GIST');
+          app.settings.lastStorageHost('GIST');
           data.isDocumentDirty(false);
           app.refreshWindowTitle();
         }, gistFiles);
@@ -1098,17 +1094,19 @@ export const data = {
     const type = getFileType(name);
     data.loadData(content, type, true);
     data.isDocumentDirty(false);
-    data.lastStorageHost('GIST');
+    app.settings.lastStorageHost('GIST');
     data.editingPath(null);
     data.editingName(name);
+    app.settings.lastEditedGist(name);
     app.refreshWindowTitle();
   },
 
   tryOpenGist: function(gists) {
     if (data.storage.hasGistSettings()) {
+      console.log({edit:data.editingName(), last: app.settings.lastEditedGist(), lastHost: app.settings.lastStorageHost()})
       const previouslyOpenedGist =
-        data.lastStorageHost() === 'GIST' ? data.editingName() : '';
-        data.storage.getGistFile().then(({ inputOptions, filesInGist }) => {
+        app.settings.lastStorageHost() === 'GIST' ? app.settings.lastEditedGist() : '';
+        data.storage.getGistFile(app.ui.openSettingsDialog).then(({ inputOptions, filesInGist }) => {
         Swal.fire({
           title: '🐙 Open file from a gist',
           input: 'select',
@@ -1157,13 +1155,13 @@ export const data = {
   trySaveCurrent: function() {
     if (!data.isDocumentDirty()) return;
 
-    if (data.lastStorageHost() === 'GIST') {
+    if (app.settings.lastStorageHost() === 'GIST') {
       const storage = data.storage;
       storage.getGistFile().then(gist => {
         data.getSaveData(data.editingType()).then(yarnData => {
           data.getSaveData(data.editingType());
           storage.editGistFile(data.editingName(), yarnData);
-          data.lastStorageHost('GIST');
+          app.settings.lastStorageHost('GIST');
           data.isDocumentDirty(false);
           app.refreshWindowTitle();
           app.ui.toastMixin.fire({

diff --git a/src/js/classes/settings.js b/src/js/classes/settings.js
@@ -115,6 +115,14 @@ export const Settings = function(app) {
     .observable(storage.getItem('gistFile'))
     .extend({ persist: 'gistFile' });
 
+  this.lastEditedGist = ko
+    .observable(storage.getItem('lastEditedGist'))
+    .extend({ persist: 'lastEditedGist' });
+
+  this.lastStorageHost = ko
+    .observable(storage.getItem('lastStorageHost'))
+    .extend({ persist: 'lastStorageHost' });
+
   this.gistPluginsFile = ko
     .observable(storage.getItem('gistPluginsFile'))
     .extend({ persist: 'gistPluginsFile' });

diff --git a/src/js/classes/storage.js b/src/js/classes/storage.js
@@ -214,8 +214,9 @@ export const StorageJs = (type = 'gist') => {
         if (fileKey in this.filesInGist) return this.filesInGist[fileKey];
         console.error(`${fileKey} not found in gist`, this.filesInGist);
       },
-      getGist: function(gistId) {
-        return fetch('https://api.github.com/gists/' + gistId, {
+      getGist: function(gistId, onFail = () => {}) {
+        const fetchAddress = `https://api.github.com/gists/${gistId}`;
+        return fetch(fetchAddress, {
           method: 'GET',
           headers: {
             Accept: 'application/vnd.github+json',
@@ -225,6 +226,15 @@ export const StorageJs = (type = 'gist') => {
         })
           .then(data => {
             console.log('GOT -- ', { data });
+            if(data.ok === false) {
+              const GistStatusHints = {
+                401: "Is your Gist Token valid?",
+                404: `Is your Gist ID online?\n\naddress:\n${fetchAddress}`
+              }
+              alert(`Failed to get:\n${fetchAddress}...\n\nSTATUS: ${data.status}\n${data.status in GistStatusHints ? GistStatusHints[data.status] : ""}`)
+              if (data.status in GistStatusHints) onFail(data.status);
+              if (data.status === 404) window.open(fetchAddress, '_blank').focus();
+            }
             return data.json();
           })
           .then(content => {
@@ -246,8 +256,8 @@ export const StorageJs = (type = 'gist') => {
       hasGistSettings: function() {
         return this.gistId && this.gistId.length > 0;
       },
-      getGistFile: function() {
-        return this.getGist(this.gistId);
+      getGistFile: function(onFail = () => {}) {
+        return this.getGist(this.gistId, onFail);
       },
       getContentOrRaw: function(content, rawUrl) {
         // sometimes github comes back empty handed for content, but has raw_url