fix(ui): Handle missing movie/series data (#862)

src/components/MovieDetails/index.tsx

@@ -131,6 +131,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     revalidate();
   };
 
+  const movieAttributes = [];
+
+  if (data.runtime) {
+    movieAttributes.push(
+      intl.formatMessage({ ...messages.runtime }, { minutes: data.runtime })
+    );
+  }
+
+  if (data.genres.length) {
+    movieAttributes.push(data.genres.map((g) => g.name).join(', '));
+  }
+
   return (
     <div
       className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
@@ -354,19 +366,12 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           </div>
           <h1 className="text-2xl lg:text-4xl">
             {data.title}{' '}
+            {data.releaseDate && (
               <span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
+            )}
           </h1>
           <span className="mt-1 text-xs lg:text-base lg:mt-0">
-            {(data.runtime ?? 0) > 0 && (
+            {movieAttributes.join(' | ')}
-              <>
-                <FormattedMessage
-                  {...messages.runtime}
-                  values={{ minutes: data.runtime }}
-                />{' '}
-                |{' '}
-              </>
-            )}
-            {data.genres.map((g) => g.name).join(', ')}
           </span>
         </div>
         <div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
@@ -568,10 +573,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             </div>
           )}
           <div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
-            {(data.voteCount > 0 || ratingData) && (
+            {(data.voteCount ||
+              (ratingData?.criticsRating && ratingData?.criticsScore) ||
+              (ratingData?.audienceRating && ratingData?.audienceScore)) && (
               <div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
-                {ratingData?.criticsRating &&
+                {ratingData?.criticsRating && ratingData?.criticsScore && (
-                  (ratingData?.criticsScore ?? 0) > 0 && (
                   <>
                     <span className="text-sm">
                       {ratingData.criticsRating === 'Rotten' ? (
@@ -585,8 +591,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                     </span>
                   </>
                 )}
-                {ratingData?.audienceRating &&
+                {ratingData?.audienceRating && ratingData?.audienceScore && (
-                  (ratingData?.audienceScore ?? 0) > 0 && (
                   <>
                     <span className="text-sm">
                       {ratingData.audienceRating === 'Spilled' ? (
@@ -612,6 +617,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 )}
               </div>
             )}
+            {data.releaseDate && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   <FormattedMessage {...messages.releasedate} />
@@ -625,6 +631,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   />
                 </span>
               </div>
+            )}
             <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.status} />
@@ -700,6 +707,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           </div>
         </div>
       </div>
+      {data.credits.cast.length > 0 && (
+        <>
           <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
             <div className="flex-1 min-w-0">
               <Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
@@ -729,7 +738,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             sliderKey="cast"
             isLoading={false}
             isEmpty={false}
-        items={data?.credits.cast.slice(0, 20).map((person) => (
+            items={data.credits.cast.slice(0, 20).map((person) => (
               <PersonCard
                 key={`cast-item-${person.id}`}
                 personId={person.id}
@@ -739,6 +748,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               />
             ))}
           />
+        </>
+      )}
       <MediaSlider
         sliderKey="recommendations"
         title={intl.formatMessage(messages.recommendations)}

src/components/TvDetails/index.tsx

@@ -386,9 +386,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             </span>
           </div>
           <h1 className="text-2xl lg:text-4xl">
-            <span>{data.name}</span>
+            {data.name}{' '}
             {data.firstAirDate && (
-              <span className="ml-2 text-2xl">
+              <span className="text-2xl">
                 ({data.firstAirDate.slice(0, 4)})
               </span>
             )}
@@ -591,10 +591,11 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         </div>
         <div className="w-full mt-8 md:w-80 md:mt-0">
           <div className="bg-gray-900 border border-gray-800 rounded-lg shadow">
-            {(data.voteCount > 0 || ratingData) && (
+            {(data.voteCount ||
+              (ratingData?.criticsRating && ratingData?.criticsScore) ||
+              (ratingData?.audienceRating && ratingData?.audienceScore)) && (
               <div className="flex items-center justify-center px-4 py-2 border-b border-gray-800 last:border-b-0">
-                {ratingData?.criticsRating &&
+                {ratingData?.criticsRating && ratingData?.criticsScore && (
-                  (ratingData?.criticsScore ?? 0) > 0 && (
                   <>
                     <span className="text-sm">
                       {ratingData.criticsRating === 'Rotten' ? (
@@ -608,8 +609,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     </span>
                   </>
                 )}
-                {ratingData?.audienceRating &&
+                {ratingData?.audienceRating && ratingData?.audienceScore && (
-                  (ratingData?.audienceScore ?? 0) > 0 && (
                   <>
                     <span className="text-sm">
                       {ratingData.audienceRating === 'Spilled' ? (
@@ -724,6 +724,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           </div>
         </div>
       </div>
+      {data.credits.cast.length > 0 && (
+        <>
           <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
             <div className="flex-1 min-w-0">
               <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
@@ -753,7 +755,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             sliderKey="cast"
             isLoading={false}
             isEmpty={false}
-        items={data?.credits.cast.slice(0, 20).map((person) => (
+            items={data.credits.cast.slice(0, 20).map((person) => (
               <PersonCard
                 key={`cast-item-${person.id}`}
                 personId={person.id}
@@ -763,6 +765,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
               />
             ))}
           />
+        </>
+      )}
       <MediaSlider
         sliderKey="recommendations"
         title={intl.formatMessage(messages.recommendations)}