From c7f272c3a3d58fdff39ed2e6e3e3266aa34c83af Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 17 Dec 2015 17:31:33 +0100
Subject: [PATCH 1/7] Small fixes for DRY and React warnings

---
 .../accordion_list_item_piece.js                 |  5 ++++-
 .../accordion_list_item_prize.js                 | 16 +++++++++-------
 .../components/prize_settings_container.js       |  7 ++++---
 3 files changed, 17 insertions(+), 11 deletions(-)

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 006479c5..7c6b63a9 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@@ -12,7 +12,10 @@ import { getLangText } from '../../utils/lang_utils';
 let AccordionListItemPiece = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
-        artistName: React.PropTypes.string,
+        artistName: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         piece: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
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 965b9012..3fc3f5fd 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
@@ -171,23 +171,25 @@ let AccordionListItemPrize = React.createClass({
     },
 
     render() {
+        const { children, className, content } = 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 = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
-                (this.state.currentUser.is_judge && !this.props.content.selected )) ?
-                <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.props.content.artist_name;
+        let 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
-                    className={this.props.className}
-                    piece={this.props.content}
+                    className={className}
+                    piece={content}
                     artistName={artistName}
                     subsubheading={
                         <div>
-                            <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                            <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
                         </div>}
                     buttons={this.getPrizeButtons()}
                     badge={this.getPrizeBadge()}>
-                    {this.props.children}
+                    {children}
                 </AccordionListItemPiece>
             </div>
         );
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
index 145a9d24..b91f9789 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
@@ -135,14 +135,15 @@ let PrizeJurySettings = React.createClass({
 
     handleCreateSuccess(response) {
         PrizeJuryActions.fetchJury();
-        let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
+        this.displayNotification(response);
         this.refs.form.refs.email.refs.input.getDOMNode().value = null;
     },
 
     handleActivate(event) {
         let email = event.target.getAttribute('data-id');
-        PrizeJuryActions.activateJury(email).then((response) => {
+        PrizeJuryActions
+            .activateJury(email)
+            .then((response) => {
                 PrizeJuryActions.fetchJury();
                 this.displayNotification(response);
             });

From 1808d38c7032500fe5c0c119a40483465c02e5c5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 17 Dec 2015 17:39:30 +0100
Subject: [PATCH 2/7] Merge PrizePieceContainer from #76

---
 .../ascribe_detail/prize_piece_container.js   | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 16849ed1..6e1ea3b0 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -107,20 +107,22 @@ let PieceContainer = React.createClass({
     },
 
     getActions() {
-        if (this.state.piece &&
-            this.state.piece.notifications &&
-            this.state.piece.notifications.length > 0) {
+        const { currentUser, piece } = this.state;
+
+        if (piece && piece.notifications && piece.notifications.length > 0) {
             return (
                 <ListRequestActions
-                    pieceOrEditions={this.state.piece}
-                    currentUser={this.state.currentUser}
+                    pieceOrEditions={piece}
+                    currentUser={currentUser}
                     handleSuccess={this.loadPiece}
-                    notifications={this.state.piece.notifications}/>);
+                    notifications={piece.notifications}/>);
         }
     },
 
     render() {
-        if(this.state.piece && this.state.piece.id) {
+        const { currentUser, piece } = this.state;
+
+        if (piece && piece.id) {
             /*
 
                 This really needs a refactor!
@@ -129,37 +131,32 @@ let PieceContainer = React.createClass({
 
              */
             // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
-            let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
-                (this.state.currentUser.is_judge && !this.state.piece.selected )) ?
-                null : this.state.piece.artist_name;
+            let artistName;
+            if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
+                artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
+                setDocumentTitle(piece.title);
+            } else {
+                artistName = piece.artist_name;
+                setDocumentTitle([artistName, piece.title].join(', '));
+            }
 
             // Only show the artist email if you are a judge and the piece is shortlisted
-            let artistEmail = (this.state.currentUser.is_judge && this.state.piece.selected ) ?
-                <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null;
-
-            if (artistName === null) {
-                setDocumentTitle(this.state.piece.title);
-            } else {
-                setDocumentTitle([artistName, this.state.piece.title].join(', '));
-            }
-
-            if (artistName === null) {
-                artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
-            }
+            const artistEmail = (currentUser.is_judge && piece.selected ) ?
+                <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } /> : null;
 
             return (
                 <Piece
-                    piece={this.state.piece}
-                    loadPiece={this.loadPiece}
+                    piece={piece}
+                    currentUser={currentUser}
                     header={
                         <div className="ascribe-detail-header">
                             <NavigationHeader
-                                piece={this.state.piece}
-                                currentUser={this.state.currentUser}/>
+                                piece={piece}
+                                currentUser={currentUser}/>
 
-                            <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
+                            <h1 className="ascribe-detail-title">{piece.title}</h1>
                             <DetailProperty label={getLangText('BY')} value={artistName} />
-                            <DetailProperty label={getLangText('DATE')} value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year()} />
+                            <DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
                             {artistEmail}
                             {this.getActions()}
                             <hr/>
@@ -168,10 +165,10 @@ let PieceContainer = React.createClass({
                     subheader={
                         <PrizePieceRatings
                             loadPiece={this.loadPiece}
-                            piece={this.state.piece}
-                            currentUser={this.state.currentUser}/>
+                            piece={piece}
+                            currentUser={currentUser}/>
                     }>
-                    <PrizePieceDetails piece={this.state.piece} />
+                    <PrizePieceDetails piece={piece} />
                 </Piece>
             );
         } else {

From 089c4ad009c19adb8561dafa4b04b4e21fd5db55 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 17 Dec 2015 18:47:47 +0100
Subject: [PATCH 3/7] Small fixes and destructuring

---
 .../components/ascribe_detail/prize_piece_container.js      | 6 +++++-
 .../prize/simple_prize/components/prize_piece_list.js       | 5 ++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 6e1ea3b0..a49eac68 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -75,7 +75,7 @@ let PieceContainer = React.createClass({
         // the piece detail a second time
         PieceActions.updatePiece({});
 
-        PieceActions.fetchOne(this.props.params.pieceId);
+        this.loadPiece();
         UserActions.fetchCurrentUser();
     },
 
@@ -119,6 +119,10 @@ let PieceContainer = React.createClass({
         }
     },
 
+    loadPiece() {
+        PieceActions.fetchOne(this.props.params.pieceId);
+    },
+
     render() {
         const { currentUser, piece } = this.state;
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 972b3fac..23cdbb23 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -48,9 +48,8 @@ let PrizePieceList = React.createClass({
     },
 
     getButtonSubmit() {
-        const { currentUser } = this.state;
-        if (this.state.prize && this.state.prize.active &&
-            !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge){
+        const { currentUser, prize } = this.state;
+        if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
             return (
                 <LinkContainer to="/register_piece">
                     <Button>

From 311d03d09c66af9952367509c297b2d8a3895f84 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 18 Dec 2015 14:57:10 +0100
Subject: [PATCH 4/7] Also execute child's `handleSuccess()` instead of just
 overwriting it in ModalWrapper

---
 js/components/ascribe_modal/modal_wrapper.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
index 3f3b4af4..fd77e5ae 100644
--- a/js/components/ascribe_modal/modal_wrapper.js
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -46,7 +46,13 @@ let ModalWrapper = React.createClass({
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
-                handleSuccess: this.handleSuccess
+                handleSuccess: (response) => {
+                    if (typeof child.props.handleSuccess === 'function') {
+                        child.props.handleSuccess(response);
+                    }
+
+                    this.handleSuccess(response);
+                }
             });
         });
     },

From 8ff747e1173bd6c9ec484696c3d2fa6ddd0c17e8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 18 Dec 2015 14:57:52 +0100
Subject: [PATCH 5/7] Componentize the action available for selected prizes

---
 .../selected_prize_loan_request_button.js     |  69 +++++++++++
 .../ascribe_detail/prize_piece_container.js   | 115 ++++++++----------
 2 files changed, 121 insertions(+), 63 deletions(-)
 create mode 100644 js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js
new file mode 100644
index 00000000..e068692a
--- /dev/null
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js
@@ -0,0 +1,69 @@
+'use strict'
+
+import React from 'react';
+import Moment from 'moment';
+
+import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
+
+import LoanForm from '../../../../../ascribe_forms/form_loan';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+const SelectedPrizeLoanRequestButton = React.createClass({
+    propTypes: {
+        piece: React.PropTypes.object,
+        currentUser: React.PropTypes.object,
+        startLoanDate: React.PropTypes.object,
+        endLoanDate: React.PropTypes.object,
+        className: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func
+    },
+
+    handleSuccess(res) {
+        const notification = new GlobalNotificationModel(res && res.notification || getLangText('You have successfully requested the loan, pending their confirmation.'), 'success', 4000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess(res);
+        }
+    },
+
+    render() {
+        const { currentUser, piece } = this.props;
+
+        // Can't use default props since those are only created once
+        const startLoanDate = this.props.startLoanDate || new Moment();
+        const endLoanDate = this.props.endLoanDate || (new Moment()).add(6, 'months');
+
+        return (
+            <ModalWrapper
+                trigger={
+                    <button className='btn btn-default btn-sm'>
+                        {getLangText('SEND LOAN REQUEST')}
+                    </button>
+                }
+                handleSuccess={this.handleSuccess}
+                title={getLangText('REQUEST LOAN')}>
+                    <LoanForm
+                        loanHeading={null}
+                        message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
+                                             'Please accept the loan request to proceed.')}
+                        id={{ piece_id: piece.id }}
+                        url={ApiUrls.ownership_loans_pieces_request}
+                        email={currentUser.email}
+                        gallery={piece.prize.name}
+                        startDate={startLoanDate}
+                        endDate={endLoanDate}
+                        showPersonalMessage={true}
+                        showPassword={false} />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default SelectedPrizeLoanRequestButton;
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index a49eac68..9a549625 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -6,6 +6,8 @@ import Moment from 'moment';
 
 import StarRating from 'react-star-rating';
 
+import SelectedPrizeLoanRequestButton from '../ascribe_buttons/selected_prize_loan_request_button';
+
 import ReactError from '../../../../../../mixins/react_error';
 import { ResourceNotFoundError } from '../../../../../../models/errors';
 
@@ -34,9 +36,7 @@ import CollapsibleParagraph from '../../../../../../components/ascribe_collapsib
 import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
 
 import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
-import LoanForm from '../../../../../ascribe_forms/form_loan';
 import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
-import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
 
 import GlobalNotificationModel from '../../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
@@ -52,13 +52,20 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
 /**
  * This is the component that implements resource/data specific functionality
  */
-let PieceContainer = React.createClass({
+let PrizePieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object
+        params: React.PropTypes.object,
+        selectedPrizeActionButton: React.PropTypes.func
     },
 
     mixins: [ReactError],
 
+    getDefaultProps() {
+        return {
+            selectedPrizeActionButton: SelectedPrizeLoanRequestButton
+        };
+    },
+
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
@@ -124,6 +131,7 @@ let PieceContainer = React.createClass({
     },
 
     render() {
+        const { selectedPrizeActionButton } = this.props;
         const { currentUser, piece } = this.state;
 
         if (piece && piece.id) {
@@ -170,7 +178,8 @@ let PieceContainer = React.createClass({
                         <PrizePieceRatings
                             loadPiece={this.loadPiece}
                             piece={piece}
-                            currentUser={currentUser}/>
+                            currentUser={currentUser}
+                            selectedPrizeActionButton={selectedPrizeActionButton} />
                     }>
                     <PrizePieceDetails piece={piece} />
                 </Piece>
@@ -226,7 +235,8 @@ let PrizePieceRatings = React.createClass({
     propTypes: {
         loadPiece: React.PropTypes.func,
         piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object
+        currentUser: React.PropTypes.object,
+        selectedPrizeActionButton: React.PropTypes.func
     },
 
     getInitialState() {
@@ -271,48 +281,23 @@ let PrizePieceRatings = React.createClass({
 
     onRatingClick(event, args) {
         event.preventDefault();
-        PrizeRatingActions.createRating(this.props.piece.id, args.rating).then(
-            this.refreshPieceData()
-        );
+        PrizeRatingActions
+            .createRating(this.props.piece.id, args.rating)
+            .then(this.refreshPieceData);
     },
 
-    handleLoanRequestSuccess(message){
-        let notification = new GlobalNotificationModel(message, 'success', 4000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
+    getSelectedActionButton() {
+        const { currentUser, piece, selectedPrizeActionButton: SelectedPrizeActionButton } = this.props;
 
-    getLoanButton(){
-        let today = new Moment();
-        let endDate = new Moment();
-        endDate.add(6, 'months');
-        return (
-            <ModalWrapper
-                trigger={
-                    <button className='btn btn-default btn-sm'>
-                        {getLangText('SEND LOAN REQUEST')}
-                    </button>
-                }
-                handleSuccess={this.handleLoanRequestSuccess}
-                title='REQUEST LOAN'>
-                    <LoanForm
-                        loanHeading={null}
-                        message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
-                         'Please accept the loan request to proceed.')}
-                        id={{piece_id: this.props.piece.id}}
-                        url={ApiUrls.ownership_loans_pieces_request}
-                        email={this.props.currentUser.email}
-                        gallery={this.props.piece.prize.name}
-                        startDate={today}
-                        endDate={endDate}
-                        showPersonalMessage={true}
-                        showPassword={false}
-                        handleSuccess={this.handleLoanSuccess} />
-            </ModalWrapper>);
-    },
-
-    handleShortlistSuccess(message){
-        let notification = new GlobalNotificationModel(message, 'success', 2000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
+        if (piece.selected && SelectedPrizeActionButton) {
+            return (
+                <span className="pull-right">
+                    <SelectedPrizeActionButton
+                        piece={piece}
+                        currentUser={currentUser} />
+                </span>
+            );
+        }
     },
 
     refreshPieceData() {
@@ -322,17 +307,16 @@ let PrizePieceRatings = React.createClass({
     },
 
     onSelectChange() {
-        PrizeRatingActions.toggleShortlist(this.props.piece.id)
-        .then(
-            (res) => {
+        PrizeRatingActions
+            .toggleShortlist(this.props.piece.id)
+            .then((res) => {
                 this.refreshPieceData();
-                return res;
-            })
-        .then(
-            (res) => {
-                this.handleShortlistSuccess(res.notification);
-            }
-        );
+
+                if (res && res.notification) {
+                    const notification = new GlobalNotificationModel(res.notification, 'success', 2000);
+                    GlobalNotificationActions.appendGlobalNotification(notification);
+                }
+            });
     },
 
     render(){
@@ -353,9 +337,7 @@ let PrizePieceRatings = React.createClass({
                                     </span>
                                 </InputCheckbox>
                             </span>
-                            <span className="pull-right">
-                                {this.props.piece.selected ? this.getLoanButton() : null}
-                            </span>
+                            {this.getSelectedActionButton()}
                         </div>
                         <hr />
                     </CollapsibleParagraph>
@@ -374,13 +356,19 @@ let PrizePieceRatings = React.createClass({
                         </div>
                         <hr />
                         {this.state.ratings.map((item, i) => {
-                            let note = item.note ?
+                            let note = item.note ? (
                                 <div className="rating-note">
                                     note: {item.note}
-                                </div> : null;
+                                </div>
+                            ) : null;
+
                             return (
-                                <div className="rating-list">
-                                    <div id="list-rating" className="row no-margin">
+                                <div
+                                    key={item.user}
+                                    className="rating-list">
+                                    <div
+                                        id="list-rating"
+                                        className="row no-margin">
                                     <span className="pull-right">
                                         <StarRating
                                             ref={'rating' + i}
@@ -458,6 +446,7 @@ let PrizePieceDetails = React.createClass({
 
                             return (
                                 <Property
+                                    key={label}
                                     name={data}
                                     label={label}
                                     editable={false}
@@ -485,4 +474,4 @@ let PrizePieceDetails = React.createClass({
     }
 });
 
-export default PieceContainer;
+export default PrizePieceContainer;

From 1cf8ca006a811d641405efd88b02e8b6214960d9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 21 Dec 2015 16:16:41 +0100
Subject: [PATCH 6/7] Move loan request action at the end of a prize to be
 sluice specific

---
 .../whitelabel/prize/prize_routes.js          |  4 +++-
 .../ascribe_detail/prize_piece_container.js   |  8 -------
 .../sluice_selected_prize_action_button.js}   |  5 ++--
 .../sluice_detail/sluice_piece_container.js   | 23 +++++++++++++++++++
 4 files changed, 29 insertions(+), 11 deletions(-)
 rename js/components/whitelabel/prize/{simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js => sluice/components/sluice_buttons/sluice_selected_prize_action_button.js} (95%)
 create mode 100644 js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js

diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index 7a72e5d9..5f80b30c 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -12,6 +12,8 @@ import SPPieceContainer from './simple_prize/components/ascribe_detail/prize_pie
 import SPSettingsContainer from './simple_prize/components/prize_settings_container';
 import SPApp from './simple_prize/prize_app';
 
+import SluicePieceContainer from './sluice/components/sluice_detail/sluice_piece_container';
+
 import PRApp from './portfolioreview/pr_app';
 import PRLanding from './portfolioreview/components/pr_landing';
 import PRRegisterPiece from './portfolioreview/components/pr_register_piece';
@@ -53,7 +55,7 @@ const ROUTES = {
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
                 headerTitle='COLLECTION'/>
-            <Route path='pieces/:pieceId' component={SPPieceContainer} />
+            <Route path='pieces/:pieceId' component={SluicePieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 9a549625..94367817 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -6,8 +6,6 @@ import Moment from 'moment';
 
 import StarRating from 'react-star-rating';
 
-import SelectedPrizeLoanRequestButton from '../ascribe_buttons/selected_prize_loan_request_button';
-
 import ReactError from '../../../../../../mixins/react_error';
 import { ResourceNotFoundError } from '../../../../../../models/errors';
 
@@ -60,12 +58,6 @@ let PrizePieceContainer = React.createClass({
 
     mixins: [ReactError],
 
-    getDefaultProps() {
-        return {
-            selectedPrizeActionButton: SelectedPrizeLoanRequestButton
-        };
-    },
-
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
similarity index 95%
rename from js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js
rename to js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
index e068692a..7778a8de 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/selected_prize_loan_request_button.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
@@ -14,7 +14,7 @@ import ApiUrls from '../../../../../../constants/api_urls';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 
-const SelectedPrizeLoanRequestButton = React.createClass({
+const SluiceSelectedPrizeActionButton = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
         currentUser: React.PropTypes.object,
@@ -66,4 +66,5 @@ const SelectedPrizeLoanRequestButton = React.createClass({
     }
 });
 
-export default SelectedPrizeLoanRequestButton;
+export default SluiceSelectedPrizeActionButton;
+
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
new file mode 100644
index 00000000..2d9debca
--- /dev/null
+++ b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
@@ -0,0 +1,23 @@
+'use strict';
+
+import React from 'react';
+
+import SluiceSelectedPrizeActionButton from '../sluice_buttons/sluice_selected_prize_action_button';
+
+import PrizePieceContainer from '../../../simple_prize/components/ascribe_detail/prize_piece_container';
+
+const SluicePieceContainer = React.createClass({
+    propTypes: {
+        params: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <PrizePieceContainer
+                {...this.props}
+                selectedPrizeActionButton={SluiceSelectedPrizeActionButton} />
+        );
+    }
+});
+
+export default SluicePieceContainer;

From 13937c99515087624562be2d6fb516f97d7dd60a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 23 Dec 2015 20:43:46 +0100
Subject: [PATCH 7/7] Fix stale prize ratings showing up on other pieces when
 they do not have ratings

---
 .../actions/prize_rating_actions.js           |  3 +-
 .../ascribe_detail/prize_piece_container.js   | 48 +++++++++----------
 .../simple_prize/stores/prize_rating_store.js | 24 ++++++++--
 3 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js b/js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js
index 68b5334b..01637b7a 100644
--- a/js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js
+++ b/js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js
@@ -10,7 +10,8 @@ class PrizeRatingActions {
         this.generateActions(
             'updatePrizeRatings',
             'updatePrizeRatingAverage',
-            'updatePrizeRating'
+            'updatePrizeRating',
+            'resetPrizeRatings'
         );
     }
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 94367817..68a66cc0 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -59,31 +59,32 @@ let PrizePieceContainer = React.createClass({
     mixins: [ReactError],
 
     getInitialState() {
-        return mergeOptions(
-            PieceStore.getState(),
-            UserStore.getState()
-        );
+        //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
+        //       It should instead use something like getInitialState() where that call also resets the state.
+        return UserStore.getState();
+    },
+
+    componentWillMount() {
+        // Every time we enter the piece detail page, just reset the piece
+        // store as it will otherwise display wrong/old data once the user loads
+        // the piece detail a second time
+        PieceActions.updatePiece({});
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
         UserStore.listen(this.onChange);
 
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
-
-        this.loadPiece();
         UserActions.fetchCurrentUser();
+        this.loadPiece();
     },
 
     // This is done to update the container when the user clicks on the prev or next
     // button to update the URL parameter (and therefore to switch pieces)
     componentWillReceiveProps(nextProps) {
-        if(this.props.params.pieceId !== nextProps.params.pieceId) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
             PieceActions.updatePiece({});
-            PieceActions.fetchOne(nextProps.params.pieceId);
+            this.loadPiece(nextProps.params.pieceId);
         }
     },
 
@@ -100,7 +101,6 @@ let PrizePieceContainer = React.createClass({
         UserStore.unlisten(this.onChange);
     },
 
-
     onChange(state) {
         this.setState(state);
     },
@@ -118,8 +118,8 @@ let PrizePieceContainer = React.createClass({
         }
     },
 
-    loadPiece() {
-        PieceActions.fetchOne(this.props.params.pieceId);
+    loadPiece(pieceId = this.props.params.pieceId) {
+        PieceActions.fetchOne(pieceId);
     },
 
     render() {
@@ -234,23 +234,19 @@ let PrizePieceRatings = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
-            PrizeRatingStore.getState()
+            PrizeRatingStore.getInitialState()
         );
     },
 
     componentDidMount() {
         PrizeRatingStore.listen(this.onChange);
+        PieceListStore.listen(this.onChange);
+
         PrizeRatingActions.fetchOne(this.props.piece.id);
         PrizeRatingActions.fetchAverage(this.props.piece.id);
-        PieceListStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
-        // Every time we're leaving the piece detail page,
-        // just reset the piece that is saved in the piece store
-        // as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PrizeRatingActions.updateRating({});
         PrizeRatingStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
     },
@@ -311,7 +307,7 @@ let PrizePieceRatings = React.createClass({
             });
     },
 
-    render(){
+    render() {
         if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
             // Judge sees shortlisting, average and per-jury notes
             return (
@@ -380,8 +376,7 @@ let PrizePieceRatings = React.createClass({
                         <hr />
                     </CollapsibleParagraph>
                 </div>);
-        }
-        else if (this.props.currentUser && this.props.currentUser.is_jury) {
+        } else if (this.props.currentUser && this.props.currentUser.is_jury) {
             // Jury can set rating and note
             return (
                 <CollapsibleParagraph
@@ -408,8 +403,9 @@ let PrizePieceRatings = React.createClass({
                         url={ApiUrls.notes}
                         currentUser={this.props.currentUser}/>
                 </CollapsibleParagraph>);
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
diff --git a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
index 9f1552bb..6c478f3c 100644
--- a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
+++ b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
@@ -6,10 +6,12 @@ import PrizeRatingActions from '../actions/prize_rating_actions';
 
 class PrizeRatingStore {
     constructor() {
-        this.ratings = [];
-        this.currentRating = null;
-        this.average = null;
+        this.getInitialState();
+
         this.bindActions(PrizeRatingActions);
+        this.exportPublicMethods({
+            getInitialState: this.getInitialState.bind(this)
+        });
     }
 
     onUpdatePrizeRatings(ratings) {
@@ -24,6 +26,22 @@ class PrizeRatingStore {
         this.average = data.average;
         this.ratings = data.ratings;
     }
+
+    onResetPrizeRatings() {
+        this.getInitialState();
+    }
+
+    getInitialState() {
+        this.ratings = [];
+        this.currentRating = null;
+        this.average = null;
+
+        return {
+            ratings: this.ratings,
+            currentRating: this.currentRating,
+            average: this.average
+        };
+    }
 }
 
 export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');
\ No newline at end of file