refactor(useSortablePlaylists): Get current userId within composable

frontend/src/composables/useSortablePlaylists.ts

@@ -8,7 +8,6 @@ export function useSortablePlaylists() {
     const orderOfPlaylists = ref([]);
     const drag = ref(false);
     const userId = ref();
-    const currentUser = ref(true);
 
     const store = useStore();
 
@@ -20,10 +19,12 @@ export function useSortablePlaylists() {
             store.commit("user/playlists/updatePlaylists", playlists);
         }
     });
-    const dragOptions = computed(() => ({
+    const myUserId = computed(() => store.state.user.auth.userId);
+    const isCurrentUser = computed(() => userId.value === myUserId.value);
+	const dragOptions = computed(() => ({
         animation: 200,
         group: "playlists",
-        disabled: !currentUser.value,
+        disabled: !isCurrentUser.value,
         ghostClass: "draggable-list-ghost"
     }));
 
@@ -70,8 +71,11 @@ export function useSortablePlaylists() {
 
     onMounted(async () => {
 		await nextTick();
+
+		if (!userId.value) userId.value = myUserId.value;
+
 		ws.onConnect(() => {
-			if (!currentUser.value)
+			if (!isCurrentUser.value)
 				socket.dispatch(
 					"apis.joinRoom",
 					`profile.${userId.value}.playlists`,
@@ -173,7 +177,7 @@ export function useSortablePlaylists() {
 	});
 
 	onBeforeUnmount(() => {
-		if (!currentUser.value)
+		if (!isCurrentUser.value)
 			socket.dispatch(
 				"apis.leaveRoom",
 				`profile.${userId.value}.playlists`,
@@ -185,7 +189,7 @@ export function useSortablePlaylists() {
 		Sortable,
         drag,
         userId,
-        currentUser,
+        isCurrentUser,
         playlists,
         dragOptions,
         savePlaylistOrder

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, computed, onMounted } from "vue";
+import { defineAsyncComponent, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
 
@@ -12,25 +12,22 @@ const props = defineProps({
 	username: { type: String, default: "" }
 });
 
-const store = useStore();
-
-const myUserId = computed(() => store.state.user.auth.userId);
-
 const {
 	Sortable,
 	drag,
 	userId,
-	currentUser,
+	isCurrentUser,
 	playlists,
 	dragOptions,
 	savePlaylistOrder
 } = useSortablePlaylists();
 
+const store = useStore();
+
 const openModal = modal => store.dispatch("modalVisibility/openModal", modal);
 
 onMounted(() => {
 	userId.value = props.userId;
-	currentUser.value = myUserId.value === props.userId;
 });
 </script>
 
@@ -38,16 +35,14 @@ onMounted(() => {
 	<div class="content playlists-tab">
 		<div v-if="playlists.length > 0">
 			<h4 class="section-title">
-				{{ myUserId === userId ? "My" : null }}
+				{{ isCurrentUser ? "My" : null }}
 				Playlists
 			</h4>
 
 			<p class="section-description">
 				View
 				{{
-					userId === myUserId
-						? "and manage your personal"
-						: `${username}'s`
+					isCurrentUser ? "and manage your personal" : `${username}'s`
 				}}
 				playlists
 			</p>
@@ -76,12 +71,12 @@ onMounted(() => {
 						:playlist="element"
 						:class="{
 							item: true,
-							'item-draggable': myUserId === userId
+							'item-draggable': isCurrentUser
 						}"
 					>
 						<template #actions>
 							<i
-								v-if="myUserId === userId"
+								v-if="isCurrentUser"
 								@click="
 									openModal({
 										modal: 'editPlaylist',
@@ -112,7 +107,7 @@ onMounted(() => {
 			</Sortable>
 
 			<button
-				v-if="myUserId === userId"
+				v-if="isCurrentUser"
 				class="button is-primary"
 				id="create-new-playlist-button"
 				@click="openModal('createPlaylist')"