Handle when images are null in the UI

apollographql · Apr 2, 2024 · 53a2415 · 53a2415
1 parent 3bec173
commit 53a2415
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx
@@ -176,7 +176,9 @@ const Sidebar = () => {
                 pinned={false}
                 key={playlist.id}
                 playlist={playlist}
-                coverPhoto={<CoverPhoto image={thumbnail(playlist.images)} />}
+                coverPhoto={
+                  <CoverPhoto image={thumbnail(playlist.images ?? [])} />
+                }
                 to={`/playlists/${playlist.id}`}
                 onMouseOverEdit={(playlist) =>
                   preloadPlaylistDetails({ id: playlist.id })

diff --git a/client/src/components/PlaylistDetailsModal.tsx b/client/src/components/PlaylistDetailsModal.tsx
@@ -80,7 +80,7 @@ const PlaylistDetails = ({ queryRef }: PlaylistDetailsProps) => {
     <Form form={form} className="flex gap-4">
       <CoverPhoto
         animateIn
-        image={playlist.images[0]}
+        image={(playlist.images ?? [])[0]}
         className="row-span-2 flex-1"
       />
       <div className="flex flex-col gap-4 flex-1">

diff --git a/client/src/components/PlaylistTile.tsx b/client/src/components/PlaylistTile.tsx
@@ -37,7 +37,7 @@ const PlaylistTile = ({ playlist }: PlaylistTileProps) => {
       }
     >
       <MediaTile to={`/playlists/${playlist.id}`}>
-        <MediaTile.CoverPhoto image={playlist.images[0]} />
+        <MediaTile.CoverPhoto image={(playlist.images ?? [])[0]} />
         <div className="flex flex-col">
           <MediaTile.Title>{playlist.name}</MediaTile.Title>
           <MediaTile.Details>