Merge pull request #101 from ascribe/AD-1387-refactor-global-state-to-be-top-level

AD-1387 Refactor global state to be loaded from the top level App component

js/actions/event_actions.js

@@ -8,9 +8,8 @@ class EventActions {
         this.generateActions(
             'applicationWillBoot',
             'applicationDidBoot',
-            'profileDidLoad',
+            'userDidAuthenticate',
-            //'userDidLogin',
+            'userDidLogout',
-            //'userDidLogout',
             'routeDidChange'
         );
     }

js/actions/user_actions.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { altUser } from '../alt';
+import { alt } from '../alt';
 
 
 class UserActions {
@@ -15,4 +15,4 @@ class UserActions {
     }
 }
 
-export default altUser.createActions(UserActions);
+export default alt.createActions(UserActions);

js/alt.js

@@ -4,5 +4,4 @@ import Alt from 'alt';
 
 export let alt = new Alt();
 export let altThirdParty = new Alt();
-export let altUser = new Alt();
 export let altWhitelabel = new Alt();

js/components/app_base.js

@@ -4,10 +4,18 @@ import React from 'react';
 import classNames from 'classnames';
 import { History } from 'react-router';
 
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
+
+import WhitelabelActions from '../actions/whitelabel_actions';
+import WhitelabelStore from '../stores/whitelabel_store';
+
 import GlobalNotification from './global_notification';
 
 import AppConstants from '../constants/application_constants';
 
