Componentize the action available for selected prizes

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;

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;