show more hrefs in subscriptions

frontend-park-mail-ru · Dec 16, 2024 · ed2825f · ed2825f
1 parent 926b982
commit ed2825f
Show file tree

Hide file tree

Showing 18 changed files with 142 additions and 53 deletions.
diff --git a/src/app/routes.js b/src/app/routes.js
@@ -87,7 +87,7 @@ export const PAGES = [
     view: StatisticPage,
   },
   {
-    path: "/more_playlists/popular",
+    path: "/more_playlists/{type}",
     view: MorePlaylistsPage,
   },
   {

diff --git a/src/pages/more-albums/ui/MoreAlbums.js b/src/pages/more-albums/ui/MoreAlbums.js
@@ -9,6 +9,7 @@ export class MoreAlbumsPage {
    */
   constructor(params) {
     this.parent = document.querySelector('#root');
+    this.type = params['type']
     this.entity = params['entity'];
     this.entityId = params['id'];
   }
@@ -20,14 +21,21 @@ export class MoreAlbumsPage {
       this.artistId = this.entityId;
     }
 
+    if (this.type === 'favorite') {
+      this.favorite = this.type;
+    }
+
 		this.pageContent = document.createElement('div');
 		this.pageContent.classList.add('page_content');
 		this.parent.appendChild(this.pageContent);
 
-		const albumListAPI = new AlbumListAPI(this.artistId);
-		const albums = await albumListAPI.get();
+    const albumListAPI = new AlbumListAPI(this.artistId);
+    let albums = !this.favorite
+    ? await albumListAPI.get()
+    : await albumListAPI.getFavorite();
+
 		const albumListView = new AlbumListView(this.pageContent, this.artistId);
-		await albumListView.render(albums);
+		await albumListView.render(albums, this.favorite);
 
     if (userStore.storage.user.isAuthorized) {
       eventBus.emit('showPlayer');

diff --git a/src/pages/more-artists/ui/MoreArtists.js b/src/pages/more-artists/ui/MoreArtists.js
@@ -7,21 +7,29 @@ export class MoreArtistsPage {
   /**
    * Creates an instance of the View class.
    */
-  constructor() {
+  constructor(params) {
     this.parent = document.querySelector('#root');
+    this.type = params['type']
   }
 
   async render() {
     this.parent.innerHTML = '';
 
+    if (this.type === 'favorite') {
+      this.favorite = this.type;
+    }
+
 		this.pageContent = document.createElement('div');
 		this.pageContent.classList.add('page_content');
 		this.parent.appendChild(this.pageContent);
 
-		const artistListAPI = new ArtistListAPI();
-		const artists = await artistListAPI.get();
+    const artistListAPI = new ArtistListAPI();
+    let artists = !this.favorite
+    ? await artistListAPI .get()
+    : await artistListAPI .getFavorite();
+
 		const artistListView = new ArtistListView(this.pageContent);
-		await artistListView.render(artists);
+		await artistListView.render(artists, this.favorite);
 
     if (userStore.storage.user.isAuthorized) {
       eventBus.emit('showPlayer');

diff --git a/src/pages/more-playlists/ui/morePlaylists.js b/src/pages/more-playlists/ui/morePlaylists.js
@@ -7,21 +7,29 @@ export class MorePlaylistsPage {
   /**
    * Creates an instance of the View class.
    */
-  constructor() {
+  constructor(params) {
     this.parent = document.querySelector('#root');
+    this.type = params['type']
   }
 
 	async render() {
 		this.parent.innerHTML = '';
 
+    if (this.type === 'favorite') {
+      this.favorite = this.type;
+    }
+
 		this.pageContent = document.createElement('div');
 		this.pageContent.classList.add('page_content');
 		this.parent.appendChild(this.pageContent);
 
-		const playlistListAPI = new PlaylistListAPI();
-		const playlists = await playlistListAPI.get();
+    const playlistListAPI  = new PlaylistListAPI();
+    let playlists = !this.favorite
+    ? await playlistListAPI.get()
+    : await playlistListAPI.getFavorite();
+
 		const playlistListView = new PlaylistListView(this.pageContent);
-		await playlistListView.render(playlists, false);
+		await playlistListView.render(playlists, false, this.favorite);
 
     if (userStore.storage.user.isAuthorized) {
       eventBus.emit('showPlayer');

diff --git a/src/pages/more-tracks/ui/MoreTracks.js b/src/pages/more-tracks/ui/MoreTracks.js
@@ -30,7 +30,7 @@ export class MoreTracksPage {
 		this.pageContent.classList.add('page_content');
 		this.parent.appendChild(this.pageContent);
 
-		const trackListAPI = new TrackListAPI({artistId: this.artistId, albumId: this.albumId});
+		const trackListAPI = new TrackListAPI({artistId: this.artistId, albumId: this.albumId, favorite: this.favorite});
 		const trackListView = new TrackListView(
 			this.pageContent,
 			{

diff --git a/src/pages/profile/ui/profile.js b/src/pages/profile/ui/profile.js
@@ -37,6 +37,7 @@ export class ProfilePage {
   async renderFavorites() {
     const trackListAPI = new TrackListAPI({ favorite: true });
     const tracks = await trackListAPI.get();
+    if (!tracks) return;
     if (tracks.length > 0 && userStore.storage.user.isAuthorized) {
       const trackListView = new TrackListView(this.pageContent, { favorite: true });
       await trackListView.render(tracks.slice(0, 5));

diff --git a/src/pages/subscriptions/ui/subscriptions.js b/src/pages/subscriptions/ui/subscriptions.js
@@ -39,7 +39,9 @@ export class SubscriptionsPage {
     const playlistListAPI = new PlaylistListAPI();
     const playlistListView = new PlaylistListView(this.pageContent);
     const playlists = await playlistListAPI.getFavorite();
-    await playlistListView.render(playlists.slice(0, 5), true, true);
+    if (playlists) {
+      await playlistListView.render(playlists.slice(0, 5), true, true);
+    }
 
     if (
       userStore.storage.user.isAuthorized &&

diff --git a/src/shared/config/api.js b/src/shared/config/api.js
@@ -1,21 +1,21 @@
-// export const BASE_URL = "http://localhost:8080";
-//
-// export const API_USER_URL = "http://localhost:8080";
-// export const API_ALBUM_URL = "http://localhost:8080";
-// export const API_ARTIST_URL = "http://localhost:8080";
-// export const API_PLAYLIST_URL = "http://localhost:8080";
-// export const API_TRACK_URL = "http://localhost:8080";
-// export const API_GENRE_URL = "http://localhost:8080";
-// export const API_CSAT_URL = "http://localhost:8080";
-// export const S3_URL = "http://localhost:8010";
+export const BASE_URL = "http://localhost:8080";
 
-export const BASE_URL = "https://nova-music.ru";
+export const API_USER_URL = "http://localhost:8080";
+export const API_ALBUM_URL = "http://localhost:8080";
+export const API_ARTIST_URL = "http://localhost:8080";
+export const API_PLAYLIST_URL = "http://localhost:8080";
+export const API_TRACK_URL = "http://localhost:8080";
+export const API_GENRE_URL = "http://localhost:8080";
+export const API_CSAT_URL = "http://localhost:8080";
+export const S3_URL = "http://localhost:8010";
 
-export const API_USER_URL = "https://nova-music.ru";
-export const API_ALBUM_URL = "https://nova-music.ru";
-export const API_ARTIST_URL = "https://nova-music.ru:";
-export const API_PLAYLIST_URL = "https://nova-music.ru";
-export const API_TRACK_URL = "https://nova-music.ru";
-export const API_GENRE_URL = "https://nova-music.ru";
-export const API_CSAT_URL = "https://nova-music.ru";
-export const S3_URL = "https://nova-music.ru:8010";
+// export const BASE_URL = "https://nova-music.ru";
+
+// export const API_USER_URL = "https://nova-music.ru";
+// export const API_ALBUM_URL = "https://nova-music.ru";
+// export const API_ARTIST_URL = "https://nova-music.ru:";
+// export const API_PLAYLIST_URL = "https://nova-music.ru";
+// export const API_TRACK_URL = "https://nova-music.ru";
+// export const API_GENRE_URL = "https://nova-music.ru";
+// export const API_CSAT_URL = "https://nova-music.ru";
+// export const S3_URL = "https://nova-music.ru:8010";
diff --git a/src/widgets/albumCarousel/ui/albumCarousel.js b/src/widgets/albumCarousel/ui/albumCarousel.js
@@ -30,6 +30,7 @@ export class AlbumCarouselView {
     let albums = !this.favorite
       ? await albumCarouselAPI.get()
       : await albumCarouselAPI.getFavorite();
+    if (!albums) return;
 
     const albumCarouselElement = document.createElement("div");
     albumCarouselElement.classList.add("album_carousel");
@@ -40,7 +41,7 @@ export class AlbumCarouselView {
       showMoreHref = `/more_albums/${"artist"}/${this.artistId}`;
       titleText = "Альбомы исполнителя";
     } else if (this.favorite) {
-      showMoreHref = `/more_albums/popular`;
+      showMoreHref = `/more_albums/favorite`;
       titleText = "Любимые альбомы";
     } else {
       showMoreHref = `/more_albums/popular`;

diff --git a/src/widgets/albumList/api/api.js b/src/widgets/albumList/api/api.js
@@ -24,4 +24,17 @@ export class AlbumListAPI {
       console.error(error);
     }
   }
+
+  async getFavorite() {
+    try {
+      const response = await GET(`${API_ENDPOINTS.GET_FAVORITE_ALBUMS}`);
+      if (!response.error) {
+        return response.data;
+      } else {
+        console.log("Error during favorite AlbumList loading:");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
 }
diff --git a/src/widgets/albumList/ui/albumList.js b/src/widgets/albumList/ui/albumList.js
@@ -21,13 +21,15 @@ export class AlbumListView {
 	/**
 	 * Renders the album view.
 	 */
-	async render(albums) {
+	async render(albums, favorite = false) {
 		const albumListElement = document.createElement('div');
 		albumListElement.classList.add('albums');
 
 		let titleText;
 		if (this.artistId) {
 			titleText = "Альбомы исполнителя";
+		} else if (favorite) {
+			titleText = "Любимые альбомы";
 		} else {
 			titleText = "Популярные альбомы";
 		}

diff --git a/src/widgets/artistCarousel/ui/artistCarousel.js b/src/widgets/artistCarousel/ui/artistCarousel.js
@@ -29,10 +29,21 @@ export class ArtistCarouselView {
     let artists = !this.favorite
       ? await artistCarouselAPI.get()
       : await artistCarouselAPI.getFavorite();
+    if (!artists) return;
 
     const artistCarouselElement = document.createElement("div");
     artistCarouselElement.classList.add("popular_artists");
-    let showMoreHref = `/more_artists/popular`;
+
+    let titleText;
+    let showMoreHref;
+    if (this.favorite) {
+      showMoreHref = `/more_artists/favorite`;
+      titleText = "Любимые артисты";
+    } else {
+      showMoreHref = `/more_artists/popular`;
+      titleText = "Популярные артисты";
+    }
+
     artistCarouselElement.innerHTML = template({ styles, showMoreHref });
     this.parent.appendChild(artistCarouselElement);
 
@@ -46,9 +57,8 @@ export class ArtistCarouselView {
     });
 
     await this.getElements();
-    if (this.favorite) {
-      this.setTitle("Любимые артисты");
-    }
+
+    this.setTitle(titleText);
 
     this.onEvents();
     this.addEvents();

diff --git a/src/widgets/artistList/api/api.js b/src/widgets/artistList/api/api.js
@@ -28,4 +28,17 @@ export class ArtistListAPI {
       console.error(error);
     }
   }
+
+  async getFavorite() {
+    try {
+      const response = await GET(`${API_ENDPOINTS.GET_FAVORITE_ARTIST}`);
+      if (!response.error) {
+        return response.data;
+      } else {
+        console.log("Error during favorite ArtistList loading:");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
 }
diff --git a/src/widgets/artistList/ui/artistList.js b/src/widgets/artistList/ui/artistList.js
@@ -20,9 +20,16 @@ export class ArtistListView {
 	/**
 	 * Renders the playlist view.
 	 */
-	async render(artists) {
+	async render(artists, favorite = false) {
 		const artistListElement = document.createElement('div');
 		artistListElement.classList.add('artists');
+
+		let titleText;
+		if (favorite) {
+			titleText = "Любимые артисты";
+		} else {
+			titleText = "Популярные артисты";
+		}
 
 		artistListElement.innerHTML = template({ styles });
 
@@ -33,5 +40,13 @@ export class ArtistListView {
 			const artistView = new ArtistView(artistsBlock);
 			artistView.render(artist);
 		});
+
+		this.setTitle(titleText);
+	}
+
+	setTitle(titleText) {
+		const titleBlock = document.querySelector(`.${styles['artists__recommend_text']}`);
+		const title = titleBlock.querySelector('h4');
+		title.textContent = titleText;
 	}
 }
diff --git a/src/widgets/playlistList/ui/playlistList.hbs b/src/widgets/playlistList/ui/playlistList.hbs
@@ -1,11 +1,11 @@
 <div class="{{ styles.playlists__container }} container">
   <div class="{{ styles.playlists__block }} block">
-    {{#if showMoreHref}}
-      <div class="{{ styles.playlists__text }}">
-        <h4>Популярные плейлисты</h4>
-        <h4><a href="{{ showMoreHref }}" class="playlists__show_more link">Показать еще</a></h4>
-      </div>
-    {{/if}}
+    <div class="{{ styles.playlists__text }}">
+      <h4>Популярные плейлисты</h4>
+      {{#if showMoreHref}}
+      <h4><a href="{{ showMoreHref }}" class="playlists__show_more link">Показать еще</a></h4>
+      {{/if}}
+    </div>
     <div class="{{ styles.playlists__list }}" id="mainpage-popular-playlists">
 
     </div>

diff --git a/src/widgets/playlistList/ui/playlistList.js b/src/widgets/playlistList/ui/playlistList.js
@@ -26,8 +26,17 @@ export class PlaylistListView {
     const playlistListElement = document.createElement("div");
     playlistListElement.classList.add("playlists");
 
+    let titleText;
+    let showMoreHref;
+    if (favorite) {
+      showMoreHref = `/more_playlists/favorite`;
+      titleText = "Любимые плейлисты";
+    } else {
+      showMoreHref = `/more_playlists/popular`;
+      titleText = "Популярные плейлисты";
+    }
+
     if (needsShowMoreHref) {
-      let showMoreHref = `/more_playlists/popular`;
       playlistListElement.innerHTML = template({ styles, showMoreHref });
     } else {
       playlistListElement.innerHTML = template({ styles });
@@ -45,13 +54,12 @@ export class PlaylistListView {
 
     this.addEvents();
 
-    if (favorite && needsShowMoreHref) {
-      this.setTitle("Любимые плейлисты");
-    }
+    this.setTitle(titleText);
   }
 
   setTitle(newTitle) {
-    const title = document.querySelector(`.${styles["playlists__text"]}>h4`);
+    const titleBlock = document.querySelector(`.${styles['playlists__text']}`);
+    const title = titleBlock.querySelector('h4');
     title.textContent = newTitle;
   }
 

diff --git a/src/widgets/trackList/ui/trackList.js b/src/widgets/trackList/ui/trackList.js
@@ -22,7 +22,7 @@ export class TrackListView {
 		this.parent = parent ?? document.querySelector('#root');
 		this.artistId = args.artistId ?? null;
 		this.albumId = args.albumId ?? null;
-		this.favorite = arguments.favorite ?? null;
+		this.favorite = args.favorite ?? null;
 		this.myPlaylistId = args.myPlaylistId ?? false;
 	}
 

diff --git a/src/widgets/userPlaylists/ui/userPlaylists.js b/src/widgets/userPlaylists/ui/userPlaylists.js
@@ -29,6 +29,7 @@ export class UserPlaylistsView {
   async render() {
     const userPlaylistsAPI = new UserPlaylistsAPI(this.userId);
     const playlists = await userPlaylistsAPI.get();
+    if (!playlists) return;
 
     const userPlaylistsElement = document.createElement("div");
     userPlaylistsElement.classList.add("user-playlists");
@@ -52,7 +53,6 @@ export class UserPlaylistsView {
     }
 
     const playlistsBlock = document.getElementById("user-playlists");
-    if (playlists?.length === 0) return;
     Array.from(playlists).forEach((playlist) => {
       const playlistView = new PlaylistView(playlistsBlock);
       playlistView.render(playlist);