Refactor a bit since we globally catch API exceptions

src/site/components/grid/Grid.vue

@@ -191,17 +191,13 @@ export default {
 				type: 'is-danger',
 				hasIcon: true,
 				onConfirm: async () => {
-					try {
-						const response = await this.$axios.$delete(`file/${file.id}`);
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
-						return this.$toast.open(response.message);
-					} catch (error) {
-						return this.$onPromiseError(error);
-					}
+					const response = await this.$axios.$delete(`file/${file.id}`);
+					this.showWaterfall = false;
+					this.files.splice(index, 1);
+					this.$nextTick(() => {
+						this.showWaterfall = true;
+					});
+					return this.$toast.open(response.message);
 				}
 			});
 		}

src/site/components/uploader/Uploader.vue

@@ -134,13 +134,9 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			try {
-				const response = await this.$axios.$get(`albums/dropdown`);
-				this.albums = response.albums;
-				this.updateDropzoneConfig();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
+			this.updateDropzoneConfig();
 		},
 
 		/*
@@ -161,13 +157,15 @@ export default {
 		*/
 		dropzoneFilesAdded(files) {
 			this.alreadyAddedFiles = true;
-			// console.log(files);
 		},
 		dropzoneSuccess(file, response) {
 			this.processResult(file, response);
 		},
 		dropzoneError(file, message, xhr) {
-			this.$showToast('There was an error uploading this file. Check the console.', true, 5000);
+			this.$store.dispatch('alert', {
+				text: 'There was an error uploading this file. Check the console.',
+				error: true
+			});
 			console.error(file, message, xhr);
 		},
 		dropzoneChunksUploaded(file, done) {
@@ -190,7 +188,9 @@ export default {
 			if (!response.url) return;
 			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
 			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
-				this.$showToast('Link copied!', false, 1000);
+				this.$store.dispatch('alert', {
+					text: 'Link copied!'
+				});
 				this.$clipboard(response.url);
 			});
 		}

src/site/pages/dashboard/account.vue

