From 3bec173342331681d379136bc9a42dfed82ec35d Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 1 Apr 2024 17:52:31 -0600 Subject: [PATCH 1/2] Allow images to be null --- client/schema.graphql | 2 +- client/src/types/api.ts | 16 ++++++++-------- shared/spotify-api/src/types.ts | 4 ++-- subgraphs/spotify/schema.graphql | 2 +- .../spotify/src/__generated__/resolvers-types.ts | 8 ++++++-- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/client/schema.graphql b/client/schema.graphql index 489ecf25..3a6d0464 100644 --- a/client/schema.graphql +++ b/client/schema.graphql @@ -1402,7 +1402,7 @@ type Playlist { **Note**: If returned, the source URL for the image (`url`) is temporary and will expire in less than a day. """ - images: [Image!]! + images: [Image!] """ The name of the playlist. diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 758bcbec..12873229 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -986,7 +986,7 @@ export type Playlist = { * **Note**: If returned, the source URL for the image (`url`) is temporary and * will expire in less than a day. */ - images: Array; + images: Maybe>; /** The name of the playlist. */ name: Scalars['String']['output']; /** The user who owns the playlist. */ @@ -2595,7 +2595,7 @@ export type SidebarQuery = { id: string; uri: string; name: string; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; owner: { __typename: 'User'; id: string; displayName: string | null }; }; }>; @@ -2884,7 +2884,7 @@ export type PlaylistDetailsModalQuery = { id: string; name: string; description: string | null; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; } | null; }; @@ -2913,7 +2913,7 @@ export type PlaylistTile_playlist = { name: string; description: string | null; uri: string; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; }; export type PlaylistTitleCell_playbackState = { @@ -3635,7 +3635,7 @@ export type CollectionPlaylistsRouteQuery = { name: string; description: string | null; uri: string; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; }; }>; } | null; @@ -3666,7 +3666,7 @@ export type CollectionPlaylistsRoutePaginatedQuery = { name: string; description: string | null; uri: string; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; }; }>; } | null; @@ -3851,7 +3851,7 @@ export type IndexRouteQuery = { name: string; description: string | null; uri: string; - images: Array<{ __typename: 'Image'; url: string }>; + images: Array<{ __typename: 'Image'; url: string }> | null; }; }>; } | null; @@ -3876,7 +3876,7 @@ export type PlaylistQuery = { __typename: 'Image'; url: string; vibrantColor: string | null; - }>; + }> | null; owner: { __typename: 'User'; id: string; displayName: string | null }; tracks: { __typename: 'PlaylistTrackConnection'; diff --git a/shared/spotify-api/src/types.ts b/shared/spotify-api/src/types.ts index ee6e8789..49af39f9 100644 --- a/shared/spotify-api/src/types.ts +++ b/shared/spotify-api/src/types.ts @@ -321,7 +321,7 @@ export namespace Spotify { followers: Followers; href: string; id: string; - images: Image[]; + images: Image[] | null; name: string; owner: UserSimplified; primary_color: string | null; @@ -338,7 +338,7 @@ export namespace Spotify { external_urls: ExternalUrl; href: string; id: string; - images: Image[]; + images: Image[] | null; name: string; owner: User; primary_color: string | null; diff --git a/subgraphs/spotify/schema.graphql b/subgraphs/spotify/schema.graphql index 961841f1..782308cc 100644 --- a/subgraphs/spotify/schema.graphql +++ b/subgraphs/spotify/schema.graphql @@ -1484,7 +1484,7 @@ type Playlist @key(fields: "id") { **Note**: If returned, the source URL for the image (`url`) is temporary and will expire in less than a day. """ - images: [Image!]! + images: [Image!] """ The name of the playlist. diff --git a/subgraphs/spotify/src/__generated__/resolvers-types.ts b/subgraphs/spotify/src/__generated__/resolvers-types.ts index 4cea3e6b..6f93e9f3 100644 --- a/subgraphs/spotify/src/__generated__/resolvers-types.ts +++ b/subgraphs/spotify/src/__generated__/resolvers-types.ts @@ -906,7 +906,7 @@ export type Playlist = { * **Note**: If returned, the source URL for the image (`url`) is temporary and * will expire in less than a day. */ - images: Array; + images?: Maybe>; /** The name of the playlist. */ name: Scalars['String']['output']; /** The user who owns the playlist. */ @@ -3431,7 +3431,11 @@ export type PlaylistResolvers< ContextType >; id?: Resolver; - images?: Resolver, ParentType, ContextType>; + images?: Resolver< + Maybe>, + ParentType, + ContextType + >; name?: Resolver; owner?: Resolver; public?: Resolver, ParentType, ContextType>; From 53a241502e3afaffd2dfb23f61e1f4a49261b74f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 1 Apr 2024 18:08:17 -0600 Subject: [PATCH 2/2] Handle when images are null in the UI --- client/src/components/LoggedInLayout.tsx | 4 +++- client/src/components/PlaylistDetailsModal.tsx | 2 +- client/src/components/PlaylistTile.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index 844fadba..9852ff36 100644 --- 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={ + + } to={`/playlists/${playlist.id}`} onMouseOverEdit={(playlist) => preloadPlaylistDetails({ id: playlist.id }) diff --git a/client/src/components/PlaylistDetailsModal.tsx b/client/src/components/PlaylistDetailsModal.tsx index 814b2d41..98214e48 100644 --- a/client/src/components/PlaylistDetailsModal.tsx +++ b/client/src/components/PlaylistDetailsModal.tsx @@ -80,7 +80,7 @@ const PlaylistDetails = ({ queryRef }: PlaylistDetailsProps) => {
diff --git a/client/src/components/PlaylistTile.tsx b/client/src/components/PlaylistTile.tsx index e0c90900..7a4dffc2 100644 --- a/client/src/components/PlaylistTile.tsx +++ b/client/src/components/PlaylistTile.tsx @@ -37,7 +37,7 @@ const PlaylistTile = ({ playlist }: PlaylistTileProps) => { } > - +
{playlist.name}