ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Refactor the ListDetails component

Browse Source
This commit is contained in:
Grégoire Delattre 2017-06-03 15:41:46 +02:00
parent 86f0377d92
commit 72c7814239
1 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/public/js/components/list/details.js
View File

@ -1,63 +1,96 @@
import React from "react" import React from "react"
export default function ListDetails(props) { 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 ( return (
<div className="col-xs-7 col-md-4"> <div className="col-xs-7 col-md-4">
<div className="affix"> <div className="affix">
<h1 className="hidden-xs">{props.data.get("title")}</h1> <h1 className="hidden-xs">{props.data.get("title")}</h1>
<h3 className="visible-xs">{props.data.get("title")}</h3> <h3 className="visible-xs">{props.data.get("title")}</h3>
{wishlistStr !== "" && <TrackingLabel
<span className="label label-default"> wishlisted={props.data.get("wishlisted")}
<i className="fa fa-bookmark"></i> {wishlistStr} trackedSeason={props.data.get("tracked_season")}
</span> trackedEpisode={props.data.get("tracked_episode")}
} />
<h4>{props.data.get("year")}</h4> <h4>{props.data.get("year")}</h4>
{props.data.get("runtime") !== undefined && <Runtime runtime={props.data.get("runtime")} />
<p> <Genres genres={props.data.get("genres")} />
<i className="fa fa-clock-o"></i> <Ratings
&nbsp;{props.data.get("runtime")} min rating={props.data.get("rating")}
</p> votes={props.data.get("votes")}
} />
{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>
<p className="plot">{props.data.get("plot")}</p> <p className="plot">{props.data.get("plot")}</p>
</div> </div>
{props.children} {props.children}
</div> </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>
);
}