From 58c95604c0b977d1dca175e81b8d4cce4433812c Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Wed, 21 Jul 2021 10:22:30 +0200
Subject: [PATCH] feat(project): limit playlists item to 25

---
 src/containers/Playlist/PlaylistContainer.tsx | 10 +++++-----
 src/hooks/usePlaylist.ts                      |  3 ++-
 src/services/api.service.ts                   |  5 +++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
index 6754654ab..bf0df8bdd 100644
--- a/src/containers/Playlist/PlaylistContainer.tsx
+++ b/src/containers/Playlist/PlaylistContainer.tsx
@@ -23,11 +23,11 @@ type Props = {
 
 const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children }: Props): JSX.Element | null => {
   const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
-  const { isLoading, error, data: fetchedPlaylist = { title: '', playlist: [] } }: UsePlaylistResult = usePlaylist(
-    playlistId,
-    relatedItem?.mediaid,
-    !isAlternativeShelf && !!playlistId,
-  );
+  const {
+    isLoading,
+    error,
+    data: fetchedPlaylist = { title: '', playlist: [] },
+  }: UsePlaylistResult = usePlaylist(playlistId, relatedItem?.mediaid, !isAlternativeShelf && !!playlistId, true, 25);
 
   let playlist = fetchedPlaylist;
 
diff --git a/src/hooks/usePlaylist.ts b/src/hooks/usePlaylist.ts
index e9d3282b0..dbbba17a2 100644
--- a/src/hooks/usePlaylist.ts
+++ b/src/hooks/usePlaylist.ts
@@ -13,8 +13,9 @@ export default function usePlaylist(
   relatedMediaId?: string,
   enabled: boolean = true,
   usePlaceholderData: boolean = true,
+  limit?: number,
 ): UsePlaylistResult {
-  return useQuery(['playlist', playlistId, relatedMediaId], () => getPlaylistById(playlistId, relatedMediaId), {
+  return useQuery(['playlist', playlistId, relatedMediaId], () => getPlaylistById(playlistId, relatedMediaId, limit), {
     enabled: !!playlistId && enabled,
     placeholderData: usePlaceholderData ? placeholderData : undefined,
     retry: false,
diff --git a/src/services/api.service.ts b/src/services/api.service.ts
index cd676008b..91c647683 100644
--- a/src/services/api.service.ts
+++ b/src/services/api.service.ts
@@ -22,10 +22,11 @@ export const getDataOrThrow = async (response: Response) => {
  * @param {string} id
  * @param relatedMediaId
  */
-export const getPlaylistById = (id: string, relatedMediaId?: string): Promise<Playlist | undefined> => {
+export const getPlaylistById = (id: string, relatedMediaId?: string, limit?: number): Promise<Playlist | undefined> => {
   const relatedQuery = relatedMediaId ? `?related_media_id=${relatedMediaId}` : '';
+  const limitQuery = limit ? `?page_limit=${limit}` : '';
 
-  return fetch(`${API_BASE_URL}/v2/playlists/${id}${relatedQuery}`).then(getDataOrThrow);
+  return fetch(`${API_BASE_URL}/v2/playlists/${id}${relatedQuery}${limitQuery}`).then(getDataOrThrow);
 };
 
 /**