Better error handling

gilbitron · Jan 19, 2017 · 88e16c4 · 88e16c4
1 parent 7a09796
commit 88e16c4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/app/src/components/ImagePreview.vue b/app/src/components/ImagePreview.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="page-image-preview" v-if="selectedImage">
         <div class="image-preview">
+			<div class="error-alert" v-if="error">
+                There was an error setting the wallpaper. <button class="btn btn-positive" @click="closeError">Close</button>
+            </div>
+
 			<div class="padded-more">
 				<div class="meta clearfix">
 	                <div class="meta-right">
@@ -106,6 +110,7 @@
                 downloadingImage: false,
 				processingStatus: '',
 				screenSize: '',
+				error: null,
 			}
 		},
 
@@ -141,6 +146,12 @@
             });
             ipcRenderer.on('wallpaper-updated', (event, arg) => {
                 this.wallpaperUpdated(arg);
+            });
+			ipcRenderer.on('image-error', (event, arg) => {
+				this.error = arg;
+				this.processingStatus = '';
+				this.downloadingImage = false;
+                console.log(this.error);
             });
         },
 
@@ -172,7 +183,11 @@
 				this.processingStatus = '';
 				this.$emit('wallpaper-updated', imagePath);
 				this.downloadingImage = false;
-            }
+            },
+
+			closeError() {
+				this.error = null;
+			}
         },
 
         watch: {

diff --git a/app/src/components/ImagesList.vue b/app/src/components/ImagesList.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="page-images-list">
         <div class="padded-more">
+            <div class="error-alert" v-if="error">
+                There was an error fetching images. <button class="btn btn-positive" @click="retry">Retry</button>
+            </div>
             <div v-if="selectedType == 'search'">
                 <div class="form-group">
                     <input type="text" class="form-control" placeholder="Enter search query and hit enter to search..." v-model.lazy.trim="searchQuery" :disabled="isSearching">
@@ -67,6 +70,20 @@
         text-align: center;
         padding: 100px 0;
     }
+
+    .error-alert {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        z-index: 999;
+        padding: 10px 15px;
+        background: #fc605b;
+        color: #fff;
+        border-radius: 5px;
+        box-shadow: 0 1px 10px rgba(0,0,0,0.2);
+        line-height: 24px;
+    }
+    .error-alert button { margin-left: 5px; }
 </style>
 
 <script>
@@ -92,6 +109,7 @@
                 searchQuery: '',
                 searchImagesFound: 0,
                 isSearching: false,
+                error: null,
 			}
 		},
 
@@ -158,6 +176,11 @@
                             this.setImages(data);
                             storage.set(this.cacheLabel, data);
                             this.refreshLayout();
+                        })
+                        .catch(error => {
+                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
+                            this.error = error;
+                            console.log(this.error);
                         });
             },
             setImages(data) {
@@ -178,6 +201,10 @@
                 this.page++;
                 this.getImages();
             },
+            retry() {
+                this.error = null;
+                this.getImages();
+            },
 
 			refreshLayout() {
                 this.isRefreshingLayout = true;