feat(user): show empty favorites screen

jwplayer · Aug 2, 2021 · ce0da5c · ce0da5c
1 parent eb35cc3
commit ce0da5c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/src/components/Favorites/Favorites.tsx b/src/components/Favorites/Favorites.tsx
@@ -43,16 +43,20 @@ const Favorites = ({ playlist, error, isLoading, onCardClick, onCardHover, onCle
     <div>
       <div className={styles.header}>
         <h3>{t('favorites.title')}</h3>
-        <Button label={t('favorites.clear')} onClick={onClearFavoritesClick} />
+        {playlist.length > 0 ? <Button label={t('favorites.clear')} onClick={onClearFavoritesClick} /> : null}
       </div>
-      <CardGrid
-        playlist={playlist}
-        onCardClick={onCardClick}
-        onCardHover={onCardHover}
-        cols={cols}
-        isLoading={isLoading}
-        enableCardTitles={config.options.shelveTitles}
-      />
+      {playlist.length > 0 ? (
+        <CardGrid
+          playlist={playlist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          cols={cols}
+          isLoading={isLoading}
+          enableCardTitles={config.options.shelveTitles}
+        />
+      ) : (
+        <p>{t('favorites.no_favorites')}</p>
+      )}
     </div>
   );
 };

diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
@@ -20,9 +20,10 @@ type Props = {
   onPlaylistUpdate?: (playlist: Playlist) => void;
   children: (childrenParams: ChildrenParams) => JSX.Element;
   style?: React.CSSProperties;
+  showEmpty?: boolean;
 };
 
-const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children }: Props): JSX.Element | null => {
+const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children, showEmpty = false }: Props): JSX.Element | null => {
   const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
   const {
     isLoading,
@@ -32,10 +33,10 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, c
 
   let playlist = fetchedPlaylist;
 
-  const { getPlaylist: getFavoritesPlayist } = useFavorites();
-  const favoritesPlaylist = getFavoritesPlayist();
-  const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
-  const watchHistoryPlaylist = getWatchHistoryPlayist();
+  const { getPlaylist: getFavoritesPlaylist } = useFavorites();
+  const favoritesPlaylist = getFavoritesPlaylist();
+  const { getPlaylist: getWatchHistoryPlaylist } = useWatchHistory();
+  const watchHistoryPlaylist = getWatchHistoryPlaylist();
 
   useEffect(() => {
     if (playlist && onPlaylistUpdate) onPlaylistUpdate(playlist);
@@ -45,7 +46,7 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, c
   if (playlistId === PersonalShelf.ContinueWatching) playlist = watchHistoryPlaylist;
 
   if (!playlistId) return <p>No playlist id</p>;
-  if (!playlist.playlist.length) {
+  if (!playlist.playlist.length && !showEmpty) {
     return null;
   }
 

diff --git a/src/i18n/locales/en_US/user.json b/src/i18n/locales/en_US/user.json
@@ -20,6 +20,7 @@
   },
   "favorites": {
     "clear": "Clear favorites",
+    "no_favorites": "Your favorites are empty",
     "not_found": "Favorites not found!",
     "title": "Favorites"
   },

diff --git a/src/i18n/locales/nl_NL/user.json b/src/i18n/locales/nl_NL/user.json
@@ -20,6 +20,7 @@
   },
   "favorites": {
     "clear": "",
+    "no_favorites": "",
     "not_found": "",
     "title": ""
   },

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
@@ -119,7 +119,7 @@ const User = (): JSX.Element => {
             </AccountContainer>
           </Route>
           <Route path="/u/favorites">
-            <PlaylistContainer playlistId={PersonalShelf.Favorites}>
+            <PlaylistContainer playlistId={PersonalShelf.Favorites} showEmpty>
               {({ playlist, error, isLoading }) => (
                 <Favorites
                   playlist={playlist.playlist}