refactor: reports are now resolved using VueX

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/api/admin/index.js

@@ -0,0 +1,7 @@
+import reports from "./reports";
+
+// when Vuex needs to interact with socket.io
+
+export default {
+	reports
+};

frontend/api/admin/reports.js

@@ -0,0 +1,17 @@
+import Toast from "toasters";
+import io from "../../io";
+
+export default {
+	resolve(reportId) {
+		return new Promise((resolve, reject) => {
+			io.getSocket(socket => {
+				socket.emit("reports.resolve", reportId, res => {
+					new Toast({ content: res.message, timeout: 3000 });
+					if (res.status === "success")
+						return resolve({ status: "success" });
+					return reject(new Error(res.message));
+				});
+			});
+		});
+	}
+};

frontend/api/auth.js

@@ -33,7 +33,10 @@ export default {
 										cookie.domain
 									}; ${secure}path=/`;
 
-									return resolve({ status: "success" });
+									return resolve({
+										status: "success",
+										message: "Account registered!"
+									});
 								});
 							}
 							return reject(new Error("You must login"));
@@ -77,15 +80,15 @@ export default {
 	logout() {
 		return new Promise((resolve, reject) => {
 			io.getSocket(socket => {
-				socket.emit("users.logout", result => {
-					if (result.status === "success") {
+				socket.emit("users.logout", res => {
+					if (res.status === "success") {
 						return lofig.get("cookie").then(cookie => {
 							document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
 							return window.location.reload();
 						});
 					}
-					new Toast({ content: result.message, timeout: 4000 });
-					return reject(new Error(result.message));
+					new Toast({ content: res.message, timeout: 4000 });
+					return reject(new Error(res.message));
 				});
 			});
 		});

frontend/components/Admin/Reports.vue

@@ -129,17 +129,20 @@ export default {
 			this.openModal({ sector: "admin", modal: "viewReport" });
 		},
 		resolve(reportId) {
-			this.socket.emit("reports.resolve", reportId, res => {
-				new Toast({ content: res.message, timeout: 3000 });
-				if (res.status === "success" && this.modals.viewReport)
-					this.closeModal({
-						sector: "admin",
-						modal: "viewReport"
-					});
-			});
+			return this.resolveReport(reportId)
+				.then(res => {
+					if (res.status === "success" && this.modals.viewReport)
+						this.closeModal({
+							sector: "admin",
+							modal: "viewReport"
+						});
+				})
+				.catch(
+					err => new Toast({ content: err.message, timeout: 5000 })
+				);
 		},
 		...mapActions("modals", ["openModal", "closeModal"]),
-		...mapActions("admin/reports", ["viewReport"])
+		...mapActions("admin/reports", ["viewReport", "resolveReport"])
 	}
 };
 </script>

frontend/components/Modals/IssuesModal.vue

@@ -62,11 +62,7 @@
 			</table>
 		</div>
 		<div slot="footer">
-			<a
-				class="button is-primary"
-				href="#"
-				@click="$parent.resolve(report._id)"
-			>
+			<a class="button is-primary" href="#" @click="resolve(report._id)">
 				<span>Resolve</span>
 			</a>
 			<a
@@ -95,6 +91,7 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import { formatDistance } from "date-fns";
+import Toast from "toasters";
 
 import UserIdToUsername from "../UserIdToUsername.vue";
 import Modal from "./Modal.vue";
@@ -112,6 +109,20 @@ export default {
 	},
 	methods: {
 		formatDistance,
+		resolve(reportId) {
+			return this.resolveReport(reportId)
+				.then(res => {
+					if (res.status === "success")
+						this.closeModal({
+							sector: "admin",
+							modal: "viewReport"
+						});
+				})
+				.catch(
+					err => new Toast({ content: err.message, timeout: 5000 })
+				);
+		},
+		...mapActions("admin/reports", ["resolveReport"]),
 		...mapActions("modals", ["closeModal"])
 	},
 	components: { Modal, UserIdToUsername }

frontend/store/modules/admin.js

@@ -1,6 +1,7 @@
 /* eslint no-param-reassign: 0 */
 
 import Vue from "vue";
+import admin from "../../api/admin/index";
 
 const state = {};
 const getters = {};
@@ -121,7 +122,20 @@ const modules = {
 		},
 		getters: {},
 		actions: {
-			viewReport: ({ commit }, report) => commit("viewReport", report)
+			viewReport: ({ commit }, report) => commit("viewReport", report),
+			/* eslint-disable-next-line no-unused-vars */
+			resolveReport: ({ commit }, reportId) => {
+				return new Promise((resolve, reject) => {
+					return admin.reports
+						.resolve(reportId)
+						.then(res => {
+							return resolve(res);
+						})
+						.catch(err => {
+							return reject(new Error(err.message));
+						});
+				});
+			}
 		},
 		mutations: {
 			viewReport(state, report) {

frontend/store/modules/user.js

@@ -76,11 +76,8 @@ const modules = {
 
 					return auth
 						.register(user)
-						.then(() => {
-							return resolve({
-								status: "success",
-								message: "Account registered!"
-							});
+						.then(res => {
+							return resolve(res);
 						})
 						.catch(err => {
 							return reject(new Error(err.message));