From 12c7298023b7de6b8b2d2aae5078640fe5a38293 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 25 Apr 2019 14:22:40 +0100
Subject: [PATCH] Moved UI error handling to mixin

---
 src/components/paneCapture.vue                |  7 +--
 src/components/paneConnect.vue                |  6 ++
 .../galleryComponents/captureCard.vue         | 19 +++----
 .../galleryComponents/scanCard.vue            |  1 -
 .../paneDisplayComponents/galleryDisplay.vue  |  2 +-
 .../paneDisplayComponents/streamDisplay.vue   |  2 +-
 src/components/paneNavigate.vue               |  9 +--
 .../paneSettingsComponents/cameraSettings.vue |  7 +--
 .../microscopeSettings.vue                    |  5 +-
 src/store.js                                  | 55 ++++++-------------
 10 files changed, 44 insertions(+), 69 deletions(-)

diff --git a/src/components/paneCapture.vue b/src/components/paneCapture.vue
index 15c65b8f..47f2aa6b 100644
--- a/src/components/paneCapture.vue
+++ b/src/components/paneCapture.vue
@@ -175,7 +175,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -279,7 +278,7 @@ export default {
           this.$root.$emit('globalUpdateCaptureList')
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     },
 
@@ -291,10 +290,10 @@ export default {
           return this.$store.dispatch('pollTask', [response.data.id, 3600, 5])
         })
         .then(() => {
-          UIkit.notification({message: "Finished scan.", status: 'success'})
+          this.modalNotify("Finished scan.")
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error)
         })
         .finally(() => {
           this.isScanning = false
diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index c6d3d044..94979c63 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -126,6 +126,12 @@ export default {
       ]);
       // Try to get config and state JSON from the newly submitted host
       this.$store.dispatch('firstConnect')
+      .then (() => {
+        console.log("Connected!")
+      })
+      .catch(error => {
+        this.modalError(error) // Let mixin handle error
+      })
     },
 
     setLocalMode: function (state) {
diff --git a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue b/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
index ce3fc066..93e3fdeb 100644
--- a/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
+++ b/src/components/paneDisplayComponents/galleryComponents/captureCard.vue
@@ -105,15 +105,14 @@ export default {
       console.log(this.newtag);
       this.newTagRequest(this.newtag);
       this.newtag = "";
-      UIkit.modal(event.target.parentNode).hide();
+      UIkit.modal(event.target.parentNode).hide();  // TODO: Remove somehow
     },
 
     delCaptureConfirm: function(tag_string) {
       var context = this
-      UIkit.modal.confirm('Permanantly delete capture?').then(function() {
+      this.modalConfirm('Permanantly delete capture?')
+      .then(function() {
         context.delCaptureRequest()
-      }, function () {
-        console.log('Rejected.')
       });
     },
 
@@ -125,7 +124,7 @@ export default {
         this.$root.$emit('globalUpdateCaptureList')
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
@@ -137,16 +136,14 @@ export default {
         this.getTagRequest()
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
     delTagConfirm: function(tag_string) {
       var context = this;
-      UIkit.modal.confirm(`Remove tag '${tag_string}'?`).then(function() {
+      this.modalConfirm(`Remove tag '${tag_string}'?`).then(function() {
         context.delTagRequest(tag_string)
-      }, function () {
-        console.log('Rejected.')
       });
     },
 
@@ -159,7 +156,7 @@ export default {
         this.getTagRequest()
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
@@ -170,7 +167,7 @@ export default {
         this.tags = response.data.metadata.tags
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
diff --git a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue b/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
index f08395cb..9d49a6ee 100644
--- a/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
+++ b/src/components/paneDisplayComponents/galleryComponents/scanCard.vue
@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import UIkit from 'uikit';
 import axios from 'axios'
 
 // Export main app
diff --git a/src/components/paneDisplayComponents/galleryDisplay.vue b/src/components/paneDisplayComponents/galleryDisplay.vue
index e2315d5b..a9a85809 100644
--- a/src/components/paneDisplayComponents/galleryDisplay.vue
+++ b/src/components/paneDisplayComponents/galleryDisplay.vue
@@ -99,7 +99,7 @@ export default {
         this.captureList = response.data;  // Update boxes from response
       })
       .catch(error => {
-        this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+        this.modalError(error) // Let mixin handle error
       })
     },
 
diff --git a/src/components/paneDisplayComponents/streamDisplay.vue b/src/components/paneDisplayComponents/streamDisplay.vue
index 7c1fff96..59e7e6ec 100644
--- a/src/components/paneDisplayComponents/streamDisplay.vue
+++ b/src/components/paneDisplayComponents/streamDisplay.vue
@@ -156,7 +156,7 @@ export default {
 					this.$store.dispatch('updateState');  // Update store state
 				})
 				.catch(error => {
-					this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+					this.modalError(error) // Let mixin handle error
 				})
 			}
     },
diff --git a/src/components/paneNavigate.vue b/src/components/paneNavigate.vue
index 428b3bcf..6eac9a7f 100644
--- a/src/components/paneNavigate.vue
+++ b/src/components/paneNavigate.vue
@@ -94,7 +94,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit'
 
 // Key Codes
 const keyCodes = {
@@ -207,7 +206,7 @@ export default {
           this.setPosition = response.data.stage.position;  // Update boxes from response
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .then(() => {
           this.$store.commit('changeMoveLock', false)  // Release the move lock
@@ -230,8 +229,7 @@ export default {
           console.log("Successfully finished autofocus")
         })
         .catch(error => {
-          UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error}`, status: 'danger'})
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .finally(() => {
           console.log("Cleaning up after autofocus.")
@@ -256,8 +254,7 @@ export default {
           console.log("Successfully finished autofocus")
         })
         .catch(error => {
-          UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error}`, status: 'danger'})
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .finally(() => {
           console.log("Cleaning up after autofocus.")
diff --git a/src/components/paneSettingsComponents/cameraSettings.vue b/src/components/paneSettingsComponents/cameraSettings.vue
index bca9a316..7367c555 100644
--- a/src/components/paneSettingsComponents/cameraSettings.vue
+++ b/src/components/paneSettingsComponents/cameraSettings.vue
@@ -40,7 +40,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -81,7 +80,7 @@ export default {
         .then(this.updateInputValues)
         .then(r=>{console.log("Updated Config: ", payload.picamera_settings)})
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     },
     recalibrateConfirm: function() {
@@ -102,7 +101,7 @@ export default {
           return this.$store.dispatch('pollTask', [response.data.id, null, null])
         })
         .then(() => {
-          UIkit.notification({message: "Finished recalibration.", status: 'success'})
+          this.modalNotify("Finished recalibration.")
           return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
         })
         .then(() => {
@@ -110,7 +109,7 @@ export default {
         })
         .then(this.updateInputValues)
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
         .finally(() => {
           this.isCalibrating = false
diff --git a/src/components/paneSettingsComponents/microscopeSettings.vue b/src/components/paneSettingsComponents/microscopeSettings.vue
index cbe944c2..c6cf8972 100644
--- a/src/components/paneSettingsComponents/microscopeSettings.vue
+++ b/src/components/paneSettingsComponents/microscopeSettings.vue
@@ -44,7 +44,6 @@
 
 <script>
 import axios from 'axios'
-import UIkit from 'uikit';
 
 // Export main app
 export default {
@@ -79,10 +78,10 @@ export default {
         .then(response => { 
           this.$store.dispatch('updateConfig');
           this.updateInputValues
-          UIkit.notification({message: "Microscope config applied.", status: 'success'})
+          this.modalNotify("Microscope config applied.")
         })
         .catch(error => {
-          this.$store.dispatch('handleHTTPError', error);  // Let store handle error
+          this.modalError(error) // Let mixin handle error
         })
     }
 
diff --git a/src/store.js b/src/store.js
index e3c275aa..f3252c64 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import UIkit from 'uikit';
 
 Vue.use(Vuex)
 
@@ -58,12 +57,22 @@ export default new Vuex.Store({
       // Reset the state when reconnecting starts
       context.dispatch('resetState')
       // Mark as loading
-      context.commit('changeWaiting', true)
-      // Do requests
-      context.dispatch('updateConfig')
-      .then (() => {
-        context.dispatch('updateState')
-      })
+      context.dispatch('waitingState')
+
+      var sendRequest = function(resolve, reject) {
+        // Do requests
+        context.dispatch('updateConfig')
+        .then (() => {
+          context.dispatch('updateState')
+        })
+        .then (() => {
+          resolve()
+        })
+        .catch(error => {
+          reject(error)
+        })
+      }
+      return new Promise(sendRequest)
     },
 
     updateConfig(context, uri=`${context.getters.uri}/config`) {
@@ -77,7 +86,6 @@ export default new Vuex.Store({
           resolve()
         })
         .catch(error => {
-          context.dispatch('handleHTTPError', error)
           reject(new Error(error))
         })
       }
@@ -95,7 +103,6 @@ export default new Vuex.Store({
           resolve()
         })
         .catch(error => {
-          context.dispatch('handleHTTPError', error)
           reject(new Error(error))
         })
       }
@@ -136,34 +143,6 @@ export default new Vuex.Store({
       
     },
 
-    handleHTTPError(context, error) {
-      console.log(error.response)
-      var errormsg = '';
-
-      // If a response was obtained
-      if (error.response) {
-        // If the response is a nicely formatted JSON response from the server
-        if (error.response.data.message) {
-          errormsg = `${error.response.status}: ${error.response.data.message}`
-          console.log(errormsg)
-        }
-        // If the response is just some generic error response
-        else {
-          errormsg = `${error.response.status}: ${error.response.data}`
-          console.log(errormsg)
-        }
-      // If the error occured during the request
-      } else if (error.request) {
-        errormsg = `${error.message}`
-        console.log(errormsg)
-      // Everything else
-      } else {
-        errormsg = `${error.message}`
-        console.log(errormsg)
-      }
-      context.dispatch('errorState', errormsg);
-    },
-
     resetState(context) {
       context.commit('changeWaiting', false)
       context.commit('changeAvailable', true)
@@ -185,7 +164,7 @@ export default new Vuex.Store({
       context.commit('changeWaiting', false)
       context.commit('changeAvailable', false)
       context.commit('commitError', msg)
-      UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${msg}`, status: 'danger'})
+      // TODO: Re-implement error notifications as mixins
     }
   },