fix(frontend): fixed similar/recommendations showing when empty (#180)

pull/167/head
Brandon Cohen 4 years ago committed by GitHub
parent 1694f60e8a
commit a3ca9b40c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -491,98 +491,106 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
/> />
))} ))}
/> />
<div className="md:flex md:items-center md:justify-between mb-4 mt-6"> {(recommended?.results ?? []).length > 0 && (
<div className="flex-1 min-w-0"> <>
<Link <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
href="/movie/[movieId]/recommendations" <div className="flex-1 min-w-0">
as={`/movie/${data.id}/recommendations`} <Link
> href="/movie/[movieId]/recommendations"
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center"> as={`/movie/${data.id}/recommendations`}
<span>
<FormattedMessage {...messages.recommendations} />
</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
strokeLinecap="round" <span>
strokeLinejoin="round" <FormattedMessage {...messages.recommendations} />
strokeWidth={2} </span>
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" <svg
/> className="w-6 h-6 ml-2"
</svg> fill="none"
</a> stroke="currentColor"
</Link> viewBox="0 0 24 24"
</div> xmlns="http://www.w3.org/2000/svg"
</div> >
<Slider <path
sliderKey="recommendations" strokeLinecap="round"
isLoading={!recommended && !recommendedError} strokeLinejoin="round"
isEmpty={false} strokeWidth={2}
items={recommended?.results.map((title) => ( d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
<TitleCard />
key={`recommended-${title.id}`} </svg>
id={title.id} </a>
image={title.posterPath} </Link>
status={title.mediaInfo?.status} </div>
summary={title.overview} </div>
title={title.title} <Slider
userScore={title.voteAverage} sliderKey="recommendations"
year={title.releaseDate} isLoading={!recommended && !recommendedError}
mediaType={title.mediaType} isEmpty={false}
items={recommended?.results.map((title) => (
<TitleCard
key={`recommended-${title.id}`}
id={title.id}
image={title.posterPath}
status={title.mediaInfo?.status}
summary={title.overview}
title={title.title}
userScore={title.voteAverage}
year={title.releaseDate}
mediaType={title.mediaType}
/>
))}
/> />
))} </>
/> )}
<div className="md:flex md:items-center md:justify-between mb-4 mt-6"> {(similar?.results ?? []).length > 0 && (
<div className="flex-1 min-w-0"> <>
<Link <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
href="/movie/[movieId]/similar" <div className="flex-1 min-w-0">
as={`/movie/${data.id}/similar`} <Link
> href="/movie/[movieId]/similar"
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center"> as={`/movie/${data.id}/similar`}
<span>
<FormattedMessage {...messages.similar} />
</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
strokeLinecap="round" <span>
strokeLinejoin="round" <FormattedMessage {...messages.similar} />
strokeWidth={2} </span>
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" <svg
/> className="w-6 h-6 ml-2"
</svg> fill="none"
</a> stroke="currentColor"
</Link> viewBox="0 0 24 24"
</div> xmlns="http://www.w3.org/2000/svg"
</div> >
<Slider <path
sliderKey="similar" strokeLinecap="round"
isLoading={!similar && !similarError} strokeLinejoin="round"
isEmpty={false} strokeWidth={2}
items={similar?.results.map((title) => ( d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
<TitleCard />
key={`recommended-${title.id}`} </svg>
id={title.id} </a>
image={title.posterPath} </Link>
status={title.mediaInfo?.status} </div>
summary={title.overview} </div>
title={title.title} <Slider
userScore={title.voteAverage} sliderKey="similar"
year={title.releaseDate} isLoading={!similar && !similarError}
mediaType={title.mediaType} isEmpty={false}
items={similar?.results.map((title) => (
<TitleCard
key={`recommended-${title.id}`}
id={title.id}
image={title.posterPath}
status={title.mediaInfo?.status}
summary={title.overview}
title={title.title}
userScore={title.voteAverage}
year={title.releaseDate}
mediaType={title.mediaType}
/>
))}
/> />
))} </>
/> )}
<div className="pb-8" /> <div className="pb-8" />
</div> </div>
); );

