Move buttons in a generic component

src/public/js/components/buttons/actions.js

@@ -0,0 +1,87 @@
+import React from 'react'
+
+import { MenuItem } from 'react-bootstrap'
+
+export class WishlistButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    if (this.props.wishlisted) {
+      this.props.deleteFromWishlist(this.props.movieId);
+    } else {
+      this.props.addToWishlist(this.props.movieId);
+    }
+  }
+  render() {
+    if (this.props.wishlisted) {
+      return (
+        <MenuItem onClick={this.handleClick}>
+          <span>
+            <i className="fa fa-bookmark"></i> Delete from wishlist
+          </span>
+        </MenuItem>
+      );
+    } else {
+      return (
+        <MenuItem onClick={this.handleClick}>
+          <span>
+            <i className="fa fa-bookmark-o"></i> Add to wishlist
+          </span>
+        </MenuItem>
+      );
+    }
+  }
+}
+
+export class DeleteButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.props.deleteFunc(this.props.resourceId);
+  }
+  render() {
+    return (
+      <MenuItem onClick={this.handleClick}>
+        <span>
+          <i className="fa fa-trash"></i> Delete
+        </span>
+      </MenuItem>
+    );
+  }
+}
+
+export 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.resourceId);
+  }
+  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/actions.js

@@ -1,19 +1,20 @@
 import React from 'react'
 
-import { DropdownButton, MenuItem } from 'react-bootstrap'
+import { WishlistButton, DeleteButton, RefreshButton } from '../buttons/actions'
+import { DropdownButton } 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}
+        resourceId={props.movieId}
         getDetails={props.getDetails}
       />
       {(props.isUserAdmin && props.hasMovie) &&
         <DeleteButton
-          movieId={props.movieId}
-          deleteMovie={props.deleteMovie}
+          resourceId={props.movieId}
+          deleteFunc={props.deleteMovie}
           isUserAdmin={props.isUserAdmin}
         />
       }
@@ -26,87 +27,3 @@ export default function ActionsButton(props) {
     </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>
-    );
-  }
-}
-
-class DeleteButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleClick(e) {
-    e.preventDefault();
-    this.props.deleteMovie(this.props.movieId);
-  }
-  render() {
-    return (
-      <MenuItem onClick={this.handleClick}>
-        <span>
-          <i className="fa fa-trash"></i> Delete
-        </span>
-      </MenuItem>
-    );
-  }
-}
-
-class WishlistButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-  handleClick(e) {
-    e.preventDefault();
-    if (this.props.wishlisted) {
-      this.props.deleteFromWishlist(this.props.movieId);
-    } else {
-      this.props.addToWishlist(this.props.movieId);
-    }
-  }
-  render() {
-    if (this.props.wishlisted) {
-      return (
-        <MenuItem onClick={this.handleClick}>
-          <span>
-            <i className="fa fa-bookmark"></i> Delete from wishlist
-          </span>
-        </MenuItem>
-      );
-    } else {
-      return (
-        <MenuItem onClick={this.handleClick}>
-          <span>
-            <i className="fa fa-bookmark-o"></i> Add to wishlist
-          </span>
-        </MenuItem>
-      );
-    }
-  }
-}