Group movie action buttons

src/public/js/components/movies/actions.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { DropdownButton, MenuItem } from 'react-bootstrap'
+
+export default function ActionsButton(props) {
+  return (
+    <DropdownButton className="btn btn-default btn-sm" title="Actions" id="actions-button" dropup>
+      <RefreshButton
+        fetching={props.fetching}
+        movieId={props.movieId}
+        getDetails={props.getDetails}
+      />
+    </DropdownButton>
+  );
+}
+
+class RefreshButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    if (this.props.fetching) {
+      return
+    }
+    this.props.getDetails(this.props.movieId);
+  }
+  render() {
+    return (
+      <MenuItem onClick={this.handleClick}>
+        {this.props.fetching ||
+          <span>
+            <i className="fa fa-refresh"></i> Refresh
+          </span>
+        }
+        {this.props.fetching &&
+            <span>
+              <i className="fa fa-spin fa-refresh"></i> Refreshing
+            </span>
+        }
+      </MenuItem>
+    );
+  }
+}

src/public/js/components/movies/list.js

@@ -1,57 +1,39 @@
 import React from 'react'
 
 import TorrentsButton from './torrents'
+import ActionsButton from './actions'
 import ListPosters from '../list/posters'
 import ListDetails from '../list/details'
 import Loader from '../loader/loader'
 
-class MovieButtons extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleClick(e) {
-    e.preventDefault();
-    if (this.props.fetching) {
-      return
-    }
-    this.props.getMovieDetails(this.props.movie.imdb_id);
-  }
-  render() {
-    const imdb_link = `http://www.imdb.com/title/${this.props.movie.imdb_id}`;
-    return (
-      <div className="list-details-buttons btn-toolbar">
-        <a type="button" className="btn btn-default btn-sm" onClick={this.handleClick}>
-          {this.props.fetching ||
-            <span>
-              <i className="fa fa-refresh"></i> Refresh
-            </span>
-          }
-          {this.props.fetching &&
-            <span>
-              <i className="fa fa-spin fa-refresh"></i> Refreshing
-            </span>
-          }
+function MovieButtons(props) {
+  const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
+  return (
+    <div className="list-details-buttons btn-toolbar">
+      {props.movie.polochon_url !== "" &&
+        <a type="button" className="btn btn-primary btn-sm" href={props.movie.polochon_url}>
+          <i className="fa fa-download"></i> Download
         </a>
-        {this.props.movie.polochon_url !== "" &&
-          <a type="button" className="btn btn-primary btn-sm" href={this.props.movie.polochon_url}>
-            <i className="fa fa-download"></i> Download
-          </a>
-        }
+      }
 
-        {this.props.movie.torrents &&
-            <TorrentsButton
-              torrents={this.props.movie.torrents}
-              addTorrent={this.props.addTorrent}
-            />
-        }
+      {props.movie.torrents &&
+          <TorrentsButton
+            torrents={props.movie.torrents}
+            addTorrent={props.addTorrent}
+          />
+      }
 
-        <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
-          <i className="fa fa-external-link"></i> IMDB
-        </a>
-      </div>
-    );
-  }
+      <ActionsButton
+        fetching={props.fetching}
+        movieId={props.movie.imdb_id}
+        getDetails={props.getMovieDetails}
+      />
+
+      <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
+        <i className="fa fa-external-link"></i> IMDB
+      </a>
+  </div>
+  );
 }
 
 export default class MovieList extends React.Component {