MusareFork/frontend/src/store/modules/modalVisibility.js

/* eslint no-param-reassign: 0 */
import ws from "@/ws";

import editUser from "./modals/editUser";
import whatIsNew from "./modals/whatIsNew";
import createStation from "./modals/createStation";
import editNews from "./modals/editNews";
import manageStation from "./modals/manageStation";
import importPlaylist from "./modals/importPlaylist";
import editPlaylist from "./modals/editPlaylist";
import report from "./modals/report";
import viewReport from "./modals/viewReport";

const state = {
	modals: {
		removeAccount: false,
		editSong: false,
		editSongs: false,
		importAlbum: false,
		viewPunishment: false,
		confirm: false,
		editSongConfirm: false,
		editSongsConfirm: false,
		bulkActions: false
	},
	currentlyActive: [],
	new: {
		activeModals: [],
		modalMap: {}
	}
};

const modalModules = {
	editUser,
	whatIsNew,
	createStation,
	editNews,
	manageStation,
	importPlaylist,
	editPlaylist,
	report,
	viewReport
};

const migratedModules = {
	whatIsNew: true,
	manageStation: true,
	login: true,
	register: true,
	createStation: true,
	importPlaylist: true,
	editPlaylist: true,
	createPlaylist: true,
	report: true,
	removeAccount: false,
	editNews: true,
	editSong: false,
	editSongs: false,
	editUser: true,
	importAlbum: false,
	viewReport: true,
	viewPunishment: false,
	confirm: false,
	editSongConfirm: false,
	editSongsConfirm: false,
	bulkActions: false
};

const getters = {};

const actions = {
	closeModal: ({ commit }, modal) => {
		if (modal === "register")
			lofig.get("recaptcha.enabled").then(enabled => {
				if (enabled) window.location.reload();
			});

		commit("closeModal", modal);
	},
	openModal: ({ commit }, dataOrModal) =>
		new Promise(resolve => {
			const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
				/[xy]/g,
				symbol => {
					let array;

					if (symbol === "y") {
						array = ["8", "9", "a", "b"];
						return array[Math.floor(Math.random() * array.length)];
					}

					array = new Uint8Array(1);
					window.crypto.getRandomValues(array);
					return (array[0] % 16).toString(16);
				}
			);

			if (typeof dataOrModal === "string")
				commit("openModal", { modal: dataOrModal, uuid });
			else commit("openModal", { ...dataOrModal, uuid });
			resolve({ uuid });
		}),
	closeCurrentModal: ({ commit }) => {
		commit("closeCurrentModal");
	}
};

const mutations = {
	closeModal(state, modal) {
		if (!migratedModules[modal]) {
			state.modals[modal] = false;
			const index = state.currentlyActive.indexOf(modal);
			if (index > -1) state.currentlyActive.splice(index, 1);
		} else {
			Object.entries(state.new.modalMap).forEach(([uuid, _modal]) => {
				if (modal === _modal) {
					state.new.activeModals.splice(
						state.new.activeModals.indexOf(uuid),
						1
					);
					state.currentlyActive.splice(
						state.currentlyActive.indexOf(`${modal}-${uuid}`),
						1
					);
					delete state.new.modalMap[uuid];
				}
			});
		}
	},
	openModal(state, { modal, uuid, data }) {
		if (!migratedModules[modal]) {
			state.modals[modal] = true;
			state.currentlyActive.push(modal);
		} else {
			state.new.modalMap[uuid] = modal;

			if (modalModules[modal]) {
				this.registerModule(
					["modals", modal, uuid],
					modalModules[modal]
				);
				if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);
			}

			state.new.activeModals.push(uuid);
			state.currentlyActive.push(`${modal}-${uuid}`);
		}
	},
	closeCurrentModal(state) {
		const currentlyActiveModal =
			state.currentlyActive[state.currentlyActive.length - 1];
		// TODO: make sure to only destroy/register modal listeners for a unique modal
		// remove any websocket listeners for the modal
		ws.destroyModalListeners(currentlyActiveModal);

		if (
			!migratedModules[
				currentlyActiveModal.substring(
					0,
					currentlyActiveModal.indexOf("-")
				)
			]
		) {
			state.modals[currentlyActiveModal] = false;
			state.currentlyActive.pop();
		} else {
			state.currentlyActive.pop();
			state.new.activeModals.pop();
			// const modal = currentlyActiveModal.substring(
			// 	0,
			// 	currentlyActiveModal.indexOf("-")
			// );
			const uuid = currentlyActiveModal.substring(
				currentlyActiveModal.indexOf("-") + 1
			);
			delete state.new.modalMap[uuid];
		}
	}
};

export default {
	namespaced: true,
	state,
	getters,
	actions,
	mutations
};