FE artist, album vue use global baseURL, remove code, export baseURL

yennanliu · Oct 1, 2024 · a424075 · a424075
1 parent 594923a
commit a424075
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 209 deletions.
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue
@@ -16,7 +16,13 @@
         Authorize with Spotify
       </button>
     </div>
-    <router-view />
+    <!-- 
+      https://youtu.be/VZ1NV7EHGJw?si=FtsSuMndmHLiBwsc&t=710 
+
+      delcare global variable via router view
+      -> so baseURL, categories are visible to ALL views
+      -->
+    <router-view :baseURL="baseURL"> </router-view>
   </div>
 </template>
 

diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue
@@ -4,7 +4,10 @@
     <!-- Album ID Form -->
     <form class="album-form text-center">
       <div class="form-group">
-        <p style="text-align: center;">Enter Album ID, example: 1VuIx4XMmSs1hGZk2uCzvO</p><br>
+        <p style="text-align: center">
+          Enter Album ID, example: 1VuIx4XMmSs1hGZk2uCzvO
+        </p>
+        <br />
         <label for="albumId" class="form-label">Enter Album ID</label>
         <input
           type="text"
@@ -14,13 +17,21 @@
           required
         />
       </div>
-      <button type="button" class="btn btn-outline-light btn-lg" @click="fetchAlbum">
+      <button
+        type="button"
+        class="btn btn-outline-light btn-lg"
+        @click="fetchAlbum"
+      >
         Submit
       </button>
     </form>
 
     <!-- Error message -->
-    <div v-if="fetchAlbumError" class="error-message text-center" style="color: red;">
+    <div
+      v-if="fetchAlbumError"
+      class="error-message text-center"
+      style="color: red"
+    >
       {{ fetchAlbumError }}
     </div>
 
@@ -51,7 +62,11 @@
       <!-- Tracks List -->
       <div class="track-list mt-4">
         <h3 class="text-center">Tracks</h3>
-        <div v-for="track in album.tracks.items" :key="track.id" class="track-card">
+        <div
+          v-for="track in album.tracks.items"
+          :key="track.id"
+          class="track-card"
+        >
           <p class="track-name">Track: {{ track.name }}</p>
 
           <!-- Track URL -->
@@ -77,25 +92,28 @@
     </div>
 
     <!-- Loading Placeholder -->
-    <div v-else-if="!fetchAlbumError" class="loading-text text-center mt-5">Loading...</div>
+    <div v-else-if="!fetchAlbumError" class="loading-text text-center mt-5">
+      Loading...
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: ["baseURL"],
   data() {
     return {
       albumId: "1VuIx4XMmSs1hGZk2uCzvO", // default value
       album: null,
-      fetchAlbumError: null // Error message state
+      fetchAlbumError: null, // Error message state
     };
   },
   methods: {
     async fetchAlbum() {
       try {
         this.fetchAlbumError = null; // Reset error state
         const response = await fetch(
-          `http://localhost:8888/album/${this.albumId}`
+          `${this.baseURL}/album/${this.albumId}`
         );
         if (!response.ok) {
           throw new Error("Failed to fetch album");

diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue
@@ -82,6 +82,7 @@
 
   <script>
 export default {
+  props: ["baseURL"],
   data() {
     return {
       albumKeyword: "funky", // default val
@@ -96,7 +97,7 @@ export default {
       try {
         console.log("this.albumKeyword = " + this.albumKeyword);
         const response = await fetch(
-          `http://localhost:8888/search/album/?keyword=${this.albumKeyword}`
+          `${this.baseURL}/search/album/?keyword=${this.albumKeyword}`
         );
         if (!response.ok) {
           throw new Error("Failed to search album");