chore(project): code cleanup for cards seo

jwplayer · Jul 26, 2023 · ae61a01 · ae61a01
1 parent 9d86f5e
commit ae61a01
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 31 deletions.
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -37,7 +37,7 @@ type CardGridProps = {
   hasLoadMore?: boolean;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
+  onCardClick?: (item: PlaylistItem, playlistId?: string) => void;
 };
 
 function CardGrid({
@@ -78,7 +78,7 @@ function CardGrid({
           <Card
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             url={url}
-            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
+            onClick={() => onCardClick && onCardClick(playlistItem, playlistItem.feedid)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}

diff --git a/src/components/Favorites/Favorites.test.tsx b/src/components/Favorites/Favorites.test.tsx
@@ -15,7 +15,6 @@ describe('<Favorites>', () => {
             playlist={playlist}
             error={error}
             isLoading={isLoading}
-            onCardClick={() => null}
             onCardHover={() => null}
             onClearFavoritesClick={() => null}
             hasSubscription={true}

diff --git a/src/components/Favorites/Favorites.tsx b/src/components/Favorites/Favorites.tsx
@@ -17,7 +17,6 @@ type Props = {
   isLoading: boolean;
   accessModel: AccessModel;
   hasSubscription: boolean;
-  onCardClick: (item: PlaylistItem) => void;
   onCardHover?: (item: PlaylistItem) => void;
   onClearFavoritesClick: () => void;
 };
@@ -30,7 +29,7 @@ const cols: Breakpoints = {
   [Breakpoint.xl]: 3,
 };
 
-const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardClick, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
+const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
 
   if (isLoading) return <LoadingOverlay />;
@@ -48,7 +47,6 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o
       {playlist.playlist.length > 0 ? (
         <CardGrid
           playlist={playlist}
-          onCardClick={onCardClick}
           onCardHover={onCardHover}
           cols={cols}
           isLoading={isLoading}

diff --git a/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
@@ -1,21 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import shallow from 'zustand/shallow';
 
 import styles from './PlaylistGrid.module.scss';
 
-import { mediaURL } from '#src/utils/formatting';
 import { filterPlaylist, getFiltersFromConfig } from '#src/utils/collection';
 import CardGrid from '#components/CardGrid/CardGrid';
 import Filter from '#components/Filter/Filter';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { useConfigStore } from '#src/stores/ConfigStore';
-import type { Playlist, PlaylistItem } from '#types/playlist';
+import type { Playlist } from '#types/playlist';
 import type { ScreenComponent } from '#types/screens';
 
 const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
-  const navigate = useNavigate();
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
 
   const [filter, setFilter] = useState<string>('');
@@ -32,8 +29,6 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
     setFilter('');
   }, [data.feedid]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem, playlistId: data.feedid }));
-
   const pageTitle = `${data.title} - ${config.siteName}`;
 
   return (
@@ -48,14 +43,7 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
         {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
       </header>
       <main className={styles.main}>
-        <CardGrid
-          playlist={filteredPlaylist}
-          onCardClick={onCardClick}
-          accessModel={accessModel}
-          isLoggedIn={!!user}
-          hasSubscription={!!subscription}
-          isLoading={isLoading}
-        />
+        <CardGrid playlist={filteredPlaylist} accessModel={accessModel} isLoggedIn={!!user} hasSubscription={!!subscription} isLoading={isLoading} />
       </main>
     </div>
   );

diff --git a/src/pages/Search/Search.tsx b/src/pages/Search/Search.tsx
@@ -1,17 +1,15 @@
 import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 
 import styles from './Search.module.scss';
 
 import { useUIStore } from '#src/stores/UIStore';
-import { mediaURL } from '#src/utils/formatting';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { useConfigStore } from '#src/stores/ConfigStore';
 import useFirstRender from '#src/hooks/useFirstRender';
-import type { PlaylistItem } from '#types/playlist';
 import useSearchQueryUpdater from '#src/hooks/useSearchQueryUpdater';
 import CardGrid from '#components/CardGrid/CardGrid';
 import ErrorPage from '#components/ErrorPage/ErrorPage';
@@ -25,7 +23,6 @@ const Search = () => {
   const firstRender = useFirstRender();
   const searchQuery = useUIStore((state) => state.searchQuery);
   const { updateSearchQuery } = useSearchQueryUpdater();
-  const navigate = useNavigate();
   const params = useParams();
   const query = params['*'];
   const { isFetching, error, data: playlist } = usePlaylist(features?.searchPlaylist || '', { search: query || '' }, true, !!query);
@@ -44,13 +41,11 @@ const Search = () => {
     }
   }, [firstRender, query, searchQuery, updateSearchQuery]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => {
+  const onCardClick = () => {
     useUIStore.setState({
       searchQuery: '',
       searchActive: false,
     });
-
-    navigate(mediaURL({ media: playlistItem, playlistId: features?.searchPlaylist }));
   };
 
   if ((error || !playlist) && !isFetching) {

diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
@@ -6,7 +6,6 @@ import shallow from 'zustand/shallow';
 import styles from './User.module.scss';
 
 import PlaylistContainer from '#src/containers/PlaylistContainer/PlaylistContainer';
-import { mediaURL } from '#src/utils/formatting';
 import AccountCircle from '#src/icons/AccountCircle';
 import Favorite from '#src/icons/Favorite';
 import BalanceWallet from '#src/icons/BalanceWallet';
@@ -20,7 +19,6 @@ import Payment from '#components/Payment/Payment';
 import AccountComponent from '#components/Account/Account';
 import Button from '#components/Button/Button';
 import Favorites from '#components/Favorites/Favorites';
-import type { PlaylistItem } from '#types/playlist';
 import { getReceipt, logout } from '#src/stores/AccountController';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
 import { getSubscriptionSwitches } from '#src/stores/CheckoutController';
@@ -58,7 +56,6 @@ const User = (): JSX.Element => {
   const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
   const location = useLocation();
 
-  const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem }));
   const onLogout = useCallback(async () => {
     // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here
     await logout();
@@ -154,7 +151,6 @@ const User = (): JSX.Element => {
                         playlist={playlist}
                         error={error}
                         isLoading={isLoading}
-                        onCardClick={onCardClick}
                         onClearFavoritesClick={() => setClearFavoritesOpen(true)}
                         accessModel={accessModel}
                         hasSubscription={!!subscription}