feat(search): add useSearchPlaylist hook

.commitlintrc.js

@@ -7,6 +7,7 @@ module.exports = {
         'home',
         'playlist',
         'videodetail',
+        'search',
       ],
     ],
   },

README.md

@@ -66,6 +66,7 @@ The allowed scopes are:
 - home
 - playlist
 - videodetail
+- search
 
 ### Subject
 

src/hooks/usePlaylist.ts

@@ -1,27 +1,10 @@
 import { UseBaseQueryResult, useQuery } from 'react-query';
-import type { Playlist, PlaylistItem } from 'types/playlist';
+import type { Playlist } from 'types/playlist';
 
-const baseUrl = 'https://content.jwplatform.com';
+import { generatePlaylistPlaceholder } from '../utils/collection';
 
-const placeholderData: Playlist = {
-  title: '',
-  playlist: new Array(30).fill({
-    description: '',
-    duration: 0,
-    feedid: '',
-    image: '',
-    images: [],
-    link: '',
-    genre: '',
-    mediaid: '',
-    pubdate: 0,
-    rating: '',
-    sources: [],
-    tags: '',
-    title: '',
-    tracks: [],
-  } as PlaylistItem),
-};
+const baseUrl = 'https://content.jwplatform.com';
+const placeholderData = generatePlaylistPlaceholder(30);
 
 const getPlaylistById = (playlistId: string, relatedMediaId?: string) => {
   const relatedQuery = relatedMediaId ? `?related_media_id=${relatedMediaId}` : '';

src/hooks/useSearchPlaylist.ts

@@ -0,0 +1,23 @@
+import { UseBaseQueryResult, useQuery } from 'react-query';
+import type { Playlist } from 'types/playlist';
+
+import { generatePlaylistPlaceholder } from '../utils/collection';
+
+const baseUrl = 'https://content.jwplatform.com';
+const placeholderData = generatePlaylistPlaceholder();
+
+const getSearchPlaylist = (playlistId: string, query: string) => {
+  return fetch(`${baseUrl}/v2/playlists/${playlistId}?search=${encodeURIComponent(query)}`).then((res) => res.json());
+};
+
+export type UseSearchPlaylistResult<TData = Playlist, TError = unknown> = UseBaseQueryResult<TData, TError>;
+
+export default function useSearchPlaylist(playlistId: string, query: string, usePlaceholderData: boolean = true): UseSearchPlaylistResult {
+  return useQuery(['playlist', playlistId, query], () => {
+    return getSearchPlaylist(playlistId, query)
+  }, {
+    enabled: !!playlistId && !!query,
+    placeholderData: usePlaceholderData ? placeholderData : undefined,
+    keepPreviousData: true,
+  });
+}

src/utils/collection.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
+import type { Playlist } from 'types/playlist';
 
 const getFiltersFromConfig = (config: Config, playlistId: string): string[] => {
   const menuItem = config.menu.find((item) => item.playlistId === playlistId);
@@ -23,4 +24,25 @@ const chunk = <T>(input: T[], size: number) => {
 const findPlaylistImageForWidth = (playlistItem: PlaylistItem, width: number): string =>
   playlistItem.images.find((img) => img.width === width)?.src || playlistItem.image;
 
-export { getFiltersFromConfig, filterPlaylist, chunk, findPlaylistImageForWidth };
+const generatePlaylistPlaceholder = (playlistLength: number = 15) : Playlist => ({
+  title: '',
+  playlist: new Array(playlistLength).fill({}).map((_value, index) => ({
+    description: '',
+    duration: 0,
+    feedid: '',
+    image: '',
+    images: [],
+    link: '',
+    genre: '',
+    mediaid: `placeholder_${index}`,
+    pubdate: 0,
+    rating: '',
+    sources: [],
+    tags: '',
+    title: '',
+    tracks: [],
+  }) as PlaylistItem),
+});
+
+
+export { getFiltersFromConfig, filterPlaylist, chunk, findPlaylistImageForWidth, generatePlaylistPlaceholder };