Change AccordionListItems and parents for loading UserStore from top level app

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -21,16 +21,16 @@ let AccordionListItem = React.createClass({
     },
 
     render() {
-        const { linkData,
+        const {
-                className,
+            linkData,
-                thumbnail,
+            className,
-                heading,
+            thumbnail,
-                subheading,
+            heading,
-                subsubheading,
+            subheading,
-                buttons,
+            subsubheading,
-                badge,
+            buttons,
-                children } = this.props;
+            badge,
-
+            children } = this.props;
 
         return (
             <div className="row">

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}`;
         }

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(){
+    getGlyphicon() {
-        if ((this.props.content.notifications && this.props.content.notifications.length > 0)){
+        if (this.props.content.notifications && this.props.content.notifications.length){
             return (
                 <OverlayTrigger
                     delay={500}

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}
+                                currentUser={currentUser}
-                                key={i}>
+                                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} />

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(
+        return PieceListStore.getState();
-            PieceListStore.getState(),
-            UserStore.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){
+        const { currentUser, content: { id, ratings } } = this.props;
-            if ((this.props.content.ratings) &&
+
-                (this.props.content.ratings.rating || this.props.content.ratings.average)){
+        if (currentUser && (currentUser.is_jury || currentUser.is_judge)) {
+            if (ratings && (ratings.rating || ratings.average)) {
                 // jury and rating available
-                let rating = null,
+                let rating = null;
-                    caption = null;
+                let caption = null;
-                if (this.props.content.ratings.rating){
+
-                    rating = parseInt(this.props.content.ratings.rating, 10);
+                if (ratings.rating) {
+                    rating = parseInt(ratings.rating, 10);
                     caption = getLangText('Your rating');
-                }
+                } else if (ratings.average) {
-                else if (this.props.content.ratings.average){
+                    rating = ratings.average;
-                    rating = this.props.content.ratings.average;
+                    caption = getLangText('Average of ' + ratings.num_ratings + ' rating(s)');
-                    caption = getLangText('Average of ' + this.props.content.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 {
-            else {
+                if (currentUser.is_judge) {
-                if (this.state.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){
+    handleShortlistSuccess(message) {
-        let notification = new GlobalNotificationModel(message, 'success', 2000);
+        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(
+        .then((res) => {
-            (res) => {
+            this.refreshPieceData();
-                this.refreshPieceData();
+            this.handleShortlistSuccess(res.notification);
-                return res;
+        });
-            })
-        .then(
-            (res) => {
-                this.handleShortlistSuccess(res.notification);
-            }
-        );
 
     },
 
-    getPrizeBadge(){
+    getPrizeBadge() {
-        if (this.state.currentUser && this.state.currentUser.is_judge) {
+        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 { children, className, content, currentUser } = this.props;
-        const { currentUser } = this.state;
 
         // 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}

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(
+        return PieceListStore.getState();
-            PieceListStore.getState(),
-            UserStore.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
+                        disabled
-                    className="btn btn-default btn-xs pull-right">
+                        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
+                        disabled
-                    className="btn btn-default btn-xs pull-right">
+                        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}
+                className={className}
-                piece={this.props.content}
+                piece={content}
                 subsubheading={
                     <div className="pull-left">
-                        <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
-                    </div>}
+                    </div>
+                }
                 buttons={this.getSubmitButtons()}>
-                {this.props.children}
+                {children}
             </AccordionListItemPiece>
         );
     }

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(
+        return PieceListStore.getState();
-            PieceListStore.getState(),
-            UserStore.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
+                        disabled
-                    className="btn btn-default btn-xs pull-right">
+                        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
+                        disabled
-                    className="btn btn-default btn-xs pull-right">
+                        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) {
+        const { children, className, content } = this.props;
-            return (
+
-                <AccordionListItemPiece
+        return (
-                    className={this.props.className}
+            <AccordionListItemPiece
-                    piece={this.props.content}
+                className={className}
-                    subsubheading={
+                piece={content}
-                        <div className="pull-left">
+                subsubheading={
-                            <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                    <div className="pull-left">
-                        </div>}
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
-                    buttons={this.getSubmitButtons()}>
+                    </div>
-                    {this.props.children}
+                }
-                </AccordionListItemPiece>
+                buttons={this.getSubmitButtons()}>
-            );
+                {children}
-        } else {
+            </AccordionListItemPiece>
-            return null;
+        );
-        }
     }
 });