refactor: refactor grid to use vuex for every action

2 files changed, 67 insertions, 59 deletions

diff --git a/src/site/store/album.js b/src/site/store/album.js
deleted file mode 100644
index d8ffacc..0000000
--- a/src/site/store/album.js
+++ /dev/null
@@ -1,57 +0,0 @@
-export const state = () => ({
-	files: [],
-	name: null,
-	isLoading: false,
-	pagination: {
-		page: 1,
-		limit: 30,
-		totalFiles: 0,
-	},
-	downloadEnabled: false,
-});
-
-export const getters = {
-	getTotalFiles: ({ pagination }) => pagination.totalFiles,
-	getFetchedCount: ({ files }) => files.length,
-	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
-	getLimit: ({ pagination }) => pagination.limit,
-	getName: ({ name }) => name,
-};
-
-export const actions = {
-	async fetchById({ commit, dispatch, state }, { id, page }) {
-		commit('setIsLoading');
-
-		page = page || 1;
-
-		try {
-			const response = await this.$axios.$get(`album/${id}/full`, {
-				params: { limit: state.pagination.limit, page },
-			});
-
-			commit('setFiles', response);
-			commit('updatePaginationMeta', { totalFiles: response.count, page });
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
-	},
-	// TODO: Fix duplicate code between this store and files store
-	deleteFile({ commit }, fileId) {
-
-	},
-};
-
-export const mutations = {
-	setIsLoading(state) {
-		state.isLoading = true;
-	},
-	setFiles(state, { files, name }) {
-		state.files = files || [];
-		state.name = name;
-		state.isLoading = false;
-	},
-	updatePaginationMeta(state, { page, totalFiles }) {
-		state.pagination.page = page || 1;
-		state.pagination.totalFiles = totalFiles || 0;
-	},
-};
diff --git a/src/site/store/images.js b/src/site/store/images.js
index d02219f..3019d85 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -1,4 +1,6 @@
-export const state = () => ({
+import Vue from 'vue';
+
+export const getDefaultState = () => ({
 	files: [],
 	isLoading: false,
 	pagination: {
@@ -8,8 +10,11 @@ export const state = () => ({
 	},
 	name: null,
 	downloadEnabled: false,
+	filesAlbums: {},
 });
 
+export const state = getDefaultState;
+
 export const getters = {
 	getTotalFiles: ({ pagination }) => pagination.totalFiles,
 	getFetchedCount: ({ files }) => files.length,
@@ -28,11 +33,15 @@ export const actions = {
 			const response = await this.$axios.$get('files', { params: { limit: state.pagination.limit, page } });
 
 			commit('setFilesAndMeta', { ...response, page });
+
+			return response;
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
+
+		return null;
 	},
-	async fetchByAlbumId({ commit, dispatch, state }, { id, page }) {
+	async fetchByAlbumId({ commit, state }, { id, page }) {
 		commit('setIsLoading');
 
 		page = page || 1;
@@ -42,6 +51,36 @@ export const actions = {
 		});
 
 		commit('setFilesAndMeta', { ...response, page });
+
+		return response;
+	},
+	async getFileAlbums({ commit }, fileId) {
+		const response = await this.$axios.$get(`file/${fileId}/albums`);
+
+		commit('setFileAlbums', { ...response, fileId });
+
+		return response;
+	},
+	async addToAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/add', { fileId, albumId });
+
+		commit('addAlbumToFile', { fileId, albumId, ...response.data });
+
+		return response;
+	},
+	async removeFromAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/del', { fileId, albumId });
+
+		commit('removeAlbumFromFile', { fileId, albumId });
+
+		return response;
+	},
+	async deleteFile({ commit }, fileId) {
+		const response = await this.$axios.$delete(`file/${fileId}`);
+
+		commit('removeFile', fileId);
+
+		return response;
 	},
 };
 
@@ -58,4 +97,30 @@ export const mutations = {
 		state.pagination.page = page || 1;
 		state.pagination.totalFiles = count || 0;
 	},
+	removeFile(state, fileId) {
+		const foundIndex = state.files.findIndex(({ id }) => id === fileId);
+		if (foundIndex > -1) {
+			state.files.splice(foundIndex, 1);
+			state.pagination.totalFiles -= 1;
+		}
+	},
+	setFileAlbums(state, { fileId, albums }) {
+		Vue.set(state.filesAlbums, fileId, albums);
+	},
+	addAlbumToFile(state, { fileId, album }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		state.filesAlbums[fileId].push(album);
+	},
+	removeAlbumFromFile(state, { fileId, albumId }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		const foundIndex = state.filesAlbums[fileId].findIndex(({ id }) => id === albumId);
+		if (foundIndex > -1) {
+			state.filesAlbums[fileId].splice(foundIndex, 1);
+		}
+	},
+	resetState(state) {
+		Object.assign(state, getDefaultState());
+	},
 };