feat(project): limit playlists item to 25

jwplayer · Jul 21, 2021 · 58c9560 · 58c9560
1 parent d7b4970
commit 58c9560
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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);
 };
 
 /**