From 04fa9f79e2ec90082b3fa15590dd170f7d68ad52 Mon Sep 17 00:00:00 2001
From: Danshil Mungur <me@danshilm.com>
Date: Sat, 13 Feb 2021 02:01:35 +0400
Subject: [PATCH] fix(frontend): handle empty array of media attributes (#922)

---
 package.json                          |  2 +-
 src/components/MovieDetails/index.tsx | 15 ++++++++-------
 src/components/TvDetails/index.tsx    | 15 ++++++++-------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 40de4811..17845455 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build": "yarn build:next && yarn build:server",
     "lint": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\"",
     "start": "NODE_ENV=production node dist/index.js",
-    "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault false './src/**/!(*.test).{ts,tsx}'",
+    "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault false \"./src/**/!(*.test).{ts,tsx}\"",
     "migration:generate": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:generate",
     "migration:create": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:create",
     "migration:run": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:run",
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 970632cc..07af9202 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -384,13 +384,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             )}
           </h1>
           <span className="mt-1 text-xs lg:text-base lg:mt-0">
-            {movieAttributes
-              .map((t, k) => <span key={k}>{t}</span>)
-              .reduce((prev, curr) => (
-                <>
-                  {prev} | {curr}
-                </>
-              ))}
+            {movieAttributes.length > 0 &&
+              movieAttributes
+                .map((t, k) => <span key={k}>{t}</span>)
+                .reduce((prev, curr) => (
+                  <>
+                    {prev} | {curr}
+                  </>
+                ))}
           </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">
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index affc4ad5..65e19528 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -412,13 +412,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             )}
           </h1>
           <span className="mt-1 text-xs lg:text-base lg:mt-0">
-            {seriesAttributes
-              .map((t, k) => <span key={k}>{t}</span>)
-              .reduce((prev, curr) => (
-                <>
-                  {prev} | {curr}
-                </>
-              ))}
+            {seriesAttributes.length > 0 &&
+              seriesAttributes
+                .map((t, k) => <span key={k}>{t}</span>)
+                .reduce((prev, curr) => (
+                  <>
+                    {prev} | {curr}
+                  </>
+                ))}
           </span>
         </div>
         <div className="flex flex-wrap justify-center flex-shrink-0 mt-4 sm:flex-nowrap sm:justify-end lg:mt-0">