From: Adam Dullage <redacted>
Date: Tue, 26 Jul 2022 11:55:44 +0000 (+0100)
Subject: Implemented framework for loading indicator. Resolves #8.
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=a394eadb4f44167a3dace75c41dc518645f1c682;p=flatnotes.git

Implemented framework for loading indicator. Resolves #8.
---

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 98d22f7..dd95552 100644
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -2,6 +2,7 @@ import { Editor } from "@toast-ui/vue-editor";
 import { Viewer } from "@toast-ui/vue-editor";
 
 import RecentlyModified from "./RecentlyModified";
+import LoadingIndicator from "./LoadingIndicator.vue";
 
 import api from "../api";
 import * as constants from "../constants";
@@ -14,6 +15,7 @@ export default {
     Viewer,
     Editor,
     RecentlyModified,
+    LoadingIndicator,
   },
 
   data: function() {
@@ -100,7 +102,10 @@ export default {
         .catch(function(error) {
           if (error.handled) {
             return;
-          } else if ([400, 422].includes(error.response.status)) {
+          } else if (
+            typeof error.response !== "undefined" &&
+            [400, 422].includes(error.response.status)
+          ) {
             parent.$bvToast.toast("Incorrect Username or Password ✘", {
               variant: "danger",
               noCloseButton: true,
@@ -132,6 +137,7 @@ export default {
 
     getSearchResults: function() {
       let parent = this;
+      this.searchFailed = false;
       api
         .get("/api/search", { params: { term: this.searchTerm } })
         .then(function(response) {
@@ -149,6 +155,7 @@ export default {
         })
         .catch(function(error) {
           if (!error.handled) {
+            parent.searchFailed = true;
             parent.unhandledServerErrorToast();
           }
         });
@@ -168,6 +175,7 @@ export default {
 
     loadNote: function(filename) {
       let parent = this;
+      this.noteLoadFailed = false;
       api
         .get(`/api/notes/${filename}.${constants.markdownExt}`)
         .then(function(response) {
@@ -179,8 +187,17 @@ export default {
           parent.updateDocumentTitle();
         })
         .catch(function(error) {
-          if (!error.handled) {
+          if (error.handled) {
+            return;
+          } else if (
+            typeof error.response !== "undefined" &&
+            error.response.status == 404
+          ) {
+            parent.noteLoadFailedMessage = "Note not found 😞";
+            parent.noteLoadFailed = true;
+          } else {
             parent.unhandledServerErrorToast();
+            parent.noteLoadFailed = true;
           }
         });
     },
@@ -290,7 +307,10 @@ export default {
           .catch(function(error) {
             if (error.handled) {
               return;
-            } else if (error.response.status == 409) {
+            } else if (
+              typeof error.response !== "undefined" &&
+              error.response.status == 409
+            ) {
               parent.existingFilenameToast();
             } else {
               parent.unhandledServerErrorToast();
@@ -312,7 +332,10 @@ export default {
           .catch(function(error) {
             if (error.handled) {
               return;
-            } else if (error.response.status == 409) {
+            } else if (
+              typeof error.response !== "undefined" &&
+              error.response.status == 409
+            ) {
               parent.existingFilenameToast();
             } else {
               parent.unhandledServerErrorToast();
diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 235bf61..141befe 100644
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -143,7 +143,10 @@
       <div v-if="currentView == views.note">
         <!-- Loading -->
         <div v-if="currentNote == null">
-          <p class="text-center">Loading...</p>
+          <loading-indicator
+            :failure-message="noteLoadFailedMessage"
+            :failed="noteLoadFailed"
+          />
         </div>
 
         <!-- Note Loaded -->
@@ -187,7 +190,11 @@
       <div v-if="currentView == views.search">
         <!-- Searching -->
         <div v-if="searchResults == null">
-          <p class="text-center">Searching...</p>
+          <loading-indicator
+            loading-message="Searching..."
+            failure-message="Search failed 😞"
+            :failed="searchFailed"
+          />
         </div>
 
         <!-- No Results -->
diff --git a/flatnotes/src/components/LoadingIndicator.vue b/flatnotes/src/components/LoadingIndicator.vue
new file mode 100644
index 0000000..e2d2c7f
--- /dev/null
+++ b/flatnotes/src/components/LoadingIndicator.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <p v-if="!failed" class="text-center">{{ loadingMessage }}</p>
+    <p v-else class="text-center">{{ failureMessage }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loadingMessage: { type: String, default: "Loading..." },
+    failureMessage: { type: String, default: "Loading failed 😞" },
+    failed: Boolean,
+  },
+};
+</script>
diff --git a/flatnotes/src/components/RecentlyModified.vue b/flatnotes/src/components/RecentlyModified.vue
index 230bf2e..17d1be8 100644
--- a/flatnotes/src/components/RecentlyModified.vue
+++ b/flatnotes/src/components/RecentlyModified.vue
@@ -4,7 +4,7 @@
 
     <!-- Loading -->
     <div v-if="notes == null">
-      <p class="text-center">Loading...</p>
+      <loading-indicator :failed="loadingFailed"/>
     </div>
 
     <!-- No Notes -->
@@ -31,11 +31,17 @@
 import api from "../api";
 import { Note } from "../classes";
 import EventBus from "../eventBus";
+import LoadingIndicator from "./LoadingIndicator.vue";
 
 export default {
+  components: {
+    LoadingIndicator,
+  },
+
   data: function () {
     return {
       notes: null,
+      loadingFailed: false,
     };
   },
 
@@ -53,6 +59,7 @@ export default {
           });
         })
         .catch(function (error) {
+          parent.loadingFailed = true;
           if (!error.handled) {
             EventBus.$emit("unhandledServerError");
           }
diff --git a/flatnotes/src/constants.js b/flatnotes/src/constants.js
index a4c4918..4a53c8b 100644
--- a/flatnotes/src/constants.js
+++ b/flatnotes/src/constants.js
@@ -29,12 +29,17 @@ export const dataDefaults = function() {
     passwordInput: null,
     rememberMeInput: false,
 
+    // Search Data
+    searchFailed: false,
+
     // Note Data
     searchTerm: null,
     searchResults: null,
     currentNote: null,
     titleInput: null,
     initialContent: null,
+    noteLoadFailed: false,
+    noteLoadFailedMessage: "Loading failed 😞",
 
     // Toast UI Plugins
     viewerOptions: { plugins: [codeSyntaxHighlight] },