refactor: migrated whatIsNew modal to new modal system

frontend/src/App.vue

@@ -7,7 +7,6 @@
 				class="main-container"
 				:class="{ 'main-container-modal-active': aModalIsOpen2 }"
 			/>
-			<what-is-new v-show="modals.whatIsNew" />
 			<create-playlist-modal v-if="modals.createPlaylist" />
 		</div>
 		<falling-snow v-if="christmas" />
@@ -25,9 +24,6 @@ import keyboardShortcuts from "./keyboardShortcuts";
 
 export default {
 	components: {
-		WhatIsNew: defineAsyncComponent(() =>
-			import("@/components/modals/WhatIsNew.vue")
-		),
 		CreatePlaylistModal: defineAsyncComponent(() =>
 			import("@/components/modals/CreatePlaylist.vue")
 		),
@@ -191,6 +187,37 @@ export default {
 			this.socket.on("keep.event:user.session.deleted", () =>
 				window.location.reload()
 			);
+
+			const newUser = !localStorage.getItem("firstVisited");
+			this.socket.dispatch("news.newest", newUser, res => {
+				if (res.status !== "success") return;
+
+				const { news } = res.data;
+
+				if (news) {
+					if (newUser) {
+						this.openModal({ modal: "whatIsNew", data: { news }});
+					} else if (localStorage.getItem("whatIsNew")) {
+						if (
+							parseInt(localStorage.getItem("whatIsNew")) <
+							news.createdAt
+						) {
+							this.openModal({ modal: "whatIsNew", data: { news }});
+							localStorage.setItem("whatIsNew", news.createdAt);
+						}
+					} else {
+						if (
+							parseInt(localStorage.getItem("firstVisited")) <
+							news.createdAt
+						)
+							this.openModal({ modal: "whatIsNew", data: { news }});
+						localStorage.setItem("whatIsNew", news.createdAt);
+					}
+				}
+
+				if (!localStorage.getItem("firstVisited"))
+					localStorage.setItem("firstVisited", Date.now());
+			});
 		});
 
 		ws.onDisconnect(true, () => {
@@ -263,7 +290,7 @@ export default {
 				.getElementsByTagName("html")[0]
 				.classList.add("christmas-mode");
 		},
-		...mapActions("modalVisibility", ["closeCurrentModal"]),
+		...mapActions("modalVisibility", ["closeCurrentModal", "openModal"]),
 		...mapActions("user/preferences", [
 			"changeNightmode",
 			"changeAutoSkipDisliked",

frontend/src/components/ModalManager.vue

@@ -19,7 +19,8 @@ export default {
 		...mapModalComponents("./components/modals", {
 			editUser: "EditUser.vue",
 			login: "Login.vue",
-			register: "Register.vue"
+			register: "Register.vue",
+			whatIsNew: "WhatIsNew.vue",
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/WhatIsNew.vue

@@ -1,49 +1,44 @@
 <template>
-	<div v-if="news !== null">
-		<modal title="News" class="what-is-news-modal">
-			<template #body>
-				<div
-					class="section news-item"
-					v-html="sanitize(marked(news.markdown))"
-				></div>
-			</template>
-			<template #footer>
-				<span v-if="news.createdBy">
-					By
-					<user-id-to-username
-						:user-id="news.createdBy"
-						:alt="news.createdBy"
-						:link="true" /></span
-				>&nbsp;<span :title="new Date(news.createdAt)">
-					{{
-						formatDistance(news.createdAt, new Date(), {
-							addSuffix: true
-						})
-					}}
-				</span>
-			</template>
-		</modal>
-	</div>
-	<div v-else></div>
+	<modal title="News" class="what-is-news-modal">
+		<template #body>
+			<div
+				class="section news-item"
+				v-html="sanitize(marked(news.markdown))"
+			></div>
+		</template>
+		<template #footer>
+			<span v-if="news.createdBy">
+				By
+				<user-id-to-username
+					:user-id="news.createdBy"
+					:alt="news.createdBy"
+					:link="true" /></span
+			>&nbsp;<span :title="new Date(news.createdAt)">
+				{{
+					formatDistance(news.createdAt, new Date(), {
+						addSuffix: true
+					})
+				}}
+			</span>
+		</template>
+	</modal>
 </template>
 
 <script>
 import { formatDistance } from "date-fns";
 import { marked } from "marked";
 import { sanitize } from "dompurify";
-import { mapGetters, mapActions } from "vuex";
-import ws from "@/ws";
+import { mapActions } from "vuex";
+
+import { mapModalState } from "@/vuex_helpers";
 
 export default {
-	data() {
-		return {
-			isModalActive: false,
-			news: null
-		};
+	props: {
+		modalUuid: { type: String, default: "" }
 	},
 	computed: {
-		...mapGetters({
-			socket: "websockets/getSocket"
+		...mapModalState("modals/whatIsNew/MODAL_UUID", {
+			news: state => state.news
 		})
 	},
 	mounted() {
@@ -57,43 +52,12 @@ export default {
 				}
 			}
 		});
-
-		ws.onConnect(this.init);
+	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "whatIsNew", this.modalUuid]);
 	},
 	methods: {
-		init() {
-			const newUser = !localStorage.getItem("firstVisited");
-			this.socket.dispatch("news.newest", newUser, res => {
-				if (res.status !== "success") return;
-
-				const { news } = res.data;
-
-				this.news = news;
-				if (this.news) {
-					if (newUser) {
-						this.openModal("whatIsNew");
-					} else if (localStorage.getItem("whatIsNew")) {
-						if (
-							parseInt(localStorage.getItem("whatIsNew")) <
-							news.createdAt
-						) {
-							this.openModal("whatIsNew");
-							localStorage.setItem("whatIsNew", news.createdAt);
-						}
-					} else {
-						if (
-							parseInt(localStorage.getItem("firstVisited")) <
-							news.createdAt
-						)
-							this.openModal("whatIsNew");
-						localStorage.setItem("whatIsNew", news.createdAt);
-					}
-				}
-
-				if (!localStorage.getItem("firstVisited"))
-					localStorage.setItem("firstVisited", Date.now());
-			});
-		},
 		marked,
 		sanitize,
 		formatDistance,

frontend/src/store/index.js

@@ -42,6 +42,7 @@ export default createStore({
 				editPlaylist: editPlaylistModal,
 				manageStation: manageStationModal,
 				editUser: emptyModule,
+				whatIsNew: emptyModule,
 				viewPunishment: viewPunishmentModal,
 				report: reportModal,
 				viewReport: viewReportModal,

frontend/src/store/modules/modalVisibility.js

@@ -2,10 +2,10 @@
 import ws from "@/ws";
 
 import editUser from "./modals/editUser";
+import whatIsNew from "./modals/whatIsNew";
 
 const state = {
 	modals: {
-		whatIsNew: false,
 		manageStation: false,
 		createStation: false,
 		importPlaylist: false,
@@ -32,11 +32,12 @@ const state = {
 };
 
 const modalModules = {
-	editUser
+	editUser,
+	whatIsNew
 };
 
 const migratedModules = {
-	whatIsNew: false,
+	whatIsNew: true,
 	manageStation: false,
 	login: true,
 	register: true,
@@ -126,8 +127,6 @@ const mutations = {
 			state.currentlyActive.push(modal);
 		} else {
 			state.new.modalMap[uuid] = modal;
-			state.new.activeModals.push(uuid);
-			state.currentlyActive.push(`${modal}-${uuid}`);
 
 			if (modalModules[modal]) {
 				this.registerModule(
@@ -136,6 +135,9 @@ const mutations = {
 				);
 				this.dispatch(`modals/${modal}/${uuid}/init`, data);
 			}
+
+			state.new.activeModals.push(uuid);
+			state.currentlyActive.push(`${modal}-${uuid}`);
 		}
 	},
 	closeCurrentModal(state) {

frontend/src/store/modules/modals/whatIsNew.js

@@ -0,0 +1,16 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		news: null
+	},
+	actions: {
+		init: ({ commit }, data) => commit("init", data)
+	},
+	mutations: {
+		init(state, { news }) {
+			state.news = news;
+		}
+	}
+};