Add a link to search for torrents for an episode

src/public/js/components/shows/details.js

@@ -12,6 +12,7 @@ import ImdbButton from "../buttons/imdb"
 import RefreshIndicator from "../buttons/refresh"
 
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
+import { Button, Dropdown, MenuItem } from "react-bootstrap"
 
 function mapStateToProps(state) {
   return {
@@ -39,6 +40,7 @@ class ShowDetails extends React.Component {
         />
         <SeasonsList
           data={this.props.show}
+          router={this.props.router}
           addTorrent={this.props.addTorrent}
           addToWishlist={this.props.addShowToWishlist}
           getEpisodeDetails={this.props.getEpisodeDetails}
@@ -112,6 +114,8 @@ function SeasonsList(props){
             <Season
               data={data}
               season={season}
+              showName={props.data.get("title")}
+              router={props.router}
               addTorrent={props.addTorrent}
               addToWishlist={props.addToWishlist}
               getEpisodeDetails={props.getEpisodeDetails}
@@ -158,6 +162,8 @@ class Season extends React.Component {
                   <Episode
                     key={key}
                     data={episode}
+                    showName={this.props.showName}
+                    router={this.props.router}
                     addTorrent={this.props.addTorrent}
                     addToWishlist={this.props.addToWishlist}
                     getEpisodeDetails={this.props.getEpisodeDetails}
@@ -215,6 +221,8 @@ function Episode(props) {
             xs
           />
           <GetDetailsButton
+            showName={props.showName}
+            router={props.router}
             data={props.data}
             getEpisodeDetails={props.getEpisodeDetails}
           />
@@ -336,23 +344,40 @@ class TrackButton extends React.PureComponent {
 class GetDetailsButton extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
+    this.handleFetchClick = this.handleFetchClick.bind(this);
+    this.handleAdvanceTorrentSearchClick = this.handleAdvanceTorrentSearchClick.bind(this);
+    this.state = {
+      imdbId: this.props.data.get("show_imdb_id"),
+      season: this.props.data.get("season"),
+      episode: this.props.data.get("episode"),
+    };
   }
-  handleClick(e) {
+  handleFetchClick() {
-    e.preventDefault();
+    if (this.props.data.get("fetching")) { return }
-    if (this.props.data.get("fetching")) {
+    this.props.getEpisodeDetails(this.state.imdbId, this.state.season, this.state.episode);
-      return
   }
-    const imdbId = this.props.data.get("show_imdb_id");
+  handleAdvanceTorrentSearchClick() {
-    const season = this.props.data.get("season");
+    const pad = (d) => (d < 10) ? "0" + d.toString() : d.toString();
-    const episode = this.props.data.get("episode");
+    const search = `${this.props.showName} S${pad(this.state.season)}E${pad(this.state.episode)}`;
-    this.props.getEpisodeDetails(imdbId, season, episode);
+    const url = `/torrents/search/shows/${encodeURI(search)}`;
+    this.props.router.push(url);
   }
   render() {
+    const id = `${this.state.imdbId}-${this.state.season}-${this.state.episode}-refresh-dropdown`;
     return (
-      <a type="button" className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
+      <Dropdown id={id} dropup>
+        <Button className="btn-xs" bsStyle="info" onClick={this.handleFetchClick}>
           <RefreshIndicator refresh={this.props.data.get("fetching")} />
-      </a>
+        </Button>
+        <Dropdown.Toggle className="btn-xs" bsStyle="info"/>
+        <Dropdown.Menu>
+          <MenuItem onClick={this.handleAdvanceTorrentSearchClick}>
+            <span>
+              <i className="fa fa-magnet"></i> Advanced torrent search
+            </span>
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
     );
   }
 }