refactor(EditPlaylist/AddSongs): Converted to composition API

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch, onMounted } from "vue";
+import { useModalState } from "@/vuex_helpers";
+import useSearchYoutube from "@/composables/useSearchYoutube";
+import useSearchMusare from "@/composables/useSearchMusare";
+
+const SongItem = defineAsyncComponent(
+	() => import("@/components/SongItem.vue")
+);
+const SearchQueryItem = defineAsyncComponent(
+	() => import("@/components/SearchQueryItem.vue")
+);
+
+const props = defineProps({
+	modalUuid: { type: String, default: "" }
+});
+
+const { playlistId, playlist } = useModalState(
+	"modals/editPlaylist/MODAL_UUID",
+	{
+		modalUuid: props.modalUuid
+	}
+);
+
+const sitename = ref("Musare");
+
+const {
+	youtubeSearch,
+	searchForSongs,
+	loadMoreSongs,
+	addYouTubeSongToPlaylist
+} = useSearchYoutube();
+
+const {
+	musareSearch,
+	resultsLeftCount,
+	nextPageResultsCount,
+	searchForMusareSongs,
+	addMusareSongToPlaylist
+} = useSearchMusare();
+
+watch(youtubeSearch.value.songs.results, songs => {
+	songs.forEach((searchItem, index) =>
+		playlist.songs.find(song => {
+			if (song.youtubeId === searchItem.id)
+				youtubeSearch.value.songs.results[index].isAddedToQueue = true;
+			return song.youtubeId === searchItem.id;
+		})
+	);
+});
+watch(musareSearch.value.results, songs => {
+	songs.forEach((searchItem, index) =>
+		playlist.songs.find(song => {
+			if (song._id === searchItem._id)
+				musareSearch.value.results[index].isAddedToQueue = true;
+
+			return song._id === searchItem._id;
+		})
+	);
+});
+watch(playlist.songs, () => {
+	youtubeSearch.value.songs.results.forEach((searchItem, index) =>
+		playlist.songs.find(song => {
+			youtubeSearch.value.songs.results[index].isAddedToQueue = false;
+			if (song.youtubeId === searchItem.id)
+				youtubeSearch.value.songs.results[index].isAddedToQueue = true;
+
+			return song.youtubeId === searchItem.id;
+		})
+	);
+	musareSearch.value.results.forEach((searchItem, index) =>
+		playlist.songs.find(song => {
+			musareSearch.value.results[index].isAddedToQueue = false;
+			if (song.youtubeId === searchItem.youtubeId)
+				musareSearch.value.results[index].isAddedToQueue = true;
+
+			return song.youtubeId === searchItem.youtubeId;
+		})
+	);
+});
+
+onMounted(async () => {
+	sitename.value = await lofig.get("siteSettings.sitename");
+});
+</script>
+
 <template>
 	<div class="youtube-tab section">
 		<div>
@@ -47,6 +133,7 @@
 								v-tippy
 								@click="
 									addMusareSongToPlaylist(
+										playlistId,
 										song.youtubeId,
 										index
 									)
@@ -120,7 +207,11 @@
 								content="Add Song to Playlist"
 								v-tippy
 								@click="
-									addYouTubeSongToPlaylist(result.id, index)
+									addYouTubeSongToPlaylist(
+										playlistId,
+										result.id,
+										index
+									)
 								"
 								>playlist_add</i
 							>
@@ -139,91 +230,6 @@
 	</div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-
-import { mapModalState } from "@/vuex_helpers";
-
-import SearchYoutube from "@/mixins/SearchYoutube.vue";
-import SearchMusare from "@/mixins/SearchMusare.vue";
-
-import SongItem from "@/components/SongItem.vue";
-import SearchQueryItem from "@/components/SearchQueryItem.vue";
-
-export default {
-	components: { SearchQueryItem, SongItem },
-	mixins: [SearchYoutube, SearchMusare],
-	props: {
-		modalUuid: { type: String, default: "" }
-	},
-	data() {
-		return {
-			sitename: "Musare"
-		};
-	},
-	computed: {
-		...mapModalState("modals/editPlaylist/MODAL_UUID", {
-			playlist: state => state.playlist
-		}),
-		...mapGetters({
-			socket: "websockets/getSocket"
-		})
-	},
-	watch: {
-		"youtubeSearch.songs.results": function checkIfSongInPlaylist(songs) {
-			songs.forEach((searchItem, index) =>
-				this.playlist.songs.find(song => {
-					if (song.youtubeId === searchItem.id)
-						this.youtubeSearch.songs.results[
-							index
-						].isAddedToQueue = true;
-
-					return song.youtubeId === searchItem.id;
-				})
-			);
-		},
-		"musareSearch.results": function checkIfSongInPlaylist(songs) {
-			songs.forEach((searchItem, index) =>
-				this.playlist.songs.find(song => {
-					if (song._id === searchItem._id)
-						this.musareSearch.results[index].isAddedToQueue = true;
-
-					return song._id === searchItem._id;
-				})
-			);
-		},
-		"playlist.songs": function checkIfSongInPlaylist() {
-			this.youtubeSearch.songs.results.forEach((searchItem, index) =>
-				this.playlist.songs.find(song => {
-					this.youtubeSearch.songs.results[
-						index
-					].isAddedToQueue = false;
-					if (song.youtubeId === searchItem.id)
-						this.youtubeSearch.songs.results[
-							index
-						].isAddedToQueue = true;
-
-					return song.youtubeId === searchItem.id;
-				})
-			);
-			console.log(222);
-			this.musareSearch.results.forEach((searchItem, index) =>
-				this.playlist.songs.find(song => {
-					this.musareSearch.results[index].isAddedToQueue = false;
-					if (song.youtubeId === searchItem.youtubeId)
-						this.musareSearch.results[index].isAddedToQueue = true;
-
-					return song.youtubeId === searchItem.youtubeId;
-				})
-			);
-		}
-	},
-	async mounted() {
-		this.sitename = await lofig.get("siteSettings.sitename");
-	}
-};
-</script>
-
 <style lang="less" scoped>
 .youtube-tab {
 	.song-query-results {

frontend/src/composables/useSearchMusare.ts

@@ -74,13 +74,12 @@ export default function useSearchMusare() {
 		);
 	};
 
-	const addMusareSongToPlaylist = (id, index) => {
-		return new Error("Not done yet.");
+	const addMusareSongToPlaylist = (playlistId, id, index) => {
 		socket.dispatch(
 			"playlists.addSongToPlaylist",
 			false,
 			id,
-			this.playlist._id,
+			playlistId,
 			res => {
 				new Toast(res.message);
 				if (res.status === "success")

frontend/src/composables/useSearchYoutube.ts

@@ -82,12 +82,12 @@ export default function useSearchYoutube() {
 		);
 	};
 
-	const addYouTubeSongToPlaylist = (id, index) => {
+	const addYouTubeSongToPlaylist = (playlistId, id, index) => {
 		socket.dispatch(
 			"playlists.addSongToPlaylist",
 			false,
 			id,
-			this.playlist._id,
+			playlistId,
 			res => {
 				new Toast(res.message);
 				if (res.status === "success")