fix: card grid rendering previous items (#613)

* fix: card grid rendering previous items * chore: remove unused code
jwplayer · Sep 19, 2024 · dce9f70 · dce9f70
1 parent ddedb6b
commit dce9f70
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/packages/ui-react/src/components/CardGrid/CardGrid.tsx b/packages/ui-react/src/components/CardGrid/CardGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import InfiniteScroll from 'react-infinite-scroller';
 import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
@@ -46,6 +46,8 @@ export type CardGridProps = {
   getUrl: (item: PlaylistItem) => string;
 };
 
+const getCellKey = (item: PlaylistItem) => item.mediaid;
+
 function CardGrid({
   playlist,
   watchHistory,
@@ -75,6 +77,25 @@ function CardGrid({
     setRowCount(INITIAL_ROW_COUNT);
   }, [playlist.feedid]);
 
+  const renderCell = useCallback(
+    (playlistItem: PlaylistItem, tabIndex: number) => (
+      <Card
+        tabIndex={tabIndex}
+        progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
+        url={getUrl(playlistItem)}
+        onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
+        loading={isLoading}
+        isCurrent={currentCardItem && currentCardItem.mediaid === playlistItem.mediaid}
+        currentLabel={currentCardLabel}
+        isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
+        posterAspect={posterAspect}
+        item={playlistItem}
+        headingLevel={headingLevel}
+      />
+    ),
+    [accessModel, currentCardItem, currentCardLabel, getUrl, hasSubscription, headingLevel, isLoading, isLoggedIn, onCardHover, posterAspect, watchHistory],
+  );
+
   return (
     <InfiniteScroll
       pageStart={0}
@@ -87,21 +108,8 @@ function CardGrid({
         className={classNames(styles.container, styles[`cols-${visibleTiles}`])}
         data={loadMore ? playlist.playlist : playlist.playlist.slice(0, rowCount * visibleTiles)}
         columnCount={visibleTiles}
-        renderCell={(playlistItem: PlaylistItem, tabIndex: number) => (
-          <Card
-            tabIndex={tabIndex}
-            progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
-            url={getUrl(playlistItem)}
-            onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
-            loading={isLoading}
-            isCurrent={currentCardItem && currentCardItem.mediaid === playlistItem.mediaid}
-            currentLabel={currentCardLabel}
-            isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
-            posterAspect={posterAspect}
-            item={playlistItem}
-            headingLevel={headingLevel}
-          />
-        )}
+        renderCell={renderCell}
+        getCellKey={getCellKey}
       />
     </InfiniteScroll>
   );

diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -1,6 +1,6 @@
 import { throttle } from '@jwp/ott-common/src/utils/common';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './LayoutGrid.module.scss';
 
@@ -9,14 +9,15 @@ type Props<Item> = {
   columnCount: number;
   data: Item[];
   renderCell: (item: Item, tabIndex: number) => JSX.Element;
+  getCellKey: (item: Item) => string;
 };
 
 const scrollIntoViewThrottled = throttle(function (focusedElement: HTMLElement) {
   focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
 }, 300);
 
 // Keyboard-accessible grid layout, with focus management
-const LayoutGrid = <Item extends object>({ className, columnCount, data, renderCell }: Props<Item>) => {
+const LayoutGrid = <Item extends object>({ className, columnCount, data, renderCell, getCellKey }: Props<Item>) => {
   const [currentRowIndex, setCurrentRowIndex] = useState(0);
   const [currentColumnIndex, setCurrentColumnIndex] = useState(0);
   const gridRef = useRef<HTMLDivElement>(null);
@@ -110,6 +111,8 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columnCount]);
 
+  const gridCellStyle = useMemo(() => ({ width: `${Math.round(100 / columnCount)}%` }), [columnCount]);
+
   return (
     <div role="grid" ref={gridRef} aria-rowcount={rowCount} className={className} onKeyDown={handleKeyDown}>
       {Array.from({ length: rowCount }).map((_, rowIndex) => (
@@ -118,10 +121,10 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
             <div
               role="gridcell"
               id={`layout_grid_${rowIndex}-${columnIndex}`}
-              key={columnIndex}
+              key={getCellKey(item)}
               aria-colindex={columnIndex}
               className={styles.cell}
-              style={{ width: `${Math.round(100 / columnCount)}%` }}
+              style={gridCellStyle}
             >
               {renderCell(item, currentRowIndex === rowIndex && currentColumnIndex === columnIndex ? 0 : -1)}
             </div>