diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 38cb77b1..4cc99de0 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -21,16 +21,16 @@ let AccordionListItem = React.createClass({ }, render() { - const { linkData, - className, - thumbnail, - heading, - subheading, - subsubheading, - buttons, - badge, - children } = this.props; - + const { + linkData, + className, + thumbnail, + heading, + subheading, + subsubheading, + buttons, + badge, + children } = this.props; return ( <div className="row"> diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js index 9f876388..3a21c2ea 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js @@ -34,11 +34,10 @@ let AccordionListItemPiece = React.createClass({ }, getLinkData() { - let { piece } = this.props; + const { piece } = this.props; - if(piece && piece.first_edition) { + if (piece && piece.first_edition) { return `/editions/${piece.first_edition.bitcoin_id}`; - } else { return `/pieces/${piece.id}`; } diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js index a8cab166..638e9bb3 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js @@ -29,8 +29,9 @@ import { mergeOptions } from '../../utils/general_utils'; let AccordionListItemWallet = React.createClass({ propTypes: { + content: React.PropTypes.object.isRequired, + className: React.PropTypes.string, - content: React.PropTypes.object, thumbnailPlaceholder: React.PropTypes.func, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), @@ -62,8 +63,8 @@ let AccordionListItemWallet = React.createClass({ this.setState(state); }, - getGlyphicon(){ - if ((this.props.content.notifications && this.props.content.notifications.length > 0)){ + getGlyphicon() { + if (this.props.content.notifications && this.props.content.notifications.length){ return ( <OverlayTrigger delay={500} diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 62407534..4a4663bb 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -325,13 +325,14 @@ let PieceList = React.createClass({ page={this.state.page} pageSize={this.state.pageSize} loadingElement={loadingElement}> - {this.state.pieceList.map((piece, i) => { + {this.state.pieceList.map((piece) => { return ( <AccordionListItemType + key={piece.id} className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item" content={piece} - thumbnailPlaceholder={customThumbnailPlaceholder} - key={i}> + currentUser={currentUser} + thumbnailPlaceholder={customThumbnailPlaceholder}> <AccordionListItemTableEditions className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2" parentId={piece.id} /> diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js index 3fc3f5fd..4ab94091 100644 --- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js +++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js @@ -10,8 +10,6 @@ import PieceListStore from '../../../../../../stores/piece_list_store'; import PrizeRatingActions from '../../actions/prize_rating_actions'; -import UserStore from '../../../../../../stores/user_store'; - import InputCheckbox from '../../../../../ascribe_forms/input_checkbox'; import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; @@ -23,13 +21,14 @@ import AclProxy from '../../../../../acl_proxy'; import SubmitToPrizeButton from './../ascribe_buttons/submit_to_prize_button'; import { getLangText } from '../../../../../../utils/lang_utils'; -import { mergeOptions } from '../../../../../../utils/general_utils'; let AccordionListItemPrize = React.createClass({ propTypes: { + content: React.PropTypes.object.isRequired, + currentUser: React.PropTypes.object.isRequired, + className: React.PropTypes.string, - content: React.PropTypes.object, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -37,20 +36,15 @@ let AccordionListItemPrize = React.createClass({ }, getInitialState() { - return mergeOptions( - PieceListStore.getState(), - UserStore.getState() - ); + return PieceListStore.getState(); }, componentDidMount() { PieceListStore.listen(this.onChange); - UserStore.listen(this.onChange); }, componentWillUnmount() { PieceListStore.unlisten(this.onChange); - UserStore.unlisten(this.onChange); }, onChange(state) { @@ -61,29 +55,30 @@ let AccordionListItemPrize = React.createClass({ PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc, this.state.filterBy); - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, getPrizeButtons() { - if (this.state.currentUser && this.state.currentUser.is_jury){ - if ((this.props.content.ratings) && - (this.props.content.ratings.rating || this.props.content.ratings.average)){ + const { currentUser, content: { id, ratings } } = this.props; + + if (currentUser && (currentUser.is_jury || currentUser.is_judge)) { + if (ratings && (ratings.rating || ratings.average)) { // jury and rating available - let rating = null, - caption = null; - if (this.props.content.ratings.rating){ - rating = parseInt(this.props.content.ratings.rating, 10); + let rating = null; + let caption = null; + + if (ratings.rating) { + rating = parseInt(ratings.rating, 10); caption = getLangText('Your rating'); - } - else if (this.props.content.ratings.average){ - rating = this.props.content.ratings.average; - caption = getLangText('Average of ' + this.props.content.ratings.num_ratings + ' rating(s)'); + } else if (ratings.average) { + rating = ratings.average; + caption = getLangText('Average of ' + ratings.num_ratings + ' rating(s)'); } return ( <div id="list-rating" className="pull-right"> - <Link to={`/pieces/${this.props.content.id}`}> + <Link to={`/pieces/${id}`}> <StarRating ref='rating' name="prize-rating" @@ -94,23 +89,23 @@ let AccordionListItemPrize = React.createClass({ ratingAmount={5} /> </Link> </div>); - } - else { - if (this.state.currentUser.is_judge){ + } else { + if (currentUser.is_judge) { return ( <div className="react-rating-caption pull-right"> {getLangText('Not rated')} </div> ); + } else { + // jury and no rating yet + return ( + <div className="react-rating-caption pull-right"> + <Link to={`/pieces/${id}`}> + {getLangText('Submit your rating')} + </Link> + </div> + ); } - // jury and no rating yet - return ( - <div className="react-rating-caption pull-right"> - <Link to={`/pieces/${this.props.content.id}`}> - {getLangText('Submit your rating')} - </Link> - </div> - ); } } return this.getPrizeButtonsParticipant(); @@ -132,8 +127,8 @@ let AccordionListItemPrize = React.createClass({ ); }, - handleShortlistSuccess(message){ - let notification = new GlobalNotificationModel(message, 'success', 2000); + handleShortlistSuccess(message) { + const notification = new GlobalNotificationModel(message, 'success', 2000); GlobalNotificationActions.appendGlobalNotification(notification); }, @@ -142,23 +137,17 @@ let AccordionListItemPrize = React.createClass({ this.state.orderBy, this.state.orderAsc, this.state.filterBy); }, - onSelectChange(){ + onSelectChange() { PrizeRatingActions.toggleShortlist(this.props.content.id) - .then( - (res) => { - this.refreshPieceData(); - return res; - }) - .then( - (res) => { - this.handleShortlistSuccess(res.notification); - } - ); + .then((res) => { + this.refreshPieceData(); + this.handleShortlistSuccess(res.notification); + }); }, - getPrizeBadge(){ - if (this.state.currentUser && this.state.currentUser.is_judge) { + getPrizeBadge() { + if (currentUser && currentUser.is_judge) { return ( <span className="pull-right ascribe-checkbox-wrapper ascribe-checkbox-badge"> <InputCheckbox @@ -166,17 +155,18 @@ let AccordionListItemPrize = React.createClass({ onChange={this.onSelectChange}/> </span> ); + } else { + return null; } - return null; }, render() { - const { children, className, content } = this.props; - const { currentUser } = this.state; + const { children, className, content, currentUser } = this.props; // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted - let artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ? + const artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ? <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name; + return ( <div> <AccordionListItemPiece @@ -186,7 +176,8 @@ let AccordionListItemPrize = React.createClass({ subsubheading={ <div> <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span> - </div>} + </div> + } buttons={this.getPrizeButtons()} badge={this.getPrizeBadge()}> {children} diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js index 9d88408f..3ed7830e 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js @@ -3,27 +3,26 @@ import React from 'react'; import Moment from 'moment'; -import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; +import GlobalNotificationModel from '../../../../../../models/global_notification_model'; +import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import PieceListActions from '../../../../../../actions/piece_list_actions'; import PieceListStore from '../../../../../../stores/piece_list_store'; -import UserStore from '../../../../../../stores/user_store'; - -import GlobalNotificationModel from '../../../../../../models/global_notification_model'; -import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; - import CylandSubmitButton from '../cyland_buttons/cyland_submit_button'; + +import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; + import AclProxy from '../../../../../acl_proxy'; import { getLangText } from '../../../../../../utils/lang_utils'; -import { mergeOptions } from '../../../../../../utils/general_utils'; let CylandAccordionListItem = React.createClass({ propTypes: { + content: React.PropTypes.object.isRequired, + className: React.PropTypes.string, - content: React.PropTypes.object, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -31,20 +30,15 @@ let CylandAccordionListItem = React.createClass({ }, getInitialState() { - return mergeOptions( - PieceListStore.getState(), - UserStore.getState() - ); + return PieceListStore.getState(); }, componentDidMount() { PieceListStore.listen(this.onChange); - UserStore.listen(this.onChange); }, componentWillUnmount() { PieceListStore.unlisten(this.onChange); - UserStore.unlisten(this.onChange); }, onChange(state) { @@ -55,37 +49,39 @@ let CylandAccordionListItem = React.createClass({ PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc, this.state.filterBy); - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, getSubmitButtons() { + const { content } = this.props; + return ( <div> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_submit"> <CylandSubmitButton className="pull-right" - piece={this.props.content} + piece={content} handleSuccess={this.handleSubmitSuccess}/> </AclProxy> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_submitted"> <button - disabled - className="btn btn-default btn-xs pull-right"> + disabled + className="btn btn-default btn-xs pull-right"> {getLangText('Submitted to Cyland') + ' '} <span className='ascribe-icon icon-ascribe-ok'/> </button> </AclProxy> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_accepted"> <button - disabled - className="btn btn-default btn-xs pull-right"> + disabled + className="btn btn-default btn-xs pull-right"> {getLangText('Loaned to Cyland') + ' '} <span className='ascribe-icon icon-ascribe-ok'/> </button> @@ -95,16 +91,19 @@ let CylandAccordionListItem = React.createClass({ }, render() { + const { children, className, content } = this.props; + return ( <AccordionListItemPiece - className={this.props.className} - piece={this.props.content} + className={className} + piece={content} subsubheading={ <div className="pull-left"> - <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span> - </div>} + <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span> + </div> + } buttons={this.getSubmitButtons()}> - {this.props.children} + {children} </AccordionListItemPiece> ); } diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js index ce8cebf5..53f04c41 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js @@ -3,18 +3,16 @@ import React from 'react'; import Moment from 'moment'; -import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; +import GlobalNotificationModel from '../../../../../../models/global_notification_model'; +import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import PieceListActions from '../../../../../../actions/piece_list_actions'; import PieceListStore from '../../../../../../stores/piece_list_store'; -import UserStore from '../../../../../../stores/user_store'; - -import GlobalNotificationModel from '../../../../../../models/global_notification_model'; -import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; - import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button'; +import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; + import AclProxy from '../../../../../acl_proxy'; import { getLangText } from '../../../../../../utils/lang_utils'; @@ -23,8 +21,10 @@ import { mergeOptions } from '../../../../../../utils/general_utils'; let IkonotvAccordionListItem = React.createClass({ propTypes: { + content: React.PropTypes.object.isRequired, + currentUser: React.PropTypes.object.isRequired, + className: React.PropTypes.string, - content: React.PropTypes.object, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element @@ -32,20 +32,15 @@ let IkonotvAccordionListItem = React.createClass({ }, getInitialState() { - return mergeOptions( - PieceListStore.getState(), - UserStore.getState() - ); + return PieceListStore.getState(); }, componentDidMount() { PieceListStore.listen(this.onChange); - UserStore.listen(this.onChange); }, componentWillUnmount() { PieceListStore.unlisten(this.onChange); - UserStore.unlisten(this.onChange); }, onChange(state) { @@ -56,41 +51,43 @@ let IkonotvAccordionListItem = React.createClass({ PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc, this.state.filterBy); - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + const notification = new GlobalNotificationModel(response.notification, 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }, getSubmitButtons() { + const { content, currentUser } = this.props; + return ( <div> <AclProxy - aclObject={this.state.currentUser.acl} + aclObject={currentUser.acl} aclName="acl_wallet_submit"> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_submit"> <IkonotvSubmitButton className="btn-xs pull-right" handleSuccess={this.handleSubmitSuccess} - piece={this.props.content}/> + piece={content}/> </AclProxy> </AclProxy> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_submitted"> <button - disabled - className="btn btn-default btn-xs pull-right"> + disabled + className="btn btn-default btn-xs pull-right"> {getLangText('Submitted to IkonoTV') + ' '} <span className='ascribe-icon icon-ascribe-ok'/> </button> </AclProxy> <AclProxy - aclObject={this.props.content.acl} + aclObject={content.acl} aclName="acl_wallet_accepted"> <button - disabled - className="btn btn-default btn-xs pull-right"> + disabled + className="btn btn-default btn-xs pull-right"> {getLangText('Loaned to IkonoTV') + ' '} <span className='ascribe-icon icon-ascribe-ok'/> </button> @@ -100,22 +97,21 @@ let IkonotvAccordionListItem = React.createClass({ }, render() { - if(this.props.content) { - return ( - <AccordionListItemPiece - className={this.props.className} - piece={this.props.content} - subsubheading={ - <div className="pull-left"> - <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span> - </div>} - buttons={this.getSubmitButtons()}> - {this.props.children} - </AccordionListItemPiece> - ); - } else { - return null; - } + const { children, className, content } = this.props; + + return ( + <AccordionListItemPiece + className={className} + piece={content} + subsubheading={ + <div className="pull-left"> + <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span> + </div> + } + buttons={this.getSubmitButtons()}> + {children} + </AccordionListItemPiece> + ); } });