@@ -108,27 +108,31 @@ export default {
 	},
 	methods: {
 		async getUserSetttings() {
-			try {
-				const response = await this.$axios.$get(`users/me`);
-				this.user = response.user;
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`users/me`);
+			this.user = response.user;
 		},
 		async changePassword() {
-			if (!this.user.password || !this.user.newPassword || !this.user.reNewPassword) return this.$showToast('One or more fields are missing', true);
-			if (this.user.newPassword !== this.user.reNewPassword) return this.$showToast('Passwords don\'t match', true);
-
-			try {
-				const response = await this.$axios.$post(`user/password/change`,
-					{
-						password: this.user.password,
-						newPassword: this.user.newPassword
-					});
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
+			if (!this.user.password || !this.user.newPassword || !this.user.reNewPassword) {
+				this.$store.dispatch('alert', {
+					text: 'One or more fields are missing',
+					error: true
+				});
+				return;
+			}
+			if (this.user.newPassword !== this.user.reNewPassword) {
+				this.$store.dispatch('alert', {
+					text: 'Passwords don\'t match',
+					error: true
+				});
+				return;
 			}
+
+			const response = await this.$axios.$post(`user/password/change`,
+				{
+					password: this.user.password,
+					newPassword: this.user.newPassword
+				});
+			this.$toast.open(response.message);
 		},
 		promptNewAPIKey() {
 			this.$dialog.confirm({
@@ -138,14 +142,10 @@ export default {
 			});
 		},
 		async requestNewAPIKey() {
-			try {
-				const response = await this.$axios.$post(`user/apikey/change`);
-				this.user.apiKey = response.apiKey;
-				this.$forceUpdate();
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`user/apikey/change`);
+			this.user.apiKey = response.apiKey;
+			this.$forceUpdate();
+			this.$toast.open(response.message);
 		}
 	}
 };

src/site/pages/dashboard/albums/_id.vue

@@ -79,9 +79,16 @@ export default {
 	metaInfo() {
 		return { title: 'Album' };
 	},
-	mounted() {
-		this.getFiles();
-		this.getAlbums();
+	async asyncData({ $axios, route }) {
+		try {
+			const response = await $axios.$get(`album/${route.params.id}/full`);
+			return {
+				files: response.files ? response.files : []
+			};
+		} catch (error) {
+			console.error(error);
+			return { files: [] };
+		}
 	},
 	methods: {
 		isAlbumSelected(id) {
@@ -90,37 +97,22 @@ export default {
 			return found ? found.id ? true : false : false;
 		},
 		openAlbumModal(file) {
+			// Only get the list if the usuer actually wants to change a file's album, otherwise useless call
+			this.getAlbums();
 			this.showingModalForFile = file;
 			this.isAlbumsModalActive = true;
 		},
 		async albumCheckboxClicked(value, id) {
-			try {
-				const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-					albumId: id,
-					fileId: this.showingModalForFile.id
-				});
-				this.$toast.open(response.message);
-				this.getFiles();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
-		},
-		async getFiles() {
-			// TODO: Make this think SSR with AsyncData
-			try {
-				const response = await this.$axios.$get(`album/${this.$route.params.id}/full`);
-				this.files = response.files;
-			} catch (error) {
-				console.error(error);
-			}
+			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
+				albumId: id,
+				fileId: this.showingModalForFile.id
+			});
+			this.$toast.open(response.message);
+			this.getFiles();
 		},
 		async getAlbums() {
-			try {
-				const response = await this.$axios.$get(`albums/dropdown`);
-				this.albums = response.albums;
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
 		}
 	}
 };

src/site/pages/dashboard/albums/index.vue

@@ -310,13 +310,9 @@ export default {
 			});
 		},
 		async deleteAlbum(id, purge) {
-			try {
-				const response = await this.$axios.$delete(`album/${id}/${purge ? true : ''}`);
-				this.getAlbums();
-				return this.$toast.open(response.message);
-			} catch (error) {
-				return this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$delete(`album/${id}/${purge ? true : ''}`);
+			this.getAlbums();
+			return this.$toast.open(response.message);
 		},
 		promptDeleteAlbumLink(identifier) {
 			this.$dialog.confirm({
@@ -325,29 +321,21 @@ export default {
 			});
 		},
 		async deleteAlbumLink(identifier) {
-			console.log('> deleteAlbumLink', identifier);
-			try {
-				const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
-				return this.$toast.open(response.message);
-			} catch (error) {
-				return this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+			return this.$toast.open(response.message);
 		},
 		async linkOptionsChanged(link) {
-			try {
-				const response = await this.$axios.$post(`album/link/edit`,
-					{
-						identifier: link.identifier,
-						enableDownload: link.enableDownload,
-						enabled: link.enabled
-					});
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`album/link/edit`,
+				{
+					identifier: link.identifier,
+					enableDownload: link.enableDownload,
+					enabled: link.enabled
+				});
+			this.$toast.open(response.message);
 		},
 		async createLink(album) {
 			album.isCreatingLink = true;
+			// Since we actually want to change the state even if the call fails, use a try catch
 			try {
 				const response = await this.$axios.$post(`album/link/new`,
 					{ albumId: album.id });
@@ -360,33 +348,25 @@ export default {
 					expiresAt: null
 				});
 			} catch (error) {
-				this.$onPromiseError(error);
+				//
 			} finally {
 				album.isCreatingLink = false;
 			}
 		},
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
-			try {
-				const response = await this.$axios.$post(`album/new`,
-					{ name: this.newAlbumName });
-				this.newAlbumName = null;
-				this.$toast.open(response.message);
-				this.getAlbums();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`album/new`,
+				{ name: this.newAlbumName });
+			this.newAlbumName = null;
+			this.$toast.open(response.message);
+			this.getAlbums();
 		},
 		async getAlbums() {
-			try {
-				const response = await this.$axios.$get(`albums/mini`);
-				for (const album of response.albums) {
-					album.isDetailsOpen = false;
-				}
-				this.albums = response.albums;
-			} catch (error) {
-				this.$onPromiseError(error);
+			const response = await this.$axios.$get(`albums/mini`);
+			for (const album of response.albums) {
+				album.isDetailsOpen = false;
 			}
+			this.albums = response.albums;
 		}
 	}
 };

src/site/pages/dashboard/index.vue

@@ -93,34 +93,22 @@ export default {
 			this.isAlbumsModalActive = true;
 		},
 		async albumCheckboxClicked(value, id) {
-			try {
-				const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-					albumId: id,
-					fileId: this.showingModalForFile.id
-				});
-				this.$toast.open(response.message);
+			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
+				albumId: id,
+				fileId: this.showingModalForFile.id
+			});
+			this.$toast.open(response.message);
 
-				// Not the prettiest solution to refetch on each click but it'll do for now
-				this.getFiles();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			// Not the prettiest solution to refetch on each click but it'll do for now
+			this.getFiles();
 		},
 		async getFiles() {
-			try {
-				const response = await this.$axios.$get(`files`);
-				this.files = response.files;
-			} catch (error) {
-				console.error(error);
-			}
+			const response = await this.$axios.$get(`files`);
+			this.files = response.files;
 		},
 		async getAlbums() {
-			try {
-				const response = await this.$axios.$get(`albums/dropdown`);
-				this.albums = response.albums;
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
 		}
 	}
 };

src/site/pages/dashboard/settings.vue

