Added/improved admin news page live update

backend/logic/actions/news.js

@@ -13,13 +13,9 @@ const utils = require("../utils");
 cache.runJob("SUB", {
     channel: "news.create",
     cb: (news) => {
-        utils.runJob("SOCKETS_FROM_USER", {
-            userId: news.createdBy,
-            cb: (response) => {
-                response.sockets.forEach((socket) => {
-                    socket.emit("event:admin.news.created", news);
-                });
-            },
+        utils.runJob("EMIT_TO_ROOM", {
+            room: "admin.news",
+            args: ["event:admin.news.created", news],
         });
     },
 });
@@ -27,13 +23,9 @@ cache.runJob("SUB", {
 cache.runJob("SUB", {
     channel: "news.remove",
     cb: (news) => {
-        utils.runJob("SOCKETS_FROM_USER", {
-            userId: news.createdBy,
-            cb: (response) => {
-                response.sockets.forEach((socket) => {
-                    socket.emit("event:admin.news.removed", news);
-                });
-            },
+        utils.runJob("EMIT_TO_ROOM", {
+            room: "admin.news",
+            args: ["event:admin.news.removed", news],
         });
     },
 });
@@ -41,13 +33,9 @@ cache.runJob("SUB", {
 cache.runJob("SUB", {
     channel: "news.update",
     cb: (news) => {
-        utils.runJob("SOCKETS_FROM_USER", {
-            userId: news.createdBy,
-            cb: (response) => {
-                response.sockets.forEach((socket) => {
-                    socket.emit("event:admin.news.updated", news);
-                });
-            },
+        utils.runJob("EMIT_TO_ROOM", {
+            room: "admin.news",
+            args: ["event:admin.news.updated", news],
         });
     },
 });

frontend/components/Admin/News.vue

@@ -33,7 +33,7 @@
 							</button>
 							<button
 								class="button is-danger"
-								@click="removeNews(news)"
+								@click="remove(news)"
 							>
 								Remove
 							</button>
@@ -224,7 +224,6 @@ export default {
 	components: { EditNews },
 	data() {
 		return {
-			news: [],
 			creating: {
 				title: "",
 				description: "",
@@ -235,31 +234,36 @@ export default {
 			}
 		};
 	},
+	computed: {
+		...mapState("modals", {
+			modals: state => state.modals.admin
+		}),
+		...mapState("admin/news", {
+			editing: state => state.editing,
+			news: state => state.news
+		})
+	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
 			this.socket.emit("news.index", res => {
-				this.news = res.data;
-				return res.data;
+				res.data.forEach(news => {
+					this.addNews(news);
+				});
 			});
 			this.socket.on("event:admin.news.created", news => {
-				this.news.unshift(news);
+				this.addNews(news);
+			});
+			this.socket.on("event:admin.news.updated", updatedNews => {
+				this.updateNews(updatedNews);
 			});
 			this.socket.on("event:admin.news.removed", news => {
-				this.news = this.news.filter(item => item._id !== news._id);
+				this.removeNews(news._id);
 			});
 			if (this.socket.connected) this.init();
 			io.onConnect(() => this.init());
 		});
 	},
-	computed: {
-		...mapState("modals", {
-			modals: state => state.modals.admin
-		}),
-		...mapState("admin/news", {
-			editing: state => state.editing
-		})
-	},
 	methods: {
 		createNews() {
 			const {
@@ -300,7 +304,7 @@ export default {
 					};
 			});
 		},
-		removeNews(news) {
+		remove(news) {
 			this.socket.emit(
 				"news.remove",
 				news,
@@ -337,7 +341,12 @@ export default {
 			this.socket.emit("apis.joinAdminRoom", "news", () => {});
 		},
 		...mapActions("modals", ["openModal", "closeModal"]),
-		...mapActions("admin/news", ["editNews"])
+		...mapActions("admin/news", [
+			"editNews",
+			"addNews",
+			"removeNews",
+			"updateNews"
+		])
 	}
 };
 </script>

frontend/store/modules/admin.js

@@ -196,13 +196,18 @@ const modules = {
 	news: {
 		namespaced: true,
 		state: {
-			editing: {}
+			editing: {},
+			news: []
 		},
 		getters: {},
 		actions: {
 			editNews: ({ commit }, news) => commit("editNews", news),
 			addChange: ({ commit }, data) => commit("addChange", data),
-			removeChange: ({ commit }, data) => commit("removeChange", data)
+			removeChange: ({ commit }, data) => commit("removeChange", data),
+			addNews: ({ commit }, news) => commit("addNews", news),
+			removeNews: ({ commit }, newsId) => commit("removeNews", newsId),
+			updateNews: ({ commit }, updatedNews) =>
+				commit("updateNews", updatedNews)
 		},
 		mutations: {
 			editNews(state, news) {
@@ -213,6 +218,20 @@ const modules = {
 			},
 			removeChange(state, data) {
 				state.editing[data.type].splice(data.index, 1);
+			},
+			addNews(state, news) {
+				state.news.push(news);
+			},
+			removeNews(state, newsId) {
+				state.news = state.news.filter(news => {
+					return news._id !== newsId;
+				});
+			},
+			updateNews(state, updatedNews) {
+				state.news.forEach((news, index) => {
+					if (news._id === updatedNews._id)
+						Vue.set(state.news, index, updatedNews);
+				});
 			}
 		}
 	}