canape/frontend/js/components/list/details.js

import React from "react"

export default function ListDetails(props) {
  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>
        <TrackingLabel
          wishlisted={props.data.get("wishlisted")}
          trackedSeason={props.data.get("tracked_season")}
          trackedEpisode={props.data.get("tracked_episode")}
        />
        <h4>{props.data.get("year")}</h4>
        <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>
  );
}