fix(frontend): handle empty array of media attributes (#922)

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",

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">

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">