From a3ca9b40c552e6cc5effc2f57f7562ff6f723e42 Mon Sep 17 00:00:00 2001
From: Brandon Cohen <cohbrandon@gmail.com>
Date: Wed, 18 Nov 2020 23:18:29 -0500
Subject: [PATCH] fix(frontend): fixed similar/recommendations showing when
 empty (#180)

---
 src/components/MovieDetails/index.tsx | 184 ++++++++++++++------------
 src/components/TvDetails/index.tsx    | 180 +++++++++++++------------
 2 files changed, 190 insertions(+), 174 deletions(-)

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index c7957d554..f4b19d00a 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -491,98 +491,106 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           />
         ))}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
-        <div className="flex-1 min-w-0">
-          <Link
-            href="/movie/[movieId]/recommendations"
-            as={`/movie/${data.id}/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">
-              <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"
+      {(recommended?.results ?? []).length > 0 && (
+        <>
+          <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+            <div className="flex-1 min-w-0">
+              <Link
+                href="/movie/[movieId]/recommendations"
+                as={`/movie/${data.id}/recommendations`}
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="recommendations"
-        isLoading={!recommended && !recommendedError}
-        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}
+                <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>
+                    <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
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </a>
+              </Link>
+            </div>
+          </div>
+          <Slider
+            sliderKey="recommendations"
+            isLoading={!recommended && !recommendedError}
+            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">
-        <div className="flex-1 min-w-0">
-          <Link
-            href="/movie/[movieId]/similar"
-            as={`/movie/${data.id}/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>
-                <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"
+        </>
+      )}
+      {(similar?.results ?? []).length > 0 && (
+        <>
+          <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+            <div className="flex-1 min-w-0">
+              <Link
+                href="/movie/[movieId]/similar"
+                as={`/movie/${data.id}/similar`}
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="similar"
-        isLoading={!similar && !similarError}
-        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}
+                <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>
+                    <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
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </a>
+              </Link>
+            </div>
+          </div>
+          <Slider
+            sliderKey="similar"
+            isLoading={!similar && !similarError}
+            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>
   );
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 11dfde4b2..70afd95ad 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -440,95 +440,103 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           />
         ))}
       />
-      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
-        <div className="flex-1 min-w-0">
-          <Link
-            href="/tv/[tvId]/recommendations"
-            as={`/tv/${data.id}/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">
-              <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"
+      {(recommended?.results ?? []).length > 0 && (
+        <>
+          <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+            <div className="flex-1 min-w-0">
+              <Link
+                href="/tv/[tvId]/recommendations"
+                as={`/tv/${data.id}/recommendations`}
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="recommendations"
-        isLoading={!recommended && !recommendedError}
-        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}
+                <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>
+                    <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
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </a>
+              </Link>
+            </div>
+          </div>
+          <Slider
+            sliderKey="recommendations"
+            isLoading={!recommended && !recommendedError}
+            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">
-        <div className="flex-1 min-w-0">
-          <Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/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>
-                <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
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
-      </div>
-      <Slider
-        sliderKey="similar"
-        isLoading={!similar && !similarError}
-        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.name}
-            userScore={title.voteAverage}
-            year={title.firstAirDate}
-            mediaType={title.mediaType}
+        </>
+      )}
+      {(similar?.results ?? []).length > 0 && (
+        <>
+          <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+            <div className="flex-1 min-w-0">
+              <Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/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>
+                    <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
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </a>
+              </Link>
+            </div>
+          </div>
+          <Slider
+            sliderKey="similar"
+            isLoading={!similar && !similarError}
+            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.name}
+                userScore={title.voteAverage}
+                year={title.firstAirDate}
+                mediaType={title.mediaType}
+              />
+            ))}
           />
-        ))}
-      />
+        </>
+      )}
       <div className="pb-8" />
     </div>
   );