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

Move buttons in a generic component

Browse Source
This commit is contained in:
Grégoire Delattre 2017-01-24 13:35:53 +01:00
parent 981cbd339d
commit 51b74ca942
2 changed files with 92 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/public/js/components/buttons/actions.js Normal file
View File

@ -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>
);
}
}

93
src/public/js/components/movies/actions.js
View File

@ -1,19 +1,20 @@
import React from 'react' 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) { export default function ActionsButton(props) {
return ( return (
<DropdownButton className="btn btn-default btn-sm" title="Actions" id="actions-button" dropup> <DropdownButton className="btn btn-default btn-sm" title="Actions" id="actions-button" dropup>
<RefreshButton <RefreshButton
fetching={props.fetching} fetching={props.fetching}
movieId={props.movieId} resourceId={props.movieId}
getDetails={props.getDetails} getDetails={props.getDetails}
/> />
{(props.isUserAdmin && props.hasMovie) && {(props.isUserAdmin && props.hasMovie) &&
<DeleteButton <DeleteButton
movieId={props.movieId} resourceId={props.movieId}
deleteMovie={props.deleteMovie} deleteFunc={props.deleteMovie}
isUserAdmin={props.isUserAdmin} isUserAdmin={props.isUserAdmin}
/> />
} }
@ -26,87 +27,3 @@ export default function ActionsButton(props) {
</DropdownButton> </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>
);
}
}
}