Refactor the ListDetails component

src/public/js/components/list/details.js

@@ -1,63 +1,96 @@
 import React from "react"
 
 export default function ListDetails(props) {
-  let genres = props.data.get("genres");
-  if (genres !== undefined) {
-    // Uppercase first genres
-    genres = genres.toJS().map(
-      (word) => word[0].toUpperCase() + word.substr(1)
-    ).join(", ");
-  }
-
-  let wishlistStr = "";
-  if (props.data.get("wishlisted") === true) {
-    wishlistStr = "Wishlisted";
-  }
-
-  const trackedSeason = props.data.get("tracked_season");
-  const trackedEpisode = props.data.get("tracked_episode");
-  if (trackedEpisode !== null && trackedSeason !== null
-    && trackedEpisode !== undefined && trackedSeason !== undefined) {
-    if ((trackedSeason === 0) && (trackedEpisode === 0)) {
-      wishlistStr = "Whole show tracked";
-    } else {
-      wishlistStr = `Tracked from season ${trackedSeason} episode ${trackedEpisode}`;
-    }
-  }
-
   return (
     <div className="col-xs-7 col-md-4">
       <div className="affix">
         <h1 className="hidden-xs">{props.data.get("title")}</h1>
         <h3 className="visible-xs">{props.data.get("title")}</h3>
-        {wishlistStr !== "" &&
-          <span className="label label-default">
-            <i className="fa fa-bookmark"></i> {wishlistStr}
-          </span>
-        }
+        <TrackingLabel
+          wishlisted={props.data.get("wishlisted")}
+          trackedSeason={props.data.get("tracked_season")}
+          trackedEpisode={props.data.get("tracked_episode")}
+        />
         <h4>{props.data.get("year")}</h4>
-        {props.data.get("runtime") !== undefined &&
-          <p>
-            <i className="fa fa-clock-o"></i>
-            &nbsp;{props.data.get("runtime")} min
-          </p>
-        }
-        {genres !== undefined &&
-          <p>
-            <i className="fa fa-tags"></i>
-            &nbsp;{genres}
-          </p>
-        }
-        <p>
-          <i className="fa fa-star-o"></i>
-          &nbsp;{Number(props.data.get("rating")).toFixed(1)}&nbsp;
-          {props.data.get("votes") !== undefined &&
-            <small>({props.data.get("votes")} counts)</small>
-          }
-        </p>
+        <Runtime runtime={props.data.get("runtime")} />
+        <Genres genres={props.data.get("genres")} />
+        <Ratings
+          rating={props.data.get("rating")}
+          votes={props.data.get("votes")}
+        />
         <p className="plot">{props.data.get("plot")}</p>
       </div>
       {props.children}
     </div>
   );
 }
+
+function Runtime(props) {
+  if (props.runtime === undefined) {
+    return null;
+  }
+
+  return (
+    <p>
+      <i className="fa fa-clock-o"></i>
+      &nbsp;{props.runtime} min
+    </p>
+  );
+}
+
+function Ratings(props) {
+  if (props.rating === undefined) {
+    return null;
+  }
+
+  return (
+    <p>
+      <i className="fa fa-star-o"></i>
+      &nbsp;{Number(props.rating).toFixed(1)}&nbsp;
+      {props.votes !== undefined &&
+          <small>({props.votes} counts)</small>
+      }
+    </p>
+  );
+}
+
+function TrackingLabel(props) {
+  let wishlistStr = props.wishlisted ? "Wishlisted" : "";
+
+  if (props.trackedEpisode !== null && props.trackedSeason !== null
+    && props.trackedEpisode !== undefined && props.trackedSeason !== undefined) {
+    if ((props.trackedSeason === 0) && (props.trackedEpisode === 0)) {
+      wishlistStr = "Whole show tracked";
+    } else {
+      wishlistStr = `Tracked from season ${props.trackedSeason} episode ${props.trackedEpisode}`;
+    }
+  }
+
+  if (wishlistStr === "") {
+    return null;
+  }
+
+  return (
+    <span className="label label-default">
+      <i className="fa fa-bookmark"></i> {wishlistStr}
+    </span>
+  );
+}
+
+function Genres(props) {
+  if (props.genres === undefined) {
+    return null;
+  }
+
+  // Uppercase first genres
+  const prettyGenres = props.genres.toJS().map(
+    (word) => word[0].toUpperCase() + word.substr(1)
+  ).join(", ");
+
+  return (
+    <p>
+      <i className="fa fa-tags"></i>
+      &nbsp;{prettyGenres}
+    </p>
+  );
+}