@ -440,95 +440,103 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
/> />
))} ))}
/> />
<div className="md:flex md:items-center md:justify-between mb-4 mt-6"> {(recommended?.results ?? []).length > 0 && (
<div className="flex-1 min-w-0"> <>
<Link <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
href="/tv/[tvId]/recommendations" <div className="flex-1 min-w-0">
as={`/tv/${data.id}/recommendations`} <Link
> href="/tv/[tvId]/recommendations"
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center"> as={`/tv/${data.id}/recommendations`}
<span>
<FormattedMessage {...messages.recommendations} />
</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
strokeLinecap="round" <span>
strokeLinejoin="round" <FormattedMessage {...messages.recommendations} />
strokeWidth={2} </span>
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" <svg
/> className="w-6 h-6 ml-2"
</svg> fill="none"
</a> stroke="currentColor"
</Link> viewBox="0 0 24 24"
</div> xmlns="http://www.w3.org/2000/svg"
</div> >
<Slider <path
sliderKey="recommendations" strokeLinecap="round"
isLoading={!recommended && !recommendedError} strokeLinejoin="round"
isEmpty={false} strokeWidth={2}
items={recommended?.results.map((title) => ( d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
<TitleCard />
key={`recommended-${title.id}`} </svg>
id={title.id} </a>
image={title.posterPath} </Link>
status={title.mediaInfo?.status} </div>
summary={title.overview} </div>
title={title.name} <Slider
userScore={title.voteAverage} sliderKey="recommendations"
year={title.firstAirDate} isLoading={!recommended && !recommendedError}
mediaType={title.mediaType} isEmpty={false}
items={recommended?.results.map((title) => (
<TitleCard
key={`recommended-${title.id}`}
id={title.id}
image={title.posterPath}
status={title.mediaInfo?.status}
summary={title.overview}
title={title.name}
userScore={title.voteAverage}
year={title.firstAirDate}
mediaType={title.mediaType}
/>
))}
/> />
))} </>
/> )}
<div className="md:flex md:items-center md:justify-between mb-4 mt-6"> {(similar?.results ?? []).length > 0 && (
<div className="flex-1 min-w-0"> <>
<Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}> <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
<a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center"> <div className="flex-1 min-w-0">
<span> <Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}>
<FormattedMessage {...messages.similar} /> <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
</span> <span>
<svg <FormattedMessage {...messages.similar} />
className="w-6 h-6 ml-2" </span>
fill="none" <svg
stroke="currentColor" className="w-6 h-6 ml-2"
viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
> viewBox="0 0 24 24"
<path xmlns="http://www.w3.org/2000/svg"
strokeLinecap="round" >
strokeLinejoin="round" <path
strokeWidth={2} strokeLinecap="round"
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" strokeLinejoin="round"
/> strokeWidth={2}
</svg> d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
</a> />
</Link> </svg>
</div> </a>
</div> </Link>
<Slider </div>
sliderKey="similar" </div>
isLoading={!similar && !similarError} <Slider
isEmpty={false} sliderKey="similar"
items={similar?.results.map((title) => ( isLoading={!similar && !similarError}
<TitleCard isEmpty={false}
key={`recommended-${title.id}`} items={similar?.results.map((title) => (
id={title.id} <TitleCard
image={title.posterPath} key={`recommended-${title.id}`}
status={title.mediaInfo?.status} id={title.id}
summary={title.overview} image={title.posterPath}
title={title.name} status={title.mediaInfo?.status}
userScore={title.voteAverage} summary={title.overview}
year={title.firstAirDate} title={title.name}
mediaType={title.mediaType} userScore={title.voteAverage}
year={title.firstAirDate}
mediaType={title.mediaType}
/>
))}
/> />
))} </>
/> )}
<div className="pb-8" /> <div className="pb-8" />
</div> </div>
); );

Loading…
Cancel
Save