refactor: continued migrating SearchYoutube mixin to a composable, migrated EditSong Youtube tab to composition API, added useModalActions to vuex helpers, a few other fixes/changes

frontend/src/components/FloatingBox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // WIP
 import { onMounted, onUnmounted, ref, defineExpose } from "vue";
-import useDragBox from "@/components/useDragBox";
+import useDragBox from "@/composables/useDragBox";
 
 const props = defineProps({
 	id: { type: String, default: null },

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -3,7 +3,7 @@ import { ref, onMounted } from "vue";
 
 import { useModalState } from "@/vuex_helpers";
 
-import { useSearchMusare } from "@/components/useSearchMusare";
+import { useSearchMusare } from "@/composables/useSearchMusare";
 
 import SongItem from "@/components/SongItem.vue";
 

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { useModalState, useModalActions } from "@/vuex_helpers";
+
+import { useSearchYoutube } from "@/composables/useSearchYoutube";
+
+import SearchQueryItem from "../../../SearchQueryItem.vue";
+
+const props = defineProps({
+	modalUuid: { type: String, default: "" },
+	modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
+});
+
+const { song, newSong } = useModalState("MODAL_MODULE_PATH", {
+	modalUuid: props.modalUuid,
+	modalModulePath: props.modalModulePath
+});
+
+const { updateYoutubeId, updateTitle, updateThumbnail } = useModalActions(
+	"MODAL_MODULE_PATH",
+	["updateYoutubeId", "updateTitle", "updateThumbnail"],
+	{
+		modalUuid: props.modalUuid,
+		modalModulePath: props.modalModulePath
+	}
+);
+
+const { youtubeSearch, searchForSongs, loadMoreSongs } = useSearchYoutube();
+
+const selectSong = result => {
+	updateYoutubeId(result.id);
+
+	if (newSong) {
+		updateTitle(result.title);
+		updateThumbnail(result.thumbnail);
+	}
+};
+</script>
+
 <template>
 	<div class="youtube-tab">
 		<label class="label"> Search for a song from YouTube </label>
@@ -58,52 +96,6 @@
 	</div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-
-import { mapModalState, mapModalActions } from "@/vuex_helpers";
-
-import SearchYoutube from "@/mixins/SearchYoutube.vue";
-
-import SearchQueryItem from "../../../SearchQueryItem.vue";
-
-export default {
-	components: { SearchQueryItem },
-	mixins: [SearchYoutube],
-	props: {
-		modalUuid: { type: String, default: "" },
-		modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
-	},
-	data() {
-		return {};
-	},
-	computed: {
-		...mapModalState("MODAL_MODULE_PATH", {
-			song: state => state.song,
-			newSong: state => state.newSong
-		}),
-		...mapGetters({
-			socket: "websockets/getSocket"
-		})
-	},
-	methods: {
-		selectSong(result) {
-			this.updateYoutubeId(result.id);
-
-			if (this.newSong) {
-				this.updateTitle(result.title);
-				this.updateThumbnail(result.thumbnail);
-			}
-		},
-		...mapModalActions("MODAL_MODULE_PATH", [
-			"updateYoutubeId",
-			"updateTitle",
-			"updateThumbnail"
-		])
-	}
-};
-</script>
-
 <style lang="less" scoped>
 .youtube-tab #song-query-results {
 	height: calc(100% - 74px);

frontend/src/composables/useSearchYoutube.ts

@@ -1,9 +1,9 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { useStore } from "vuex";
 
 import Toast from "toasters";
 
-export function useSearchMusare() {
+export function useSearchYoutube() {
     const store = useStore();
 
     const youtubeSearch = ref({
@@ -18,12 +18,6 @@ export function useSearchMusare() {
         }
     });
 
-    // const resultsLeftCount = computed(() =>
-    //     musareSearch.value.count - musareSearch.value.results.length);
-
-    // const nextPageResultsCount = computed(() =>
-    //     Math.min(musareSearch.value.pageSize, resultsLeftCount.value));
-
     const { socket } = store.state.websockets;
 
     const searchForSongs = () => {
@@ -50,7 +44,7 @@ export function useSearchMusare() {
                 res.data.items.forEach(result => {
                     youtubeSearch.value.songs.results.push({
                         id: result.id.videoId,
-                        url: `https://www.youtube.com/watch?v=${this.id}`,
+                        url: `https://www.youtube.com/watch?v=${result.id.videoId}`,
                         title: result.snippet.title,
                         thumbnail: result.snippet.thumbnails.default.url,
                         channelId: result.snippet.channelId,
@@ -75,7 +69,7 @@ export function useSearchMusare() {
                     res.data.items.forEach(result => {
                         youtubeSearch.value.songs.results.push({
                             id: result.id.videoId,
-                            url: `https://www.youtube.com/watch?v=${this.id}`,
+                            url: `https://www.youtube.com/watch?v=${result.id.videoId}`,
                             title: result.snippet.title,
                             thumbnail:
                                 result.snippet.thumbnails.default.url,

frontend/src/vuex_helpers.ts

@@ -92,4 +92,26 @@ const useModalState = (namespace, options) => {
 	return modalState ? modalState : {};
 }
 
-export { mapModalState, mapModalActions, mapModalComponents, useModalState };
+const useModalActions = (namespace, actions, options) => {
+	const store = useStore();
+
+	const pathStart = `${namespace
+		.replace(
+			"MODAL_MODULE_PATH",
+			namespace.indexOf("MODAL_MODULE_PATH") !== -1
+				? options.modalModulePath
+				: null
+		)
+		.replace("MODAL_UUID", options.modalUuid)}`;
+
+	const actionDispatchers = actions.map(actionName => ([actionName, function func(value) {
+		return store.dispatch(
+			`${pathStart}/${actionName}`,
+			value
+		);
+	}]));
+
+	return Object.fromEntries(actionDispatchers);
+}
+
+export { mapModalState, mapModalActions, mapModalComponents, useModalState, useModalActions };