From c72a5aa308ab4f0b163f1e19d60456a3c8d4b422 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 28 Oct 2015 11:26:54 +0100
Subject: [PATCH] Add Lumenus specific data forms to edition and piece details

---
 js/components/ascribe_detail/edition.js       | 19 ++++++--
 .../ascribe_detail/edition_action_panel.js    | 26 +++++++----
 .../ascribe_detail/edition_container.js       |  4 ++
 .../ascribe_detail/piece_container.js         | 12 ++++-
 .../lumenus_edition_container.js              | 30 ++++++++++++
 .../lumenus_detail/lumenus_further_details.js | 46 +++++++++++++++++++
 .../lumenus_detail/lumenus_piece_container.js | 27 +++++++++++
 .../lumenus_additional_data_form.js           | 18 +++++---
 .../components/lumenus/lumenus_piece_list.js  | 21 ---------
 .../lumenus/lumenus_register_piece.js         | 11 ++---
 .../whitelabel/wallet/wallet_routes.js        |  6 ++-
 11 files changed, 170 insertions(+), 50 deletions(-)
 create mode 100644 js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_edition_container.js
 create mode 100644 js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_further_details.js
 create mode 100644 js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_piece_container.js

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index bcd2902c..bcd6743c 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -40,6 +40,8 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let Edition = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
         edition: React.PropTypes.object,
         loadEdition: React.PropTypes.func,
         location: React.PropTypes.object
