refactor: Tidied up sortable playlists composable

frontend/src/composables/useSortablePlaylists.ts

@@ -1,12 +1,14 @@
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { useStore } from "vuex";
 import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
+import ws from "@/ws";
 
 export function useSortablePlaylists() {
     const orderOfPlaylists = ref([]);
     const drag = ref(false);
-    const disabled = ref(false);
+    const userId = ref();
+    const currentUser = ref(true);
 
     const store = useStore();
 
@@ -21,7 +23,7 @@ export function useSortablePlaylists() {
     const dragOptions = computed(() => ({
         animation: 200,
         group: "playlists",
-        disabled: disabled.value,
+        disabled: !currentUser.value,
         ghostClass: "draggable-list-ghost"
     }));
 
@@ -66,7 +68,22 @@ export function useSortablePlaylists() {
 		});
     };
 
-    onMounted(() => {
+    onMounted(async () => {
+		await nextTick();
+		ws.onConnect(() => {
+			if (!currentUser.value)
+				socket.dispatch(
+					"apis.joinRoom",
+					`profile.${userId.value}.playlists`,
+					() => {}
+				);
+
+			socket.dispatch("playlists.indexForUser", userId.value, res => {
+				if (res.status === "success") setPlaylists(res.data.playlists);
+				orderOfPlaylists.value = calculatePlaylistOrder(); // order in regards to the database
+			});
+		});
+
 		socket.on(
 			"event:playlist.created",
 			res => addPlaylist(res.data.playlist),
@@ -155,17 +172,22 @@ export function useSortablePlaylists() {
 		);
 	});
 
+	onBeforeUnmount(() => {
+		if (!currentUser.value)
+			socket.dispatch(
+				"apis.leaveRoom",
+				`profile.${userId.value}.playlists`,
+				() => {}
+			);
+	});
+
     return {
 		Sortable,
         drag,
-		orderOfPlaylists,
-        disabled,
+        userId,
+        currentUser,
         playlists,
         dragOptions,
-		setPlaylists,
-        addPlaylist,
-        removePlaylist,
-		calculatePlaylistOrder,
         savePlaylistOrder
     };
 };

frontend/src/pages/Profile/Tabs/Playlists.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import {
-	defineAsyncComponent,
-	computed,
-	onMounted,
-	onBeforeUnmount
-} from "vue";
+import { defineAsyncComponent, computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
-import ws from "@/ws";
 
 const PlaylistItem = defineAsyncComponent(
 	() => import("@/components/PlaylistItem.vue")
@@ -22,46 +16,21 @@ const store = useStore();
 
 const myUserId = computed(() => store.state.user.auth.userId);
 
-const { socket } = store.state.websockets;
-
 const {
 	Sortable,
 	drag,
-	orderOfPlaylists,
-	disabled,
+	userId,
+	currentUser,
 	playlists,
 	dragOptions,
-	setPlaylists,
-	calculatePlaylistOrder,
 	savePlaylistOrder
 } = useSortablePlaylists();
 
 const openModal = modal => store.dispatch("modalVisibility/openModal", modal);
 
 onMounted(() => {
-	ws.onConnect(() => {
-		if (myUserId.value !== props.userId)
-			socket.dispatch(
-				"apis.joinRoom",
-				`profile.${props.userId}.playlists`,
-				() => {}
-			);
-
-		socket.dispatch("playlists.indexForUser", props.userId, res => {
-			if (res.status === "success") setPlaylists(res.data.playlists);
-			orderOfPlaylists.value = calculatePlaylistOrder(); // order in regards to the database
-			disabled.value = myUserId.value !== props.userId;
-		});
-	});
-});
-
-onBeforeUnmount(() => {
-	if (myUserId.value !== props.userId)
-		socket.dispatch(
-			"apis.leaveRoom",
-			`profile.${props.userId}.playlists`,
-			() => {}
-		);
+	userId.value = props.userId;
+	currentUser.value = myUserId.value === props.userId;
 });
 </script>