refactor(CreatePlaylist): Converted to composition API

frontend/src/components/modals/CreatePlaylist.vue

@@ -1,3 +1,65 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { ref, onBeforeUnmount } from "vue";
+import Toast from "toasters";
+import validation from "@/validation";
+
+defineProps({
+	modalUuid: { type: String, default: "" }
+});
+
+const playlist = ref({
+	displayName: "",
+	privacy: "public",
+	songs: []
+});
+
+const store = useStore();
+
+const openModal = payload =>
+	store.dispatch("modalVisibility/openModal", payload);
+const closeCurrentModal = () =>
+	store.dispatch("modalVisibility/closeCurrentModal");
+
+const { socket } = store.state.websockets;
+
+const createPlaylist = () => {
+	const { displayName } = playlist.value;
+
+	if (!validation.isLength(displayName, 2, 32))
+		return new Toast("Display name must have between 2 and 32 characters.");
+	if (!validation.regex.ascii.test(displayName))
+		return new Toast(
+			"Invalid display name format. Only ASCII characters are allowed."
+		);
+
+	return socket.dispatch("playlists.create", playlist.value, res => {
+		new Toast(res.message);
+
+		if (res.status === "success") {
+			closeCurrentModal();
+
+			if (!window.addToPlaylistDropdown) {
+				openModal({
+					modal: "editPlaylist",
+					data: { playlistId: res.data.playlistId }
+				});
+			}
+		}
+	});
+};
+
+onBeforeUnmount(() => {
+	if (window.addToPlaylistDropdown)
+		window.addToPlaylistDropdown.tippy.setProps({
+			zIndex: 9999,
+			hideOnClick: true
+		});
+
+	window.addToPlaylistDropdown = null;
+});
+</script>
+
 <template>
 	<modal title="Create Playlist" :size="'slim'">
 		<template #body>
@@ -31,71 +93,3 @@
 		</template>
 	</modal>
 </template>
-
-<script>
-import { mapActions, mapGetters } from "vuex";
-
-import Toast from "toasters";
-import validation from "@/validation";
-
-export default {
-	props: {
-		modalUuid: { type: String, default: "" }
-	},
-	data() {
-		return {
-			playlist: {
-				displayName: "",
-				privacy: "public",
-				songs: []
-			}
-		};
-	},
-	computed: mapGetters({
-		socket: "websockets/getSocket"
-	}),
-	unmounted() {
-		if (window.addToPlaylistDropdown)
-			window.addToPlaylistDropdown.tippy.setProps({
-				zIndex: 9999,
-				hideOnClick: true
-			});
-
-		window.addToPlaylistDropdown = null;
-	},
-	methods: {
-		createPlaylist() {
-			const { displayName } = this.playlist;
-
-			if (!validation.isLength(displayName, 2, 32))
-				return new Toast(
-					"Display name must have between 2 and 32 characters."
-				);
-			if (!validation.regex.ascii.test(displayName))
-				return new Toast(
-					"Invalid display name format. Only ASCII characters are allowed."
-				);
-
-			return this.socket.dispatch(
-				"playlists.create",
-				this.playlist,
-				res => {
-					new Toast(res.message);
-
-					if (res.status === "success") {
-						this.closeModal("createPlaylist");
-
-						if (!window.addToPlaylistDropdown) {
-							this.openModal({
-								modal: "editPlaylist",
-								data: { playlistId: res.data.playlistId }
-							});
-						}
-					}
-				}
-			);
-		},
-		...mapActions("modalVisibility", ["closeModal", "openModal"])
-	}
-};
-</script>