+import { mergeOptions } from '../utils/general_utils';
+
 
 export default function AppBase(App) {
     return React.createClass({
@@ -20,9 +28,22 @@ export default function AppBase(App) {
             routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
         },
 
+        getInitialState() {
+            return mergeOptions(
+                UserStore.getState(),
+                WhitelabelStore.getState()
+            );
+        },
+
         mixins: [History],
 
         componentDidMount() {
+            UserStore.listen(this.onChange);
+            WhitelabelStore.listen(this.onChange);
+
+            UserActions.fetchCurrentUser();
+            WhitelabelActions.fetchWhitelabel();
+
             this.history.locationQueue.push(this.props.location);
         },
 
@@ -36,8 +57,18 @@ export default function AppBase(App) {
             }
         },
 
+        componentWillUnmount() {
+            UserStore.unlisten(this.onChange);
+            WhitelabelActions.unlisten(this.onChange);
+        },
+
+        onChange(state) {
+            this.setState(state);
+        },
+
         render() {
             const { routes } = this.props;
+            const { currentUser, whitelabel } = this.state;
 
             // The second element of the routes prop given to us by react-router is always the
             // active second-level component object (ie. after App).
@@ -47,7 +78,9 @@ export default function AppBase(App) {
                 <div>
                     <App
                         {...this.props}
-                        activeRoute={activeRoute} />
+                        activeRoute={activeRoute}
+                        currentUser={currentUser}
+                        whitelabel={whitelabel} />
                     <GlobalNotification />
                     <div id="modal" className="container" />
                 </div>

js/components/app_route_wrapper.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import React from 'react';
+
+import { omitFromObject } from '../utils/general_utils';
+
+const AppRouteWrapper = React.createClass({
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired
+    },
+
+    render() {
+        const propsToPropagate = omitFromObject(this.props, ['children']);
+
+        let childrenWithProps = this.props.children;
+        // If there are more props given, propagate them into the child routes by cloning the routes
+        if (Object.keys(propsToPropagate).length) {
+            childrenWithProps = React.Children.map(this.props.children, (child) => {
+                return React.cloneElement(child, propsToPropagate);
+            });
+        }
+
+        return (
+            <div className="container ascribe-body">
+                {childrenWithProps}
+            </div>
+        );
+    }
+});
+
+export default AppRouteWrapper;

js/components/ascribe_accordion_list/accordion_list.js

@@ -1,14 +1,17 @@
 'use strict';
 
 import React from 'react';
+import { Link } from 'react-router';
+
 import { getLangText } from '../../utils/lang_utils';
 
 
 let AccordionList = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
         children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
-        loadingElement: React.PropTypes.element,
+        loadingElement: React.PropTypes.element.isRequired,
+
+        className: React.PropTypes.string,
         count: React.PropTypes.number,
         itemList: React.PropTypes.arrayOf(React.PropTypes.object),
         search: React.PropTypes.string,
@@ -22,7 +25,7 @@ let AccordionList = React.createClass({
     render() {
         const { search } = this.props;
 
-        if(this.props.itemList && this.props.itemList.length > 0) {
+        if (this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className={this.props.className}>
                     {this.props.children}
@@ -36,7 +39,7 @@ let AccordionList = React.createClass({
                     </p>
                     <p className="text-center">
                         {getLangText('To register one, click')}&nbsp;
-                        <a href="register_piece">{getLangText('here')}</a>!
+                        <Link to="/register_piece">{getLangText('here')}</Link>!
                     </p>
                 </div>
             );

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

@@ -7,20 +7,19 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
-import AccordionListItemPiece from './accordion_list_item_piece';
-import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
-import CreateEditionsForm from '../ascribe_forms/create_editions_form';
-
-import PieceListActions from '../../actions/piece_list_actions';
-import PieceListStore from '../../stores/piece_list_store';
-
-import WhitelabelStore from '../../stores/whitelabel_store';
-
 import EditionListActions from '../../actions/edition_list_actions';
 
 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 AccordionListItemPiece from './accordion_list_item_piece';
+import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
+import CreateEditionsForm from '../ascribe_forms/create_editions_form';
+
+
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -29,50 +28,51 @@ import { mergeOptions } from '../../utils/general_utils';
 
 let AccordionListItemWallet = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
+        content: React.PropTypes.object.isRequired,
-        content: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
-        thumbnailPlaceholder: React.PropTypes.func,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string,
+        thumbnailPlaceholder: React.PropTypes.func
     },
 
     getInitialState() {
         return mergeOptions(
+            PieceListStore.getState(),
             {
                 showCreateEditionsDialog: false
-            },
+            }
-            PieceListStore.getState(),
-            WhitelabelStore.getState()
         );
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         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}
                     placement="left"
                     overlay={<Tooltip>{getLangText('You have actions pending')}</Tooltip>}>
-                    <Glyphicon glyph='bell' color="green"/>
+                    <Glyphicon glyph='bell' color="green" />
-                </OverlayTrigger>);
+                </OverlayTrigger>
+            );
+        } else {
+            return null;
         }
-        return null;
     },
 
     toggleCreateEditionsDialog() {
@@ -93,7 +93,7 @@ let AccordionListItemWallet = React.createClass({
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
         EditionListActions.toggleEditionList(pieceId);
 
-        const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -111,13 +111,15 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getLicences() {
+        const { content, whitelabel } = this.props;
+
         // convert this to acl_view_licences later
-        if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') {
+        if (whitelabel.name === 'Creative Commons France') {
             return (
                 <span>
                     <span>, </span>
-                    <a href={this.props.content.license_type.url} target="_blank">
+                    <a href={content.license_type.url} target="_blank">
-                        {getLangText('%s license', this.props.content.license_type.code)}
+                        {getLangText('%s license', content.license_type.code)}
                     </a>
                 </span>
             );

js/components/ascribe_app.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import AppBase from './app_base';
+import AppRouteWrapper from './app_route_wrapper';
 import Footer from './footer';
 import Header from './header';
 
@@ -11,19 +12,28 @@ let AscribeApp = React.createClass({
     propTypes: {
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { activeRoute, children, routes } = this.props;
+        const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
 
         return (
-            <div className="ascribe-default-app">
+            <div className="ascribe-app ascribe-default-app">
-                <Header routes={routes} />
+                <Header
-                <div className="container ascribe-body">
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
                     {children}
-                </div>
+                </AppRouteWrapper>
                 <Footer activeRoute={activeRoute} />
             </div>
         );

js/components/ascribe_buttons/acl_button_list.js

@@ -2,9 +2,6 @@
 
 import React from 'react/addons';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
 import ConsignButton from './acls/consign_button';
 import EmailButton from './acls/email_button';
 import LoanButton from './acls/loan_button';
@@ -12,50 +9,44 @@ import LoanRequestButton from './acls/loan_request_button';
 import TransferButton from './acls/transfer_button';
 import UnconsignButton from './acls/unconsign_button';
 
-import { mergeOptions } from '../../utils/general_utils';
+import { selectFromObject } from '../../utils/general_utils';
 
 let AclButtonList = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
+        availableAcls: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        availableAcls: React.PropTypes.object.isRequired,
+
         buttonsStyle: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func.isRequired,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     getInitialState() {
-        return mergeOptions(
+        return {
-            UserStore.getState(),
+            buttonListSize: 0
-            {
+        }
-                buttonListSize: 0
-            }
-        );
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-
         window.addEventListener('resize', this.handleResize);
         window.dispatchEvent(new Event('resize'));
     },
 
     componentDidUpdate(prevProps) {
-        if(prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
+        if (prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
             window.dispatchEvent(new Event('resize'));
         }
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-
         window.removeEventListener('resize', this.handleResize);
     },
 
@@ -65,10 +56,6 @@ let AclButtonList = React.createClass({
         });
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     renderChildren() {
         const { children } = this.props;
         const { buttonListSize } = this.state;
@@ -79,42 +66,29 @@ let AclButtonList = React.createClass({
     },
 
     render() {
-        const { className,
+        const {
-                buttonsStyle,
+            availableAcls,
-                availableAcls,
+            buttonsStyle,
-                pieceOrEditions,
+            className,
-                handleSuccess } = this.props;
+            currentUser,
+            handleSuccess,
+            pieceOrEditions } = this.props;
 
-        const { currentUser } = this.state;
+        const buttonProps = selectFromObject(this.props, [
+            'availableAcls',
+            'currentUser',
+            'handleSuccess',
+            'pieceOrEditions'
+        ]);
 
         return (
             <div className={className}>
                 <span ref="buttonList" style={buttonsStyle}>
-                    <EmailButton
+                    <EmailButton {...buttonProps} />
-                        availableAcls={availableAcls}
+                    <TransferButton {...buttonProps} />
-                        pieceOrEditions={pieceOrEditions}
+                    <ConsignButton {...buttonProps} />
-                        currentUser={currentUser}
+                    <UnconsignButton {...buttonProps} />
-                        handleSuccess={handleSuccess} />
+                    <LoanButton {...buttonProps} />
-                    <TransferButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess}/>
-                    <ConsignButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
-                    <UnconsignButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
-                    <LoanButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
                     {this.renderChildren()}
                 </span>
             </div>

js/components/ascribe_buttons/acls/acl_button.js

@@ -24,23 +24,20 @@ export default function AclButton({ action, displayName, title, tooltip }) {
 
         propTypes: {
             availableAcls: React.PropTypes.object.isRequired,
-            buttonAcceptName: React.PropTypes.string,
-            buttonAcceptClassName: React.PropTypes.string,
-            currentUser: React.PropTypes.object,
-            email: React.PropTypes.string,
             pieceOrEditions: React.PropTypes.oneOfType([
                 React.PropTypes.object,
                 React.PropTypes.array
             ]).isRequired,
-            handleSuccess: React.PropTypes.func.isRequired,
+
-            className: React.PropTypes.string
+            buttonAcceptName: React.PropTypes.string,
+            buttonAcceptClassName: React.PropTypes.string,
+            currentUser: React.PropTypes.object,
+            email: React.PropTypes.string,
+            handleSuccess: React.PropTypes.func
         },
 
         sanitizeAction() {
-            if (this.props.buttonAcceptName) {
+            return this.props.buttonAcceptName || AclInformationText.titles[action];
-                return this.props.buttonAcceptName;
-            }
-            return AclInformationText.titles[action];
         },
 
         render() {

js/components/ascribe_buttons/unconsign_request_button.js

@@ -15,10 +15,12 @@ let UnConsignRequestButton = React.createClass({
     propTypes: {
         currentUser: React.PropTypes.object.isRequired,
         edition: React.PropTypes.object.isRequired,
-        handleSuccess: React.PropTypes.func.isRequired
+
+        handleSuccess: React.PropTypes.func
     },
 
     render: function () {
+        const { currentUser, edition, handleSuccess } = this.props;
         return (
             <ModalWrapper
                 trigger={
@@ -26,17 +28,18 @@ let UnConsignRequestButton = React.createClass({
                         REQUEST UNCONSIGN
                     </Button>
                 }
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 title='Request to Un-Consign'>
                 <UnConsignRequestForm
                     url={ApiUrls.ownership_unconsigns_request}
-                    id={{'bitcoin_id': this.props.edition.bitcoin_id}}
+                    id={{'bitcoin_id': edition.bitcoin_id}}
                     message={`${getLangText('Hi')},
 
-${getLangText('I request you to un-consign')} \" ${this.props.edition.title} \".
+${getLangText('I request you to un-consign')} \" ${edition.title} \".
 
 ${getLangText('Truly yours')},
-${this.props.currentUser.username}`}/>
+${currentUser.username}`
+                    } />
             </ModalWrapper>
         );
     }

js/components/ascribe_detail/edition.js

@@ -8,23 +8,23 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
-import HistoryIterator from './history_iterator';
+import EditionActions from '../../actions/edition_actions';
 
-import MediaContainer from './media_container';
-
-import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
-
-import Form from './../ascribe_forms/form';
-import Property from './../ascribe_forms/property';
 import DetailProperty from './detail_property';
-import LicenseDetail from './license_detail';
-import FurtherDetails from './further_details';
-
 import EditionActionPanel from './edition_action_panel';
-import AclProxy from '../acl_proxy';
+import FurtherDetails from './further_details';
-
+import HistoryIterator from './history_iterator';
+import LicenseDetail from './license_detail';
+import MediaContainer from './media_container';
 import Note from './note';
 
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import AclProxy from '../acl_proxy';
+
 import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
@@ -36,11 +36,13 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let Edition = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
-        furtherDetailsType: React.PropTypes.func,
-        edition: React.PropTypes.object,
         coaError: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
+        furtherDetailsType: React.PropTypes.func,
         loadEdition: React.PropTypes.func
     },
 
@@ -57,56 +59,56 @@ let Edition = React.createClass({
             currentUser,
             edition,
             furtherDetailsType: FurtherDetailsType,
-            loadEdition } = this.props;
+            loadEdition,
+            whitelabel } = this.props;
 
         return (
             <Row>
                 <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         content={edition}
-                        currentUser={currentUser} />
+                        currentUser={currentUser}
+                        refreshObject={loadEdition} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
-                        <hr className="hidden-print" style={{marginTop: 0}}/>
+                        <hr className="hidden-print" style={{marginTop: 0}} />
                         <h1 className="ascribe-detail-title">{edition.title}</h1>
                         <DetailProperty label="CREATED BY" value={edition.artist_name} />
                         <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
-                        <hr/>
+                        <hr />
                     </div>
                     <EditionSummary
                         actionPanelButtonListType={actionPanelButtonListType}
                         edition={edition}
                         currentUser={currentUser}
-                        handleSuccess={loadEdition}/>
+                        handleSuccess={loadEdition}
+                        whitelabel={whitelabel} />
                     <CollapsibleParagraph
                         title={getLangText('Certificate of Authenticity')}
                         show={edition.acl.acl_coa === true}>
                         <CoaDetails
                             coa={edition.coa}
                             coaError={coaError}
-                            editionId={edition.bitcoin_id}/>
+                            editionId={edition.bitcoin_id} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Provenance/Ownership History')}
-                        show={edition.ownership_history && edition.ownership_history.length > 0}>
+                        show={edition.ownership_history && edition.ownership_history.length}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.ownership_history} />
-                            history={edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Consignment History')}
                         show={edition.consign_history && edition.consign_history.length > 0}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.consign_history} />
-                            history={edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={edition.loan_history && edition.loan_history.length > 0}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.loan_history} />
-                            history={edition.loan_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
@@ -120,7 +122,7 @@ let Edition = React.createClass({
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_edition}
-                            currentUser={currentUser}/>
+                            currentUser={currentUser} />
                         <Note
                             id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (public)')}
@@ -130,13 +132,11 @@ let Edition = React.createClass({
                             show={!!edition.public_note || !!edition.acl.acl_edit}
                             successMessage={getLangText('Public edition note saved')}
                             url={ApiUrls.note_public_edition}
-                            currentUser={currentUser}/>
+                            currentUser={currentUser} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={edition.acl.acl_edit ||
+                        show={edition.acl.acl_edit || Object.keys(edition.extra_data).length || edition.other_data.length}>
-                              Object.keys(edition.extra_data).length > 0 ||
-                              edition.other_data.length > 0}>
                         <FurtherDetailsType
                             editable={edition.acl.acl_edit}
                             pieceId={edition.parent}
@@ -144,10 +144,8 @@ let Edition = React.createClass({
                             otherData={edition.other_data}
                             handleSuccess={loadEdition} />
                     </CollapsibleParagraph>
-                    <CollapsibleParagraph
+                    <CollapsibleParagraph title={getLangText('SPOOL Details')}>
-                        title={getLangText('SPOOL Details')}>
+                        <SpoolDetails edition={edition} />
-                        <SpoolDetails
-                            edition={edition} />
                     </CollapsibleParagraph>
                 </Col>
             </Row>
@@ -158,60 +156,56 @@ let Edition = React.createClass({
 
 let EditionSummary = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
-        edition: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
 
-    handleSuccess() {
+    getStatus() {
-        this.props.handleSuccess();
+        const { status } = this.props.edition;
-    },
 
-    getStatus(){
+        return status.length ? (
-        let status = null;
+            <DetailProperty
-        if (this.props.edition.status.length > 0){
+                label="STATUS"
-            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
+                value={status.join(', ').replace(/_/g, ' ')} />
-            status = <DetailProperty label="STATUS" value={ statusStr }/>;
+        ) : null;
-            if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
-                status = (
-                    <DetailProperty label="STATUS" value={ statusStr } />
-                );
-            }
-        }
-        return status;
     },
 
     render() {
-        let { actionPanelButtonListType, edition, currentUser } = this.props;
+        const { actionPanelButtonListType, currentUser, edition, handleSuccess, whitelabel } = this.props;
+
         return (
             <div className="ascribe-detail-header">
                 <DetailProperty
                     label={getLangText('EDITION')}
-                    value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
+                    value={edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
                 <DetailProperty
                     label={getLangText('ID')}
-                    value={ edition.bitcoin_id }
+                    value={edition.bitcoin_id}
                     ellipsis={true} />
                 <DetailProperty
                     label={getLangText('OWNER')}
-                    value={ edition.owner } />
+                    value={edition.owner} />
-                <LicenseDetail license={edition.license_type}/>
+                <LicenseDetail license={edition.license_type} />
                 {this.getStatus()}
                 {/*
                     `acl_view` is always available in `edition.acl`, therefore if it has
                     no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
                     `AclInformation` would show up
                 */}
-                <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
+                <AclProxy show={currentUser.email && Object.keys(edition.acl).length > 1}>
                     <DetailProperty
                         label={getLangText('ACTIONS')}
                         className="hidden-print">
                         <EditionActionPanel
                             actionPanelButtonListType={actionPanelButtonListType}
-                            edition={edition}
                             currentUser={currentUser}
-                            handleSuccess={this.handleSuccess} />
+                            edition={edition}
+                            handleSuccess={handleSuccess}
+                            whitelabel={whitelabel} />
                     </DetailProperty>
                 </AclProxy>
                 <hr/>
@@ -360,4 +354,5 @@ let SpoolDetails = React.createClass({
 
     }
 });
+
 export default Edition;

js/components/ascribe_detail/edition_action_panel.js

@@ -36,9 +36,11 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
-        edition: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
 
@@ -87,39 +89,42 @@ let EditionActionPanel = React.createClass({
 
     handleSuccess(response) {
         this.refreshCollection();
-        this.props.handleSuccess();
+
-        if (response){
+        if (response) {
-            let notification = new GlobalNotificationModel(response.notification, 'success');
+            const notification = new GlobalNotificationModel(response.notification, 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
+
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess();
+        }
     },
 
     render() {
         const {
             actionPanelButtonListType: ActionPanelButtonListType,
+            currentUser,
             edition,
-            currentUser } = this.props;
+            whitelabel } = this.props;
 
-        if (edition &&
+        if (edition.notifications && edition.notifications.length) {
-            edition.notifications &&
-            edition.notifications.length > 0){
             return (
                 <ListRequestActions
-                    pieceOrEditions={[edition]}
                     currentUser={currentUser}
-                    handleSuccess={this.handleSuccess}
+                    notifications={edition.notifications}
-                    notifications={edition.notifications}/>);
+                    pieceOrEditions={[edition]}
-        }
+                    handleSuccess={this.handleSuccess} />);
-
+        } else {
-        else {
             return (
                 <Row>
                     <Col md={12}>
                         <ActionPanelButtonListType
-                            className="ascribe-button-list"
                             availableAcls={edition.acl}
+                            className="ascribe-button-list"
+                            currentUser={currentUser}
+                            handleSuccess={this.handleSuccess}
                             pieceOrEditions={[edition]}
-                            handleSuccess={this.handleSuccess}>
+                            whitelabel={whitelabel}>
                             <AclProxy
                                 aclObject={edition.acl}
                                 aclName="acl_withdraw_transfer">

js/components/ascribe_detail/edition_container.js

@@ -9,16 +9,12 @@ import { ResourceNotFoundError } from '../../models/errors';
 import EditionActions from '../../actions/edition_actions';
 import EditionStore from '../../stores/edition_store';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
 import Edition from './edition';
 
 import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
-import { mergeOptions } from '../../utils/general_utils';
 
 
 /**
@@ -28,24 +24,26 @@ let EditionContainer = React.createClass({
     propTypes: {
         actionPanelButtonListType: React.PropTypes.func,
         furtherDetailsType: React.PropTypes.func,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
     mixins: [History, ReactError],
 
     getInitialState() {
-        return mergeOptions(
+        return EditionStore.getInitialState();
-            EditionStore.getInitialState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
         EditionStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
 
         this.loadEdition();
-        UserActions.fetchCurrentUser();
     },
 
     // This is done to update the container when the user clicks on the prev or next
@@ -68,19 +66,10 @@ let EditionContainer = React.createClass({
     componentWillUnmount() {
         window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
-        if(state && state.edition && state.edition.digital_work) {
-            let isEncoding = state.edition.digital_work.isEncoding;
-            if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-                let timerId = window.setInterval(() => EditionActions.fetchEdition(this.props.params.editionId), 10000);
-                this.setState({timerId: timerId});
-            }
-        }
     },
 
     loadEdition(editionId = this.props.params.editionId) {
@@ -88,8 +77,8 @@ let EditionContainer = React.createClass({
     },
 
     render() {
-        const { edition, currentUser, coaMeta } = this.state;
+        const { actionPanelButtonListType, currentUser, furtherDetailsType, whitelabel } = this.props;
-        const { actionPanelButtonListType, furtherDetailsType } = this.props;
+        const { edition, coaMeta } = this.state;
 
         if (edition.id) {
             setDocumentTitle(`${edition.artist_name}, ${edition.title}`);
@@ -97,11 +86,12 @@ let EditionContainer = React.createClass({
             return (
                 <Edition
                     actionPanelButtonListType={actionPanelButtonListType}
-                    furtherDetailsType={furtherDetailsType}
-                    edition={edition}
                     coaError={coaMeta.err}
                     currentUser={currentUser}
-                    loadEdition={this.loadEdition} />
+                    edition={edition}
+                    furtherDetailsType={furtherDetailsType}
+                    loadEdition={this.loadEdition}
+                    whitelabel={whitelabel} />
             );
         } else {
             return (

js/components/ascribe_detail/media_container.js

@@ -22,12 +22,14 @@ const EMBED_IFRAME_HEIGHT = {
     video: 315,
     audio: 62
 };
+const ENCODE_UPDATE_TIME = 5000;
 
 let MediaContainer = React.createClass({
     propTypes: {
-        content: React.PropTypes.object,
+        content: React.PropTypes.object.isRequired,
-        currentUser: React.PropTypes.object,
+        refreshObject: React.PropTypes.func.isRequired,
-        refreshObject: React.PropTypes.func
+
+        currentUser: React.PropTypes.object
     },
 
     getInitialState() {
@@ -37,14 +39,16 @@ let MediaContainer = React.createClass({
     },
 
     componentDidMount() {
-        if (!this.props.content.digital_work) {
+        const { content: { digital_work: digitalWork }, refreshObject } = this.props;
-            return;
-        }
 
-        const isEncoding = this.props.content.digital_work.isEncoding;
+        if (digitalWork) {
-        if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
+            const isEncoding = digitalWork.isEncoding;
-            let timerId = window.setInterval(this.props.refreshObject, 10000);
+
-            this.setState({timerId: timerId});
+            if (digitalWork.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
+                this.setState({
+                    timerId: window.setInterval(refreshObject, ENCODE_UPDATE_TIME)
+                });
+            }
         }
     },
 
@@ -105,7 +109,7 @@ let MediaContainer = React.createClass({
                             {'<iframe width="560" height="' + height + '" src="https://embed.ascribe.io/content/'
                                 + content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'}
                         </pre>
-                    }/>
+                    } />
             );
         }
         return (
@@ -136,7 +140,7 @@ let MediaContainer = React.createClass({
                                 If it turns out that `fileExtension` is an empty string, we're just
                                 using the label 'file'.
                             */}
-                            {getLangText('Download')} .{fileExtension || 'file'} <Glyphicon glyph="cloud-download"/>
+                            {getLangText('Download')} .{fileExtension || 'file'} <Glyphicon glyph="cloud-download" />
                         </Button>
                     </AclProxy>
                     {embed}

js/components/ascribe_detail/note.js

@@ -2,64 +2,68 @@
 
 import React from 'react';
 
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import Form from './../ascribe_forms/form';
 import Property from './../ascribe_forms/property';
 import InputTextAreaToggable from './../ascribe_forms/input_textarea_toggable';
 
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
 import { getLangText } from '../../utils/lang_utils';
 
 let Note = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
+        currentUser: React.PropTypes.object.isRequired,
-        id: React.PropTypes.func,
+        id: React.PropTypes.func.isRequired,
-        label: React.PropTypes.string,
+        url: React.PropTypes.string.isRequired,
-        currentUser: React.PropTypes.object,
+
         defaultValue: React.PropTypes.string,
         editable: React.PropTypes.bool,
-        show: React.PropTypes.bool,
+        label: React.PropTypes.string,
         placeholder: React.PropTypes.string,
+        show: React.PropTypes.bool,
         successMessage: React.PropTypes.string
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            show: true,
             placeholder: getLangText('Enter a note'),
+            show: true,
             successMessage: getLangText('Note saved')
         };
     },
 
-    showNotification(){
+    showNotification() {
-        let notification = new GlobalNotificationModel(this.props.successMessage, 'success');
+        const notification = new GlobalNotificationModel(this.props.successMessage, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        if ((!!this.props.currentUser.username && this.props.editable || !this.props.editable ) && this.props.show) {
+        const { currentUser, defaultValue, editable, id, label, placeholder, show, url } = this.props;
+
+        if ((!!currentUser.username && editable || !editable ) && show) {
             return (
                 <Form
-                    url={this.props.url}
+                    url={url}
-                    getFormData={this.props.id}
+                    getFormData={id}
                     handleSuccess={this.showNotification}
-                    disabled={!this.props.editable}>
+                    disabled={!editable}>
                     <Property
                         name='note'
-                        label={this.props.label}>
+                        label={label}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.defaultValue}
+                            defaultValue={defaultValue}
-                            placeholder={this.props.placeholder}/>
+                            placeholder={placeholder} />
                     </Property>
                     <hr />
                 </Form>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
-export default Note;
+export default Note;

js/components/ascribe_detail/piece.js

@@ -15,19 +15,19 @@ import MediaContainer from './media_container';
  */
 let Piece = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
+        piece: React.PropTypes.object.isRequired,
+
+        buttons: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         header: React.PropTypes.object,
         subheader: React.PropTypes.object,
-        buttons: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ])
     },
 
-
+    updatePiece() {
-    updateObject() {
         return PieceActions.fetchPiece(this.props.piece.id);
     },
 
@@ -40,7 +40,7 @@ let Piece = React.createClass({
                     <MediaContainer
                         content={piece}
                         currentUser={currentUser}
-                        refreshObject={this.updateObject} />
+                        refreshObject={this.updatePiece} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     {header}

js/components/ascribe_detail/piece_container.js

@@ -7,39 +7,35 @@ import Moment from 'moment';
 import ReactError from '../../mixins/react_error';
 import { ResourceNotFoundError } from '../../models/errors';
 
+import EditionListActions from '../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
 
 import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
-import EditionListActions from '../../actions/edition_list_actions';
-
-import Piece from './piece';
-import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
 import FurtherDetails from './further_details';
-
 import DetailProperty from './detail_property';
-import LicenseDetail from './license_detail';
 import HistoryIterator from './history_iterator';
+import LicenseDetail from './license_detail';
+import Note from './note';
+import Piece from './piece';
 
 import AclButtonList from './../ascribe_buttons/acl_button_list';
-import CreateEditionsForm from '../ascribe_forms/create_editions_form';
+import AclInformation from '../ascribe_buttons/acl_information';
 import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
 import DeleteButton from '../ascribe_buttons/delete_button';
 
-import AclInformation from '../ascribe_buttons/acl_information';
+import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
-import AclProxy from '../acl_proxy';
 
+import CreateEditionsForm from '../ascribe_forms/create_editions_form';
 import ListRequestActions from '../ascribe_forms/list_form_request_actions';
 
-import GlobalNotificationModel from '../../models/global_notification_model';
+import AclProxy from '../acl_proxy';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
-import Note from './note';
 
 import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
@@ -54,6 +50,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
 let PieceContainer = React.createClass({
     propTypes: {
         furtherDetailsType: React.PropTypes.func,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -67,7 +70,6 @@ let PieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getInitialState(),
             {
@@ -77,12 +79,10 @@ let PieceContainer = React.createClass({
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
 
         this.loadPiece();
-        UserActions.fetchCurrentUser();
     },
 
     // This is done to update the container when the user clicks on the prev or next
@@ -105,7 +105,6 @@ let PieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
     },
 
@@ -207,15 +206,17 @@ let PieceContainer = React.createClass({
     },
 
     getActions() {
-        const { piece, currentUser } = this.state;
+        const { piece } = this.state;
+        const { currentUser } = this.props;
 
         if (piece.notifications && piece.notifications.length > 0) {
             return (
                 <ListRequestActions
-                    pieceOrEditions={piece}
                     currentUser={currentUser}
                     handleSuccess={this.loadPiece}
-                    notifications={piece.notifications} />);
+                    notifications={piece.notifications}
+                    pieceOrEditions={piece} />
+            );
         } else {
             return (
                 <AclProxy
@@ -229,8 +230,9 @@ let PieceContainer = React.createClass({
                         label={getLangText('ACTIONS')}
                         className="hidden-print">
                         <AclButtonList
-                            className="ascribe-button-list"
                             availableAcls={piece.acl}
+                            className="ascribe-button-list"
+                            currentUser={currentUser}
                             pieceOrEditions={piece}
                             handleSuccess={this.loadPiece}>
                                 <CreateEditionsButton
@@ -255,8 +257,8 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        const { furtherDetailsType: FurtherDetailsType } = this.props;
+        const { currentUser, furtherDetailsType: FurtherDetailsType } = this.props;
-        const { currentUser, piece } = this.state;
+        const { piece } = this.state;
 
         if (piece.id) {
             setDocumentTitle(`${piece.artist_name}, ${piece.title}`);

js/components/ascribe_forms/acl_form_factory.js

@@ -20,16 +20,17 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
 let AclFormFactory = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        autoFocusProperty: React.PropTypes.string,
-        currentUser: React.PropTypes.object,
-        email: React.PropTypes.string,
-        message: React.PropTypes.string,
-        labels: React.PropTypes.object,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
+
+        autoFocusProperty: React.PropTypes.string,
+        currentUser: React.PropTypes.object,
+        email: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
+        message: React.PropTypes.string,
+        labels: React.PropTypes.object,
         showNotification: React.PropTypes.bool
     },
 
@@ -105,7 +106,7 @@ let AclFormFactory = React.createClass({
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={this.isPiece() ? ApiUrls.ownership_loans_pieces
-                        : ApiUrls.ownership_loans_editions}
+                                        : ApiUrls.ownership_loans_editions}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_loan_request') {
@@ -122,7 +123,7 @@ let AclFormFactory = React.createClass({
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={this.isPiece() ? ApiUrls.ownership_shares_pieces
-                        : ApiUrls.ownership_shares_editions}
+                                        : ApiUrls.ownership_shares_editions}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else {

js/components/ascribe_forms/form_copyright_association.js

@@ -15,30 +15,30 @@ import { getLangText } from '../../utils/lang_utils';
 
 let CopyrightAssociationForm = React.createClass({
     propTypes: {
-        currentUser: React.PropTypes.object
+        currentUser: React.PropTypes.object.isRequired
     },
 
-    handleSubmitSuccess(){
+    handleSubmitSuccess() {
-        let notification = getLangText('Copyright association updated');
+        const notification = new GlobalNotificationModel(getLangText('Copyright association updated'), 'success', 10000);
-        notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getProfileFormData(){
+    getProfileFormData() {
-        return {email: this.props.currentUser.email};
+        return { email: this.props.currentUser.email };
     },
 
     render() {
-        let selectedState;
+        const { currentUser } = this.props;
-        let selectDefaultValue = ' -- ' + getLangText('select an association') + ' -- ';
+        const selectDefaultValue = ' -- ' + getLangText('select an association') + ' -- ';
 
-        if (this.props.currentUser && this.props.currentUser.profile
+        let selectedState = selectDefaultValue;
-            && this.props.currentUser.profile.copyright_association) {
+        if (currentUser.profile && currentUser.profile.copyright_association) {
-            selectedState = AppConstants.copyrightAssociations.indexOf(this.props.currentUser.profile.copyright_association);
+            if (AppConstants.copyrightAssociations.indexOf(currentUser.profile.copyright_association) !== -1) {
-            selectedState = selectedState !== -1 ? AppConstants.copyrightAssociations[selectedState] : selectDefaultValue;
+                selectedState = AppConstants.copyrightAssociations[selectedState];
+            }
         }
 
-        if (this.props.currentUser && this.props.currentUser.email){
+        if (currentUser.email) {
             return (
                 <Form
                     ref='form'
@@ -71,8 +71,9 @@ let CopyrightAssociationForm = React.createClass({
                     <hr />
                 </Form>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 

js/components/ascribe_forms/form_login.js

@@ -6,7 +6,6 @@ import { History } from 'react-router';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import UserStore from '../../stores/user_store';
 import UserActions from '../../actions/user_actions';
 
 import Form from './form';
@@ -23,8 +22,6 @@ let LoginForm = React.createClass({
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
-        redirectOnLoggedIn: React.PropTypes.bool,
-        redirectOnLoginSuccess: React.PropTypes.bool,
         location: React.PropTypes.object
     },
 
@@ -32,40 +29,26 @@ let LoginForm = React.createClass({
 
     getDefaultProps() {
         return {
-            headerMessage: getLangText('Enter ascribe'),
+            headerMessage: getLangText('Enter') + ' ascribe',
-            submitMessage: getLangText('Log in'),
+            submitMessage: getLangText('Log in')
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
         };
     },
 
-    getInitialState() {
+    handleSuccess({ success }) {
-        return UserStore.getState();
+        const notification = new GlobalNotificationModel(getLangText('Login successful'), 'success', 10000);
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    handleSuccess({ success }){
-        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        if(success) {
+        if (success) {
             UserActions.fetchCurrentUser(true);
         }
     },
 
     render() {
-        let email = this.props.location.query.email || null;
+        const {
+            headerMessage,
+            location: { query: { email: emailQuery } },
+            submitMessage } = this.props;
+
         return (
             <Form
                 className="ascribe-form-bordered"
@@ -77,7 +60,7 @@ let LoginForm = React.createClass({
                     <button
                         type="submit"
                         className="btn btn-default btn-wide">
-                        {this.props.submitMessage}
+                        {submitMessage}
                     </button>}
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
@@ -85,7 +68,7 @@ let LoginForm = React.createClass({
                     </span>
                     }>
                 <div className="ascribe-form-header">
-                    <h3>{this.props.headerMessage}</h3>
+                    <h3>{headerMessage}</h3>
                 </div>
                 <Property
                     name='email'
@@ -93,7 +76,7 @@ let LoginForm = React.createClass({
                     <input
                         type="email"
                         placeholder={getLangText('Enter your email')}
-                        defaultValue={email}
+                        defaultValue={emailQuery}
                         required/>
                 </Property>
                 <Property

js/components/ascribe_forms/form_register_piece.js

@@ -2,9 +2,6 @@
 
 import React from 'react';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
 import Form from './form';
 import Property from './property';
 import InputFineUploader from './input_fineuploader';
@@ -20,22 +17,24 @@ import AppConstants from '../../constants/application_constants';
 import { validationParts, validationTypes } from '../../constants/uploader_constants';
 
 import { getLangText } from '../../utils/lang_utils';
-import { mergeOptions } from '../../utils/general_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
 let RegisterPieceForm = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func,
-        isFineUploaderActive: React.PropTypes.bool,
-        isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
         enableSeparateThumbnail: React.PropTypes.bool,
+        isFineUploaderActive: React.PropTypes.bool,
+        isFineUploaderEditable: React.PropTypes.bool,
+        handleSuccess: React.PropTypes.func,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
+
         location: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
@@ -52,26 +51,10 @@ let RegisterPieceForm = React.createClass({
         };
     },
 
-    getInitialState(){
+    getInitialState() {
-        return mergeOptions(
+        return {
-            {
+            digitalWorkFile: null
-                digitalWorkFile: null
+        }
-            },
-            UserStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     /**
@@ -133,16 +116,17 @@ let RegisterPieceForm = React.createClass({
     },
 
     render() {
-        const { disabled,
+        const {
-                handleSuccess,
+            children,
-                submitMessage,
+            currentUser,
-                headerMessage,
+            disabled,
-                isFineUploaderActive,
+            enableLocalHashing,
-                isFineUploaderEditable,
+            handleSuccess,
-                location,
+            headerMessage,
-                children,
+            isFineUploaderActive,
-                enableLocalHashing } = this.props;
+            isFineUploaderEditable,
-        const { currentUser} = this.state;
+            location,
+            submitMessage } = this.props;
 
         const profileHashLocally = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
         const hashLocally = profileHashLocally && enableLocalHashing;

js/components/ascribe_forms/form_request_action.js

@@ -21,11 +21,12 @@ import { getLangText } from '../../utils/lang_utils.js';
 
 let RequestActionForm = React.createClass({
     propTypes: {
+        notifications: React.PropTypes.object.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        notifications: React.PropTypes.object,
+
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },

js/components/ascribe_forms/form_signup.js

@@ -3,12 +3,11 @@
 import React from 'react';
 import { History } from 'react-router';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import UserActions from '../../actions/user_actions';
+
 import Form from './form';
 import Property from './property';
 import InputCheckbox from './input_checkbox';
@@ -24,8 +23,12 @@ let SignupForm = React.createClass({
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
-        children: React.PropTypes.element,
+        location: React.PropTypes.object,
-        location: React.PropTypes.object
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element,
+            React.PropTypes.string
+        ])
     },
 
     mixins: [History],
@@ -37,25 +40,9 @@ let SignupForm = React.createClass({
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     handleSuccess(response) {
         if (response.user) {
-            let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
+            const notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
             // Refactor this to its own component
@@ -66,18 +53,20 @@ let SignupForm = React.createClass({
     },
 
     getFormData() {
-        if (this.props.location.query.token){
+        const { token } = this.props.location.query;
-            return {token: this.props.location.query.token};
+        return token ? { token } : null;
-        }
-        return null;
     },
 
     render() {
-        let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
+        const {
-            getLangText('This password is securing your digital property like a bank account') + '.\n ' +
+            children,
-            getLangText('Store it in a safe place') + '!';
+            headerMessage,
+            location: { query: { email: emailQuery } },
+            submitMessage } = this.props;
 
-        let email = this.props.location.query.email || null;
+        const tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
+                                getLangText('This password is securing your digital property like a bank account') + '.\n ' +
+                                getLangText('Store it in a safe place') + '!';
 
         return (
             <Form
@@ -88,15 +77,16 @@ let SignupForm = React.createClass({
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button type="submit" className="btn btn-default btn-wide">
-                        {this.props.submitMessage}
+                        {submitMessage}
-                    </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
-                    <h3>{this.props.headerMessage}</h3>
+                    <h3>{headerMessage}</h3>
                 </div>
                 <Property
                     name='email'
@@ -105,7 +95,7 @@ let SignupForm = React.createClass({
                         type="email"
                         placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
                         autoComplete="on"
-                        defaultValue={email}
+                        defaultValue={emailQuery}
                         required/>
                 </Property>
                 <Property
@@ -128,7 +118,7 @@ let SignupForm = React.createClass({
                         autoComplete="on"
                         required/>
                 </Property>
-                {this.props.children}
+                {children}
                 <Property
                     name="terms"
                     className="ascribe-property-collapsible-toggle">

js/components/ascribe_forms/form_transfer.js

@@ -18,26 +18,26 @@ import { getLangText } from '../../utils/lang_utils.js';
 
 let TransferForm = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
+        id: React.PropTypes.object.isRequired,
-        id: React.PropTypes.object,
+        url: React.PropTypes.string.isRequired,
-        message: React.PropTypes.string,
+
-        editions: React.PropTypes.array,
+        handleSuccess: React.PropTypes.func,
-        currentUser: React.PropTypes.object,
+        message: React.PropTypes.string
-        handleSuccess: React.PropTypes.func
     },
 
-    getFormData(){
+    getFormData() {
         return this.props.id;
     },
 
     render() {
+        const { handleSuccess, message, url } = this.props;
 
         return (
             <Form
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 buttons={
                     <div className="modal-footer">
                         <p className="pull-right">
@@ -70,7 +70,7 @@ let TransferForm = React.createClass({
                     overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
                         required />
                 </Property>

js/components/ascribe_forms/list_form_request_actions.js

@@ -4,32 +4,35 @@ import React from 'react';
 import RequestActionForm from './form_request_action';
 
 let ListRequestActions = React.createClass({
-
     propTypes: {
+        notifications: React.PropTypes.array.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
+
         currentUser: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func.isRequired,
+        handleSuccess: React.PropTypes.func
-        notifications: React.PropTypes.array.isRequired
     },
 
     render () {
-        if (this.props.notifications &&
+        const { currentUser, handleSuccess, notifications, pieceOrEditions } = this.props;
-            this.props.notifications.length > 0) {
+
+        if (notifications.length) {
             return (
                 <div>
-                    {this.props.notifications.map((notification) =>
+                    {notifications.map((notification) =>
                         <RequestActionForm
-                            currentUser={this.props.currentUser}
+                            currentUser={currentUser}
-                            pieceOrEditions={ this.props.pieceOrEditions }
+                            handleSuccess={handleSuccess}
                             notifications={notification}
-                            handleSuccess={this.props.handleSuccess}/>)}
+                            pieceOrEditions={pieceOrEditions} />
+                    )}
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 

js/components/ascribe_forms/property.js

@@ -294,18 +294,18 @@ const Property = React.createClass({
     },
 
     getCheckbox() {
-        const { checkboxLabel } = this.props;
+        const { checkboxLabel, name } = this.props;
 
-        if(checkboxLabel) {
+        if (checkboxLabel) {
             return (
                 <div
                     className="ascribe-property-collapsible-toggle"
                     onClick={this.handleCheckboxToggle}>
                     <input
-                        onChange={this.handleCheckboxToggle}
+                        name={`${name}-checkbox`}
-                        type="checkbox"
                         checked={this.state.expanded}
-                        ref="checkboxCollapsible"/>
+                        onChange={this.handleCheckboxToggle}
+                        type="checkbox" />
                     <span className="checkbox">{' ' + checkboxLabel}</span>
                 </div>
             );

js/components/ascribe_modal/modal_wrapper.js

@@ -6,6 +6,10 @@ import Modal from 'react-bootstrap/lib/Modal';
 
 let ModalWrapper = React.createClass({
     propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired,
         title: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element,
@@ -14,11 +18,7 @@ let ModalWrapper = React.createClass({
 
         handleCancel: React.PropTypes.func,
         handleSuccess: React.PropTypes.func,
-        trigger: React.PropTypes.element,
+        trigger: React.PropTypes.element
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
     },
 
     getInitialState() {

js/components/ascribe_routes/proxy_handler.js

@@ -5,7 +5,6 @@ import { RouteContext } from 'react-router';
 import history from '../../history';
 
 import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
 
 import AppConstants from '../../constants/application_constants';
 
@@ -21,8 +20,8 @@ const WHEN_ENUM = ['loggedIn', 'loggedOut'];
 export function AuthRedirect({to, when}) {
     // validate `when`, must be contained in `WHEN_ENUM`.
     // Throw an error otherwise.
-    if(WHEN_ENUM.indexOf(when) === -1) {
+    if (WHEN_ENUM.indexOf(when) === -1) {
-        let whenValues = WHEN_ENUM.join(', ');
+        const whenValues = WHEN_ENUM.join(', ');
         throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
     }
 
@@ -35,23 +34,22 @@ export function AuthRedirect({to, when}) {
         //
         // So if when === 'loggedIn', we're checking if the user is logged in (and
         // vice versa)
-        let exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email
+        const isLoggedIn = Object.keys(currentUser).length && currentUser.email;
-                                                 : currentUser && !currentUser.email;
+        const exprToValidate = when === 'loggedIn' ? isLoggedIn : !isLoggedIn;
 
         // and redirect if `true`.
-        if(exprToValidate) {
+        if (exprToValidate) {
             window.setTimeout(() => history.replace({ query, pathname: to }));
             return true;
 
             // Otherwise there can also be the case that the backend
             // wants to redirect the user to a specific route when the user is logged out already
-        } else if(!exprToValidate && when === 'loggedIn' && redirect) {
+        } else if (!exprToValidate && when === 'loggedIn' && redirect) {
-
             delete query.redirect;
             window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
             return true;
 
-        } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
+        } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
             /*
              * redirectAuthenticated contains an arbitrary path
              * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
@@ -64,6 +62,7 @@ export function AuthRedirect({to, when}) {
             window.location = AppConstants.baseUrl + redirectAuthenticated;
             return true;
         }
+
         return false;
     };
 }
@@ -81,6 +80,11 @@ export function ProxyHandler(...redirectFunctions) {
             displayName: 'ProxyHandler',
 
             propTypes: {
+                // Provided from AscribeApp
+                currentUser: React.PropTypes.object.isRequired,
+                whitelabel: React.PropTypes.object,
+
+                // Provided from router
                 location: object
             },
 
@@ -88,43 +92,33 @@ export function ProxyHandler(...redirectFunctions) {
             // to use the `Lifecycle` widget in further down nested components
             mixins: [RouteContext],
 
-            getInitialState() {
-                return UserStore.getState();
-            },
-
             componentDidMount() {
-                UserStore.listen(this.onChange);
+                this.evaluateRedirectFunctions();
-                UserActions.fetchCurrentUser();
             },
 
-            componentDidUpdate() {
+            componentWillReceiveProps(nextProps) {
-                if(!UserStore.isLoading()) {
+                this.evaluateRedirectFunctions(nextProps);
-                    const { currentUser } = this.state;
+            },
-                    const { query } = this.props.location;
 
-                    for(let i = 0; i < redirectFunctions.length; i++) {
+            evaluateRedirectFunctions(props = this.props) {
+                const { currentUser, location: { query } } = props;
+
+                if (UserStore.hasLoaded() && !UserStore.isLoading()) {
+                    for (let i = 0; i < redirectFunctions.length; i++) {
                         // if a redirectFunction redirects the user,
                         // it should return `true` and therefore
                         // stop/avoid the execution of all functions
                         // that follow
-                        if(redirectFunctions[i](currentUser, query)) {
+                        if (redirectFunctions[i](currentUser, query)) {
                             break;
                         }
                     }
                 }
             },
 
-            componentWillUnmount() {
-                UserStore.unlisten(this.onChange);
-            },
-
-            onChange(state) {
-                this.setState(state);
-            },
-
             render() {
                 return (
-                    <Component {...this.props}/>
+                    <Component {...this.props} />
                 );
             }
         });

js/components/ascribe_settings/account_settings.js

@@ -26,21 +26,23 @@ let AccountSettings = React.createClass({
         whitelabel: React.PropTypes.object.isRequired
     },
 
-    handleSuccess(){
+    handleSuccess() {
         this.props.loadUser(true);
-        let notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
+
+        const notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getFormDataProfile(){
+    getFormDataProfile() {
-        return {'email': this.props.currentUser.email};
+        return { 'email': this.props.currentUser.email };
     },
 
     render() {
-        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
+        const { currentUser, whitelabel } = this.props;
+        let content = <AscribeSpinner color='dark-blue' size='lg' />;
         let profile = null;
 
-        if (this.props.currentUser.username) {
+        if (currentUser.username) {
             content = (
                 <Form
                     url={ApiUrls.users_username}
@@ -50,7 +52,7 @@ let AccountSettings = React.createClass({
                         label={getLangText('Username')}>
                         <input
                             type="text"
-                            defaultValue={this.props.currentUser.username}
+                            defaultValue={currentUser.username}
                             placeholder={getLangText('Enter your username')}
                             required/>
                     </Property>
@@ -61,7 +63,7 @@ let AccountSettings = React.createClass({
                         editable={false}>
                         <input
                             type="text"
-                            defaultValue={this.props.currentUser.email}
+                            defaultValue={currentUser.email}
                             placeholder={getLangText('Enter your username')}
                             required/>
                     </Property>
@@ -70,7 +72,7 @@ let AccountSettings = React.createClass({
             );
             profile = (
                 <AclProxy
-                    aclObject={this.props.whitelabel}
+                    aclObject={whitelabel}
                     aclName="acl_view_settings_account_hash">
                     <Form
                         url={ApiUrls.users_profile}
@@ -80,7 +82,7 @@ let AccountSettings = React.createClass({
                             name="hash_locally"
                             className="ascribe-property-collapsible-toggle">
                             <InputCheckbox
-                                defaultChecked={this.props.currentUser.profile.hash_locally}>
+                                defaultChecked={currentUser.profile.hash_locally}>
                                 <span>
                                     {' ' + getLangText('Enable hash option, e.g. slow connections or to keep piece private')}
                                 </span>
@@ -96,9 +98,9 @@ let AccountSettings = React.createClass({
                 defaultExpanded={true}>
                 {content}
                 <AclProxy
-                    aclObject={this.props.whitelabel}
+                    aclObject={whitelabel}
                     aclName="acl_view_settings_copyright_association">
-                    <CopyrightAssociationForm currentUser={this.props.currentUser}/>
+                    <CopyrightAssociationForm currentUser={currentUser} />
                 </AclProxy>
                 {profile}
             </CollapsibleParagraph>

js/components/ascribe_settings/contract_settings.js

@@ -8,12 +8,6 @@ import CreateContractForm from '../ascribe_forms/form_create_contract';
 import ContractListStore from '../../stores/contract_list_store';
 import ContractListActions from '../../actions/contract_list_actions';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
-import WhitelabelStore from '../../stores/whitelabel_store';
-import WhitelabelActions from '../../actions/whitelabel_actions';
-
 import ActionPanel from '../ascribe_panel/action_panel';
 import ContractSettingsUpdateButton from './contract_settings_update_button';
 
@@ -24,30 +18,29 @@ import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
-import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils';
+import { truncateTextAtCharIndex } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
+    propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
-        return mergeOptions(
+        return ContractListStore.getState();
-            ContractListStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
         ContractListActions.fetchContractList(true);
     },
 
     componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         ContractListStore.unlisten(this.onChange);
     },
 
@@ -79,6 +72,7 @@ let ContractSettings = React.createClass({
     },
 
     render() {
+        const { currentUser, location, whitelabel } = this.props;
         const publicContracts = this.getPublicContracts();
         const privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
@@ -88,11 +82,11 @@ let ContractSettings = React.createClass({
         if (publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
-                    isPublic={true}
                     fileClassToUpload={{
                         singular: 'new contract',
                         plural: 'new contracts'
-                    }} />
+                    }}
+                    isPublic={true} />
             );
         }
 
@@ -103,7 +97,7 @@ let ContractSettings = React.createClass({
                     defaultExpanded={true}>
                     <AclProxy
                         aclName="acl_edit_public_contract"
-                        aclObject={this.state.currentUser.acl}>
+                        aclObject={currentUser.acl}>
                         <div>
                             {createPublicContractForm}
                             {publicContracts.map((contract, i) => {
@@ -115,10 +109,9 @@ let ContractSettings = React.createClass({
                                         buttons={
                                             <div className="pull-right">
                                                 <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_public_contract">
-                                                    <ContractSettingsUpdateButton
+                                                    <ContractSettingsUpdateButton contract={contract} />
-                                                        contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -141,14 +134,14 @@ let ContractSettings = React.createClass({
                     </AclProxy>
                     <AclProxy
                         aclName="acl_edit_private_contract"
-                        aclObject={this.state.currentUser.acl}>
+                        aclObject={currentUser.acl}>
                         <div>
                             <CreateContractForm
-                            isPublic={false}
+                                fileClassToUpload={{
-                            fileClassToUpload={{
+                                    singular: getLangText('new contract'),
-                                singular: getLangText('new contract'),
+                                    plural: getLangText('new contracts')
-                                plural: getLangText('new contracts')
+                                }}
-                            }} />
+                                isPublic={false} />
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
@@ -158,10 +151,9 @@ let ContractSettings = React.createClass({
                                         buttons={
                                             <div className="pull-right">
                                                <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_private_contract">
-                                                    <ContractSettingsUpdateButton
+                                                    <ContractSettingsUpdateButton contract={contract} />
-                                                        contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"

js/components/ascribe_settings/settings_container.js

@@ -2,12 +2,8 @@
 
 import React from 'react';
 
-import UserStore from '../../stores/user_store';
 import UserActions from '../../actions/user_actions';
 
-import WhitelabelStore from '../../stores/whitelabel_store';
-import WhitelabelActions from '../../actions/whitelabel_actions';
-
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
 import APISettings from './api_settings';
@@ -24,56 +20,42 @@ let SettingsContainer = React.createClass({
     propTypes: {
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element])
+            React.PropTypes.element
+        ]),
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
+        location: React.PropTypes.object
     },
 
-    getInitialState() {
+    loadUser(invalidateCache) {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-    },
-
-    loadUser(invalidateCache){
         UserActions.fetchCurrentUser(invalidateCache);
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
+        const { children, currentUser, whitelabel } = this.props;
+
         setDocumentTitle(getLangText('Account settings'));
 
-        if (this.state.currentUser && this.state.currentUser.username) {
+        if (currentUser.username) {
             return (
                 <div className="settings-container">
                     <AccountSettings
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
                         loadUser={this.loadUser}
-                        whitelabel={this.state.whitelabel}/>
+                        whitelabel={whitelabel} />
-                    {this.props.children}
+                    {children}
                     <AclProxy
-                        aclObject={this.state.whitelabel}
+                        aclObject={whitelabel}
                         aclName="acl_view_settings_api">
                         <APISettings />
                     </AclProxy>
                     <WebhookSettings />
                     <AclProxy
-                        aclObject={this.state.whitelabel}
+                        aclObject={whitelabel}
                         aclName="acl_view_settings_bitcoin">
                         <BitcoinWalletSettings />
                     </AclProxy>

js/components/coa_verify_container.js

@@ -18,6 +18,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let CoaVerifyContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 

js/components/error_not_found_page.js

@@ -8,7 +8,14 @@ import { getLangText } from '../utils/lang_utils';
 
 let ErrorNotFoundPage = React.createClass({
     propTypes: {
-        message: React.PropTypes.string
+        message: React.PropTypes.string,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     mixins: [History],

js/components/header.js

@@ -14,41 +14,28 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import AclProxy from './acl_proxy';
-
 import EventActions from '../actions/event_actions';
 
 import PieceListStore from '../stores/piece_list_store';
 
-import UserActions from '../actions/user_actions';
+import AclProxy from './acl_proxy';
-import UserStore from '../stores/user_store';
-
-import WhitelabelActions from '../actions/whitelabel_actions';
-import WhitelabelStore from '../stores/whitelabel_store';
-
 import HeaderNotifications from './header_notification';
-
 import HeaderNotificationDebug from './header_notification_debug';
-
 import NavRoutesLinks from './nav_routes_links';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
-
 import { constructHead } from '../utils/dom_utils';
 
 
 let Header = React.createClass({
     propTypes: {
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        currentUser: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+        whitelabel: React.PropTypes.object.isRequired
     },
 
     getInitialState() {
-        return mergeOptions(
+        return PieceListStore.getState();
-            PieceListStore.getState(),
-            WhitelabelStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
@@ -56,35 +43,14 @@ let Header = React.createClass({
         // conflicts with routes that may need to wait to load the piece list
         PieceListStore.listen(this.onChange);
 
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel.defer();
-
         // react-bootstrap 0.25.1 has a bug in which it doesn't
         // close the mobile expanded navigation after a click by itself.
         // To get rid of this, we set the state of the component ourselves.
         history.listen(this.onRouteChange);
-
-        if (this.state.currentUser && this.state.currentUser.email) {
-            EventActions.profileDidLoad.defer(this.state.currentUser);
-        }
-    },
-
-    componentWillUpdate(nextProps, nextState) {
-        const { currentUser: { email: curEmail } = {} } = this.state;
-        const { currentUser: { email: nextEmail } = {} } = nextState;
-
-        if (nextEmail && curEmail !== nextEmail) {
-            EventActions.profileDidLoad.defer(nextState.currentUser);
-        }
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
         //history.unlisten(this.onRouteChange);
     },
 
@@ -93,7 +59,7 @@ let Header = React.createClass({
     },
 
     getLogo() {
-        let { whitelabel } = this.state;
+        const { whitelabel } = this.props;
 
         if (whitelabel.head) {
             constructHead(whitelabel.head);
@@ -117,7 +83,7 @@ let Header = React.createClass({
     getPoweredBy() {
         return (
             <AclProxy
-                aclObject={this.state.whitelabel}
+                aclObject={this.props.whitelabel}
                 aclName="acl_view_powered_by">
                     <li>
                         <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
@@ -164,7 +130,9 @@ let Header = React.createClass({
     },
 
     render() {
-        const { currentUser, unfilteredPieceListCount } = this.state;
+        const { currentUser, routes  } = this.props;
+        const { unfilteredPieceListCount } = this.state;
+
         let account;
         let signup;
         let navRoutesLinks;
@@ -179,8 +147,7 @@ let Header = React.createClass({
                     <LinkContainer
                         to="/settings"
                         onClick={this.onMenuItemClick}>
-                        <MenuItem
+                        <MenuItem eventKey="2">
-                            eventKey="2">
                             {getLangText('Account Settings')}
                         </MenuItem>
                     </LinkContainer>
@@ -190,17 +157,14 @@ let Header = React.createClass({
                         <LinkContainer
                             to="/contract_settings"
                             onClick={this.onMenuItemClick}>
-                            <MenuItem
+                            <MenuItem eventKey="2">
-                                eventKey="2">
                                 {getLangText('Contract Settings')}
                             </MenuItem>
                         </LinkContainer>
                     </AclProxy>
                     <MenuItem divider />
-                    <LinkContainer
+                    <LinkContainer to="/logout">
-                        to="/logout">
+                        <MenuItem eventKey="3">
-                        <MenuItem
-                            eventKey="3">
                             {getLangText('Log out')}
                         </MenuItem>
                     </LinkContainer>
@@ -217,21 +181,19 @@ let Header = React.createClass({
                     navbar
                     right
                     hasPieces={!!unfilteredPieceListCount}
-                    routes={this.props.routes}
+                    routes={routes}
                     userAcl={currentUser.acl} />
             );
         } else {
             account = (
-                <LinkContainer
+                <LinkContainer to="/login">
-                    to="/login">
                     <NavItem>
                         {getLangText('LOGIN')}
                     </NavItem>
                 </LinkContainer>
             );
             signup = (
-                <LinkContainer
+                <LinkContainer to="/signup">
-                    to="/signup">
                     <NavItem>
                         {getLangText('SIGNUP')}
                     </NavItem>
@@ -247,13 +209,12 @@ let Header = React.createClass({
                     toggleNavKey={0}
                     fixedTop={true}
                     className="hidden-print">
-                    <CollapsibleNav
+                    <CollapsibleNav eventKey={0}>
-                        eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>
                         <Nav navbar right>
-                            <HeaderNotificationDebug show={false}/>
+                            <HeaderNotificationDebug show={false} />
                             {account}
                             {signup}
                         </Nav>

js/components/header_notification.js

@@ -11,16 +11,12 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NotificationActions from '../actions/notification_actions';
 import NotificationStore from '../stores/notification_store';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
 
 let HeaderNotifications = React.createClass({
-
     getInitialState() {
-        return mergeOptions(
+        return NotificationStore.getState();
-            NotificationStore.getState()
-        );
     },
 
     componentDidMount() {
@@ -62,7 +58,7 @@ let HeaderNotifications = React.createClass({
         this.refs.dropdownbutton.setDropdownState(false);
     },
 
-    getPieceNotifications(){
+    getPieceNotifications() {
         if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
             return (
                 <div>
@@ -87,7 +83,7 @@ let HeaderNotifications = React.createClass({
         return null;
     },
 
-    getEditionNotifications(){
+    getEditionNotifications() {
         if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) {
             return (
                 <div>
@@ -114,7 +110,7 @@ let HeaderNotifications = React.createClass({
 
     render() {
         if ((this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) ||
-            (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)){
+            (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)) {
             let numNotifications = 0;
             if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
                 numNotifications += this.state.pieceListNotifications.length;
@@ -125,7 +121,7 @@ let HeaderNotifications = React.createClass({
             return (
                 <Nav navbar right>
                     <DropdownButton
-                        ref='dropdownbutton'
+                        ref='dropdownButton'
                         id="header-notification-dropdown"
                         eventKey="1"
                         title={

js/components/login_container.js

@@ -11,19 +11,12 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string,
+        // Provided from AscribeApp
-        redirectOnLoggedIn: React.PropTypes.bool,
+        currentUser: React.PropTypes.object,
-        redirectOnLoginSuccess: React.PropTypes.bool,
+        whitelabel: React.PropTypes.object,
-        onLogin: React.PropTypes.func,
-        location: React.PropTypes.object
-    },
 
-    getDefaultProps() {
+        // Provided from router
-        return {
+        location: React.PropTypes.object
-            message: getLangText('Enter') + ' ascribe',
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
-        };
     },
 
     render() {
@@ -31,12 +24,7 @@ let LoginContainer = React.createClass({
 
         return (
             <div className="ascribe-login-wrapper">
-                <LoginForm
+                <LoginForm location={this.props.location} />
-                    redirectOnLoggedIn={this.props.redirectOnLoggedIn}
-                    redirectOnLoginSuccess={this.props.redirectOnLoginSuccess}
-                    message={this.props.message}
-                    onLogin={this.props.onLogin}
-                    location={this.props.location}/>
                 <div className="ascribe-login-text">
                     {getLangText('Not an ascribe user')}&#63; <Link to="/signup">{getLangText('Sign up')}...</Link><br/>
                     {getLangText('Forgot my password')}&#63; <Link to="/password_reset">{getLangText('Rescue me')}...</Link>

js/components/logout_container.js

@@ -6,23 +6,25 @@ import { History } from 'react-router';
 import AscribeSpinner from './ascribe_spinner';
 
 import UserActions from '../actions/user_actions';
-import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
 
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let LogoutContainer = React.createClass({
+    propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
+
     mixins: [History],
 
     componentDidMount() {
         UserActions.logoutCurrentUser();
-        alt.flush();
-        altWhitelabel.flush();
-        altUser.flush();
-        altThirdParty.flush();
-        // kill intercom (with fire)
-        window.Intercom('shutdown');
     },
 
     render() {

js/components/password_reset_container.js

@@ -16,52 +16,44 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let PasswordResetContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return {isRequested: false};
+        return { isRequested: false };
     },
 
     handleRequestSuccess(email) {
-        this.setState({isRequested: email});
+        this.setState({ isRequested: !!email });
     },
 
     render() {
-        let { location } = this.props;
+        const { email: emailQuery, token: tokenQuery } = this.props.location.query;
+        const { isRequested } = this.state;
 
-        if (location.query.email && location.query.token) {
+        if (emailQuery && tokenQuery) {
             return (
-                <div>
+                <PasswordResetForm
-                    <PasswordResetForm
+                    email={emailQuery}
-                        email={location.query.email}
+                    token={tokenQuery} />
-                        token={location.query.token}/>
+            );
+        } else if (!isRequested) {
+            return (
+                <PasswordRequestResetForm handleRequestSuccess={this.handleRequestSuccess} />
+            );
+        } else {
+            return (
+                <div className="ascribe-login-text ascribe-login-header">
+                    {getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.')}
                 </div>
             );
         }
-        else {
+    }
-            if (this.state.isRequested === false) {
-                return (
-                    <div>
-                        <PasswordRequestResetForm
-                            handleRequestSuccess={this.handleRequestSuccess}/>
-                    </div>
-                );
-            }
-            else if (this.state.isRequested) {
-                return (
-                    <div>
-                        <div className="ascribe-login-text ascribe-login-header">
-                            {getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.')}
-                        </div>
-                    </div>
-                );
-            }
-            else {
-                return <span />;
-            }
-        }
-  }
 });
 
 let PasswordRequestResetForm = React.createClass({
@@ -70,9 +62,10 @@ let PasswordRequestResetForm = React.createClass({
     },
 
     handleSuccess() {
-        let notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
+        const notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        const notification = new GlobalNotificationModel(notificationText, 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
         this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
     },
 
@@ -90,12 +83,13 @@ let PasswordRequestResetForm = React.createClass({
                         type="submit"
                         className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
-                    </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
                     <h3>{getLangText('Reset your password')}</h3>
                 </div>
@@ -149,12 +143,13 @@ let PasswordResetForm = React.createClass({
                         type="submit"
                         className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
-                    </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
                     <h3>{getLangText('Reset the password for')} {this.props.email}</h3>
                 </div>

js/components/piece_list.js

@@ -46,6 +46,12 @@ let PieceList = React.createClass({
         filterParams: React.PropTypes.array,
         orderParams: React.PropTypes.array,
         orderBy: React.PropTypes.string,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -93,7 +99,7 @@ let PieceList = React.createClass({
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
 
-        let page = this.props.location.query.page || 1;
+        const page = this.props.location.query.page || 1;
         if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
             this.loadPieceList({ page });
         }
@@ -175,8 +181,8 @@ let PieceList = React.createClass({
     },
 
     getPagination() {
-        let currentPage = parseInt(this.props.location.query.page, 10) || 1;
+        const currentPage = parseInt(this.props.location.query.page, 10) || 1;
-        let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
+        const totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
 
         if (this.state.pieceListCount > 20) {
             return (
@@ -203,8 +209,7 @@ let PieceList = React.createClass({
         });
 
         // first we need to apply the filter on the piece list
-        this
+        this.loadPieceList({ page: 1, filterBy })
-            .loadPieceList({ page: 1, filterBy })
             .then(() => {
                 // but also, we need to filter all the open edition lists
                 this.state.pieceList
@@ -239,23 +244,22 @@ let PieceList = React.createClass({
     },
 
     fetchSelectedPieceEditionList() {
-        let filteredPieceIdList = Object.keys(this.state.editionList)
+        const filteredPieceIdList = Object.keys(this.state.editionList)
-                                        .filter((pieceId) => {
+                                          .filter((pieceId) => {
-                                            return this.state.editionList[pieceId]
+                                              return this.state.editionList[pieceId]
-                                                .filter((edition) => edition.selected).length > 0;
+                                                         .filter((edition) => edition.selected)
-                                        });
+                                                         .length;
+                                          });
         return filteredPieceIdList;
     },
 
     fetchSelectedEditionList() {
-        let selectedEditionList = [];
+        const selectedEditionList = Object.keys(this.state.editionList)
-
+                                          .reduce((selectedList, pieceId) => {
-        Object
+                                              const selectedEditionsForPiece = this.state.editionList[pieceId]
-            .keys(this.state.editionList)
+                                                                                   .filter((edition) => edition.selected);
-            .forEach((pieceId) => {
+                                              return selectedList.concat(selectedEditionsForPiece);
-                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
+                                          }, []);
-                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
-            });
 
         return selectedEditionList;
     },
@@ -267,7 +271,7 @@ let PieceList = React.createClass({
 
         this.fetchSelectedPieceEditionList()
             .forEach((pieceId) => {
-                EditionListActions.refreshEditionList({pieceId});
+                EditionListActions.refreshEditionList({ pieceId });
             });
         EditionListActions.clearAllEditionSelections();
     },
@@ -276,10 +280,12 @@ let PieceList = React.createClass({
         const {
             accordionListItemType: AccordionListItemType,
             bulkModalButtonListType: BulkModalButtonListType,
+            currentUser,
             customSubmitButton,
             customThumbnailPlaceholder,
             filterParams,
-            orderParams } = this.props;
+            orderParams,
+            whitelabel } = this.props;
 
         const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
 
@@ -287,6 +293,7 @@ let PieceList = React.createClass({
         const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
 
         setDocumentTitle(getLangText('Collection'));
+
         return (
             <div>
                 <PieceListToolbar
@@ -312,17 +319,19 @@ let PieceList = React.createClass({
                     className="ascribe-piece-list-bulk-modal">
                     <BulkModalButtonListType
                         availableAcls={availableAcls}
-                        pieceOrEditions={selectedEditions}
+                        currentUser={currentUser}
                         handleSuccess={this.handleAclSuccess}
+                        pieceOrEditions={selectedEditions}
+                        whitelabel={whitelabel}
                         className="text-center ascribe-button-list collapse-group">
                         <DeleteButton
                             handleSuccess={this.handleAclSuccess}
-                            editions={selectedEditions}/>
+                            editions={selectedEditions} />
                     </BulkModalButtonListType>
                 </PieceListBulkModal>
                 <PieceListFilterDisplay
                     filterBy={this.state.filterBy}
-                    filterParams={filterParams}/>
+                    filterParams={filterParams} />
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
@@ -335,13 +344,15 @@ 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}
+                                currentUser={currentUser}
                                 thumbnailPlaceholder={customThumbnailPlaceholder}
-                                key={i}>
+                                whitelabel={whitelabel}>
                                     <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/register_piece.js

@@ -6,27 +6,20 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import WhitelabelActions from '../actions/whitelabel_actions';
-import WhitelabelStore from '../stores/whitelabel_store';
-
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
-import UserStore from '../stores/user_store';
-
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Property from './ascribe_forms/property';
 import RegisterPieceForm from './ascribe_forms/form_register_piece';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let RegisterPiece = React.createClass( {
-
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
@@ -35,30 +28,27 @@ let RegisterPiece = React.createClass( {
             React.PropTypes.element,
             React.PropTypes.string
         ]),
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
     getInitialState(){
-        return mergeOptions(
+        return PieceListStore.getState();
-            UserStore.getState(),
-            WhitelabelStore.getState(),
-            PieceListStore.getState()
-        );
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -79,7 +69,9 @@ let RegisterPiece = React.createClass( {
     },
 
     getSpecifyEditions() {
-        if (this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
+        const { whitelabel } = this.props;
+
+        if (whitelabel.acl_create_editions || Object.keys(whitelabel).length) {
             return (
                 <Property
                     name="num_editions"
@@ -105,8 +97,7 @@ let RegisterPiece = React.createClass( {
                     <RegisterPieceForm
                         {...this.props}
                         isFineUploaderActive={true}
-                        handleSuccess={this.handleSuccess}
+                        handleSuccess={this.handleSuccess}>
-                        location={this.props.location}>
                         {this.props.children}
                         {this.getSpecifyEditions()}
                     </RegisterPieceForm>

js/components/signup_container.js

@@ -11,6 +11,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let SignupContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -21,7 +26,7 @@ let SignupContainer = React.createClass({
         };
     },
 
-    handleSuccess(message){
+    handleSuccess(message) {
         this.setState({
             submitted: true,
             message: message
@@ -29,14 +34,17 @@ let SignupContainer = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+        const { message, submitted } = this.state;
+
         setDocumentTitle(getLangText('Sign up'));
 
-        if (this.state.submitted){
+        if (submitted) {
             return (
                 <div className="ascribe-login-wrapper">
                     <br/>
                     <div className="ascribe-login-text ascribe-login-header">
-                        {this.state.message}
+                        {message}
                     </div>
                 </div>
             );
@@ -45,7 +53,7 @@ let SignupContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <SignupForm
                     handleSuccess={this.handleSuccess}
-                    location={this.props.location}/>
+                    location={location}/>
                 <div className="ascribe-login-text">
                     {getLangText('Already an ascribe user')}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/>
                 </div>

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -32,9 +32,8 @@ const { object } = React.PropTypes;
 
 const PRRegisterPieceForm = React.createClass({
     propTypes: {
-        location: object,
+        currentUser: object.isRequired,
-        history: object,
+        location: object
-        currentUser: object
     },
 
     mixins: [History],

js/components/whitelabel/prize/portfolioreview/components/pr_hero.js

@@ -12,7 +12,7 @@ const PRHero = React.createClass({
     propTypes: {
         currentUser: React.PropTypes.shape({
             email: React.PropTypes.object
-        })
+        }).isRequired
     },
 
     render() {

js/components/whitelabel/prize/portfolioreview/components/pr_landing.js

@@ -3,45 +3,41 @@
 import React from 'react';
 import { History } from 'react-router';
 
-import PrizeActions from '../../simple_prize/actions/prize_actions';
-import PrizeStore from '../../simple_prize/stores/prize_store';
-
 import Button from 'react-bootstrap/lib/Button';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
+import PrizeActions from '../../simple_prize/actions/prize_actions';
-import UserActions from '../../../../../actions/user_actions';
+import PrizeStore from '../../simple_prize/stores/prize_store';
 
-import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
+import { omitFromObject } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
 const PRLanding = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
     getInitialState() {
-        return mergeOptions(
+        return PrizeStore.getState();
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
         const { location } = this.props;
 
-        UserStore.listen(this.onChange);
         PrizeStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
         PrizeActions.fetchPrize();
 
-        if (location && location.query && location.query.redirect) {
+        if (location.query.redirect) {
             window.setTimeout(() => this.history.replace({
                 pathname: `/${location.query.redirect}`,
                 query: omitFromObject(location.query, ['redirect'])
@@ -50,7 +46,6 @@ const PRLanding = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
@@ -59,7 +54,7 @@ const PRLanding = React.createClass({
     },
 
     getButtons() {
-        if (this.state.prize && this.state.prize.active){
+        if (this.state.prize && this.state.prize.active) {
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
                     <LinkContainer to="/signup">
@@ -78,39 +73,37 @@ const PRLanding = React.createClass({
                     </LinkContainer>
                 </ButtonGroup>
             );
-        }
+        } else {
-        return (
+            return (
-            <ButtonGroup className="enter" bsSize="large" vertical>
+                <ButtonGroup className="enter" bsSize="large" vertical>
-                <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
+                    <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
-                    {getLangText('Sign up to ascribe')}
+                        {getLangText('Sign up to ascribe')}
-                </a>
+                    </a>
 
-                <p>
+                    <p>
-                    {getLangText('or, already an ascribe user?')}
+                        {getLangText('or, already an ascribe user?')}
-                </p>
+                    </p>
-                <LinkContainer to="/login">
+                    <LinkContainer to="/login">
-                    <Button>
+                        <Button>
-                        {getLangText('Log in')}
+                            {getLangText('Log in')}
-                    </Button>
+                        </Button>
-                </LinkContainer>
+                    </LinkContainer>
-            </ButtonGroup>
+                </ButtonGroup>
-        );
+            );
+        }
     },
 
     getTitle() {
-        if (this.state.prize && this.state.prize.active){
+        const { prize } = this.state;
-            return (
+
-                <p>
-                    {getLangText('This is the submission page for Portfolio Review 2016.')}
-                </p>
-            );
-        }
         return (
             <p>
-                {getLangText('Submissions for Portfolio Review 2016 are now closed.')}
+                {getLangText(prize && prize.active ? 'This is the submission page for Portfolio Review 2016.'
+                                                   : 'Submissions for Portfolio Review 2016 are now closed.')}
             </p>
         );
     },
+
     render() {
         return (
             <div className="container">

js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js

@@ -6,9 +6,6 @@ import { Link, History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
 
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -20,43 +17,31 @@ const { object } = React.PropTypes;
 
 const PRRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: object
     },
 
     mixins: [History],
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
     componentDidUpdate() {
-        const { currentUser } = this.state;
+        const { currentUser } = this.props;
-        if(currentUser && currentUser.email) {
+        if (currentUser.email) {
             const submittedPieceId = getCookie(currentUser.email);
-            if(submittedPieceId) {
+            if (submittedPieceId) {
                 this.history.push(`/pieces/${submittedPieceId}`);
             }
         }
     },
 
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { currentUser } = this.state;
+        const { currentUser, location } = this.props;
-        const { location } = this.props;
 
         setDocumentTitle(getLangText('Submit to Portfolio Review'));
+
         return (
             <Row>
                 <Col xs={6}>
@@ -77,7 +62,7 @@ const PRRegisterPiece = React.createClass({
                 <Col xs={6}>
                     <PRRegisterPieceForm
                         location={location}
-                        currentUser={currentUser}/>
+                        currentUser={currentUser} />
                 </Col>
             </Row>
         );

js/components/whitelabel/prize/portfolioreview/pr_app.js

@@ -11,6 +11,7 @@ import UserActions from '../../../../actions/user_actions';
 import Hero from './components/pr_hero';
 
 import AppBase from '../../../app_base';
+import AppRouteWrapper from '../../../app_route_wrapper';
 import Footer from '../../../footer';
 import Header from '../../../header';
 
@@ -23,43 +24,15 @@ let PRApp = React.createClass({
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-
-        if (this.state.currentUser && this.state.currentUser.email) {
-            EventActions.profileDidLoad.defer(this.state.currentUser);
-        }
-    },
-
-    componentWillUpdate(nextProps, nextState) {
-        const { currentUser: { email: curEmail } = {} } = this.state;
-        const { currentUser: { email: nextEmail } = {} } = nextState;
-
-        if (nextEmail && curEmail !== nextEmail) {
-            EventActions.profileDidLoad.defer(nextState.currentUser);
-        }
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-
     render() {
-        const { activeRoute, children, history, routes } = this.props;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
-        const { currentUser } = this.state;
         const subdomain = getSubdomain();
         const path = activeRoute && activeRoute.path;
 
@@ -69,7 +42,13 @@ let PRApp = React.createClass({
             header = (<Hero currentUser={currentUser} />);
             style = { paddingTop: '0 !important' };
         } else if (currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
-            header = (<Header routes={routes} />);
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel}
+                />
+            );
         } else {
             style = { paddingTop: '0 !important' };
         }
@@ -77,12 +56,14 @@ let PRApp = React.createClass({
         return (
             <div
                 style={style}
-                className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+                className={classNames('ascribe-app', 'ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
-                <div className="container ascribe-body">
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
                     {children}
-                </div>
+                </AppRouteWrapper>
                 <Footer activeRoute={activeRoute} />
             </div>
         );

js/components/whitelabel/prize/prize_routes.js

@@ -32,7 +32,7 @@ const ROUTES = {
     sluice: (
         <Route path='/' component={SPApp}>
             <IndexRoute
-                component={SPLanding}
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLanding)}
                 hideFooter />
             <Route
                 path='login'

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,34 +21,30 @@ 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: {
-        className: React.PropTypes.string,
+        content: React.PropTypes.object.isRequired,
-        content: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     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) {
@@ -62,29 +56,30 @@ let AccordionListItemPrize = React.createClass({
 
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, 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,47 +89,46 @@ let AccordionListItemPrize = React.createClass({
                                 rating={rating}
                                 ratingAmount={5} />
                         </Link>
-                    </div>);
+                    </div>
-            }
+                );
-            else {
+            } else {
-                if (this.state.currentUser.is_judge){
+                if (currentUser.is_judge) {
                     return (
                         <div className="react-rating-caption pull-right">
                             {getLangText('Not rated')}
                         </div>
                     );
+                } else {
+                    // jury and no rating yet
+                    return (
+                        <div className="react-rating-caption pull-right">
+                            <Link to={`/pieces/${id}`}>
+                                {getLangText('Submit your rating')}
+                            </Link>
+                        </div>
+                    );
                 }
-                // jury and no rating yet
-                return (
-                    <div className="react-rating-caption pull-right">
-                        <Link to={`/pieces/${this.props.content.id}`}>
-                            {getLangText('Submit your rating')}
-                        </Link>
-                    </div>
-                );
             }
+        } else {
+            return this.getPrizeButtonsParticipant();
         }
-        return this.getPrizeButtonsParticipant();
-
     },
 
     getPrizeButtonsParticipant() {
         return (
-            <div>
+            <AclProxy
-                <AclProxy
+                aclObject={this.props.content.acl}
-                    aclObject={this.props.content.acl}
+                aclName="acl_wallet_submit">
-                    aclName="acl_wallet_submit">
+                <SubmitToPrizeButton
-                    <SubmitToPrizeButton
+                    className="pull-right"
-                        className="pull-right"
+                    piece={this.props.content}
-                        piece={this.props.content}
+                    handleSuccess={this.handleSubmitPrizeSuccess} />
-                        handleSuccess={this.handleSubmitPrizeSuccess}/>
+            </AclProxy>
-                </AclProxy>
-            </div>
         );
     },
 
-    handleShortlistSuccess(message){
+    handleShortlistSuccess(message) {
-        let notification = new GlobalNotificationModel(message, 'success', 2000);
+        const notification = new GlobalNotificationModel(message, 'success', 2000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -144,56 +138,52 @@ let AccordionListItemPrize = React.createClass({
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, 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) {
+        const { currentUser } = this.props;
+
+        if (currentUser && currentUser.is_judge) {
             return (
                 <span className="pull-right ascribe-checkbox-wrapper ascribe-checkbox-badge">
                     <InputCheckbox
                         defaultChecked={this.props.content.selected}
-                        onChange={this.onSelectChange}/>
+                        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
-                <AccordionListItemPiece
+                className={className}
-                    className={className}
+                piece={content}
-                    piece={content}
+                artistName={artistName}
-                    artistName={artistName}
+                subsubheading={
-                    subsubheading={
+                    <div>
-                        <div>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
-                            <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
+                    </div>
-                        </div>}
+                }
-                    buttons={this.getPrizeButtons()}
+                buttons={this.getPrizeButtons()}
-                    badge={this.getPrizeBadge()}>
+                badge={this.getPrizeBadge()}>
-                    {children}
+                {children}
-                </AccordionListItemPiece>
+            </AccordionListItemPiece>
-            </div>
         );
     }
 });

js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js

@@ -14,13 +14,10 @@ import PrizeStore from '../../stores/prize_store';
 import PrizeRatingActions from '../../actions/prize_rating_actions';
 import PrizeRatingStore from '../../stores/prize_rating_store';
 
-import PieceActions from '../../../../../../actions/piece_actions';
-import PieceStore from '../../../../../../stores/piece_store';
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
-
+import PieceActions from '../../../../../../actions/piece_actions';
-import UserStore from '../../../../../../stores/user_store';
+import PieceStore from '../../../../../../stores/piece_store';
-import UserActions from '../../../../../../actions/user_actions';
 
 import Piece from '../../../../../../components/ascribe_detail/piece';
 import Note from '../../../../../../components/ascribe_detail/note';
@@ -53,24 +50,26 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
  */
 let PrizePieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
+        selectedPrizeActionButton: React.PropTypes.func,
-        selectedPrizeActionButton: React.PropTypes.func
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
+        params: React.PropTypes.object
     },
 
     mixins: [ReactError],
 
     getInitialState() {
-        return mergeOptions(
+        return PieceStore.getInitialState();
-            PieceStore.getInitialState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
 
-        UserActions.fetchCurrentUser();
         this.loadPiece();
     },
 
@@ -94,7 +93,6 @@ let PrizePieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -102,7 +100,8 @@ let PrizePieceContainer = React.createClass({
     },
 
     getActions() {
-        const { currentUser, piece } = this.state;
+        const { currentUser } = this.props;
+        const { piece } = this.state;
 
         if (piece.notifications && piece.notifications.length > 0) {
             return (
@@ -119,8 +118,8 @@ let PrizePieceContainer = React.createClass({
     },
 
     render() {
-        const { selectedPrizeActionButton } = this.props;
+        const { currentUser, selectedPrizeActionButton } = this.props;
-        const { currentUser, piece } = this.state;
+        const { piece } = this.state;
 
         if (piece.id) {
             /*

js/components/whitelabel/prize/simple_prize/components/prize_landing.js

@@ -1,57 +1,47 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
-
-import PrizeActions from '../actions/prize_actions';
-import PrizeStore from '../stores/prize_store';
 
 import Button from 'react-bootstrap/lib/Button';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
+import PrizeActions from '../actions/prize_actions';
-import UserActions from '../../../../../actions/user_actions';
+import PrizeStore from '../stores/prize_store';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
-let Landing = React.createClass({
 
-    mixins: [History],
+let Landing = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
 
     getInitialState() {
-        return mergeOptions(
+        return PrizeStore.getState();
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replace('/collection'), 0);
-        }
     },
 
     getButtons() {
-        if (this.state.prize && this.state.prize.active){
+        if (this.state.prize && this.state.prize.active) {
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
                     <LinkContainer to="/signup">
@@ -70,39 +60,37 @@ let Landing = React.createClass({
                     </LinkContainer>
                 </ButtonGroup>
             );
-        }
+        } else {
-        return (
+            return (
-            <ButtonGroup className="enter" bsSize="large" vertical>
+                <ButtonGroup className="enter" bsSize="large" vertical>
-                <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
+                    <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
-                    {getLangText('Sign up to ascribe')}
+                        {getLangText('Sign up to ascribe')}
-                </a>
+                    </a>
 
-                <p>
+                    <p>
-                    {getLangText('or, already an ascribe user?')}
+                        {getLangText('or, already an ascribe user?')}
-                </p>
+                    </p>
-                <LinkContainer to="/login">
+                    <LinkContainer to="/login">
-                    <Button>
+                        <Button>
-                        {getLangText('Log in')}
+                            {getLangText('Log in')}
-                    </Button>
+                        </Button>
-                </LinkContainer>
+                    </LinkContainer>
-            </ButtonGroup>
+                </ButtonGroup>
-        );
+            );
+        }
     },
 
     getTitle() {
-        if (this.state.prize && this.state.prize.active){
+        const { prize } = this.state;
-            return (
+
-                <p>
-                    {getLangText('This is the submission page for Sluice_screens ↄc Prize 2015.')}
-                </p>
-            );
-        }
         return (
             <p>
-                {getLangText('Submissions for Sluice_screens ↄc Prize 2015 are now closed.')}
+                {getLangText(prize && prize.active ? 'This is the submission page for Sluice_screens ↄc Prize 2015.'
+                                                   : 'Submissions for Sluice_screens ↄc Prize 2015 are now closed.')}
             </p>
         );
     },
+
     render() {
         return (
             <div className="container">

js/components/whitelabel/prize/simple_prize/components/prize_login_container.js

@@ -11,6 +11,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let LoginContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -21,12 +26,11 @@ let LoginContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <LoginForm
                     headerMessage={getLangText('Log in with ascribe')}
-                    location={this.props.location}/>
+                    location={this.props.location} />
-                <div
+                <div className="ascribe-login-text">
-                    className="ascribe-login-text">
                     {getLangText('I\'m not a user') + ' '}
                     <Link to="/signup">{getLangText('Sign up...')}</Link>
-                    <br/>
+                    <br />
 
                     {getLangText('I forgot my password') + ' '}
                     <Link to="/password_reset">{getLangText('Rescue me...')}</Link>

js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js

@@ -1,19 +1,15 @@
 'use strict';
 
 import React from 'react';
-import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
+import Button from 'react-bootstrap/lib/Button';
-import UserStore from '../../../../../stores/user_store';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 
-import Button from 'react-bootstrap/lib/Button';
-
-import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
-
 import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
+import PieceList from '../../../../piece_list';
 
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -21,25 +17,24 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let PrizePieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
+        return PrizeStore.getState();
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
@@ -48,7 +43,8 @@ let PrizePieceList = React.createClass({
     },
 
     getButtonSubmit() {
-        const { currentUser, prize } = this.state;
+        const { currentUser } = this.props;
+        const { prize } = this.state;
         if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
             return (
                 <LinkContainer to="/register_piece">
@@ -57,34 +53,40 @@ let PrizePieceList = React.createClass({
                     </Button>
                 </LinkContainer>
             );
+        } else {
+            return null;
         }
-        return null;
+    },
+
+    shouldRedirect(pieceCount) {
+        const { currentUser } = this.props;
+
+        return !currentUser.is_admin && !currentUser.is_jury && !currentUser.is_judge && !pieceCount;
     },
 
     render() {
-        const { is_judge: isJudge, is_jury: isJury, is_admin: isAdmin } = this.state.currentUser;
+        const { currentUser, location } = this.props;
 
         setDocumentTitle(getLangText('Collection'));
 
         let orderParams = ['artist_name', 'title'];
-        if (isJury) {
+        if (currentUser.is_jury) {
             orderParams = ['rating', 'title'];
         }
-        if (isJudge) {
+        if (currentUser.is_judge) {
             orderParams = ['rating', 'title', 'selected'];
         }
+
         return (
-            <div>
+            <PieceList
-                <PieceList
+                ref="list"
-                    ref="list"
+                {...this.props}
-                    accordionListItemType={AccordionListItemPrize}
+                accordionListItemType={AccordionListItemPrize}
-                    orderParams={orderParams}
+                customSubmitButton={this.getButtonSubmit()}
-                    orderBy={this.state.currentUser.is_jury ? 'rating' : null}
+                filterParams={[]}
-                    filterParams={[]}
+                orderParams={orderParams}
-                    customSubmitButton={this.getButtonSubmit()}
+                orderBy={currentUser.is_jury ? 'rating' : null}
-                    location={this.props.location}
+                shouldRedirect={this.shouldRedirect} />
-                    shouldRedirect={() => !(isJury || isJudge || isAdmin)} />
-            </div>
         );
     }
 });

js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js

@@ -16,6 +16,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let PrizeRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -37,62 +42,59 @@ let PrizeRegisterPiece = React.createClass({
     },
 
     render() {
-        const { location } = this.props;
+        const { prize } = this.state;
 
         setDocumentTitle(getLangText('Submit to the prize'));
 
-        if(this.state.prize && this.state.prize.active){
+        if (prize && prize.active) {
             return (
-                <div>
+                <RegisterPiece
-                    <RegisterPiece
+                    {...this.props}
-                        enableLocalHashing={false}
+                    enableLocalHashing={false}
-                        headerMessage={''}
+                    headerMessage={''}
-                        submitMessage={getLangText('Submit')}
+                    submitMessage={getLangText('Submit')}>
-                        location={location}>
+                    <Property
-                        <Property
+                        name='artist_statement'
-                            name='artist_statement'
+                        label={getLangText('Artist statement')}
-                            label={getLangText('Artist statement')}
+                        editable={true}
-                            editable={true}
+                        overrideForm={true}>
-                            overrideForm={true}>
+                        <InputTextAreaToggable
-                            <InputTextAreaToggable
+                            rows={1}
-                                rows={1}
+                            placeholder={getLangText('Enter your statement')}
-                                placeholder={getLangText('Enter your statement')}
+                            required />
-                                required />
+                    </Property>
-                        </Property>
+                    <Property
-                        <Property
+                        name='work_description'
-                            name='work_description'
+                        label={getLangText('Work description')}
-                            label={getLangText('Work description')}
+                        editable={true}
-                            editable={true}
+                        overrideForm={true}>
-                            overrideForm={true}>
+                        <InputTextAreaToggable
-                            <InputTextAreaToggable
+                            rows={1}
-                                rows={1}
+                            placeholder={getLangText('Enter the description for your work')}
-                                placeholder={getLangText('Enter the description for your work')}
+                            required />
-                                required />
+                    </Property>
-                        </Property>
+                    <Property
-                        <Property
+                        name="terms"
-                            name="terms"
+                        className="ascribe-property-collapsible-toggle">
-                            className="ascribe-property-collapsible-toggle">
+                        <InputCheckbox>
-                            <InputCheckbox>
+                            <span>
-                                <span>
+                                {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
-                                    {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
+                                (<a href="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/sluice/terms.pdf" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                    (<a href="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/sluice/terms.pdf" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
+                                    {getLangText('read')}
-                                        {getLangText('read')}
+                                </a>)
-                                    </a>)
+                            </span>
-                                </span>
+                        </InputCheckbox>
-                            </InputCheckbox>
+                    </Property>
-                        </Property>
+                </RegisterPiece>
-                    </RegisterPiece>
-                </div>
             );
-        }
+        } else {
-        else {
             return (
                 <div className='row'>
                     <div style={{textAlign: 'center'}}>
                         {getLangText('The prize is no longer active')}
                     </div>
                 </div>
-                );
+            );
         }
     }
 });

js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js

@@ -2,8 +2,6 @@
 
 import React from 'react';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 import PrizeJuryActions from '../actions/prize_jury_actions';
@@ -28,40 +26,27 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let Settings = React.createClass({
-    getInitialState() {
+    propTypes: {
-        return UserStore.getState();
+        // Provided from PrizeApp
-    },
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
 
-    componentDidMount() {
+        // Provided from router
-        UserStore.listen(this.onChange);
+        location: React.PropTypes.object
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     render() {
         setDocumentTitle(getLangText('Account settings'));
 
-        let prizeSettings = null;
-        if (this.state.currentUser.is_admin){
-            prizeSettings = <PrizeSettings />;
-        }
         return (
-            <SettingsContainer>
+            <SettingsContainer {...this.props}>
-                {prizeSettings}
+                {this.props.currentUser.is_admin ? <PrizeSettings /> : null}
             </SettingsContainer>
         );
     }
 });
 
 let PrizeSettings = React.createClass({
-
     getInitialState() {
         return PrizeStore.getState();
     },

js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js

@@ -8,6 +8,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let SignupContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -18,7 +23,7 @@ let SignupContainer = React.createClass({
         };
     },
 
-    handleSuccess(message){
+    handleSuccess(message) {
         this.setState({
             submitted: true,
             message: message
@@ -26,13 +31,15 @@ let SignupContainer = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+        const { message, submitted } = this.state;
         setDocumentTitle(getLangText('Sign up'));
 
-        if (this.state.submitted){
+        if (submitted) {
             return (
                 <div className="ascribe-login-wrapper">
                     <div className="ascribe-login-text ascribe-login-header">
-                        {this.state.message}
+                        {message}
                     </div>
                 </div>
             );
@@ -43,7 +50,7 @@ let SignupContainer = React.createClass({
                         headerMessage={getLangText('Create account for submission')}
                         submitMessage={getLangText('Sign up')}
                         handleSuccess={this.handleSuccess}
-                        location={this.props.location}/>
+                        location={location} />
                 </div>
             );
         }

js/components/whitelabel/prize/simple_prize/prize_app.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import Hero from './components/prize_hero';
 
 import AppBase from '../../../app_base';
+import AppRouteWrapper from '../../../app_route_wrapper';
 import Footer from '../../../footer';
 import Header from '../../../header';
 
@@ -17,11 +18,15 @@ let PrizeApp = React.createClass({
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { activeRoute, children, history, routes } = this.props;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
         const path = activeRoute && activeRoute.path;
 
@@ -30,16 +35,23 @@ let PrizeApp = React.createClass({
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
             header = (<Hero />);
         } else {
-            header = (<Header routes={routes} />);
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+            );
         }
 
         return (
-            <div className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+            <div className={classNames('ascribe-app', 'ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
-                <div className="container ascribe-body">
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
                     {children}
-                </div>
+                </AppRouteWrapper>
                 <Footer activeRoute={activeRoute} />
             </div>
         );

js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js

@@ -16,8 +16,9 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 const SluiceSelectedPrizeActionButton = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
-        currentUser: React.PropTypes.object,
+        piece: React.PropTypes.object.isRequired,
+
         startLoanDate: React.PropTypes.object,
         endLoanDate: React.PropTypes.object,
         className: React.PropTypes.string,
@@ -38,7 +39,7 @@ const SluiceSelectedPrizeActionButton = React.createClass({
 
         // 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');
+        const endLoanDate = this.props.endLoanDate || new Moment().add(6, 'months');
 
         return (
             <ModalWrapper

js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js

@@ -8,6 +8,12 @@ import PrizePieceContainer from '../../../simple_prize/components/ascribe_detail
 
 const SluicePieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 

js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js

@@ -5,42 +5,35 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let Vivi23Landing = React.createClass({
-    getInitialState() {
+    propTypes: {
-        return WhitelabelStore.getState();
+        customThumbnailPlaceholder: React.PropTypes.func,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     componentWillMount() {
         setDocumentTitle('23VIVI Marketplace');
     },
 
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         return (
             <div className="ascribe-form-wrapper vivi23-landing">
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row vivi23-landing--header">
-                            <img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <img
+                                className="vivi23-landing--header-logo"
+                                src={this.props.whitelabel.logo}
+                                height="75" />
                             <div>
                                 {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
                                 <span className="icon-ascribe-logo" />

js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js

@@ -8,17 +8,21 @@ import MarketPieceList from '../market/market_piece_list';
 
 let Vivi23PieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     render() {
         return (
             <MarketPieceList
-                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
+                {...this.props}
-                location={this.props.location} />
+                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder} />
         );
     }
-
 });
 
 export default Vivi23PieceList;

js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js

@@ -15,54 +15,54 @@ let WalletActionPanel = React.createClass({
     propTypes: {
         piece: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
-        loadPiece: React.PropTypes.func.isRequired,
         handleDeleteSuccess: React.PropTypes.func.isRequired,
+        loadPiece: React.PropTypes.func.isRequired,
         submitButtonType: React.PropTypes.func.isRequired
     },
 
-    render(){
+    render() {
-        if (this.props.piece &&
+        const { currentUser, handleDeleteSuccess, loadPiece, piece, submitButtonType } = this.props;
-            this.props.piece.notifications &&
+
-            this.props.piece.notifications.length > 0) {
+        if (piece && piece.notifications && piece.notifications.length) {
             return (
                 <ListRequestActions
-                    pieceOrEditions={this.props.piece}
+                    pieceOrEditions={piece}
-                    currentUser={this.props.currentUser}
+                    currentUser={currentUser}
-                    handleSuccess={this.props.loadPiece}
+                    handleSuccess={loadPiece}
-                    notifications={this.props.piece.notifications}/>);
+                    notifications={piece.notifications}/>);
-        }
+        } else {
-        else {
 
             //We need to disable the normal acl_loan because we're inserting a custom acl_loan button
             let availableAcls;
 
-            if (this.props.piece && this.props.piece.acl && typeof this.props.piece.acl.acl_loan !== 'undefined') {
+            if (piece && piece.acl && typeof piece.acl.acl_loan !== 'undefined') {
                 // make a copy to not have side effects
-                availableAcls = mergeOptions({}, this.props.piece.acl);
+                availableAcls = mergeOptions({}, piece.acl);
                 availableAcls.acl_loan = false;
             }
-            let SubmitButtonType = this.props.submitButtonType;
+            let SubmitButtonType = submitButtonType;
 
             return (
                 <AclButtonList
-                    className="text-center ascribe-button-list"
                     availableAcls={availableAcls}
-                    pieceOrEditions={this.props.piece}
+                    className="text-center ascribe-button-list"
-                    handleSuccess={this.props.loadPiece}>
+                    currentUser={currentUser}
+                    pieceOrEditions={piece}
+                    handleSuccess={loadPiece}>
                     <AclProxy
-                        aclObject={this.props.currentUser.acl}
+                        aclObject={currentUser.acl}
                         aclName="acl_wallet_submit">
                         <AclProxy
                             aclObject={availableAcls}
                             aclName="acl_wallet_submit">
                             <SubmitButtonType
                                 className="btn-sm"
-                                piece={this.props.piece}/>
+                                piece={piece}/>
                         </AclProxy>
                     </AclProxy>
                     <DeleteButton
-                        handleSuccess={this.props.handleDeleteSuccess}
+                        handleSuccess={handleDeleteSuccess}
-                        piece={this.props.piece}/>
+                        piece={piece}/>
                 </AclButtonList>
             );
         }

js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js

@@ -3,18 +3,18 @@
 import React from 'react';
 import Moment from 'moment';
 
-import Piece from '../../../../../components/ascribe_detail/piece';
-
 import WalletActionPanel from './wallet_action_panel';
+
 import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
+import DetailProperty from '../../../../ascribe_detail/detail_property';
 import HistoryIterator from '../../../../ascribe_detail/history_iterator';
 import Note from '../../../../ascribe_detail/note';
+import Piece from '../../../../../components/ascribe_detail/piece';
 
-import DetailProperty from '../../../../ascribe_detail/detail_property';
+import AscribeSpinner from '../../../../ascribe_spinner';
 
 import ApiUrls from '../../../../../constants/api_urls';
-import AscribeSpinner from '../../../../ascribe_spinner';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 
@@ -23,9 +23,10 @@ let WalletPieceContainer = React.createClass({
     propTypes: {
         piece: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
-        loadPiece: React.PropTypes.func.isRequired,
         handleDeleteSuccess: React.PropTypes.func.isRequired,
+        loadPiece: React.PropTypes.func.isRequired,
         submitButtonType: React.PropTypes.func.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array

js/components/whitelabel/wallet/components/cc/cc_register_piece.js

@@ -13,6 +13,11 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 
 let CCRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -85,6 +90,7 @@ let CCRegisterPiece = React.createClass({
         setDocumentTitle(getLangText('Register a new piece'));
         return (
             <RegisterPiece
+                {...this.props}
                 enableLocalHashing={false}
                 headerMessage={getLangText('Register under a Creative Commons license')}
                 submitMessage={getLangText('Submit')}

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) {
@@ -56,37 +50,39 @@ let CylandAccordionListItem = React.createClass({
 
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, 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>
@@ -96,16 +92,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/cyland/cyland_buttons/cyland_submit_button.js

@@ -7,39 +7,19 @@ import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../../stores/whitelabel_store';
-
 import { getLangText } from '../../../../../../utils/lang_utils';
 
 
 let CylandSubmitButton = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
-        username: React.PropTypes.string
-    },
 
-    getInitialState() {
+        className: React.PropTypes.string,
-        return WhitelabelStore.getState();
+        handleSuccess: React.PropTypes.func
-    },
-
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     render() {
-        const { piece, className } = this.props;
+        const { className, piece } = this.props;
 
         return (
             <LinkContainer
@@ -58,4 +38,4 @@ let CylandSubmitButton = React.createClass({
     }
 });
 
-export default CylandSubmitButton;
+export default CylandSubmitButton;

js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js

@@ -3,28 +3,26 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import EditionListActions from '../../../../../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import PieceActions from '../../../../../../actions/piece_actions';
 import PieceStore from '../../../../../../stores/piece_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import EditionListActions from '../../../../../../actions/edition_list_actions';
+import CylandAdditionalDataForm from '../cyland_forms/cyland_additional_data_form';
 
 import CylandSubmitButton from '../cyland_buttons/cyland_submit_button';
 
-import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
-
-import CylandAdditionalDataForm from '../cyland_forms/cyland_additional_data_form';
-
 import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
 
-import AscribeSpinner from '../../../../../ascribe_spinner';
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import AscribeSpinner from '../../../../../ascribe_spinner';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@@ -33,6 +31,12 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let CylandPieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -41,14 +45,12 @@ let CylandPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getInitialState(),
-            UserStore.getState(),
             PieceListStore.getState()
         );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
         this.loadPiece();
@@ -64,7 +66,6 @@ let CylandPieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
     },
 
@@ -96,12 +97,15 @@ let CylandPieceContainer = React.createClass({
         const { piece } = this.state;
 
         if (piece.id) {
+            const { currentUser } = this.props;
+
             setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
 
             return (
                 <WalletPieceContainer
-                    piece={piece}
+                    {...this.props}
-                    currentUser={this.state.currentUser}
+                    piece={this.state.piece}
+                    currentUser={currentUser}
                     loadPiece={this.loadPiece}
                     handleDeleteSuccess={this.handleDeleteSuccess}
                     submitButtonType={CylandSubmitButton}>

js/components/whitelabel/wallet/components/cyland/cyland_hero.js

@@ -1,20 +0,0 @@
-'use strict';
-
-import React from 'react';
-import AppConstants from '../../../../constants/application_constants';
-
-
-let Hero = React.createClass({
-    render() {
-        return (
-            <div className="hero">
-                <img
-                    className="logo" src={AppConstants.whitelabel.logo}
-                    alt="Cyland Video Archive"
-                    height="200px"/>
-            </div>
-        );
-    }
-});
-
-export default Hero;

js/components/whitelabel/wallet/components/cyland/cyland_landing.js

@@ -1,56 +1,25 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
 import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import AscribeSpinner from '../../../../ascribe_spinner';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let CylandLanding = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
-    mixins: [History],
+        // Provided from router
-
+        location: React.PropTypes.object
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replace('/collection'), 0);
-        }
     },
 
     render() {
@@ -61,7 +30,7 @@ let CylandLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.state.whitelabel.logo} width="400px"/>
+                            <img src={this.props.whitelabel.logo} height="115" />
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Submissions to Cyland Archive are powered by') + ' '}
                                 <span>

js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js

@@ -3,52 +3,26 @@
 import React from 'react';
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import CylandAccordionListItem from './cyland_accordion_list/cyland_accordion_list_item';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 
 let CylandPieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     shouldRedirect(pieceCount) {
         const { currentUser: { email: userEmail },
                 whitelabel: {
                     user: whitelabelAdminEmail
-                } } = this.state;
+                } } = this.props;
 
          return userEmail !== whitelabelAdminEmail && !pieceCount;
     },
@@ -57,25 +31,23 @@ let CylandPieceList = React.createClass({
         setDocumentTitle(getLangText('Collection'));
 
         return (
-            <div>
+            <PieceList
-                <PieceList
+                {...this.props}
-                    redirectTo={{
+                accordionListItemType={CylandAccordionListItem}
-                        pathname: '/register_piece',
+                filterParams={[{
-                        query: {
+                    label: getLangText('Show works I have'),
-                            'slide_num': 0
+                    items: [{
-                        }
+                        key: 'acl_loaned',
-                    }}
+                        label: getLangText('loaned to Cyland')
-                    shouldRedirect={this.shouldRedirect}
+                    }]
-                    accordionListItemType={CylandAccordionListItem}
+                }]}
-                    filterParams={[{
+                redirectTo={{
-                        label: getLangText('Show works I have'),
+                    pathname: '/register_piece',
-                        items: [{
+                    query: {
-                            key: 'acl_loaned',
+                        'slide_num': 0
-                            label: getLangText('loaned to Cyland')
+                    }
-                        }]
+                }}
-                    }]}
+                shouldRedirect={this.shouldRedirect} />
-                    location={this.props.location}/>
-            </div>
         );
     }
 });

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -10,17 +10,9 @@ import Row from 'react-bootstrap/lib/Row';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 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';
 
@@ -30,6 +22,7 @@ import GlobalNotificationActions from '../../../../../actions/global_notificatio
 import CylandAdditionalDataForm from './cyland_forms/cyland_additional_data_form';
 
 import LoanForm from '../../../../ascribe_forms/form_loan';
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
@@ -43,6 +36,11 @@ import { getAclFormMessage } from '../../../../../utils/form_utils';
 
 let CylandRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -50,10 +48,8 @@ let CylandRegisterPiece = React.createClass({
 
     getInitialState(){
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getInitialState(),
-            WhitelabelStore.getState(),
             {
                 step: 0
             });
@@ -61,11 +57,7 @@ let CylandRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         const queryParams = this.props.location.query;
 
@@ -83,9 +75,7 @@ let CylandRegisterPiece = React.createClass({
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -139,8 +129,8 @@ let CylandRegisterPiece = React.createClass({
     },
 
     render() {
-        const { location } = this.props;
+        const { currentUser, location, whitelabel } = this.props;
-        const { currentUser, piece, step, whitelabel } = this.state;
+        const { piece, step } = this.state;
 
         const today = new Moment();
         const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment().add(1000, 'years');
@@ -180,13 +170,13 @@ let CylandRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
+                                {...this.props}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Submit to Cyland Archive')}
-                                submitMessage={getLangText('Submit')}
-                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location} />
+                                headerMessage={getLangText('Submit to Cyland Archive')}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Submit')} />
                         </Col>
                     </Row>
                 </div>

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,29 +21,26 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let IkonotvAccordionListItem = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
+        content: React.PropTypes.object.isRequired,
-        content: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     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) {
@@ -57,41 +52,43 @@ let IkonotvAccordionListItem = React.createClass({
 
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, 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>
@@ -101,22 +98,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;
+        );
-        }
     }
 });
 

js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js

@@ -6,49 +6,42 @@ import { History } from 'react-router';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
 
-import NotificationActions from '../../../../../actions/notification_actions';
-import NotificationStore from '../../../../../stores/notification_store';
-
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
-import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
-
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
+import NotificationActions from '../../../../../actions/notification_actions';
+import NotificationStore from '../../../../../stores/notification_store';
 
+import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
+
+import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
 import Property from '../../../../ascribe_forms/property';
 
 import AppConstants from '../../../../../constants/application_constants';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 
 
 let IkonotvContractNotifications = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
 
     mixins: [History],
 
     getInitialState() {
-        return mergeOptions(
+        return NotificationStore.getState();
-            NotificationStore.getState(),
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
+
-        UserActions.fetchCurrentUser();
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
         if (this.state.contractAgreementListNotifications === null){
             NotificationActions.fetchContractAgreementListNotifications();
         }
@@ -56,7 +49,6 @@ let IkonotvContractNotifications = React.createClass({
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -64,8 +56,9 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     getContract(){
-        let notifications = this.state.contractAgreementListNotifications[0];
+        const notifications = this.state.contractAgreementListNotifications[0];
-        let blob = notifications.contract_agreement.contract.blob;
+        const blob = notifications.contract_agreement.contract.blob;
+
         if (blob.mime === 'pdf') {
             return (
                 <div className='notification-contract-pdf'>
@@ -76,22 +69,24 @@ let IkonotvContractNotifications = React.createClass({
                         pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
                 </div>
             );
+        } else {
+            return (
+                <div className='notification-contract-download'>
+                    <a href={blob.url_safe} target="_blank">
+                        <Glyphicon glyph='download-alt'/>
+                        <span style={{padding: '0.3em'}}>
+                            {getLangText('Download contract')}
+                        </span>
+                    </a>
+                </div>
+            );
         }
-        return (
-            <div className='notification-contract-download'>
-                <a href={blob.url_safe} target="_blank">
-                    <Glyphicon glyph='download-alt'/>
-                    <span style={{padding: '0.3em'}}>
-                        Download contract
-                    </span>
-                </a>
-            </div>
-        );
     },
 
     getAppendix() {
-        let notifications = this.state.contractAgreementListNotifications[0];
+        const notifications = this.state.contractAgreementListNotifications[0];
-        let appendix = notifications.contract_agreement.appendix;
+        const appendix = notifications.contract_agreement.appendix;
+
         if (appendix && appendix.default) {
             return (
                 <Property
@@ -100,19 +95,20 @@ let IkonotvContractNotifications = React.createClass({
                     <pre className="ascribe-pre">{appendix.default}</pre>
                 </Property>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     handleConfirm() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .confirmContractAgreement(contractAgreement)
             .then(this.handleConfirmSuccess);
     },
 
     handleConfirmSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // Flush contract notifications and refetch
@@ -123,22 +119,23 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     handleDeny() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .denyContractAgreement(contractAgreement)
             .then(this.handleDenySuccess);
     },
 
     handleDenySuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
         this.history.push('/collection');
     },
 
     getCopyrightAssociationForm(){
-        let currentUser = this.state.currentUser;
+        const { currentUser } = this.props;
 
-        if (currentUser && currentUser.profile && !currentUser.profile.copyright_association) {
+        if (currentUser.profile && !currentUser.profile.copyright_association) {
             return (
                 <div className='notification-contract-footer'>
                     <h1>{getLangText('Are you a member of any copyright societies?')}</h1>
@@ -149,24 +146,26 @@ let IkonotvContractNotifications = React.createClass({
                     <CopyrightAssociationForm currentUser={currentUser}/>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
+        const { whitelabel } = this.props;
+        const { contractAgreementListNotifications } = this.state;
+
         setDocumentTitle(getLangText('Contacts notifications'));
 
-        if (this.state.contractAgreementListNotifications &&
+        if (contractAgreementListNotifications && contractAgreementListNotifications.length) {
-            this.state.contractAgreementListNotifications.length > 0) {
+            const notifications = contractAgreementListNotifications[0];
-
+            const blob = notifications.contract_agreement.contract.blob;
-            let notifications = this.state.contractAgreementListNotifications[0];
-            let blob = notifications.contract_agreement.contract.blob;
 
             return (
                 <div className='container'>
                     <div className='notification-contract-wrapper'>
                         <div className='notification-contract-logo'>
-                            <img src={this.state.whitelabel.logo}/>
+                            <img src={whitelabel.logo} />
                             <div className='notification-contract-header'>
                                 {getLangText('Contract')}
                             </div>
@@ -178,7 +177,7 @@ let IkonotvContractNotifications = React.createClass({
                                 <a href={blob.url_safe} target="_blank">
                                     <Glyphicon glyph='download-alt'/>
                                     <span style={{padding: '0.3em'}}>
-                                        Download PDF version
+                                        {getLangText('Download PDF version')}
                                     </span>
                                 </a>
                             </div>
@@ -195,8 +194,9 @@ let IkonotvContractNotifications = React.createClass({
                     </div>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 

js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js

@@ -3,29 +3,27 @@
 import React from 'react';
 import { History } from 'react-router';
 
-import PieceActions from '../../../../../../actions/piece_actions';
+import EditionListActions from '../../../../../../actions/edition_list_actions';
-import PieceStore from '../../../../../../stores/piece_store';
 
-import UserStore from '../../../../../../stores/user_store';
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import EditionListActions from '../../../../../../actions/edition_list_actions';
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
 
 import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
 
-import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
-
 import IkonotvArtistDetailsForm from '../ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from '../ikonotv_forms/ikonotv_artwork_details_form';
 
 import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
 
-import AscribeSpinner from '../../../../../ascribe_spinner';
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import AscribeSpinner from '../../../../../ascribe_spinner';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@@ -34,6 +32,12 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let IkonotvPieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -41,15 +45,13 @@ let IkonotvPieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            PieceStore.getInitialState(),
+            PieceListStore.getState(),
-            UserStore.getState(),
+            PieceStore.getInitialState()
-            PieceListStore.getState()
         );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
         this.loadPiece();
@@ -65,7 +67,6 @@ let IkonotvPieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
     },
 
@@ -94,6 +95,7 @@ let IkonotvPieceContainer = React.createClass({
     },
 
     render() {
+        const { currentUser } = this.props;
         const { piece } = this.state;
 
         let furtherDetails = (
@@ -127,7 +129,7 @@ let IkonotvPieceContainer = React.createClass({
             return (
                 <WalletPieceContainer
                     piece={piece}
-                    currentUser={this.state.currentUser}
+                    currentUser={currentUser}
                     loadPiece={this.loadPiece}
                     handleDeleteSuccess={this.handleDeleteSuccess}
                     submitButtonType={IkonotvSubmitButton}>

js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js

@@ -6,47 +6,32 @@ import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let IkonotvLanding = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         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);
-    },
-
     getEnterButton() {
+        const { currentUser, location } = this.props;
         let redirect = '/login';
 
-        if(this.state.currentUser && this.state.currentUser.email) {
+        if (currentUser.email) {
             redirect = '/collection';
-        }
+        } else if (location.query.redirect) {
-        else if (this.props.location.query && this.props.location.query.redirect) {
+            redirect = '/' + location.query.redirect;
-            redirect = '/' + this.props.location.query.redirect;
         }
 
         return (
-            <LinkContainer to={redirect} query={this.props.location.query}>
+            <LinkContainer to={redirect} query={location.query}>
                 <Button>
                     {getLangText('ENTER TO START')}
                 </Button>

js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js

@@ -4,47 +4,34 @@ import React from 'react';
 
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
 import NotificationStore from '../../../../../stores/notification_store';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
 
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvPieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
+        return NotificationStore.getState();
-            NotificationStore.getState(),
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -52,11 +39,11 @@ let IkonotvPieceList = React.createClass({
     },
 
     shouldRedirect(pieceCount) {
-        const { contractAgreementListNotifications,
+        const { currentUser: { email: userEmail },
-                currentUser: { email: userEmail },
                 whitelabel: {
                     user: whitelabelAdminEmail
-                } } = this.state;
+                } } = this.props;
+        const { contractAgreementListNotifications } = this.state;
 
         return contractAgreementListNotifications &&
                !contractAgreementListNotifications.length &&
@@ -70,13 +57,7 @@ let IkonotvPieceList = React.createClass({
         return (
             <div>
                 <PieceList
-                    redirectTo={{
+                    {...this.props}
-                        pathname: '/register_piece',
-                        query: {
-                            'slide_num': 0
-                        }
-                    }}
-                    shouldRedirect={this.shouldRedirect}
                     accordionListItemType={IkonotvAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
@@ -91,7 +72,13 @@ let IkonotvPieceList = React.createClass({
                             }
                         ]
                     }]}
-                    location={this.props.location}/>
+                    redirectTo={{
+                        pathname: '/register_piece',
+                        query: {
+                            'slide_num': 0
+                        }
+                    }}
+                    shouldRedirect={this.shouldRedirect} />
             </div>
         );
     }

js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js

@@ -10,24 +10,18 @@ import Row from 'react-bootstrap/lib/Row';
 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 WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
-import LoanForm from '../../../../ascribe_forms/form_loan';
-
 import IkonotvArtistDetailsForm from './ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from './ikonotv_forms/ikonotv_artwork_details_form';
 
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+import LoanForm from '../../../../ascribe_forms/form_loan';
+
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
 import ApiUrls from '../../../../../constants/api_urls';
@@ -39,31 +33,31 @@ import { getLangText } from '../../../../../utils/lang_utils';
 let IkonotvRegisterPiece = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func,
-        piece: React.PropTypes.object.isRequired,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
-    getInitialState(){
+    getInitialState() {
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getInitialState(),
-            WhitelabelStore.getState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
-            });
+            }
+        );
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         const queryParams = this.props.location.query;
 
@@ -81,9 +75,7 @@ let IkonotvRegisterPiece = React.createClass({
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        WhitelabelStore.listen(this.onChange);
     },
 
     onChange(state) {
@@ -144,8 +136,7 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     canSubmit() {
-        let currentUser = this.state.currentUser;
+        const { currentUser, whitelabel } = this.props;
-        let whitelabel = this.state.whitelabel;
         return currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel.user;
     },
 
@@ -187,7 +178,8 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
-            const { piece, whitelabel } = this.state;
+            const { whitelabel } = this.props;
+            const { piece } = this.state;
             const today = new Moment();
             const endDate = new Moment().add(2, 'years');
 
@@ -218,7 +210,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     render() {
-        const { pageExitWarning } = this.state;
+        const { location } = this.props;
+        const { pageExitWarning, step } = this.state;
 
         return (
             <SlidesContainer
@@ -228,19 +221,19 @@ let IkonotvRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}
+                location={location}
                 pageExitWarning={pageExitWarning}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                disabled={this.state.step > 0}
+                                {...this.props}
+                                disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Register work')}
-                                submitMessage={getLangText('Register')}
-                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location} />
+                                headerMessage={getLangText('Register work')}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Register')} />
                         </Col>
                     </Row>
                 </div>

js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js

@@ -5,46 +5,31 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let LumenusLanding = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
-    getInitialState() {
+        // Provided from router
-        return mergeOptions(
+        location: React.PropTypes.object
-            WhitelabelStore.getState()
-        );
     },
 
     componentWillMount() {
         setDocumentTitle('Lumenus Marketplace');
     },
 
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         return (
             <div className="container ascribe-form-wrapper">
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.state.whitelabel.logo} width="150px"/>
+                            <img src={this.props.whitelabel.logo} height="150" />
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
                                 <span>

js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js

@@ -9,63 +9,52 @@ import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
 import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
 import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
 
-import UserActions from '../../../../../../actions/user_actions';
+import { selectFromObject } from '../../../../../../utils/general_utils';
-import UserStore from '../../../../../../stores/user_store';
 
 let MarketAclButtonList = React.createClass({
     propTypes: {
         availableAcls: React.PropTypes.object.isRequired,
-        className: React.PropTypes.string,
+        currentUser: React.PropTypes.object.isRequired,
-        pieceOrEditions: React.PropTypes.array,
+        handleSuccess: React.PropTypes.func.isRequired,
-        handleSuccess: React.PropTypes.func,
+        pieceOrEditions: React.PropTypes.array.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
-    },
+        className: React.PropTypes.string
-
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     render() {
-        let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
+        const {
+            availableAcls,
+            children,
+            className,
+            currentUser,
+            handleSuccess,
+            pieceOrEditions,
+            whitelabel } = this.props;
+
+        const buttonProps = selectFromObject(this.props, [
+            'availableAcls',
+            'currentUser',
+            'handleSuccess',
+            'pieceOrEditions'
+        ]);
+
         return (
             <div className={className}>
                 <MarketSubmitButton
                     availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
+                    currentUser={currentUser}
                     editions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
+                    handleSuccess={handleSuccess}
-                <EmailButton
+                    whitelabel={whitelabel} />
-                    availableAcls={availableAcls}
+                <EmailButton {...buttonProps} />
-                    currentUser={this.state.currentUser}
+                <TransferButton {...buttonProps} />
-                    pieceOrEditions={pieceOrEditions}
+                <UnconsignButton {...buttonProps} />
-                    handleSuccess={handleSuccess} />
+                {children}
-                <TransferButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    pieceOrEditions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                <UnconsignButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    pieceOrEditions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                {this.props.children}
             </div>
         );
     }

js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js

@@ -5,9 +5,6 @@ import classNames from 'classnames';
 
 import EditionActions from '../../../../../../actions/edition_actions';
 
-import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../../stores/whitelabel_store';
-
 import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
 
 import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
@@ -16,7 +13,6 @@ import ConsignForm from '../../../../../ascribe_forms/form_consign';
 import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
 
 import AclProxy from '../../../../../acl_proxy';
-import AscribeSpinner from '../../../../../ascribe_spinner';
 
 import ApiUrls from '../../../../../../constants/api_urls';
 
@@ -26,31 +22,14 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 let MarketSubmitButton = React.createClass({
     propTypes: {
         availableAcls: React.PropTypes.object.isRequired,
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         editions: React.PropTypes.array.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         className: React.PropTypes.string,
         handleSuccess: React.PropTypes.func
     },
 
-    getInitialState() {
-        return WhitelabelStore.getState();
-    },
-
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     canEditionBeSubmitted(edition) {
         if (edition && edition.extra_data && edition.other_data) {
             const {
@@ -99,8 +78,14 @@ let MarketSubmitButton = React.createClass({
     },
 
     render() {
-        const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
+        const {
-        const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
+            availableAcls,
+            currentUser,
+            className,
+            editions,
+            handleSuccess,
+            whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.props;
+
         const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
         const message = getAclFormMessage({
             aclName: 'acl_consign',
@@ -119,6 +104,7 @@ let MarketSubmitButton = React.createClass({
                 {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
             </button>
         );
+
         const consignForm = (
             <AclFormFactory
                 action='acl_consign'

js/components/whitelabel/wallet/components/market/market_piece_list.js

@@ -6,11 +6,6 @@ import MarketAclButtonList from './market_buttons/market_acl_button_list';
 
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -18,45 +13,26 @@ import { getLangText } from '../../../../../utils/lang_utils';
 let MarketPieceList = React.createClass({
     propTypes: {
         customThumbnailPlaceholder: React.PropTypes.func,
-        location: React.PropTypes.object
-    },
 
-    getInitialState() {
+        // Provided from PrizeApp
-        return mergeOptions(
+        currentUser: React.PropTypes.object.isRequired,
-            UserStore.getState(),
+        whitelabel: React.PropTypes.object.isRequired,
-            WhitelabelStore.getState()
+
-        );
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     componentWillMount() {
         setDocumentTitle(getLangText('Collection'));
     },
 
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { customThumbnailPlaceholder, location } = this.props;
         const {
             currentUser: { email: userEmail },
             whitelabel: {
                 name: whitelabelName = 'Market',
                 user: whitelabelAdminEmail
-            } } = this.state;
+            } } = this.props;
 
         let filterParams = null;
         let isUserAdmin = null;
@@ -78,6 +54,7 @@ let MarketPieceList = React.createClass({
 
         return (
             <PieceList
+                {...this.props}
                 canLoadPieceList={canLoadPieceList}
                 redirectTo={{
                     pathname: '/register_piece',
@@ -87,9 +64,7 @@ let MarketPieceList = React.createClass({
                 }}
                 shouldRedirect={(pieceCount) => !isUserAdmin && !pieceCount}
                 bulkModalButtonListType={MarketAclButtonList}
-                customThumbnailPlaceholder={customThumbnailPlaceholder}
+                filterParams={filterParams} />
-                filterParams={filterParams}
-                location={location} />
         );
     }
 });

js/components/whitelabel/wallet/components/market/market_register_piece.js

@@ -6,17 +6,11 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import PieceStore from '../../../../../stores/piece_store';
-import PieceActions from '../../../../../actions/piece_actions';
-
 import PieceListStore from '../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../actions/piece_list_actions';
 
-import UserStore from '../../../../../stores/user_store';
+import PieceStore from '../../../../../stores/piece_store';
-import UserActions from '../../../../../actions/user_actions';
+import PieceActions from '../../../../../actions/piece_actions';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
 import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
 
@@ -31,6 +25,11 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 
 let MarketRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -40,8 +39,6 @@ let MarketRegisterPiece = React.createClass({
         return mergeOptions(
             PieceListStore.getState(),
             PieceStore.getInitialState(),
-            UserStore.getState(),
-            WhitelabelStore.getState(),
             {
                 step: 0
             });
@@ -50,11 +47,6 @@ let MarketRegisterPiece = React.createClass({
     componentDidMount() {
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         const queryParams = this.props.location.query;
 
@@ -70,8 +62,6 @@ let MarketRegisterPiece = React.createClass({
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -111,12 +101,12 @@ let MarketRegisterPiece = React.createClass({
     },
 
     render() {
-        const { location } = this.props;
+        const {
-        const { piece,
+            location,
-                step,
+            whitelabel: {
-                whitelabel: {
+                name: whitelabelName = 'Market'
-                    name: whitelabelName = 'Market'
+            } } = this.props
-                } } = this.state;
+        const { piece, step } = this.state;
 
         setDocumentTitle(getLangText('Register a new piece'));
 
@@ -133,14 +123,14 @@ let MarketRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
+                                {...this.props}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Consign to %s', whitelabelName)}
-                                submitMessage={getLangText('Proceed to additional details')}
-                                isFineUploaderActive={true}
                                 enableSeparateThumbnail={false}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location}>
+                                headerMessage={getLangText('Consign to %s', whitelabelName)}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Proceed to additional details')}>
                                 <Property
                                     name="num_editions"
                                     label={getLangText('Specify editions')}>

js/components/whitelabel/wallet/wallet_app.js

@@ -4,6 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AppBase from '../../app_base';
+import AppRouteWrapper from '../../app_route_wrapper';
 import Footer from '../../footer';
 import Header from '../../header';
 
@@ -15,11 +16,15 @@ let WalletApp = React.createClass({
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { activeRoute, children, history, routes } = this.props;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
         const path = activeRoute && activeRoute.path;
 
@@ -30,18 +35,25 @@ let WalletApp = React.createClass({
             (['cyland', 'ikonotv', 'lumenus', '23vivi']).includes(subdomain)) {
             header = (<div className="hero" />);
         } else {
-            header = (<Header routes={routes} />);
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+            );
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
         // we split the path by the first occurring slash and take the first splitter.
         return (
-            <div className={classNames('ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+            <div className={classNames('ascribe-app', 'ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
-                <div className="container ascribe-body">
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
                     {children}
-                </div>
+                </AppRouteWrapper>
                 <Footer activeRoute={activeRoute} />
             </div>
         );

js/components/whitelabel/wallet/wallet_routes.js

@@ -49,7 +49,7 @@ let ROUTES = {
     'cyland': (
         <Route path='/' component={WalletApp}>
             <IndexRoute
-                component={CylandLanding}
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(CylandLanding)}
                 hideFooter />
             <Route
                 path='login'
@@ -163,7 +163,7 @@ let ROUTES = {
     'ikonotv': (
         <Route path='/' component={WalletApp}>
             <IndexRoute
-                component={IkonotvLanding}
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(IkonotvLanding)}
                 hideFooter />
             <Route
                 path='login'

js/stores/user_store.js

@@ -1,9 +1,10 @@
 'use strict';
 
-import { altUser } from '../alt';
+import { alt, altThirdParty } from '../alt';
+
+import EventActions from '../actions/event_actions';
 
 import UserActions from '../actions/user_actions';
-
 import UserSource from '../sources/user_source';
 
 
@@ -11,11 +12,15 @@ class UserStore {
     constructor() {
         this.currentUser = {};
         this.userMeta = {
+            hasLoaded: false,
             err: null
         };
 
         this.bindActions(UserActions);
         this.registerAsync(UserSource);
+        this.exportPublicMethods({
+            hasLoaded: this.hasLoaded.bind(this)
+        });
     }
 
     onFetchCurrentUser(invalidateCache) {
@@ -28,8 +33,14 @@ class UserStore {
         this.preventDefault();
     }
 
-    onSuccessFetchCurrentUser({ users: [ user = {} ] }) {
+    onSuccessFetchCurrentUser({ users: [ user = {} ] = [] }) {
+        this.userMeta.hasLoaded = true;
         this.userMeta.err = null;
+
+        if (user.email && user.email !== this.currentUser.email) {
+            EventActions.userDidAuthenticate(user);
+        }
+
         this.currentUser = user;
     }
 
@@ -42,14 +53,27 @@ class UserStore {
     }
 
     onSuccessLogoutCurrentUser() {
-        this.userMeta.err = null;
+        EventActions.userDidLogout();
-        this.currentUser = {};
+
+        // Reset all stores back to their initial state
+        // Don't recycle the whitelabel stores since they're not dependent on login
+        alt.recycle();
+        altThirdParty.recycle();
+
+        // Since we've just logged out, we can set this store's
+        // hasLoaded flag back to true as there is no current user.
+        this.userMeta.hasLoaded = true;
     }
 
     onErrorCurrentUser(err) {
         console.logGlobal(err);
+        this.userMeta.hasLoaded = true;
         this.userMeta.err = err;
     }
+
+    hasLoaded() {
+        return this.userMeta.hasLoaded;
+    }
 }
 
-export default altUser.createStore(UserStore, 'UserStore');
+export default alt.createStore(UserStore, 'UserStore');

js/third_party/intercom_handler.js

@@ -12,25 +12,28 @@ class IntercomHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad(profile) {
+    onUserDidAuthenticate(user) {
         if (this.loaded) {
             return;
         }
 
-        /* eslint-disable */
+        window.Intercom('boot', {
-        Intercom('boot', {
-            /* eslint-enable */
             app_id: 'oboxh5w1',
-            email: profile.email,
+            email: user.email,
             subdomain: getSubdomain(),
             widget: {
                 activator: '#IntercomDefaultWidget'
-            }  
+            }
         });
         console.log('Intercom loaded');
         this.loaded = true;
     }
 
+    onUserDidLogout() {
+        // kill intercom (with fire)
+        window.Intercom('shutdown');
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(IntercomHandler, 'IntercomHandler');

js/third_party/notifications_handler.js

@@ -17,7 +17,7 @@ class NotificationsHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad() {
+    onUserDidAuthenticate() {
         if (this.loaded) {
             return;
         }
@@ -27,8 +27,9 @@ class NotificationsHandler {
             NotificationActions.fetchContractAgreementListNotifications().then(
                 (res) => {
                     if (res.notifications && res.notifications.length > 0) {
-                        this.loaded = true;
                         console.log('Contractagreement notifications loaded');
+                        this.loaded = true;
+
                         history.push('/contract_notifications');
                     }
                 }
@@ -36,6 +37,10 @@ class NotificationsHandler {
         }
         this.loaded = true;
     }
+
+    onUserDidLogout() {
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(NotificationsHandler, 'NotificationsHandler');

js/third_party/raven_handler.js

@@ -12,17 +12,22 @@ class RavenHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad(profile) {
+    onUserDidAuthenticate(user) {
         if (this.loaded) {
             return;
         }
 
         Raven.setUserContext({
-            email: profile.email
+            email: user.email
         });
         console.log('Raven loaded');
         this.loaded = true;
     }
+
+    onUserDidLogout() {
+        Raven.setUserContext();
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(RavenHandler, 'RavenHandler');

js/utils/general_utils.js

@@ -84,6 +84,8 @@ export function formatText() {
  * Checks a list of objects for key duplicates and returns a boolean
  */
 function _doesObjectListHaveDuplicates(l) {
+    let mergedList = [];
+
     l = l.map((obj) => {
         if(!obj) {
             throw new Error('The object you are trying to merge is null instead of an empty object');
@@ -92,16 +94,16 @@ function _doesObjectListHaveDuplicates(l) {
         return Object.keys(obj);
     });
 
-    // Taken from: http://stackoverflow.com/a/10865042 (but even better with rest)
+    // Taken from: http://stackoverflow.com/a/10865042
     // How to flatten an array of arrays in javascript.
     // If two objects contain the same key, then these two keys
     // will actually be represented in the merged array
-    let mergedList = [].concat(...l);
+    mergedList = mergedList.concat.apply(mergedList, l);
 
     // Taken from: http://stackoverflow.com/a/7376645/1263876
     // By casting the array to a set, and then checking if the size of the array
     // shrunk in the process of casting, we can check if there were any duplicates
-    return (new Set(mergedList)).size !== mergedList.length;
+    return new Set(mergedList).size !== mergedList.length;
 }
 
 /**
@@ -149,7 +151,7 @@ export function escapeHTML(s) {
  * Returns a copy of the given object's own and inherited enumerable
  * properties, omitting any keys that pass the given filter function.
  */
-function filterObjOnFn(obj, filterFn) {
+function applyFilterOnObject(obj, filterFn) {
     const filteredObj = {};
 
     for (let key in obj) {
@@ -162,6 +164,37 @@ function filterObjOnFn(obj, filterFn) {
     return filteredObj;
 }
 
+/**
+ * Abstraction for selectFromObject and omitFromObject
+ * for DRYness
+ * @param {boolean} isInclusion True if the filter should be for including the filtered items
+ *                              (ie. selecting only them vs omitting only them)
+ */
+function filterFromObject(obj, filter, { isInclusion = true } = {}) {
+    if (filter && filter.constructor === Array) {
+        return applyFilterOnObject(obj, isInclusion ? ((_, key) => filter.indexOf(key) < 0)
+                                                    : ((_, key) => filter.indexOf(key) >= 0));
+    } else if (filter && typeof filter === 'function') {
+        // Flip the filter fn's return if it's for inclusion
+        return applyFilterOnObject(obj, isInclusion ? (...args) => !filter(...args)
+                                                    : filter);
+    } else {
+        throw new Error('The given filter is not an array or function. Exclude aborted');
+    }
+}
+
+/**
+ * Similar to lodash's _.pick(), this returns a copy of the given object's
+ * own and inherited enumerable properties, selecting only the keys in
+ * the given array or whose value pass the given filter function.
+ * @param  {object}         obj    Source object
+ * @param  {array|function} filter Array of key names to select or function to invoke per iteration
+ * @return {object}                The new object
+*/
+export function selectFromObject(obj, filter) {
+    return filterFromObject(obj, filter);
+}
+
 /**
  * Similar to lodash's _.omit(), this returns a copy of the given object's
  * own and inherited enumerable properties, omitting any keys that are
@@ -171,15 +204,51 @@ function filterObjOnFn(obj, filterFn) {
  * @return {object}                The new object
 */
 export function omitFromObject(obj, filter) {
-    if (filter && filter.constructor === Array) {
+    return filterFromObject(obj, filter, { isInclusion: false });
-        return filterObjOnFn(obj, (_, key) => {
+}
-            return filter.indexOf(key) >= 0;
+
-        });
+/**
-    } else if (filter && typeof filter === 'function') {
+ * Recursively tests an object against a "match" object to see if the
-        return filterObjOnFn(obj, filter);
+ * object is similar to the "match" object. In other words, this will
-    } else {
+ * deeply traverse the "match" object's properties and check them
-        throw new Error('The given filter is not an array or function. Exclude aborted');
+ * against the object by using the testFn.
+ *
+ * The object is considered a match if all primitive properties in the
+ * "match" object are found and accepted in the object by the testFn.
+ *
+ * @param  {object}     obj    Object to test
+ * @param  {object}     match  "Match" object to test against
+ * @param  {(function)} testFn Function to use on each property test.
+ *                             Return true to accept the match.
+ *                             By default, applies strict equality using ===
+ * @return {boolean}           True if obj matches the "match" object
+ */
+export function deepMatchObject(obj, match, testFn) {
+    if (typeof match !== 'object') {
+        throw new Error('Your specified match argument was not an object');
     }
+
+    if (typeof testFn !== 'function') {
+        testFn = (objProp, matchProp) => {
+            return objProp === matchProp;
+        };
+    }
+
+    return Object
+            .keys(match)
+            .reduce((result, matchKey) => {
+                if (!result) { return false; }
+
+                const objProp = obj[matchKey];
+                const matchProp = match[matchKey];
+
+                if (typeof matchProp === 'object') {
+                    return (typeof objProp === 'object') ? deepMatchObject(objProp, matchProp, testFn)
+                                                         : false;
+                } else {
+                    return testFn(objProp, matchProp);
+                }
+            }, true);
 }
 
 /**

package.json

@@ -20,16 +20,16 @@
     "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
-    "vi-test": "npm run vi-test:base || true",
+    "vi-test": "npm run -s vi-test:base",
     "vi-test:base": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat",
-    "vi-test:all": "npm run vi-test",
+    "vi-test:all": "npm run -s vi-test",
-    "vi-test:main": "npm run vi-test:base -- --browser MainDesktop --browser MainMobile || true",
+    "vi-test:main": "npm run -s vi-test:base -- --browser MainDesktop --browser MainMobile",
-    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test:base || true",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run -s vi-test:base",
-    "vi-test:cc": "npm run vi-test:base -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cc": "npm run -s vi-test:base -- --browser CcDesktop --browser CcMobile",
-    "vi-test:cyland": "npm run vi-test:base -- --browser CylandDesktop --browser CylandMobile || true",
+    "vi-test:cyland": "npm run -s vi-test:base -- --browser CylandDesktop --browser CylandMobile",
-    "vi-test:ikonotv": "npm run vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile || true",
+    "vi-test:ikonotv": "npm run -s vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile",
-    "vi-test:lumenus": "npm run vi-test:base -- --browser LumenusDesktop --browser LumenusMobile || true",
+    "vi-test:lumenus": "npm run -s vi-test:base -- --browser LumenusDesktop --browser LumenusMobile",
-    "vi-test:23vivi": "npm run vi-test:base -- --browser 23viviDesktop --browser 23viviMobile || true"
+    "vi-test:23vivi": "npm run -s vi-test:base -- --browser 23viviDesktop --browser 23viviMobile"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -40,7 +40,6 @@ $vivi23--highlight-color: #de2600;
             .vivi23-landing--header-logo {
                 margin-top: 1em;
                 margin-bottom: 2em;
-                height: 75px;
             }
         }
 

test/gemini/tests/main/authenticated.js

@@ -15,9 +15,7 @@ gemini.suite('Authenticated', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.app',
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
-            // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
         });
 
     // Suite just to log us in before any other suites run
@@ -166,9 +164,15 @@ gemini.suite('Authenticated', (suite) => {
     gemini.suite('Register work', (registerSuite) => {
         registerSuite
             .setUrl('/register_piece')
+            .before((actions, find) => {
+                // The editions options are only rendered after the whitelabel is fetched, so
+                // we have to wait for it here
+                // We have to check for the sibling checkbox class as the input itself is hidden
+                actions.waitForElementToShow('.ascribe-form input[name="num_editions-checkbox"] ~ .checkbox', TIMEOUTS.NORMAL);
+            })
             .capture('register work', (actions, find) => {
                 // The uploader options are only rendered after the user is fetched, so
-                // we have to wait for it here
+                // we also have to wait for it here
                 actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', TIMEOUTS.NORMAL);
             })
             .capture('register work filled', (actions, find) => {
@@ -177,7 +181,8 @@ gemini.suite('Authenticated', (suite) => {
                 actions.sendKeys(find('.ascribe-form input[name="date_created"]'), 'date created');
             })
             .capture('register work filled with editions', (actions, find) => {
-                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                actions.click(find('.ascribe-form input[name="num_editions-checkbox"] ~ .checkbox'));
+                // Wait for transition
                 actions.wait(500);
                 actions.sendKeys(find('.ascribe-form input[name="num_editions"]'), '50');
             });

test/gemini/tests/main/basic.js

@@ -15,8 +15,7 @@ gemini.suite('Basic', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Header-desktop', (headerSuite) => {

test/gemini/tests/main/detail.js

@@ -19,9 +19,7 @@ gemini.suite('Work detail', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.app',
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
-            // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
 
             // Wait for the social media buttons to appear
             actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
@@ -58,7 +56,7 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/login')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
             })
             .capture('logged in', (actions, find) => {
                 actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
@@ -125,7 +123,7 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/logout')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
             })
             .capture('logout', (actions, find) => {
                 actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);

test/gemini/tests/whitelabel/23vivi/23vivi.js

@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('23vivi', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-body')
-        .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {

test/gemini/tests/whitelabel/cyland/cyland.js

@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Cyland', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-body')
-        .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {

test/gemini/tests/whitelabel/ikonotv/ikonotv.js

@@ -10,11 +10,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Ikonotv', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-body')
-        .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -40,13 +39,11 @@ gemini.suite('Ikonotv', (suite) => {
     // its logo to appear
     gemini.suite('Ikonotv basic', (suite) => {
         suite
-            .setCaptureElements('.ascribe-wallet-app')
+            .setCaptureElements('.ascribe-app')
             .before((actions, find) => {
                 // This will be called before every nested suite begins unless that suite
                 // also defines a `.before()`
-                // FIXME: use a more generic class for this, like just '.app',
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
-                // when we can use this file with the whitelabels
-                actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
 
                 // Wait for the forms to appear
                 actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);

test/gemini/tests/whitelabel/lumenus/lumenus.js

@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Lumenus', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-body')
-        .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {