fix(project): bug fixes after preview check

- fix type checking for watchlists
- hide tags filter when no tags set
- fix duplicate keys error for playlists on Home page

src/components/Shelf/Shelf.tsx

@@ -8,7 +8,7 @@ import useBreakpoint, { Breakpoint, Breakpoints } from '#src/hooks/useBreakpoint
 import ChevronLeft from '#src/icons/ChevronLeft';
 import ChevronRight from '#src/icons/ChevronRight';
 import { findPlaylistImageForWidth } from '#src/utils/collection';
-import type { AccessModel } from '#types/Config';
+import type { AccessModel, ContentType } from '#types/Config';
 import { isLocked } from '#src/utils/entitlements';
 import TileDock from '#src/components/TileDock/TileDock';
 import Card from '#src/components/Card/Card';
@@ -32,7 +32,8 @@ export const featuredTileBreakpoints: Breakpoints = {
 
 export type ShelfProps = {
   playlist: Playlist;
-  onCardClick: (playlistItem: PlaylistItem, playlistId?: string) => void;
+  type: ContentType;
+  onCardClick: (playlistItem: PlaylistItem, playlistId: string | undefined, type: ContentType) => void;
   onCardHover?: (playlistItem: PlaylistItem) => void;
   watchHistory?: { [key: string]: number };
   enableTitle?: boolean;
@@ -48,6 +49,7 @@ export type ShelfProps = {
 
 const Shelf: React.FC<ShelfProps> = ({
   playlist,
+  type,
   onCardClick,
   onCardHover,
   title,
@@ -79,15 +81,28 @@ const Shelf: React.FC<ShelfProps> = ({
         seriesId={item.seriesId}
         seasonNumber={item.seasonNumber}
         episodeNumber={item.episodeNumber}
-        onClick={isInView ? () => onCardClick(item, playlist.feedid) : undefined}
+        onClick={isInView ? () => onCardClick(item, playlist.feedid, type) : undefined}
         onHover={typeof onCardHover === 'function' ? () => onCardHover(item) : undefined}
         featured={featured}
         disabled={!isInView}
         loading={loading}
         isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, item)}
       />
     ),
-    [enableCardTitles, featured, imageSourceWidth, loading, onCardClick, onCardHover, playlist.feedid, watchHistory, accessModel, isLoggedIn, hasSubscription],
+    [
+      enableCardTitles,
+      featured,
+      imageSourceWidth,
+      loading,
+      onCardClick,
+      onCardHover,
+      playlist.feedid,
+      watchHistory,
+      accessModel,
+      isLoggedIn,
+      hasSubscription,
+      type,
+    ],
   );
 
   const renderRightControl = useCallback(

src/containers/Playlist/PlaylistContainer.tsx

@@ -6,6 +6,7 @@ import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import { useFavoritesStore } from '#src/stores/FavoritesStore';
 import { PLAYLIST_LIMIT } from '#src/config';
 import type { Playlist, PlaylistItem } from '#types/playlist';
+import type { ContentType } from '#types/Config';
 
 type ChildrenParams = {
   playlist: Playlist;
@@ -16,7 +17,7 @@ type ChildrenParams = {
 
 type Props = {
   playlistId?: string;
-  type: 'playlist' | 'continue_watching' | 'favorites';
+  type: ContentType;
   relatedItem?: PlaylistItem;
   onPlaylistUpdate?: (playlist: Playlist) => void;
   children: (childrenParams: ChildrenParams) => JSX.Element;
@@ -25,7 +26,7 @@ type Props = {
 };
 
 const PlaylistContainer = ({ playlistId, type, onPlaylistUpdate, style, children, showEmpty = false }: Props): JSX.Element | null => {
-  const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
+  const isAlternativeShelf = PersonalShelves.some((shelfType) => shelfType === type);
   const {
     isLoading,
     error,

src/screens/Home/Home.tsx

@@ -54,8 +54,8 @@ const Home = (): JSX.Element => {
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
   const onCardClick = useCallback(
-    (playlistItem: PlaylistItem, playlistId?: string) => {
-      history.push(cardUrl(playlistItem, playlistId, playlistId === PersonalShelf.ContinueWatching));
+    (playlistItem, playlistId, type) => {
+      history.push(cardUrl(playlistItem, playlistId, type === PersonalShelf.ContinueWatching));
     },
     [history],
   );
@@ -70,15 +70,16 @@ const Home = (): JSX.Element => {
     const playlistKey = contentItem.contentId || contentItem.type;
 
     return (
-      <PlaylistContainer key={playlistKey} type={contentItem.type} playlistId={contentItem.contentId} style={style}>
+      <PlaylistContainer key={`${playlistKey}_${index}`} type={contentItem.type} playlistId={contentItem.contentId} style={style}>
         {({ playlist, error, isLoading, style }) => (
           <div key={key} style={style} role="row" className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}>
             <div role="cell">
               <ShelfComponent
                 loading={isLoading}
                 error={error}
+                type={contentItem.type}
                 playlist={playlist}
-                watchHistory={playlist.feedid === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
+                watchHistory={contentItem.type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
                 onCardClick={onCardClick}
                 onCardHover={onCardHover}
                 enableTitle={contentItem.enableText}

src/screens/Playlist/Playlist.tsx

@@ -35,6 +35,7 @@ function Playlist({
 
   const categories = getFiltersFromConfig(config, id);
   const filteredPlaylist = useMemo(() => filterPlaylist(playlist, filter), [playlist, filter]);
+  const shouldShowFilter = !isLoading && !isPlaceholderData && Boolean(categories.length);
   const updateBlurImage = useBlurImageUpdater(filteredPlaylist);
 
   // User
@@ -63,7 +64,7 @@ function Playlist({
       </Helmet>
       <header className={styles.header}>
         <h2>{isLoading || isPlaceholderData ? 'Loading' : title}</h2>
-        {!isLoading && !isPlaceholderData && <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
+        {shouldShowFilter && <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
       </header>
       <main className={styles.main}>
         <CardGrid

src/utils/collection.ts

@@ -5,7 +5,7 @@ import type { Playlist, PlaylistItem } from '#types/playlist';
 
 const getFiltersFromConfig = (config: Config, playlistId: string): string[] => {
   const menuItem = config.menu.find((item) => item.contentId === playlistId);
-  const filters = menuItem?.filterTags?.split(',');
+  const filters = menuItem?.filterTags?.split(',').filter(Boolean);
 
   return filters || [];
 };