@@ -47,6 +49,12 @@ let Edition = React.createClass({
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -74,6 +82,8 @@ let Edition = React.createClass({
     },
 
     render() {
+        let FurtherDetailsType = this.props.furtherDetailsType;
+
         return (
             <Row>
                 <Col md={6}>
@@ -89,6 +99,7 @@ let Edition = React.createClass({
                         <hr/>
                     </div>
                     <EditionSummary
+                        actionPanelButtonListType={this.props.actionPanelButtonListType}
                         edition={this.props.edition}
                         currentUser={this.state.currentUser}
                         handleSuccess={this.props.loadEdition}/>
@@ -151,13 +162,13 @@ let Edition = React.createClass({
                         show={this.props.edition.acl.acl_edit
                             || Object.keys(this.props.edition.extra_data).length > 0
                             || this.props.edition.other_data.length > 0}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.props.edition.acl.acl_edit}
                             pieceId={this.props.edition.parent}
                             extraData={this.props.edition.extra_data}
                             otherData={this.props.edition.other_data}
                             handleSuccess={this.props.loadEdition}
-                            location={this.props.location}/>
+                            location={this.props.location} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
@@ -174,6 +185,7 @@ let Edition = React.createClass({
 
 let EditionSummary = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -198,7 +210,7 @@ let EditionSummary = React.createClass({
     },
 
     render() {
-        let { edition, currentUser } = this.props;
+        let { actionPanelButtonListType, edition, currentUser } = this.props;
         return (
             <div className="ascribe-detail-header">
                 <EditionDetailProperty
@@ -214,6 +226,7 @@ let EditionSummary = React.createClass({
                 <LicenseDetail license={edition.license_type}/>
                 {this.getStatus()}
                 <EditionActionPanel
+                    actionPanelButtonListType={actionPanelButtonListType}
                     edition={edition}
                     currentUser={currentUser}
                     handleSuccess={this.handleSuccess} />
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index bd423e4c..3d6d3043 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -34,6 +34,7 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -41,6 +42,12 @@ let EditionActionPanel = React.createClass({
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            actionPanelButtonListType: AclButtonList
+        };
+    },
+
     getInitialState() {
         return PieceListStore.getState();
     },
@@ -85,7 +92,8 @@ let EditionActionPanel = React.createClass({
     },
 
     render(){
-        let {edition, currentUser} = this.props;
+        let { edition, currentUser } = this.props;
+        let ActionPanelButtonListType = this.props.actionPanelButtonListType;
 
         if (edition &&
             edition.notifications &&
@@ -102,7 +110,7 @@ let EditionActionPanel = React.createClass({
             return (
                 <Row>
                     <Col md={12}>
-                        <AclButtonList
+                        <ActionPanelButtonListType
                             className="text-center ascribe-button-list"
                             availableAcls={edition.acl}
                             editions={[edition]}
@@ -119,8 +127,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         hidden={true}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW TRANSFER')}
@@ -139,8 +148,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         hidden={true}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW CONSIGN')}
@@ -158,7 +168,7 @@ let EditionActionPanel = React.createClass({
                             <DeleteButton
                                 handleSuccess={this.handleDeleteSuccess}
                                 editions={[edition]}/>
-                        </AclButtonList>
+                        </ActionPanelButtonListType>
                     </Col>
                 </Row>
             );
@@ -166,4 +176,4 @@ let EditionActionPanel = React.createClass({
     }
 });
 
-export default EditionActionPanel;
\ No newline at end of file
+export default EditionActionPanel;
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 165913d4..66704816 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -17,6 +17,8 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let EditionContainer = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
         location: React.PropTypes.object
     },
 
@@ -71,6 +73,8 @@ let EditionContainer = React.createClass({
 
             return (
                 <Edition
+                    actionPanelButtonListType={this.props.actionPanelButtonListType}
+                    furtherDetailsType={this.props.furtherDetailsType}
                     edition={this.state.edition}
                     loadEdition={this.loadEdition}
                     location={this.props.location}/>
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 678dda39..9a8e994d 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -46,11 +46,18 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
+        furtherDetailsType: React.PropTypes.func,
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return mergeOptions(
             UserStore.getState(),
@@ -83,7 +90,7 @@ let PieceContainer = React.createClass({
 
     onChange(state) {
         /*
-        
+
             ATTENTION:
             THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
             FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
@@ -212,6 +219,7 @@ let PieceContainer = React.createClass({
 
     render() {
         if(this.state.piece && this.state.piece.title) {
+            let FurtherDetailsType = this.props.furtherDetailsType;
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (
@@ -263,7 +271,7 @@ let PieceContainer = React.createClass({
                             || Object.keys(this.state.piece.extra_data).length > 0
                             || this.state.piece.other_data.length > 0}
                         defaultExpanded={true}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.state.piece.acl.acl_edit}
                             pieceId={this.state.piece.id}
                             extraData={this.state.piece.extra_data}
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_edition_container.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_edition_container.js
new file mode 100644
index 00000000..756735eb
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_edition_container.js
@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+
+import LumenusFurtherDetails from './lumenus_further_details';
+
+import LumenusAclButtonList from '../lumenus_buttons/lumenus_acl_button_list';
+
+import EditionContainer from '../../../../../ascribe_detail/edition_container';
+
+let LumenusEditionContainer = React.createClass({
+    propTypes: {
+        params: React.PropTypes.object,
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <div>
+                <EditionContainer
+                    params={this.props.params}
+                    actionPanelButtonListType={LumenusAclButtonList}
+                    furtherDetailsType={LumenusFurtherDetails}
+                    location={this.props.location} />
+            </div>
+        );
+    }
+});
+
+export default LumenusEditionContainer;
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_further_details.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_further_details.js
new file mode 100644
index 00000000..17dbad20
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_further_details.js
@@ -0,0 +1,46 @@
+'use strict';
+
+import React from 'react';
+
+import LumenusAdditionalDataForm from '../lumenus_forms/lumenus_additional_data_form'
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+let FurtherDetails = React.createClass({
+    propTypes: {
+        pieceId: React.PropTypes.number,
+        extraData: React.PropTypes.object,
+        otherData: React.PropTypes.arrayOf(React.PropTypes.object),
+        handleSuccess: React.PropTypes.func,
+        location: React.PropTypes.object
+    },
+
+    showNotification() {
+        this.props.handleSuccess();
+        let notification = new GlobalNotificationModel('Further details updated', 'success');
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        const { pieceId, extraData, otherData, handleSuccess, location } = this.props;
+
+        // Instead of grabbing the entire piece from the PieceStore and making this component
+        // stateful, we can put together a piece for the additional form solely based on the props
+        const piece = {
+            id: pieceId,
+            extra_data: extraData,
+            other_data: otherData
+        };
+
+        return (
+            <LumenusAdditionalDataForm
+                piece={piece}
+                handleSuccess={this.showNotification}
+                isInline
+                location={location} />
+        );
+    }
+});
+
+export default FurtherDetails;
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_piece_container.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_piece_container.js
new file mode 100644
index 00000000..03fd9d9b
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_detail/lumenus_piece_container.js
@@ -0,0 +1,27 @@
+'use strict';
+
+import React from 'react';
+
+import LumenusFurtherDetails from './lumenus_further_details';
+
+import PieceContainer from '../../../../../ascribe_detail/piece_container';
+
+let LumenusPieceContainer = React.createClass({
+    propTypes: {
+        params: React.PropTypes.object,
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <div>
+                <PieceContainer
+                    params={this.props.params}
+                    furtherDetailsType={LumenusFurtherDetails}
+                    location={this.props.location} />
+            </div>
+        );
+    }
+});
+
+export default LumenusPieceContainer;
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js
index d75bb946..3df03fd8 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js
@@ -23,7 +23,11 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 let LumenusAdditionalDataForm = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func,
-        piece: React.PropTypes.object.isRequired,
+        piece: React.PropTypes.shape({
+            id: React.PropTypes.number,
+            extra_data: React.PropTypes.object,
+            other_data: React.PropTypes.arrayOf(React.PropTypes.object)
+        }).isRequired,
         isInline: React.PropTypes.bool,
         location: React.PropTypes.object
     },
@@ -78,7 +82,7 @@ let LumenusAdditionalDataForm = React.createClass({
         let { piece, isInline, handleSuccess } = this.props;
         let buttons, spinner, heading;
 
-        if(!isInline) {
+        if (!isInline) {
             buttons = (
                 <button
                     type="submit"
@@ -103,7 +107,7 @@ let LumenusAdditionalDataForm = React.createClass({
             );
         }
 
-        if(piece && piece.id) {
+        if (piece && piece.id) {
             return (
                 <Form
                     className="ascribe-form-bordered"
@@ -130,7 +134,7 @@ let LumenusAdditionalDataForm = React.createClass({
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
                             placeholder={getLangText('Enter a biography of the artist...')}
-                            required/>
+                            required="required"/>
                     </Property>
                     <Property
                         name='work_description'
@@ -139,7 +143,7 @@ let LumenusAdditionalDataForm = React.createClass({
                             rows={1}
                             defaultValue={piece.extra_data.work_description}
                             placeholder={getLangText('Enter a description of the work...')}
-                            required/>
+                            required="required"/>
                     </Property>
                     <Property
                         name='tech_details'
@@ -148,7 +152,7 @@ let LumenusAdditionalDataForm = React.createClass({
                             rows={1}
                             defaultValue={piece.extra_data.tech_details}
                             placeholder={getLangText('Enter technological details about the work was produced...')}
-                            required/>
+                            required="required"/>
                     </Property>
                     <Property
                         name='display_instructions'
@@ -157,7 +161,7 @@ let LumenusAdditionalDataForm = React.createClass({
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
                             placeholder={getLangText('Enter instructions on how to best display the work...')}
-                            required/>
+                            required="required"/>
                     </Property>
                 </Form>
             );
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_piece_list.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_piece_list.js
index 403e226b..4bc2485f 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_piece_list.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_piece_list.js
@@ -6,35 +6,14 @@ import LumenusAclButtonList from './lumenus_buttons/lumenus_acl_button_list';
 
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
-
 let LumenusPieceList = React.createClass({
     propTypes: {
         location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         setDocumentTitle(getLangText('Collection'));
 
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_register_piece.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_register_piece.js
index 5b5bbe13..342c4a32 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_register_piece.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_register_piece.js
@@ -6,19 +6,17 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
+import LumenusAdditionalDataForm from './lumenus_forms/lumenus_additional_data_form';
+
 import Property from '../../../../ascribe_forms/property';
 import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
-import PieceListStore from '../../../../../stores/piece_list_store';
-import PieceListActions from '../../../../../actions/piece_list_actions';
-
 import UserStore from '../../../../../stores/user_store';
 import UserActions from '../../../../../actions/user_actions';
-
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
-
-import LumenusAdditionalDataForm from './lumenus_forms/lumenus_additional_data_form';
+import PieceListStore from '../../../../../stores/piece_list_store';
+import PieceListActions from '../../../../../actions/piece_list_actions';
 
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
@@ -26,7 +24,6 @@ import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 
-
 let LumenusRegisterPiece = React.createClass({
     propTypes: {
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index e170d671..9b0e9465 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -31,6 +31,8 @@ import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_
 
 import LumenusPieceList from './components/lumenus/lumenus_piece_list';
 import LumenusRegisterPiece from './components/lumenus/lumenus_register_piece';
+import LumenusPieceContainer from './components/lumenus/lumenus_detail/lumenus_piece_container';
+import LumenusEditionContainer from './components/lumenus/lumenus_detail/lumenus_edition_container';
 
 import CCRegisterPiece from './components/cc/cc_register_piece';
 
@@ -181,8 +183,8 @@ let ROUTES = {
                 path='collection'
                 component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(LumenusPieceList)}
                 headerTitle='COLLECTION'/>
-            <Route path='pieces/:pieceId' component={PieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
+            <Route path='pieces/:pieceId' component={LumenusPieceContainer} />
+            <Route path='editions/:editionId' component={LumenusEditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>