SpotifyPlayList-dev-024-auto-gen-recommend-playlist

springSpotifyPlayList/backend/SpotifyPlayList/src/main/java/com/yen/SpotifyPlayList/controller/PlayListController.java

@@ -32,7 +32,8 @@ public ResponseEntity getPlayListWithId(@PathVariable("playListId") String playL
 
         try {
             Playlist playlist = playListService.getPlaylistById(playListId);
-            return ResponseEntity.status(HttpStatus.OK).body(playlist);
+            //return ResponseEntity.status(HttpStatus.OK).body(playlist);
+            return ResponseEntity.status(HttpStatus.OK).body(playlist.getId());
         } catch (Exception e) {
             log.error("getPlayListWithId error : " + e);
             return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(e.getMessage());

springSpotifyPlayList/backend/SpotifyPlayList/src/test/java/com/yen/SpotifyPlayList/dev/GetCurrentUsersProfileTest.java

@@ -0,0 +1,39 @@
+package com.yen.SpotifyPlayList.dev;
+
+// https://github.com/spotify-web-api-java/spotify-web-api-java/blob/master/examples/data/users_profile/GetCurrentUsersProfileExample.java
+
+import org.junit.jupiter.api.Test;
+import se.michaelthelin.spotify.SpotifyApi;
+import se.michaelthelin.spotify.exceptions.SpotifyWebApiException;
+import se.michaelthelin.spotify.model_objects.specification.User;
+import se.michaelthelin.spotify.requests.data.users_profile.GetCurrentUsersProfileRequest;
+import org.apache.hc.core5.http.ParseException;
+
+import java.io.IOException;
+import java.util.concurrent.CancellationException;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.CompletionException;
+
+public class GetCurrentUsersProfileTest {
+
+  private static final String accessToken =
+      "BQAyYa5EulnKhoyw-MO49fHyhGp5AFb3dQBYtMIj_rcH8CKiQabPEjpHox0AlrXxhUJiQDlVp0DZEewMQ9_0AiPcUBp_JhiSxCJA4nwsXSpgHSh4Cfg";
+
+  @Test
+  public void getUserProfile_1() {
+
+    final SpotifyApi spotifyApi = new SpotifyApi.Builder().setAccessToken(accessToken).build();
+    final GetCurrentUsersProfileRequest getCurrentUsersProfileRequest =
+        spotifyApi.getCurrentUsersProfile().build();
+
+    try {
+      final User user = getCurrentUsersProfileRequest.execute();
+
+      System.out.println("Display name: " + user.getDisplayName());
+    } catch (IOException | SpotifyWebApiException | ParseException e) {
+      System.out.println("Error: " + e.getMessage());
+    }
+  }
+
+
+}

springSpotifyPlayList/backend/SpotifyPlayList/src/test/java/com/yen/SpotifyPlayList/dev/GetUsersProfileExampleTest.java

@@ -0,0 +1,48 @@
+package com.yen.SpotifyPlayList.dev;
+
+// https://github.com/spotify-web-api-java/spotify-web-api-java/blob/master/examples/data/users_profile/GetUsersProfileExample.java
+
+import org.junit.jupiter.api.Test;
+import se.michaelthelin.spotify.SpotifyApi;
+import se.michaelthelin.spotify.exceptions.SpotifyWebApiException;
+import se.michaelthelin.spotify.model_objects.specification.User;
+import se.michaelthelin.spotify.requests.data.users_profile.GetUsersProfileRequest;
+import org.apache.hc.core5.http.ParseException;
+
+import java.io.IOException;
+import java.util.concurrent.CancellationException;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.CompletionException;
+
+public class GetUsersProfileExampleTest {
+
+
+  private static final String accessToken =
+          "BQAyYa5EulnKhoyw-MO49fHyhGp5AFb3dQBYtMIj_rcH8CKiQabPEjpHox0AlrXxhUJiQDlVp0DZEewMQ9_0AiPcUBp_JhiSxCJA4nwsXSpgHSh4Cfg";
+
+
+  private static final String userId = "62kytpy7jswykfjtnjn9zv3ou";
+
+  @Test
+  public void getUserProfileTest_1() {
+
+    final SpotifyApi spotifyApi = new SpotifyApi.Builder().setAccessToken(accessToken).build();
+    final GetUsersProfileRequest getUsersProfileRequest =
+        spotifyApi.getUsersProfile(userId).build();
+
+    try {
+      final User user = getUsersProfileRequest.execute();
+
+      System.out.println("=====================");
+      System.out.println("Display name: " + user.getDisplayName());
+      System.out.println("Display id: " + user.getId());
+      System.out.println("Display external url: " + user.getExternalUrls());
+      System.out.println("Display external country: " + user.getCountry());
+
+
+    } catch (IOException | SpotifyWebApiException | ParseException e) {
+      System.out.println("Error: " + e.getMessage());
+    }
+  }
+
+}

springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue

@@ -13,6 +13,14 @@
         </div>
         |
 
+        <!-- Dropdown for Search options with arrow indicator -->
+        <div class="dropdown">
+          <span class="dropdown-label">Create ▼</span>
+          <div class="dropdown-content">
+            <router-link to="/playlist">Create Playlist</router-link>
+          </div>
+        </div>
+
         <!-- Dropdown for Search options with arrow indicator -->
         <div class="dropdown">
           <span class="dropdown-label">Search ▼</span>
@@ -24,16 +32,12 @@
         </div>
         |
 
-        <router-link to="/playlist">Create Playlist</router-link> |
-
         <!-- Dropdown for Recommendations options with arrow indicator -->
         <div class="dropdown">
           <span class="dropdown-label">Recommendation ▼</span>
           <div class="dropdown-content">
             <router-link to="/recommendation">Recommendation</router-link>
-            <router-link to="/recommendationWithPlayList"
-              >Recommendation With Playlist</router-link
-            >
+            <router-link to="/recommendationWithPlayList">Recommendation With Playlist</router-link>
           </div>
         </div>
       </nav>

springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/PlayList/CreatePlayList.vue

@@ -56,6 +56,8 @@ export default {
         if (response.status === 200) {
           this.playlistCreated = true;
           this.playlistCreationError = null; // Clear error if successful
+          this.createdPlaylistId = response.data.id; // Store the playlist ID
+          console.log(">>> Created playlist ID =", this.createdPlaylistId);
         } else {
           throw new Error("Failed to create playlist");
         }

springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Profile/ListUserPlayList.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <h1>User PlayList List</h1>
+    <h2>({{ playLists.length }} items)</h2>
     <div class="row">
       <div class="col-12 text-center">
         <!-- <h1 class="main-heading">User Playlists</h1> -->

springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Recommendation/GetRecommendation.vue

@@ -76,7 +76,8 @@
       <!-- Playlist ID Input -->
       <div class="form-group">
         <label>Playlist ID</label>
-        <input type="text" class="form-control large-input" v-model="playlistId" placeholder="Playlist Id Add songs to" />
+        <input type="text" class="form-control large-input" v-model="playlistId"
+          placeholder="Playlist Id Add songs to" />
       </div>
 
       <div class="button-group">
@@ -96,7 +97,7 @@
           URL:
           <a :href="track.externalUrls.externalUrls.spotify" target="_blank">{{
             track.externalUrls.externalUrls.spotify
-            }}</a>
+          }}</a>
         </p>
 
         <img v-if="track.album.images && track.album.images.length > 0" :src="track.album.images[0].url"
@@ -117,6 +118,7 @@
 </template>
 
 <script>
+import axios from "axios";
 export default {
   props: ["baseURL"],
   data() {
@@ -133,6 +135,11 @@ export default {
       trackURIs: "",
       playlistId: "",
       addToPlayList: false,
+      // create new playlist
+      playlistCreated: false,
+      playlistCreationError: null, // To track errors
+      newPlayList: { userId: "someId", name: "", authCode: "code" },
+      createdPlayListId: null,
     };
   },
   methods: {
@@ -166,6 +173,12 @@ export default {
 
     async addSongToPlayList() {
       try {
+
+        // step 1) create new playlist
+        //createdPlayListId = this.createPlaylist();
+        this.createPlaylist();
+
+        // step 2) add songs to the create playlist
         this.trackURIs = this.tracks.tracks.map((track) => track.uri);
 
         const response = await fetch(`${this.baseURL}/playlist/addSong`, {
@@ -175,7 +188,8 @@ export default {
           },
           body: JSON.stringify({
             songUris: this.trackURIs.toString(),
-            playlistId: this.playlistId,
+            //playlistId: this.playlistId,
+            playlistId: this.createdPlaylistId,
           }),
         });
         if (response.status === 200) {
@@ -188,6 +202,34 @@ export default {
         console.error(error);
       }
     },
+
+    async createPlaylist() {
+      try {
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get("code");
+        if (!code) {
+          throw new Error("Authorization code not found");
+        }
+        this.newPlayList.authCode = code;
+        // auto gen new playList name
+        this.newPlayList.name = 'ml-recommend-xxx';
+        const response = await axios.post(
+          `${this.baseURL}/playlist/create`,
+          this.newPlayList
+        );
+        if (response.status === 200) {
+          this.playlistCreated = true;
+          this.playlistCreationError = null; // Clear error if successful
+          this.createdPlaylistId = response.data.id; // Store the playlist ID
+          console.log(">>> Created playlist ID =", this.createdPlaylistId);
+        } else {
+          throw new Error("Failed to create playlist");
+        }
+      } catch (error) {
+        console.error(error);
+        this.playlistCreationError = error.message; // Set error message
+      }
+    },
   },
 };
 </script>