refactor: change uploader component to use vuex

src/api/routes/albums/albumsGET.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 const Route = require('../../structures/Route');
 const Util = require('../../utils/Util');
 
@@ -19,17 +20,15 @@ class albumsGET extends Route {
 			.orderBy('createdAt', 'desc');
 
 		for (const album of albums) {
-			// TODO: Optimize the shit out of this. Ideally a JOIN that grabs all the needed stuff in 1 query instead of 3
-
 			// Fetch the total amount of files each album has.
-			const fileCount = await db
-				.table('albumsFiles') // eslint-disable-line no-await-in-loop
+			const fileCount = await db // eslint-disable-line no-await-in-loop
+				.table('albumsFiles')
 				.where('albumId', album.id)
 				.count({ count: 'id' });
 
 			// Fetch the file list from each album but limit it to 5 per album
-			const files = await db
-				.table('albumsFiles') // eslint-disable-line no-await-in-loop
+			const files = await db // eslint-disable-line no-await-in-loop
+				.table('albumsFiles')
 				.join('files', { 'files.id': 'albumsFiles.fileId' })
 				.where('albumId', album.id)
 				.select('files.id', 'files.name')
@@ -47,7 +46,7 @@ class albumsGET extends Route {
 
 		return res.json({
 			message: 'Successfully retrieved albums',
-			albums
+			albums,
 		});
 	}
 }
@@ -64,7 +63,7 @@ class albumsDropdownGET extends Route {
 			.select('id', 'name');
 		return res.json({
 			message: 'Successfully retrieved albums',
-			albums
+			albums,
 		});
 	}
 }

src/site/components/uploader/Uploader.vue

@@ -1,7 +1,9 @@
 <template>
-	<div :class="{ 'has-files': alreadyAddedFiles }"
+	<div
+		:class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
-		<b-select v-if="loggedIn"
+		<b-select
+			v-if="loggedIn"
 			v-model="selectedAlbum"
 			placeholder="Upload to album"
 			size="is-medium"
@@ -13,7 +15,8 @@
 				{{ album.name }}
 			</option>
 		</b-select>
-		<dropzone v-if="showDropzone"
+		<dropzone
+			v-if="showDropzone"
 			id="dropzone"
 			ref="el"
 			:options="dropzoneOptions"
@@ -25,16 +28,22 @@
 			Add or drop more files
 		</label>
 
-		<div id="template"
+		<div
+			id="template"
 			ref="template">
 			<div class="dz-preview dz-file-preview">
 				<div class="dz-details">
-					<div class="dz-filename"><span data-dz-name /></div>
-					<div class="dz-size"><span data-dz-size /></div>
+					<div class="dz-filename">
+						<span data-dz-name />
+					</div>
+					<div class="dz-size">
+						<span data-dz-size />
+					</div>
 				</div>
 				<div class="result">
 					<div class="openLink">
-						<a class="link"
+						<a
+							class="link"
 							target="_blank">
 							Link
 						</a>
@@ -43,14 +52,16 @@
 				<div class="error">
 					<div>
 						<span>
-							<span class="error-message"
+							<span
+								class="error-message"
 								data-dz-errormessage />
 							<i class="icon-web-warning" />
 						</span>
 					</div>
 				</div>
 				<div class="dz-progress">
-					<span class="dz-upload"
+					<span
+						class="dz-upload"
 						data-dz-uploadprogress />
 				</div>
 				<!--
@@ -64,6 +75,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Dropzone from 'nuxt-dropzone';
 import '~/assets/styles/dropzone.scss';
 
@@ -75,20 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			albums: [],
-			selectedAlbum: null
+			selectedAlbum: null,
 		};
 	},
 	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		token() {
-			return this.$store.state.token;
-		},
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		}
+		...mapState({
+			config: (state) => state.config,
+			albums: (state) => state.albums.tinyDetails,
+		}),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
 	},
 	watch: {
 		loggedIn() {
@@ -96,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		}
+		},
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -119,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' }
+			headers: { Accept: 'application/vnd.lolisafe.json' },
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -129,8 +137,11 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
-			this.albums = response.albums;
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 			this.updateDropzoneConfig();
 		},
 
@@ -143,14 +154,14 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null
+				albumId: this.selectedAlbum ? this.selectedAlbum : null,
 			});
 		},
 
 		/*
 			Dropzone stuff
 		*/
-		dropzoneFilesAdded(files) {
+		dropzoneFilesAdded() {
 			this.alreadyAddedFiles = true;
 		},
 		dropzoneSuccess(file, response) {
@@ -159,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true
+				error: true,
 			});
 			console.error(file, message, xhr);
 		},
@@ -170,12 +181,11 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount
-				}]
+					count: file.upload.totalChunkCount,
+				}],
 			});
 
 			this.processResult(file, data);
-			this.$forceUpdate();
 			return done();
 		},
 
@@ -194,8 +204,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		}
-	}
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>

src/site/store/albums.js

@@ -5,6 +5,7 @@ export const state = () => ({
 	isListLoading: false,
 	albumDetails: {},
 	expandedAlbums: [],
+	tinyDetails: [],
 });
 
 export const getters = {
@@ -21,7 +22,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async fetchDetails({ commit }, albumId) {
 		const response = await this.$axios.$get(`album/${albumId}/links`);
 
@@ -34,7 +34,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async createAlbum({ commit }, name) {
 		const response = await this.$axios.$post('album/new', { name });
 
@@ -42,7 +41,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async deleteAlbum({ commit }, albumId) {
 		const response = await this.$axios.$delete(`album/${albumId}`);
 
@@ -50,7 +48,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async createLink({ commit }, albumId) {
 		const response = await this.$axios.$post('album/link/new', { albumId });
 
@@ -58,7 +55,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async updateLinkOptions({ commit }, { albumId, linkOpts }) {
 		const response = await this.$axios.$post('album/link/edit', {
 			identifier: linkOpts.identifier,
@@ -70,12 +66,18 @@ export const actions = {
 
 		return response;
 	},
-
 	async deleteLink({ commit }, { albumId, identifier }) {
 		const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
 
 		commit('removeAlbumLink', { albumId, identifier });
 
+		return response;
+	},
+	async getTinyDetails({ commit }) {
+		const response = await this.$axios.$get('albums/dropdown');
+
+		commit('setTinyDetails', response);
+
 		return response;
 	},
 };
@@ -111,7 +113,7 @@ export const mutations = {
 	},
 	removeAlbumLink(state, { albumId, identifier }) {
 		const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier);
-		state.albumDetails[albumId].links.splice(foundIndex, 1);
+		if (foundIndex > -1) state.albumDetails[albumId].links.splice(foundIndex, 1);
 	},
 	toggleExpandedState(state, id) {
 		const foundIndex = state.expandedAlbums.indexOf(id);
@@ -121,4 +123,7 @@ export const mutations = {
 			state.expandedAlbums.push(id);
 		}
 	},
+	setTinyDetails(state, { albums }) {
+		state.tinyDetails = albums;
+	},
 };