refactor: started migrating SearchMusare mixin to a composable, migrated EditSong Songs tab to composite API, added useModalState function to vuex helpers, a few small 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.js";
+import useDragBox from "@/components/useDragBox";
 
 const props = defineProps({
 	id: { type: String, default: null },

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

@@ -1,3 +1,39 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+import { useModalState } from "@/vuex_helpers";
+
+import { useSearchMusare } from "@/components/useSearchMusare";
+
+import SongItem from "@/components/SongItem.vue";
+
+const props = defineProps({
+	modalUuid: { type: String, default: "" },
+	modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
+});
+
+const sitename = ref("Musare");
+
+const { song } = useModalState("MODAL_MODULE_PATH", {
+	modalUuid: props.modalUuid,
+	modalModulePath: props.modalModulePath
+});
+
+const {
+	musareSearch,
+	resultsLeftCount,
+	nextPageResultsCount,
+	searchForMusareSongs
+} = useSearchMusare();
+
+onMounted(async () => {
+	sitename.value = await lofig.get("siteSettings.sitename");
+
+	musareSearch.value.query = song.title;
+	searchForMusareSongs(1, false);
+});
+</script>
+
 <template>
 	<div class="musare-songs-tab">
 		<label class="label"> Search for a song on {{ sitename }} </label>
@@ -36,46 +72,6 @@
 	</div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-
-import { mapModalState } from "@/vuex_helpers";
-
-import SearchMusare from "@/mixins/SearchMusare.vue";
-
-import SongItem from "@/components/SongItem.vue";
-
-export default {
-	components: {
-		SongItem
-	},
-	mixins: [SearchMusare],
-	props: {
-		modalUuid: { type: String, default: "" },
-		modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
-	},
-	data() {
-		return {
-			sitename: "Musare"
-		};
-	},
-	computed: {
-		...mapModalState("MODAL_MODULE_PATH", {
-			song: state => state.song
-		}),
-		...mapGetters({
-			socket: "websockets/getSocket"
-		})
-	},
-	async mounted() {
-		this.sitename = await lofig.get("siteSettings.sitename");
-
-		this.musareSearch.query = this.song.title;
-		this.searchForMusareSongs(1, false);
-	}
-};
-</script>
-
 <style lang="less" scoped>
 .musare-songs-tab #song-query-results {
 	height: calc(100% - 74px);

frontend/src/composables/useSearchMusare.ts

@@ -0,0 +1,91 @@
+import { ref, computed } from "vue";
+import { useStore } from "vuex";
+
+import Toast from "toasters";
+
+export function useSearchMusare() {
+    const store = useStore();
+
+    const musareSearch = ref({
+        query: "",
+        searchedQuery: "",
+        page: 0,
+        count: 0,
+        resultsLeft: 0,
+        results: [],
+        pageSize: 0
+    });
+
+    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 searchForMusareSongs = (page, toast = true) => {
+        if (
+            musareSearch.value.page >= page ||
+            musareSearch.value.searchedQuery !== musareSearch.value.query
+        ) {
+            musareSearch.value.results = [];
+            musareSearch.value.page = 0;
+            musareSearch.value.count = 0;
+            musareSearch.value.resultsLeft = 0;
+            musareSearch.value.pageSize = 0;
+        }
+
+        musareSearch.value.searchedQuery = musareSearch.value.query;
+        socket.dispatch(
+            "songs.searchOfficial",
+            musareSearch.value.query,
+            page,
+            res => {
+                if (res.status === "success") {
+                    const { data } = res;
+                    const { count, pageSize, songs } = data;
+
+                    const newSongs = songs.map(song => ({
+                        isAddedToQueue: false,
+                        ...song
+                    }));
+
+                    musareSearch.value.results = [
+                        ...musareSearch.value.results,
+                        ...newSongs
+                    ];
+                    musareSearch.value.page = page;
+                    musareSearch.value.count = count;
+                    musareSearch.value.resultsLeft =
+                        count - musareSearch.value.results.length;
+                    musareSearch.value.pageSize = pageSize;
+                } else if (res.status === "error") {
+                    musareSearch.value.results = [];
+                    musareSearch.value.page = 0;
+                    musareSearch.value.count = 0;
+                    musareSearch.value.resultsLeft = 0;
+                    musareSearch.value.pageSize = 0;
+                    if (toast) new Toast(res.message);
+                }
+            }
+        );
+    }
+
+    const addMusareSongToPlaylist = (id, index) => {
+        return new Error("Not done yet.");
+        socket.dispatch(
+            "playlists.addSongToPlaylist",
+            false,
+            id,
+            this.playlist._id,
+            res => {
+                new Toast(res.message);
+                if (res.status === "success")
+                    musareSearch.value.results[index].isAddedToQueue = true;
+            }
+        );
+    }
+
+    return { musareSearch, resultsLeftCount, nextPageResultsCount, searchForMusareSongs, addMusareSongToPlaylist };
+}

frontend/src/vuex_helpers.ts

@@ -1,5 +1,7 @@
 import { defineAsyncComponent } from "vue";
 
+import { useStore } from "vuex";
+
 const mapModalState = (namespace, map) => {
 	const modalState = {};
 	// console.log("MAP MODAL STATE", namespace);
@@ -73,4 +75,21 @@ const mapModalComponents = (baseDirectory, map) => {
 	return modalComponents;
 };
 
-export { mapModalState, mapModalActions, mapModalComponents };
+const useModalState = (namespace, options) => {
+	const store = useStore();
+
+	const modalState = namespace
+		.replace(
+			"MODAL_MODULE_PATH",
+			namespace.indexOf("MODAL_MODULE_PATH") !== -1
+				? options.modalModulePath
+				: null
+		)
+		.replace("MODAL_UUID", options.modalUuid)
+		.split("/")
+		.reduce((a, b) => a[b], store.state);
+
+	return modalState ? modalState : {};
+}
+
+export { mapModalState, mapModalActions, mapModalComponents, useModalState };