From a0c5608aa0b6c7a4294300589efa9a662163ce48 Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Sat, 19 Dec 2020 13:39:48 +0900
Subject: [PATCH] fix(frontend): try not to render broken rottentomatoes data

---
 src/components/MovieDetails/index.tsx | 58 ++++++++++++++-------------
 src/components/TvDetails/index.tsx    | 58 ++++++++++++++-------------
 2 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 9e2f967e8..658a3d9a8 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -397,34 +397,36 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           <div className="bg-gray-900 rounded-lg shadow border border-gray-800">
             {(data.voteCount > 0 || ratingData) && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0 items-center justify-center">
-                {ratingData?.criticsRating && (
-                  <>
-                    <span className="text-sm">
-                      {ratingData.criticsRating === 'Rotten' ? (
-                        <RTRotten className="w-6 mr-1" />
-                      ) : (
-                        <RTFresh className="w-6 mr-1" />
-                      )}
-                    </span>
-                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
-                      {ratingData.criticsScore}%
-                    </span>
-                  </>
-                )}
-                {ratingData?.audienceRating && (
-                  <>
-                    <span className="text-sm">
-                      {ratingData.audienceRating === 'Spilled' ? (
-                        <RTAudRotten className="w-6 mr-1" />
-                      ) : (
-                        <RTAudFresh className="w-6 mr-1" />
-                      )}
-                    </span>
-                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
-                      {ratingData.audienceScore}%
-                    </span>
-                  </>
-                )}
+                {ratingData?.criticsRating &&
+                  (ratingData?.criticsScore ?? 0) > 0 && (
+                    <>
+                      <span className="text-sm">
+                        {ratingData.criticsRating === 'Rotten' ? (
+                          <RTRotten className="w-6 mr-1" />
+                        ) : (
+                          <RTFresh className="w-6 mr-1" />
+                        )}
+                      </span>
+                      <span className="text-gray-400 text-sm mr-4 last:mr-0">
+                        {ratingData.criticsScore}%
+                      </span>
+                    </>
+                  )}
+                {ratingData?.audienceRating &&
+                  (ratingData?.audienceScore ?? 0) > 0 && (
+                    <>
+                      <span className="text-sm">
+                        {ratingData.audienceRating === 'Spilled' ? (
+                          <RTAudRotten className="w-6 mr-1" />
+                        ) : (
+                          <RTAudFresh className="w-6 mr-1" />
+                        )}
+                      </span>
+                      <span className="text-gray-400 text-sm mr-4 last:mr-0">
+                        {ratingData.audienceScore}%
+                      </span>
+                    </>
+                  )}
                 {data.voteCount > 0 && (
                   <>
                     <span className="text-sm">
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 7da4771c2..f9942c9b8 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -406,34 +406,36 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           <div className="bg-gray-900 rounded-lg shadow border border-gray-800">
             {(data.voteCount > 0 || ratingData) && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0 items-center justify-center">
-                {ratingData?.criticsRating && (
-                  <>
-                    <span className="text-sm">
-                      {ratingData.criticsRating === 'Rotten' ? (
-                        <RTRotten className="w-6 mr-1" />
-                      ) : (
-                        <RTFresh className="w-6 mr-1" />
-                      )}
-                    </span>
-                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
-                      {ratingData.criticsScore}%
-                    </span>
-                  </>
-                )}
-                {ratingData?.audienceRating && (
-                  <>
-                    <span className="text-sm">
-                      {ratingData.audienceRating === 'Spilled' ? (
-                        <RTAudRotten className="w-6 mr-1" />
-                      ) : (
-                        <RTAudFresh className="w-6 mr-1" />
-                      )}
-                    </span>
-                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
-                      {ratingData.audienceScore}%
-                    </span>
-                  </>
-                )}
+                {ratingData?.criticsRating &&
+                  (ratingData?.criticsScore ?? 0) > 0 && (
+                    <>
+                      <span className="text-sm">
+                        {ratingData.criticsRating === 'Rotten' ? (
+                          <RTRotten className="w-6 mr-1" />
+                        ) : (
+                          <RTFresh className="w-6 mr-1" />
+                        )}
+                      </span>
+                      <span className="text-gray-400 text-sm mr-4 last:mr-0">
+                        {ratingData.criticsScore}%
+                      </span>
+                    </>
+                  )}
+                {ratingData?.audienceRating &&
+                  (ratingData?.audienceScore ?? 0) > 0 && (
+                    <>
+                      <span className="text-sm">
+                        {ratingData.audienceRating === 'Spilled' ? (
+                          <RTAudRotten className="w-6 mr-1" />
+                        ) : (
+                          <RTAudFresh className="w-6 mr-1" />
+                        )}
+                      </span>
+                      <span className="text-gray-400 text-sm mr-4 last:mr-0">
+                        {ratingData.audienceScore}%
+                      </span>
+                    </>
+                  )}
                 {data.voteCount > 0 && (
                   <>
                     <span className="text-sm">