@@ -151,13 +151,8 @@ export default {
 	},
 	methods: {
 		async getSettings() {
-			try {
-				const response = await this.$axios.$get(`service/config`);
-				this.options = response.config;
-				console.log(this.options);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`service/config`);
+			this.options = response.config;
 		},
 		promptRestartService() {
 			this.$dialog.confirm({
@@ -166,13 +161,8 @@ export default {
 			});
 		},
 		async restartService() {
-			try {
-				const response = await this.$axios.$post(`service/restart`);
-				this.$toast.open(response.message);
-				return;
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`service/restart`);
+			this.$toast.open(response.message);
 		}
 	}
 };

src/site/pages/dashboard/tags/index.vue

@@ -249,36 +249,24 @@ export default {
 			});
 		},
 		async deleteTag(id, purge) {
-			try {
-				const response = await this.$axios.$delete(`tags/${id}/${purge ? true : ''}`);
-				this.getTags();
-				return this.$toast.open(response.message);
-			} catch (error) {
-				return this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$delete(`tags/${id}/${purge ? true : ''}`);
+			this.getTags();
+			return this.$toast.open(response.message);
 		},
 		async createTag() {
 			if (!this.newTagName || this.newTagName === '') return;
-			try {
-				const response = await this.$axios.$post(`tag/new`,
-					{ name: this.newTagName });
-				this.newTagName = null;
-				this.$toast.open(response.message);
-				this.getTags();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`tag/new`,
+				{ name: this.newTagName });
+			this.newTagName = null;
+			this.$toast.open(response.message);
+			this.getTags();
 		},
 		async getTags() {
-			try {
-				const response = await this.$axios.$get(`tags`);
-				for (const tag of response.tags) {
-					tag.isDetailsOpen = false;
-				}
-				this.tags = response.tags;
-			} catch (error) {
-				this.$onPromiseError(error);
+			const response = await this.$axios.$get(`tags`);
+			for (const tag of response.tags) {
+				tag.isDetailsOpen = false;
 			}
+			this.tags = response.tags;
 		}
 	}
 };

src/site/pages/dashboard/users.vue

@@ -226,33 +226,20 @@ export default {
 	},
 	methods: {
 		async getUsers() {
-			try {
-				const response = await this.$axios.$get(`admin/users`);
-				this.users = response.users;
-				console.log(this.users);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`admin/users`);
+			this.users = response.users;
 		},
 		async changeEnabledStatus(row) {
-			try {
-				const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
-					id: row.id
-				});
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
+				id: row.id
+			});
+			this.$toast.open(response.message);
 		},
 		async changeIsAdmin(row) {
-			try {
-				const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
-					id: row.id
-				});
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
+				id: row.id
+			});
+			this.$toast.open(response.message);
 		},
 		promptPurgeFiles(row) {
 			this.$dialog.confirm({
@@ -261,14 +248,10 @@ export default {
 			});
 		},
 		async purgeFiles(row) {
-			try {
-				const response = await this.$axios.$post(`admin/users/purge`, {
-					id: row.id
-				});
-				this.$toast.open(response.message);
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$post(`admin/users/purge`, {
+				id: row.id
+			});
+			this.$toast.open(response.message);
 		}
 	}
 };

src/site/pages/login.vue

@@ -98,7 +98,10 @@ export default {
 		async login() {
 			if (this.isLoading) return;
 			if (!this.username || !this.password) {
-				this.$showToast('Please fill both fields before attempting to log in.', true);
+				this.$store.dispatch('alert', {
+					text: 'Please fill both fields before attempting to log in.',
+					error: true
+				});
 				return;
 			}
 			this.isLoading = true;
@@ -114,7 +117,7 @@ export default {
 
 				this.redirect();
 			} catch (error) {
-				this.$onPromiseError(error);
+				//
 			} finally {
 				this.isLoading = false;
 			}

src/site/pages/register.vue

@@ -5,7 +5,7 @@
 <template>
 	<section id="register"
 		class="hero is-fullheight">
-		<Navbar/>
+		<Navbar />
 		<div class="hero-body">
 			<div class="container">
 				<h1 class="title">
@@ -75,7 +75,10 @@ export default {
 		async register() {
 			if (this.isLoading) return;
 			if (this.password !== this.rePassword) {
-				this.$showToast('Passwords don\'t match', true);
+				this.$store.dispatch('alert', {
+					text: 'Passwords don\'t match',
+					error: true
+				});
 				return;
 			}
 			this.isLoading = true;
@@ -85,10 +88,11 @@ export default {
 					username: this.username,
 					password: this.password
 				});
-				this.$showToast(response.message);
+
+				this.$store.dispatch('alert', { text: response.message });
 				return this.$router.push('/login');
 			} catch (error) {
-				this.$onPromiseError(error);
+				//
 			} finally {
 				this.isLoading = false;
 			}