Merge with master

.env-template

@@ -0,0 +1,3 @@
+SAUCE_USERNAME=ascribe
+SAUCE_ACCESS_KEY=
+SAUCE_DEFAULT_URL=

.eslintrc

@@ -2,7 +2,7 @@
     "parser": "babel-eslint",
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
     },
     "rules": {
         "new-cap": [2, {newIsCap: true, capIsNew: false}],

.gitignore

@@ -17,8 +17,13 @@ pids
 logs
 results
 
+build/*
+
+gemini-coverage/*
+gemini-report/*
+test/gemini/screenshots/*
+
 node_modules/*
 
-build
-
 .DS_Store
+.env

README.md

@@ -1,17 +1,18 @@
 Introduction
 ============
 
-Onion is the web client for Ascribe. The idea is to have a well documented,
+Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.
-easy to test, easy to hack, JavaScript application.
 
-The code is JavaScript ECMA 6.
+The code is JavaScript 2015 / ECMAScript 6.
 
 
 Getting started
 ===============
+
 Install some nice extension for Chrom(e|ium):
 
 - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
 
 ```bash
 git clone git@github.com:ascribe/onion.git
@@ -37,43 +38,62 @@ Additionally, to work on the white labeling functionality, you need to edit your
 
 JavaScript Code Conventions
 ===========================
+
 For this project, we're using:
 
 * 4 Spaces
-* We use ES6
+* ES6
 * We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
 * We don't use camel case for file naming but in everything Javascript related
-* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
+* We use `momentjs` instead of Javascript's `Date` object, as the native `Date` interface previously introduced bugs and we're including `momentjs` for other dependencies anyway
-* We don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
 
-Branch names
+Make sure to check out the [style guide](https://github.com/ascribe/javascript).
-=====================
-Since we moved to Github, we cannot create branch names automatically with JIRA anymore.
-To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion.
 
-```
+Linting
-AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
+-------
-```
 
-where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title.
+We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
-This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind.
 
-Example
--------------
-**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
-
-**Github branch name:** `AD-1242-caching-solution-for-stores`
 
 SCSS Code Conventions
 =====================
+
 Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
 
 Some interesting links:
 * [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
 
 
+Branch names
+============
+
+To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:
+
+```
+// For issues logged in Github:
+AG-<Github-issue-id>-brief-and-sane-description-of-the-ticket
+
+// For issues logged in JIRA:
+AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
+```
+
+where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
+
+
+Example
+-------
+
+**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
+
+**Github branch name:** `AD-1242-caching-solution-for-stores`
+
+
 Testing
-===============
+=======
+
+Unit Testing
+------------
+
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.
 
 Tests are always created per directory by creating a `__tests__` folder. To test a specific file, a `<file_name>_tests.js` file needs to be created.
@@ -83,7 +103,24 @@ This is due to the fact that jest's function mocking and ES6 module syntax are [
 
 Therefore, to require a module in your test file, you need to use CommonJS's `require` syntax. Except for this, all tests can be written in ES6 syntax.
 
-## Workflow
+Visual Regression Testing
+-------------------------
+
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
+
+See the [helper docs](test/gemini/README.md) for information on installing Gemini, its dependencies, and running and writing tests.
+
+Integration Testing
+-------------------
+
+We're using [Sauce Labs](https://saucelabs.com/home) with [WD.js](https://github.com/admc/wd) for integration testing across browser grids with Selenium.
+
+See the [helper docs](test/integration/README.md) for information on each part of the test stack and how to run and write tests.
+
+
+Workflow
+========
+
 Generally, when you're runing `gulp serve`, all tests are being run.
 If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
 
@@ -134,9 +171,16 @@ A: Easily by starting the your gulp process with the following command:
 ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
 ```
 
+Or, by adding these two your environment variables:
+```
+ONION_BASE_URL='/'
+ONION_SERVER_URL='http://localhost.com:8000/'
+```
+
 Q: I want to know all dependencies that get bundled into the live build.
 A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
 
+
 Reading list
 ============
 
@@ -149,7 +193,6 @@ Start here
 - [alt.js](http://alt.js.org/)
 - [alt.js readme](https://github.com/goatslacker/alt)
 
-
 Moar stuff
 ----------
 

gulpfile.js

@@ -97,7 +97,8 @@ gulp.task('browser-sync', function() {
         proxy: 'http://localhost:4000',
         port: 3000,
         open: false, // does not open the browser-window anymore (handled manually)
-        ghostMode: false
+        ghostMode: false,
+        notify: false // stop showing the browsersync pop up
     });
 });
 

js/actions/coa_actions.js

@@ -1,51 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-import CoaFetcher from '../fetchers/coa_fetcher';
-
-import Q from 'q';
-
-class CoaActions {
-    constructor() {
-        this.generateActions(
-            'updateCoa',
-            'flushCoa'
-        );
-    }
-
-    fetchOrCreate(id, bitcoinId) {
-        return Q.Promise((resolve, reject) => {
-            CoaFetcher.fetchOne(id)
-                .then((res) => {
-                    if (res.coa) {
-                        this.actions.updateCoa(res.coa);
-                        resolve(res.coa);
-                    }
-                    else {
-                        this.actions.create(bitcoinId);
-                    }
-                })
-                .catch((err) => {
-                    console.logGlobal(err);
-                    this.actions.updateCoa(null);
-                    reject(err);
-                });
-        });
-    }
-
-    create(bitcoinId) {
-        return Q.Promise((resolve, reject) => {
-            CoaFetcher.create(bitcoinId)
-                .then((res) => {
-                    this.actions.updateCoa(res.coa);
-                })
-                .catch((err) => {
-                    console.logGlobal(err);
-                    this.actions.updateCoa(null);
-                    reject(err);
-                });
-        });
-    }
-}
-
-export default alt.createActions(CoaActions);

js/actions/contract_agreement_list_actions.js

@@ -83,9 +83,9 @@ class ContractAgreementListActions {
                     contractAgreementList in the store is already set to null;
                      */
                 }
-            }).then((publicContracAgreement) => {
+            }).then((publicContractAgreement) => {
-                if (publicContracAgreement) {
+                if (publicContractAgreement) {
-                    this.actions.updateContractAgreementList([publicContracAgreement]);
+                    this.actions.updateContractAgreementList([publicContractAgreement]);
                 }
             }).catch(console.logGlobal);
     }
@@ -93,7 +93,10 @@ class ContractAgreementListActions {
     createContractAgreement(issuer, contract){
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher
-                .createContractAgreement(issuer, contract).then(resolve)
+                .createContractAgreement(issuer, contract)
+                .then((res) => {
+                    resolve(res && res.contractagreement)
+                })
                 .catch((err) => {
                     console.logGlobal(err);
                     reject(err);

js/actions/contract_list_actions.js

@@ -31,9 +31,7 @@ class ContractListActions {
     changeContract(contract) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.changeContract(contract)
-                .then((res) => {
+                .then(resolve)
-                    resolve(res);
-                })
                 .catch((err)=> {
                     console.logGlobal(err);
                     reject(err);
@@ -44,9 +42,7 @@ class ContractListActions {
     removeContract(contractId) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.deleteContract(contractId)
-                .then((res) => {
+                .then(resolve)
-                    resolve(res);
-                })
                 .catch((err) => {
                     console.logGlobal(err);
                     reject(err);

js/actions/edition_actions.js

@@ -1,27 +1,19 @@
 'use strict';
 
 import { alt } from '../alt';
-import EditionFetcher from '../fetchers/edition_fetcher';
 
 
 class EditionActions {
     constructor() {
         this.generateActions(
-            'updateEdition',
+            'fetchEdition',
-            'editionFailed'
+            'successFetchCoa',
+            'successFetchEdition',
+            'errorCoa',
+            'errorEdition',
+            'flushEdition'
         );
     }
-
-    fetchOne(editionId) {
-        EditionFetcher.fetchOne(editionId)
-            .then((res) => {
-                this.actions.updateEdition(res.edition);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                this.actions.editionFailed(err.json);
-            });
-    }
 }
 
 export default alt.createActions(EditionActions);

js/actions/edition_list_actions.js

@@ -17,7 +17,7 @@ class EditionListActions {
         );
     }
 
-    fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
+    fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) {
         if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
             orderBy = 'edition_number';
             orderAsc = true;
@@ -29,9 +29,17 @@ class EditionListActions {
             pageSize = 10;
         }
 
+        let itemsToFetch = pageSize;
+        // If we only want to fetch up to a specified edition, fetch all pages up to it
+        // as one page and adjust afterwards
+        if (typeof maxEdition === 'number') {
+            itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize;
+            page = 1;
+        }
+
         return Q.Promise((resolve, reject) => {
             EditionListFetcher
-                .fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
+                .fetch({ pieceId, page, orderBy, orderAsc, filterBy, pageSize: itemsToFetch })
                 .then((res) => {
                     if (res && !res.editions) {
                         throw new Error('Piece has no editions to fetch.');
@@ -44,8 +52,9 @@ class EditionListActions {
                         orderBy,
                         orderAsc,
                         filterBy,
-                        'editionListOfPiece': res.editions,
+                        maxEdition,
-                        'count': res.count
+                        count: res.count,
+                        editionListOfPiece: res.editions
                     });
                     resolve(res);
                 })
@@ -54,7 +63,6 @@ class EditionListActions {
                     reject(err);
                 });
         });
-        
     }
 }
 

js/actions/event_actions.js

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

js/actions/facebook_actions.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import { altThirdParty } from '../alt';
+
+
+class FacebookActions {
+    constructor() {
+        this.generateActions(
+            'sdkReady'
+        );
+    }
+}
+
+export default altThirdParty.createActions(FacebookActions);

js/actions/notification_actions.js

@@ -9,10 +9,13 @@ class NotificationActions {
     constructor() {
         this.generateActions(
             'updatePieceListNotifications',
+            'flushPieceListNotifications',
             'updateEditionListNotifications',
+            'flushEditionListNotifications',
             'updateEditionNotifications',
             'updatePieceNotifications',
-            'updateContractAgreementListNotifications'
+            'updateContractAgreementListNotifications',
+            'flushContractAgreementListNotifications'
         );
     }
 

js/actions/piece_actions.js

@@ -1,28 +1,19 @@
 'use strict';
 
 import { alt } from '../alt';
-import PieceFetcher from '../fetchers/piece_fetcher';
 
 
 class PieceActions {
     constructor() {
         this.generateActions(
+            'fetchPiece',
+            'successFetchPiece',
+            'errorPiece',
+            'flushPiece',
             'updatePiece',
-            'updateProperty',
+            'updateProperty'
-            'pieceFailed'
         );
     }
-
-    fetchOne(pieceId) {
-        PieceFetcher.fetchOne(pieceId)
-            .then((res) => {
-                this.actions.updatePiece(res.piece);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                this.actions.pieceFailed(err.json);
-            });
-    }
 }
 
 export default alt.createActions(PieceActions);

js/actions/piece_list_actions.js

@@ -15,7 +15,7 @@ class PieceListActions {
         );
     }
 
-    fetchPieceList(page, pageSize, search, orderBy, orderAsc, filterBy) {
+    fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
         // To prevent flickering on a pagination request,
         // we overwrite the piecelist with an empty list before
         // pieceListCount === -1 defines the loading state
@@ -34,7 +34,7 @@ class PieceListActions {
         // afterwards, we can load the list
         return Q.Promise((resolve, reject) => {
             PieceListFetcher
-                .fetch(page, pageSize, search, orderBy, orderAsc, filterBy)
+                .fetch({ page, pageSize, search, orderBy, orderAsc, filterBy })
                 .then((res) => {
                     this.actions.updatePieceList({
                         page,

js/actions/prize_list_actions.js

@@ -1,34 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-import Q from 'q';
-
-import PrizeListFetcher from '../fetchers/prize_list_fetcher';
-
-class PrizeListActions {
-    constructor() {
-        this.generateActions(
-            'updatePrizeList'
-        );
-    }
-
-    fetchPrizeList() {
-        return Q.Promise((resolve, reject) => {
-            PrizeListFetcher
-                .fetch()
-                .then((res) => {
-                    this.actions.updatePrizeList({
-                        prizeList: res.prizes,
-                        prizeListCount: res.count
-                    });
-                    resolve(res);
-                })
-                .catch((err) => {
-                    console.logGlobal(err);
-                    reject(err);
-                });
-        });
-    }
-}
-
-export default alt.createActions(PrizeListActions);

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/app.js

@@ -1,14 +1,13 @@
 'use strict';
 
-require('babel/polyfill');
+import 'babel/polyfill';
+import 'classlist-polyfill';
 
 import React from 'react';
 import { Router, Redirect } from 'react-router';
 import history from './history';
 
-/* eslint-disable */
 import fetch from 'isomorphic-fetch';
-/* eslint-enable */
 
 import ApiUrls from './constants/api_urls';
 
@@ -17,44 +16,27 @@ import getRoutes from './routes';
 import requests from './utils/requests';
 
 import { updateApiUrls } from './constants/api_urls';
-import { getSubdomainSettings } from './utils/constants_utils';
+import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
 import { initLogging } from './utils/error_utils';
 import { getSubdomain } from './utils/general_utils';
 
 import EventActions from './actions/event_actions';
 
-/* eslint-disable */
 // You can comment out the modules you don't need
-// import DebugHandler from './third_party/debug';
+// import DebugHandler from './third_party/debug_handler';
-import GoogleAnalyticsHandler from './third_party/ga';
+import FacebookHandler from './third_party/facebook_handler';
-import RavenHandler from './third_party/raven';
+import GoogleAnalyticsHandler from './third_party/ga_handler';
-import IntercomHandler from './third_party/intercom';
+import IntercomHandler from './third_party/intercom_handler';
-import NotificationsHandler from './third_party/notifications';
+import NotificationsHandler from './third_party/notifications_handler';
-import FacebookHandler from './third_party/facebook';
+import RavenHandler from './third_party/raven_handler';
-/* eslint-enable */
 
-initLogging();
 
-let headers = {
+const AppGateway = {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-};
-
-requests.defaults({
-    urlMap: ApiUrls,
-    http: {
-        headers: headers,
-        credentials: 'include'
-    }
-});
-
-class AppGateway {
     start() {
-        let settings;
-        let subdomain = getSubdomain();
-
         try {
-            settings = getSubdomainSettings(subdomain);
+            const subdomain = getSubdomain();
+            const settings = getSubdomainSettings(subdomain);
+
             AppConstants.whitelabel = settings;
             updateApiUrls(settings.type, subdomain);
             this.load(settings);
@@ -62,27 +44,24 @@ class AppGateway {
             // if there are no matching subdomains, we're routing
             // to the default frontend
             console.logGlobal(err);
-            this.load();
+            this.load(getDefaultSubdomainSettings());
-        }
         }
+    },
 
     load(settings) {
-        let type = 'default';
+        const { subdomain, type } = settings;
-        let subdomain = 'www';
         let redirectRoute = (<Redirect from="/" to="/collection" />);
 
-        if (settings) {
+        if (subdomain) {
-            type = settings.type;
+            // Some whitelabels have landing pages so we should not automatically redirect from / to /collection.
-            subdomain = settings.subdomain;
+            // Only www and cc do not have a landing page.
-        }
+            if (subdomain !== 'cc') {
-
-        // www and cc do not have a landing page
-        if(subdomain && subdomain !== 'cc') {
                 redirectRoute = null;
             }
 
             // Adds a client specific class to the body for whitelabel styling
             window.document.body.classList.add('client--' + subdomain);
+        }
 
         // Send the applicationWillBoot event to the third-party stores
         EventActions.applicationWillBoot(settings);
@@ -101,8 +80,21 @@ class AppGateway {
         // Send the applicationDidBoot event to the third-party stores
         EventActions.applicationDidBoot(settings);
     }
+};
+
+// Initialize pre-start components
+initLogging();
+
+requests.defaults({
+    urlMap: ApiUrls,
+    http: {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        credentials: 'include'
     }
+});
 
-let ag = new AppGateway();
+// And bootstrap app
-ag.start();
+AppGateway.start();
-

js/components/app_base.js

@@ -0,0 +1,90 @@
+'use strict';
+
+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({
+        displayName: 'AppBase',
+
+        propTypes: {
+            children: React.PropTypes.element.isRequired,
+            history: React.PropTypes.object.isRequired,
+            location: React.PropTypes.object.isRequired,
+            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);
+        },
+
+        componentWillReceiveProps(nextProps) {
+            const { locationQueue } = this.history;
+            locationQueue.unshift(nextProps.location);
+
+            // Limit the number of locations to keep in memory to avoid too much memory usage
+            if (locationQueue.length > AppConstants.locationThreshold) {
+                locationQueue.length = AppConstants.locationThreshold;
+            }
+        },
+
+        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).
+            const activeRoute = routes[1];
+
+            return (
+                <div>
+                    <App
+                        {...this.props}
+                        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,
@@ -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,7 +21,8 @@ let AccordionListItem = React.createClass({
     },
 
     render() {
-        const { linkData,
+        const {
+            linkData,
             className,
             thumbnail,
             heading,
@@ -31,7 +32,6 @@ let AccordionListItem = React.createClass({
             badge,
             children } = this.props;
 
-
         return (
             <div className="row">
                 <div className={className}>

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -19,9 +19,10 @@ import { getLangText } from '../../utils/lang_utils';
 
 let AccordionListItemEditionWidget = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
         piece: React.PropTypes.object.isRequired,
         toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
+
+        className: React.PropTypes.string,
         onPollingSuccess: React.PropTypes.func
     },
 
@@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({
      * Calls the store to either show or hide the editionListTable
      */
     toggleTable() {
-        let pieceId = this.props.piece.id;
+        const { piece: { id: pieceId } } = this.props;
-        let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
+        const { filterBy, isEditionListOpenForPieceId } = this.state;
+        const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false;
 
         if (isEditionListOpen) {
             EditionListActions.toggleEditionList(pieceId);
         } else {
             EditionListActions.toggleEditionList(pieceId);
-            EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy);
+            EditionListActions.fetchEditionList({ pieceId, filterBy });
         }
     },
 
@@ -118,7 +120,7 @@ let AccordionListItemEditionWidget = React.createClass({
                     <button
                         disabled
                         title={getLangText('All editions for this have been deleted already.')}
-                        className={classNames('btn', 'btn-default', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
+                        className={classNames('btn', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
                         {'0 ' + getLangText('Editions')}
                     </button>
                 );

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -12,8 +12,11 @@ import { getLangText } from '../../utils/lang_utils';
 let AccordionListItemPiece = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
-        artistName: React.PropTypes.string,
+        artistName: React.PropTypes.oneOfType([
-        piece: React.PropTypes.object,
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
+        piece: React.PropTypes.object.isRequired,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -31,11 +34,10 @@ let AccordionListItemPiece = React.createClass({
     },
 
     getLinkData() {
-        let { piece } = this.props;
+        const { piece } = this.props;
 
         if (piece && piece.first_edition) {
             return `/editions/${piece.first_edition.bitcoin_id}`;
-
         } else {
             return `/pieces/${piece.id}`;
         }
@@ -51,17 +53,21 @@ let AccordionListItemPiece = React.createClass({
             piece,
             subsubheading,
             thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
-        const { url, url_safe } = piece.thumbnail;
+        const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail;
+
+        // Display the 300x300 thumbnail if we have it, otherwise just use the safe url
+        const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl;
+
         let thumbnail;
 
         // Since we're going to refactor the thumbnail generation anyway at one point,
         // for not use the annoying ascribe_spiral.png, we're matching the url against
         // this name and replace it with a CSS version of the new logo.
-        if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
+        if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
             thumbnail = (<ThumbnailPlaceholder />);
         } else {
             thumbnail = (
-                <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
+                <div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
             );
         }
 
@@ -79,8 +85,7 @@ let AccordionListItemPiece = React.createClass({
                 subsubheading={subsubheading}
                 buttons={buttons}
                 badge={badge}
-                linkData={this.getLinkData()}
+                linkData={this.getLinkData()}>
-                >
                 {children}
             </AccordionListItem>
         );

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -66,22 +66,34 @@ let AccordionListItemTableEditions = React.createClass({
     },
 
     filterSelectedEditions() {
-        let selectedEditions = this.state.editionList[this.props.parentId]
+        return this.state
+                   .editionList[this.props.parentId]
                    .filter((edition) => edition.selected);
-        return selectedEditions;
     },
 
     loadFurtherEditions() {
+        const { parentId: pieceId } = this.props;
+        const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId];
+
         // trigger loading animation
         this.setState({
             showMoreLoading: true
         });
 
-        let editionList = this.state.editionList[this.props.parentId];
+        EditionListActions.fetchEditionList({
-        EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize,
+            pieceId,
-                                            editionList.orderBy, editionList.orderAsc, editionList.filterBy);
+            pageSize,
+            orderBy,
+            orderAsc,
+            filterBy,
+            page: page + 1
+        });
     },
     render() {
+        const { className, parentId } = this.props;
+        const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
+        const editionsForPiece = editionList[parentId];
+
         let selectedEditionsCount = 0;
         let allEditionsCount = 0;
         let orderBy;
@@ -89,9 +101,6 @@ let AccordionListItemTableEditions = React.createClass({
         let show = false;
         let showExpandOption = false;
 
-        let editionsForPiece = this.state.editionList[this.props.parentId];
-        let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
-
         // here we need to check if all editions of a specific
         // piece are already defined. Otherwise .length will throw an error and we'll not
         // be notified about it.
@@ -102,8 +111,8 @@ let AccordionListItemTableEditions = React.createClass({
             orderAsc = editionsForPiece.orderAsc;
         }
 
-        if(this.props.parentId in this.state.isEditionListOpenForPieceId) {
+        if (parentId in isEditionListOpenForPieceId) {
-            show = this.state.isEditionListOpenForPieceId[this.props.parentId].show;
+            show = isEditionListOpenForPieceId[parentId].show;
         }
 
         // if the number of editions in the array is equal to the maximum number of editions,
@@ -112,72 +121,77 @@ let AccordionListItemTableEditions = React.createClass({
             showExpandOption = true;
         }
 
-        let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() );
+        const transition = new TransitionModel({
+            to: 'editions',
+            queryKey: 'editionId',
+            valueKey: 'bitcoin_id',
+            callback: (e) => e.stopPropagation()
+        });
 
-        let columnList = [
+        const columnList = [
-            new ColumnModel(
+            new ColumnModel({
-                (item) => {
+                transformFn: (item) => {
                     return {
                         'editionId': item.id,
-                        'pieceId': this.props.parentId,
+                        'pieceId': parentId,
                         'selectItem': this.selectItem,
                         'selected': item.selected
-                    }; },
+                    };
-                    '',
+                },
+                displayElement: (
                     <AccordionListItemTableSelectAllEditionsCheckbox
                         onChange={this.toggleAllItems}
                         numOfSelectedEditions={selectedEditionsCount}
-                        numOfAllEditions={allEditionsCount}/>,
+                        numOfAllEditions={allEditionsCount}/>
-                    TableItemCheckbox,
-                    1,
-                    false
                 ),
-            new ColumnModel(
+                displayType: TableItemCheckbox,
-                (item) => {
+                rowWidth: 1
+            }),
+            new ColumnModel({
+                transition,
+                transformFn: (item) => {
                     return {
                         'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
-                    }; },
+                    };
-                    'edition_number',
+                },
-                    getLangText('Edition'),
+                columnName: 'edition_number',
-                    TableItemText,
+                displayElement: getLangText('Edition'),
-                    1,
+                displayType: TableItemText,
-                    false,
+                rowWidth: 1
-                    transition
+            }),
-            ),
+            new ColumnModel({
-            new ColumnModel(
+                transition,
-                (item) => {
+                transformFn: (item) => {
                     return {
                         'content': item.bitcoin_id
-                    }; },
+                    };
-                    'bitcoin_id',
+                },
-                    getLangText('ID'),
+                columnName: 'bitcoin_id',
-                    TableItemText,
+                displayElement: getLangText('ID'),
-                    5,
+                displayType: TableItemText,
-                    false,
+                rowWidth: 5,
+                className: 'hidden-xs visible-sm visible-md visible-lg'
+            }),
+            new ColumnModel({
                 transition,
-                    'hidden-xs visible-sm visible-md visible-lg'
+                transformFn: (item) => {
-            ),
-            new ColumnModel(
-                (item) => {
-                    let content = item.acl;
                     return {
-                        'content': content,
+                        'content': item.acl,
                         'notifications': item.notifications
-                    }; },
+                    };
-                    'acl',
+                },
-                    getLangText('Actions'),
+                columnName: 'acl',
-                    TableItemAclFiltered,
+                displayElement: getLangText('Actions'),
-                    4,
+                displayType: TableItemAclFiltered,
-                    false,
+                rowWidth: 4
-                    transition
+            })
-            )
         ];
 
-        if(show && editionsForPiece && editionsForPiece.length > 0) {
+        if (show && editionsForPiece && editionsForPiece.length) {
             return (
-                <div className={this.props.className}>
+                <div className={className}>
                     <AccordionListItemTable
-                        parentId={this.props.parentId}
+                        parentId={parentId}
                         itemList={editionsForPiece}
                         columnList={columnList}
                         show={show}
@@ -188,7 +202,14 @@ let AccordionListItemTableEditions = React.createClass({
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle"
                         onClick={this.loadFurtherEditions}
-                        message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} />
+                        message={show && showExpandOption ? (
+                                <span>
+                                    {showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
+                                                     : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
+                                    {getLangText('Show me more')}
+                                </span>
+                            ) : null
+                        } />
                 </div>
             );
         } else {

js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js

@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 

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,33 +28,32 @@ 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) {
@@ -63,16 +61,18 @@ let AccordionListItemWallet = React.createClass({
     },
 
     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" />
-                </OverlayTrigger>);
+                </OverlayTrigger>
-        }
+            );
+        } else {
             return null;
+        }
     },
 
     toggleCreateEditionsDialog() {
@@ -88,11 +88,12 @@ let AccordionListItemWallet = React.createClass({
     },
 
     onPollingSuccess(pieceId) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
         EditionListActions.toggleEditionList(pieceId);
 
-        let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -110,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

@@ -2,36 +2,42 @@
 
 import React from 'react';
 
-import Header from '../components/header';
+import AppBase from './app_base';
-import Footer from '../components/footer';
+import AppRouteWrapper from './app_route_wrapper';
-import GlobalNotification from './global_notification';
+import Footer from './footer';
+import Header from './header';
 
 
 let AscribeApp = React.createClass({
     propTypes: {
-        children: React.PropTypes.oneOfType([
+        activeRoute: React.PropTypes.object.isRequired,
-            React.PropTypes.arrayOf(React.PropTypes.element),
+        children: React.PropTypes.element.isRequired,
-            React.PropTypes.element
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-        ]),
+
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        let { children, routes } = this.props;
+        const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
 
         return (
-            <div className="container ascribe-default-app">
+            <div className="ascribe-app ascribe-default-app">
-                <Header routes={routes} />
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
-                <div className="ascribe-body">
                     {children}
-                </div>
+                </AppRouteWrapper>
-                <Footer />
+                <Footer activeRoute={activeRoute} />
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
             </div>
         );
     }
 });
 
-export default AscribeApp;
+export default AppBase(AscribeApp);

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,37 +9,33 @@ 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
         }
-        );
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-
         window.addEventListener('resize', this.handleResize);
         window.dispatchEvent(new Event('resize'));
     },
@@ -54,8 +47,6 @@ let AclButtonList = React.createClass({
     },
 
     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,
-                pieceOrEditions,
+            buttonsStyle,
-                handleSuccess } = this.props;
+            className,
+            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

@@ -14,7 +14,7 @@ import AppConstants from '../../../constants/application_constants';
 import { AclInformationText } from '../../../constants/acl_information_text';
 
 
-export default function ({ action, displayName, title, tooltip }) {
+export default function AclButton({ action, displayName, title, tooltip }) {
     if (AppConstants.aclList.indexOf(action) < 0) {
         console.warn('Your specified aclName did not match a an acl class.');
     }
@@ -24,23 +24,20 @@ export default function ({ 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/create_editions_button.js

@@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({
         EditionListStore.listen(this.onChange);
     },
 
+    componentDidUpdate() {
+        if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
+            this.startPolling();
+        }
+    },
+
     componentWillUnmount() {
         EditionListStore.unlisten(this.onChange);
         clearInterval(this.state.pollingIntervalIndex);
@@ -37,24 +43,20 @@ let CreateEditionsButton = React.createClass({
         this.setState(state);
     },
 
-    componentDidUpdate() {
-        if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
-            this.startPolling();
-        }
-    },
-
     startPolling() {
         // start polling until editions are defined
         let pollingIntervalIndex = setInterval(() => {
 
             // requests, will try to merge the filterBy parameter with other parameters (mergeOptions).
             // Therefore it can't but null but instead has to be an empty object
-            EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {})
+            EditionListActions
+                .fetchEditionList({
+                    pieceId: this.props.piece.id,
+                    filterBy: {}
+                })
                 .then((res) => {
-
                     clearInterval(this.state.pollingIntervalIndex);
                     this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
-
                 })
                 .catch((err) => {
                     /* Ignore and keep going */

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/detail_property.js

@@ -1,9 +1,10 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 
-let DetailProperty = React.createClass({
+const DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
@@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
             React.PropTypes.element
         ]),
         separator: React.PropTypes.string,
+        className: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
         ellipsis: React.PropTypes.bool,
@@ -30,31 +32,23 @@ let DetailProperty = React.createClass({
     },
 
     render() {
-        let styles = {};
+        const {
-        const { labelClassName,
+            children,
+            className,
+            ellipsis,
             label,
+            labelClassName,
             separator,
             valueClassName,
-                children,
             value } = this.props;
 
-        if(this.props.ellipsis) {
-            styles = {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            };
-        }
-
         return (
-            <div className="row ascribe-detail-property">
+            <div className={classNames('row ascribe-detail-property', className)}>
                 <div className="row-same-height">
                     <div className={labelClassName}>
                         {label} {separator}
                     </div>
-                    <div
+                    <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
-                        className={valueClassName}
-                        style={styles}>
                         {children || value}
                     </div>
                 </div>

js/components/ascribe_detail/edition.js

@@ -1,35 +1,30 @@
 'use strict';
 
 import React from 'react';
-import { Link, History } from 'react-router';
+import { Link } from 'react-router';
 import Moment from 'moment';
 
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
-import UserActions from '../../actions/user_actions';
+import EditionActions from '../../actions/edition_actions';
-import UserStore from '../../stores/user_store';
-import CoaActions from '../../actions/coa_actions';
-import CoaStore from '../../stores/coa_store';
-
-import HistoryIterator from './history_iterator';
-
-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 EditionDetailProperty from './detail_property';
-import LicenseDetail from './license_detail';
-import FurtherDetails from './further_details';
 
+import DetailProperty from './detail_property';
 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';
 
@@ -41,137 +36,116 @@ 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,
+        coaError: React.PropTypes.object,
         furtherDetailsType: React.PropTypes.func,
-        edition: React.PropTypes.object,
         loadEdition: React.PropTypes.func
     },
 
-    mixins: [History],
-
     getDefaultProps() {
         return {
             furtherDetailsType: FurtherDetails
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        // Flushing the coa state is essential to not displaying the same
-        // data to the user while he's on another edition
-        //
-        // BUGFIX: Previously we had this line in the componentWillUnmount of
-        // CoaDetails, but since we're reloading the edition after performing an ACL action
-        // on it, this resulted in multiple events occupying the dispatcher, which eventually
-        // resulted in crashing the app.
-        CoaActions.flushCoa();
-
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        let FurtherDetailsType = this.props.furtherDetailsType;
+        const {
+            actionPanelButtonListType,
+            coaError,
+            currentUser,
+            edition,
+            furtherDetailsType: FurtherDetailsType,
+            loadEdition,
+            whitelabel } = this.props;
 
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
-                        content={this.props.edition}/>
+                        content={edition}
+                        currentUser={currentUser}
+                        refreshObject={loadEdition} />
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
-                        <hr style={{marginTop: 0}}/>
+                        <hr className="hidden-print" style={{marginTop: 0}} />
-                        <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
+                        <h1 className="ascribe-detail-title">{edition.title}</h1>
-                        <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
+                        <DetailProperty label="CREATED BY" value={edition.artist_name} />
-                        <EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
+                        <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr />
                     </div>
                     <EditionSummary
-                        actionPanelButtonListType={this.props.actionPanelButtonListType}
+                        actionPanelButtonListType={actionPanelButtonListType}
-                        edition={this.props.edition}
+                        edition={edition}
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
-                        handleSuccess={this.props.loadEdition}/>
+                        handleSuccess={loadEdition}
+                        whitelabel={whitelabel} />
                     <CollapsibleParagraph
                         title={getLangText('Certificate of Authenticity')}
-                        show={this.props.edition.acl.acl_coa === true}>
+                        show={edition.acl.acl_coa === true}>
                         <CoaDetails
-                            edition={this.props.edition}/>
+                            coa={edition.coa}
+                            coaError={coaError}
+                            editionId={edition.bitcoin_id} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Provenance/Ownership History')}
-                        show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
+                        show={edition.ownership_history && edition.ownership_history.length}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.ownership_history} />
-                            history={this.props.edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Consignment History')}
-                        show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
+                        show={edition.consign_history && edition.consign_history.length > 0}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.consign_history} />
-                            history={this.props.edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
-                        show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
+                        show={edition.loan_history && edition.loan_history.length > 0}>
-                        <HistoryIterator
+                        <HistoryIterator history={edition.loan_history} />
-                            history={this.props.edition.loan_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title="Notes"
-                        show={!!(this.state.currentUser.username
+                        show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
-                                || this.props.edition.acl.acl_edit
-                                || this.props.edition.public_note)}>
                         <Note
-                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
+                            id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null}
+                            defaultValue={edition.private_note ? edition.private_note : null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_edition}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={currentUser} />
                         <Note
-                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
+                            id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (public)')}
-                            defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
+                            defaultValue={edition.public_note ? edition.public_note : null}
                             placeholder={getLangText('Enter your comments ...')}
-                            editable={!!this.props.edition.acl.acl_edit}
+                            editable={!!edition.acl.acl_edit}
-                            show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit}
+                            show={!!edition.public_note || !!edition.acl.acl_edit}
                             successMessage={getLangText('Public edition note saved')}
                             url={ApiUrls.note_public_edition}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={currentUser} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={this.props.edition.acl.acl_edit
+                        show={edition.acl.acl_edit || Object.keys(edition.extra_data).length || edition.other_data.length}>
-                            || Object.keys(this.props.edition.extra_data).length > 0
-                            || this.props.edition.other_data.length > 0}>
                         <FurtherDetailsType
-                            editable={this.props.edition.acl.acl_edit}
+                            editable={edition.acl.acl_edit}
-                            pieceId={this.props.edition.parent}
+                            pieceId={edition.parent}
-                            extraData={this.props.edition.extra_data}
+                            extraData={edition.extra_data}
-                            otherData={this.props.edition.other_data}
+                            otherData={edition.other_data}
-                            handleSuccess={this.props.loadEdition} />
+                            handleSuccess={loadEdition} />
                     </CollapsibleParagraph>
-                    <CollapsibleParagraph
+                    <CollapsibleParagraph title={getLangText('SPOOL Details')}>
-                        title={getLangText('SPOOL Details')}>
+                        <SpoolDetails edition={edition} />
-                        <SpoolDetails
-                            edition={this.props.edition} />
                     </CollapsibleParagraph>
                 </Col>
             </Row>
@@ -182,42 +156,37 @@ 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() {
-        this.props.handleSuccess();
-    },
-
     getStatus() {
-        let status = null;
+        const { status } = this.props.edition;
-        if (this.props.edition.status.length > 0){
+
-            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
+        return status.length ? (
-            status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
+            <DetailProperty
-            if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
+                label="STATUS"
-                status = (
+                value={status.join(', ').replace(/_/g, ' ')} />
-                    <EditionDetailProperty label="STATUS" value={ statusStr } />
+        ) : null;
-                );
-            }
-        }
-        return status;
     },
 
     render() {
-        let { actionPanelButtonListType, edition, currentUser } = this.props;
+        const { actionPanelButtonListType, currentUser, edition, handleSuccess, whitelabel } = this.props;
+
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('EDITION')}
                     value={edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('ID')}
                     value={edition.bitcoin_id}
                     ellipsis={true} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('OWNER')}
                     value={edition.owner} />
                 <LicenseDetail license={edition.license_type} />
@@ -227,15 +196,17 @@ let EditionSummary = React.createClass({
                     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}>
-                    <EditionDetailProperty
+                    <DetailProperty
-                        label={getLangText('ACTIONS')}>
+                        label={getLangText('ACTIONS')}
+                        className="hidden-print">
                         <EditionActionPanel
                             actionPanelButtonListType={actionPanelButtonListType}
-                            edition={edition}
                             currentUser={currentUser}
-                            handleSuccess={this.handleSuccess} />
+                            edition={edition}
-                    </EditionDetailProperty>
+                            handleSuccess={handleSuccess}
+                            whitelabel={whitelabel} />
+                    </DetailProperty>
                 </AclProxy>
                 <hr/>
             </div>
@@ -246,38 +217,47 @@ let EditionSummary = React.createClass({
 
 let CoaDetails = React.createClass({
     propTypes: {
-        edition: React.PropTypes.object
+        editionId: React.PropTypes.string,
+        coa: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string,
+            React.PropTypes.object
+        ]),
+        coaError: React.PropTypes.object
     },
 
-    getInitialState() {
+    contactOnIntercom() {
-        return CoaStore.getState();
+        const { coaError, editionId } = this.props;
-    },
 
-    componentDidMount() {
+        window.Intercom('showNewMessage', getLangText("Hi, I'm having problems generating a Certificate of Authenticity for Edition: %s", editionId));
-        let { edition } = this.props;
+        console.logGlobal(new Error(`Coa couldn't be created for edition: ${editionId}`), coaError);
-        CoaStore.listen(this.onChange);
-        if(edition.coa) {
-            CoaActions.fetchOrCreate(edition.coa, edition.bitcoin_id);
-        }
-        else {
-            CoaActions.create(edition.bitcoin_id);
-        }
-    },
-
-    componentWillUnmount() {
-        CoaStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     render() {
-        if(this.state.coa && this.state.coa.url_safe) {
+        const { coa, coaError } = this.props;
-            return (
+        let coaDetailElement;
-                <div>
+
-                    <p className="text-center ascribe-button-list">
+        if (coaError) {
-                        <a href={this.state.coa.url_safe} target="_blank">
+            coaDetailElement = [
+                <p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>,
+                <p>
+                    {getLangText('Try to refresh the page. If this happens repeatedly, please ')}
+                    <a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
+                </p>
+            ];
+        } else if (coa && coa.url_safe) {
+            coaDetailElement = [
+                <div
+                    className="notification-contract-pdf"
+                    style={{paddingBottom: '1em'}}>
+                    <embed
+                        className="embed-form"
+                        src={coa.url_safe}
+                        alt="pdf"
+                        pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
+                </div>,
+                <div className="text-center ascribe-button-list">
+                    <a href={coa.url_safe} target="_blank">
                         <button className="btn btn-default btn-xs">
                             {getLangText('Download')} <Glyphicon glyph="cloud-download"/>
                         </button>
@@ -287,20 +267,27 @@ let CoaDetails = React.createClass({
                             {getLangText('Verify')} <Glyphicon glyph="check"/>
                         </button>
                     </Link>
-
-                    </p>
                 </div>
-            );
+            ];
-        } else if(typeof this.state.coa === 'string'){
+        } else if (typeof coa === 'string') {
-            return (
+            coaDetailElement = coa;
-                <div className="text-center">
+        } else {
-                    {this.state.coa}
+            coaDetailElement = [
-                </div>
+                <AscribeSpinner color='dark-blue' size='md'/>,
-            );
+                <p>{getLangText("Just a sec, we're generating your COA")}</p>,
+                <p>{getLangText('(you may leave the page)')}</p>
+            ];
         }
+
         return (
-            <div className="text-center">
+            <div>
-                <AscribeSpinner color='dark-blue' size='lg'/>
+                <div className="text-center hidden-print">
+                    {coaDetailElement}
+                </div>
+                {/* Hide the COA and just show that it's a seperate document when printing */}
+                <div className="visible-print ascribe-coa-print-placeholder">
+                    {getLangText('The COA is available as a seperate document')}
+                </div>
             </div>
         );
     }
@@ -312,16 +299,34 @@ let SpoolDetails = React.createClass({
     },
 
     render() {
-        let bitcoinIdValue = (
+        const { edition: {
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
+            bitcoin_id: bitcoinId,
+            hash_as_address: hashAsAddress,
+            btc_owner_address_noprefix: bitcoinOwnerAddress
+        } } = this.props;
+
+        const bitcoinIdValue = (
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + bitcoinId}>
+                {bitcoinId}
+            </a>
         );
 
-        let hashOfArtwork = (
+        const hashOfArtwork = (
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a>
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
+                {hashAsAddress}
+            </a>
         );
 
-        let ownerAddress = (
+        const ownerAddress = (
-            <a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a>
+            <a  className="anchor-no-expand-print"
+                target="_blank"
+                href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
+                {bitcoinOwnerAddress}
+            </a>
         );
 
         return (
@@ -349,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
     },
 
@@ -72,53 +74,57 @@ let EditionActionPanel = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     refreshCollection() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
         EditionListActions.refreshEditionList({ pieceId: this.props.edition.parent });
     },
 
     handleSuccess(response) {
         this.refreshCollection();
-        this.props.handleSuccess();
+
         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

@@ -24,23 +24,25 @@ 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 EditionStore.getState();
+        return EditionStore.getInitialState();
     },
 
     componentDidMount() {
         EditionStore.listen(this.onChange);
 
-        // Every time we're entering the edition detail page,
-        // just reset the edition that is saved in the edition store
-        // as it will otherwise display wrong/old data once the user loads
-        // the edition detail a second time
-        EditionActions.updateEdition({});
         this.loadEdition();
     },
 
@@ -48,15 +50,15 @@ let EditionContainer = React.createClass({
     // button to update the URL parameter (and therefore to switch pieces)
     componentWillReceiveProps(nextProps) {
         if (this.props.params.editionId !== nextProps.params.editionId) {
-            EditionActions.updateEdition({});
+            EditionActions.flushEdition();
-            EditionActions.fetchOne(nextProps.params.editionId);
+            this.loadEdition(nextProps.params.editionId);
         }
     },
 
     componentDidUpdate() {
-        const { editionError } = this.state;
+        const { err: editionErr } = this.state.editionMeta;
 
-        if(editionError && editionError.status === 404) {
+        if (editionErr && editionErr.json && editionErr.json.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
         }
     },
@@ -68,30 +70,28 @@ let EditionContainer = React.createClass({
 
     onChange(state) {
         this.setState(state);
-        if (!state.edition.digital_work) {
-            return;
-        }
-        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.fetchOne(this.props.params.editionId), 10000);
-            this.setState({timerId: timerId});
-        }
     },
 
-    loadEdition() {
+    loadEdition(editionId = this.props.params.editionId) {
-        EditionActions.fetchOne(this.props.params.editionId);
+        EditionActions.fetchEdition(editionId);
     },
 
     render() {
-        if(this.state.edition && this.state.edition.id) {
+        const { actionPanelButtonListType, currentUser, furtherDetailsType, whitelabel } = this.props;
-            setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
+        const { edition, coaMeta } = this.state;
+
+        if (edition.id) {
+            setDocumentTitle(`${edition.artist_name}, ${edition.title}`);
 
             return (
                 <Edition
-                    actionPanelButtonListType={this.props.actionPanelButtonListType}
+                    actionPanelButtonListType={actionPanelButtonListType}
-                    furtherDetailsType={this.props.furtherDetailsType}
+                    coaError={coaMeta.err}
-                    edition={this.state.edition}
+                    currentUser={currentUser}
-                    loadEdition={this.loadEdition} />
+                    edition={edition}
+                    furtherDetailsType={furtherDetailsType}
+                    loadEdition={this.loadEdition}
+                    whitelabel={whitelabel} />
             );
         } else {
             return (

js/components/ascribe_detail/further_details.js

@@ -5,25 +5,27 @@ import React from 'react';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import Form from './../ascribe_forms/form';
-
-import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
-
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import FurtherDetailsFileuploader from './further_details_fileuploader';
 
+import Form from './../ascribe_forms/form';
+import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
+import { getLangText } from '../../utils/lang_utils';
+
 
 let FurtherDetails = React.createClass({
     propTypes: {
+        pieceId: React.PropTypes.number.isRequired,
+
         editable: React.PropTypes.bool,
-        pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
+        handleSuccess: React.PropTypes.func,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        handleSuccess: React.PropTypes.func
     },
 
     getInitialState() {
@@ -33,8 +35,13 @@ let FurtherDetails = React.createClass({
     },
 
     showNotification() {
-        this.props.handleSuccess();
+        const { handleSuccess } = this.props;
-        let notification = new GlobalNotificationModel('Details updated', 'success');
+
+        if (typeof handleSucess === 'function') {
+            handleSuccess();
+        }
+
+        const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -51,40 +58,42 @@ let FurtherDetails = React.createClass({
     },
 
     render() {
+        const { editable, extraData, otherData, pieceId } = this.props;
+
         return (
             <Row>
                 <Col md={12} className="ascribe-edition-personal-note">
                     <PieceExtraDataForm
                         name='artist_contact_info'
                         title='Artist Contact Info'
+                        convertLinks
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
+                        pieceId={pieceId} />
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData}
-                        />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
+                        pieceId={pieceId} />
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
+                        pieceId={pieceId} />
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
                     <Form>
                         <FurtherDetailsFileuploader
                             submitFile={this.submitFile}
                             setIsUploadReady={this.setIsUploadReady}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            editable={this.props.editable}
+                            editable={editable}
                             overrideForm={true}
-                            pieceId={this.props.pieceId}
+                            pieceId={pieceId}
-                            otherData={this.props.otherData}
+                            otherData={otherData}
                             multiple={true} />
                     </Form>
                 </Col>

js/components/ascribe_detail/further_details_fileuploader.js

@@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -17,24 +18,29 @@ const { func, bool, number, object, string, arrayOf } = React.PropTypes;
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
-        label: string,
+        pieceId: number.isRequired,
-        pieceId: number,
+
-        otherData: arrayOf(object),
         editable: bool,
+        label: string,
+        otherData: arrayOf(object),
 
         // Props for ReactS3FineUploader
-        multiple: bool,
+        areAssetsDownloadable: bool,
-        showErrorPrompt: bool,
+        isReadyForFormSubmission: func,
         submitFile: func, // TODO: rename to onSubmitFile
-
+        onValidationFailed: func,
+        multiple: bool,
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
-        isReadyForFormSubmission: func
+        showErrorPrompt: bool,
+        validation: ReactS3FineUploader.propTypes.validation
     },
 
     getDefaultProps() {
         return {
+            areAssetsDownloadable: true,
             label: getLangText('Additional files'),
-            multiple: false
+            multiple: false,
+            validation: validationTypes.additionalData
         };
     },
 
@@ -43,11 +49,13 @@ let FurtherDetailsFileuploader = React.createClass({
             editable,
             isReadyForFormSubmission,
             multiple,
+            onValidationFailed,
             otherData,
             pieceId,
             setIsUploadReady,
             showErrorPrompt,
-            submitFile } = this.props;
+            submitFile,
+            validation } = this.props;
 
         // Essentially there a three cases important to the fileuploader
         //
@@ -65,19 +73,29 @@ let FurtherDetailsFileuploader = React.createClass({
                 name="other_data_key"
                 label={this.props.label}>
                 <ReactS3FineUploader
+                    areAssetsDownloadable
+                    areAssetsEditable={editable}
+                    createBlobRoutine={{
+                        url: ApiUrls.blob_otherdatas,
+                        pieceId: pieceId
+                    }}
+                    deleteFile={{
+                        enabled: true,
+                        method: 'DELETE',
+                        endpoint: AppConstants.serverUrl + 's3/delete',
+                        customHeaders: {
+                           'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                        }
+                    }}
+                    isReadyForFormSubmission={isReadyForFormSubmission}
                     keyRoutine={{
                         url: AppConstants.serverUrl + 's3/key/',
                         fileClass: 'otherdata',
                         pieceId: pieceId
                     }}
-                    createBlobRoutine={{
+                    multiple={multiple}
-                        url: ApiUrls.blob_otherdatas,
+                    onValidationFailed={onValidationFailed}
-                        pieceId: pieceId
-                    }}
-                    validation={AppConstants.fineUploader.validation.additionalData}
-                    submitFile={submitFile}
                     setIsUploadReady={setIsUploadReady}
-                    isReadyForFormSubmission={isReadyForFormSubmission}
                     session={{
                         endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
                         customHeaders: {
@@ -97,18 +115,9 @@ let FurtherDetailsFileuploader = React.createClass({
                            'X-CSRFToken': getCookie(AppConstants.csrftoken)
                         }
                     }}
-                    deleteFile={{
+                    submitFile={submitFile}
-                        enabled: true,
+                    showErrorPrompt={showErrorPrompt}
-                        method: 'DELETE',
+                    validation={validation} />
-                        endpoint: AppConstants.serverUrl + 's3/delete',
-                        customHeaders: {
-                           'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                        }
-                    }}
-                    areAssetsDownloadable={true}
-                    areAssetsEditable={editable}
-                    multiple={multiple}
-                    showErrorPrompt={showErrorPrompt} />
             </Property>
         );
     }

js/components/ascribe_detail/history_iterator.js

@@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({
             return (
                 <span>
                     {historicalEventDescription}
-                    <a href={historicalEvent[2]} target="_blank">{contractName}</a>
+                    <a  className="anchor-no-expand-print"
+                        target="_blank"
+                        href={historicalEvent[2]}>
+                        {contractName}
+                    </a>
                 </span>
             );
         } else if(historicalEvent.length === 2) {

js/components/ascribe_detail/media_container.js

@@ -14,42 +14,41 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
 import AclProxy from '../acl_proxy';
 
-import UserActions from '../../actions/user_actions';
+import { getLangText } from '../../utils/lang_utils';
-import UserStore from '../../stores/user_store';
+import { extractFileExtensionFromString } from '../../utils/file_utils';
 
-import { mergeOptions } from '../../utils/general_utils.js';
-import { getLangText } from '../../utils/lang_utils.js';
 
 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,
-        refreshObject: React.PropTypes.func
+        refreshObject: React.PropTypes.func.isRequired,
+
+        currentUser: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
+        return {
-            UserStore.getState(),
-            {
             timerId: null
-            });
+        };
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
+        const { content: { digital_work: digitalWork }, refreshObject } = this.props;
-        UserActions.fetchCurrentUser();
 
-        if (!this.props.content.digital_work) {
+        if (digitalWork) {
-            return;
+            const isEncoding = digitalWork.isEncoding;
+
+            if (digitalWork.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
+                this.setState({
+                    timerId: window.setInterval(refreshObject, ENCODE_UPDATE_TIME)
+                });
             }
-        let isEncoding = this.props.content.digital_work.isEncoding;
-        if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-            let timerId = window.setInterval(this.props.refreshObject, 10000);
-            this.setState({timerId: timerId});
         }
     },
 
@@ -60,22 +59,26 @@ let MediaContainer = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-
         window.clearInterval(this.state.timerId);
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { content } = this.props;
+        const { content, currentUser } = this.props;
         // Pieces and editions are joined to the user by a foreign key in the database, so
         // the information in content will be updated if a user updates their username.
         // We also force uniqueness of usernames, so this check is safe to dtermine if the
         // content was registered by the current user.
-        const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered);
+        const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
+
+        // We want to show the file's extension as a label of the download button.
+        // We can however not only use `extractFileExtensionFromString` on the url for that
+        // as files might be saved on S3 without a file extension which leads
+        // `extractFileExtensionFromString` to extract everything starting from the top level
+        // domain: e.g. '.net/live/<hash>'.
+        // Therefore, we extract the file's name (last part of url, separated with a slash)
+        // and try to extract the file extension from there.
+        const fileName = content.digital_work.url.split('/').pop();
+        const fileExtension = extractFileExtensionFromString(fileName);
 
         let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
             content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@@ -94,8 +97,11 @@ let MediaContainer = React.createClass({
             embed = (
                 <CollapsibleButton
                     button={
-                        <Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
+                        <Button
-                            Embed
+                            bsSize="xsmall"
+                            className="ascribe-margin-1px"
+                            disabled={isEmbedDisabled}>
+                            {getLangText('Embed')}
                         </Button>
                     }
                     panel={
@@ -114,7 +120,7 @@ let MediaContainer = React.createClass({
                     url={content.digital_work.url}
                     extraData={extraData}
                     encodingStatus={content.digital_work.isEncoding} />
-                <p className="text-center">
+                <p className="text-center hidden-print">
                     <span className="ascribe-social-button-list">
                         <FacebookShareButton />
                         <TwitterShareButton
@@ -125,8 +131,16 @@ let MediaContainer = React.createClass({
                         show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
                         aclObject={content.acl}
                         aclName="acl_download">
-                        <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
+                        <Button
-                            Download .{mimetype} <Glyphicon glyph="cloud-download"/>
+                            bsSize="xsmall"
+                            className="ascribe-margin-1px"
+                            href={content.digital_work.url}
+                            target="_blank">
+                            {/*
+                                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" />
                         </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() {
-        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;
         }
+    }
 });
 
 export default Note;

js/components/ascribe_detail/piece.js

@@ -15,37 +15,39 @@ 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,
-        loadPiece: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ])
     },
 
-
+    updatePiece() {
-    updateObject() {
+        return PieceActions.fetchPiece(this.props.piece.id);
-        return PieceActions.fetchOne(this.props.piece.id);
     },
 
     render() {
+        const { buttons, children, currentUser, header, piece, subheader } = this.props;
+
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
-                        refreshObject={this.updateObject}
+                        content={piece}
-                        content={this.props.piece}/>
+                        currentUser={currentUser}
+                        refreshObject={this.updatePiece} />
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
-                    {this.props.header}
+                    {header}
-                    {this.props.subheader}
+                    {subheader}
-                    {this.props.buttons}
+                    {buttons}
-
-                    {this.props.children}
 
+                    {children}
                 </Col>
             </Row>
         );

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,9 +70,8 @@ let PieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
-            PieceStore.getState(),
+            PieceStore.getInitialState(),
             {
                 showCreateEditionsDialog: false
             }
@@ -77,29 +79,32 @@ let PieceContainer = React.createClass({
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
 
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
         this.loadPiece();
-        UserActions.fetchCurrentUser();
+    },
+
+    // This is done to update the container when the user clicks on the prev or next
+    // button to update the URL parameter (and therefore to switch pieces) or
+    // when the user clicks on a notification while being in another piece view
+    componentWillReceiveProps(nextProps) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
+            PieceActions.flushPiece();
+            this.loadPiece(nextProps.params.pieceId);
+        }
     },
 
     componentDidUpdate() {
-        const { pieceError } = this.state;
+        const { err: pieceErr } = this.state.pieceMeta;
 
-        if(pieceError && pieceError.status === 404) {
+        if (pieceErr && pieceErr.json && pieceErr.json.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
         }
     },
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
     },
 
@@ -116,7 +121,6 @@ let PieceContainer = React.createClass({
 
          */
         if (state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') {
-
             let pieceState = mergeOptions({}, state.piece);
             pieceState.acl.acl_loan = false;
             this.setState({
@@ -128,11 +132,10 @@ let PieceContainer = React.createClass({
         }
     },
 
-    loadPiece() {
+    loadPiece(pieceId = this.props.params.pieceId) {
-        PieceActions.fetchOne(this.props.params.pieceId);
+        PieceActions.fetchPiece(pieceId);
     },
 
-
     toggleCreateEditionsDialog() {
         this.setState({
             showCreateEditionsDialog: !this.state.showCreateEditionsDialog
@@ -140,25 +143,28 @@ let PieceContainer = React.createClass({
     },
 
     handleEditionCreationSuccess() {
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
         PieceActions.updateProperty({ key: 'num_editions', value: 0 });
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
         this.toggleCreateEditionsDialog();
     },
 
     handleDeleteSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         // since we're deleting a piece, we just need to close
         // all editions dialogs and not reload them
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getCreateEditionsDialog() {
@@ -177,6 +183,7 @@ let PieceContainer = React.createClass({
     },
 
     handlePollingSuccess(pieceId, numEditions) {
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
 
         // we need to refresh the num_editions property of the actual piece we're looking at
         PieceActions.updateProperty({
@@ -188,10 +195,9 @@ let PieceContainer = React.createClass({
         // btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion
         // list item also uses the firstEdition property which we can only get from the server in that case.
         // Therefore we need to at least refetch the changed piece from the server or on our case simply all
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
 
-        let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -200,15 +206,17 @@ let PieceContainer = React.createClass({
     },
 
     getActions() {
-        const { piece, currentUser } = this.state;
+        const { piece } = this.state;
+        const { currentUser } = this.props;
 
-        if (piece && piece.notifications && piece.notifications.length > 0) {
+        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
@@ -218,10 +226,13 @@ let PieceContainer = React.createClass({
                         no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
                         `AclInformation` would show up
                     */}
-                    <DetailProperty label={getLangText('ACTIONS')}>
+                    <DetailProperty
+                        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
@@ -246,76 +257,76 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if (this.state.piece && this.state.piece.id) {
+        const { currentUser, furtherDetailsType: FurtherDetailsType } = this.props;
-            let FurtherDetailsType = this.props.furtherDetailsType;
+        const { piece } = this.state;
-            setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
+
+        if (piece.id) {
+            setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
 
             return (
                 <Piece
-                    piece={this.state.piece}
+                    piece={piece}
-                    loadPiece={this.loadPiece}
+                    currentUser={currentUser}
                     header={
                         <div className="ascribe-detail-header">
-                            <hr style={{marginTop: 0}}/>
+                            <hr className="hidden-print" style={{marginTop: 0}} />
-                            <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
+                            <h1 className="ascribe-detail-title">{piece.title}</h1>
-                            <DetailProperty label="BY" value={this.state.piece.artist_name} />
+                            <DetailProperty label="CREATED BY" value={piece.artist_name} />
-                            <DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />
+                            <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
-                            {this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null}
+                            {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
                             <hr/>
                         </div>
                         }
                     subheader={
                         <div className="ascribe-detail-header">
-                            <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } />
+                            <DetailProperty label={getLangText('ASCRIBED BY')} value={ piece.user_registered } />
-                            <DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
+                            <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
-                            <LicenseDetail license={this.state.piece.license_type} />
+                            <LicenseDetail license={piece.license_type} />
                         </div>
                     }
                     buttons={this.getActions()}>
                     {this.getCreateEditionsDialog()}
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
-                        show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
+                        show={piece.loan_history && piece.loan_history.length > 0}>
                         <HistoryIterator
-                            history={this.state.piece.loan_history} />
+                            history={piece.loan_history} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.state.currentUser.username
+                        show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
-                                || this.state.piece.acl.acl_edit
-                                || this.state.piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.state.piece.private_note || null}
+                            defaultValue={piece.private_note || null}
-                            show = {!!this.state.currentUser.username}
+                            show = {!!currentUser.username}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_piece}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={currentUser} />
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (public)')}
-                            defaultValue={this.state.piece.public_note || null}
+                            defaultValue={piece.public_note || null}
                             placeholder={getLangText('Enter your comments ...')}
-                            editable={!!this.state.piece.acl.acl_edit}
+                            editable={!!piece.acl.acl_edit}
-                            show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
+                            show={!!(piece.public_note || piece.acl.acl_edit)}
                             successMessage={getLangText('Public note saved')}
                             url={ApiUrls.note_public_piece}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={currentUser} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={this.state.piece.acl.acl_edit
+                        show={piece.acl.acl_edit
-                            || Object.keys(this.state.piece.extra_data).length > 0
+                            || Object.keys(piece.extra_data).length > 0
-                            || this.state.piece.other_data.length > 0}
+                            || piece.other_data.length > 0}
                         defaultExpanded={true}>
                         <FurtherDetailsType
-                            editable={this.state.piece.acl.acl_edit}
+                            editable={piece.acl.acl_edit}
-                            pieceId={this.state.piece.id}
+                            pieceId={piece.id}
-                            extraData={this.state.piece.extra_data}
+                            extraData={piece.extra_data}
-                            otherData={this.state.piece.other_data}
+                            otherData={piece.other_data}
                             handleSuccess={this.loadPiece} />
                     </CollapsibleParagraph>
 

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
     },
 

js/components/ascribe_forms/create_editions_form.js

@@ -58,7 +58,8 @@ let CreateEditionsForm = React.createClass({
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
-                        min={1}/>
+                        min={1}
+                        max={100} />
                 </Property>
             </Form>
         );

js/components/ascribe_forms/form.js

@@ -156,7 +156,7 @@ let Form = React.createClass({
 
         for(let ref in this.refs) {
             if(this.refs[ref] && typeof this.refs[ref].handleSuccess === 'function'){
-                this.refs[ref].handleSuccess();
+                this.refs[ref].handleSuccess(response);
             }
         }
         this.setState({
@@ -182,7 +182,7 @@ let Form = React.createClass({
                 delete formData.password;
             }
 
-            console.logGlobal(err, false, formData);
+            console.logGlobal(err, formData);
 
             if (this.props.isInline) {
                 let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
@@ -190,8 +190,8 @@ let Form = React.createClass({
             } else {
                 this.setState({errors: [getLangText('Something went wrong, please try again later')]});
             }
-
         }
+
         this.setState({submitted: false});
     },
 
@@ -208,13 +208,12 @@ let Form = React.createClass({
         if (this.state.submitted) {
             return this.props.spinner;
         }
-        if (this.props.buttons){
+        if (this.props.buttons !== undefined) {
             return this.props.buttons;
         }
-        let buttons = null;
 
         if (this.state.edited && !this.props.disabled) {
-            buttons = (
+            return (
                 <div className="row" style={{margin: 0}}>
                     <p className="pull-right">
                         <Button
@@ -230,9 +229,9 @@ let Form = React.createClass({
                     </p>
                 </div>
             );
-
+        } else {
+            return null;
         }
-        return buttons;
     },
 
     getErrors() {

js/components/ascribe_forms/form_consign.js

@@ -41,6 +41,14 @@ let ConsignForm = React.createClass({
         };
     },
 
+    componentWillReceiveProps(nextProps) {
+        if (this.props.email !== nextProps.email) {
+            this.setState({
+                email: nextProps.email
+            });
+        }
+    },
+
     getFormData() {
         return this.props.id;
     },
@@ -115,8 +123,7 @@ let ConsignForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Consign Contract')}
-                    className="ascribe-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle">
-                    style={{paddingBottom: 0}}>
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />

js/components/ascribe_forms/form_copyright_association.js

@@ -15,12 +15,11 @@ import { getLangText } from '../../utils/lang_utils';
 
 let CopyrightAssociationForm = React.createClass({
     propTypes: {
-        currentUser: React.PropTypes.object
+        currentUser: React.PropTypes.object.isRequired
     },
 
     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);
     },
 
@@ -29,16 +28,17 @@ let CopyrightAssociationForm = React.createClass({
     },
 
     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'
@@ -48,8 +48,7 @@ let CopyrightAssociationForm = React.createClass({
                     <Property
                         name="copyright_association"
                         className="ascribe-property-collapsible-toggle"
-                        label={getLangText('Copyright Association')}
+                        label={getLangText('Copyright Association')}>
-                        style={{paddingBottom: 0}}>
                         <select defaultValue={selectedState} name="contract">
                             <option
                                 name={0}
@@ -72,9 +71,10 @@ let CopyrightAssociationForm = React.createClass({
                     <hr />
                 </Form>
             );
-        }
+        } else {
             return null;
         }
+    }
 });
 
 export default CopyrightAssociationForm;

js/components/ascribe_forms/form_create_contract.js

@@ -2,19 +2,20 @@
 
 import React from 'react';
 
-import Form from '../ascribe_forms/form';
+import ContractListActions from '../../actions/contract_list_actions';
-import Property from '../ascribe_forms/property';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import ContractListActions from '../../actions/contract_list_actions';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import InputFineUploader from './input_fineuploader';
 
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
@@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({
                             url: ApiUrls.blob_contracts
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
+                            itemLimit: validationTypes.additionalData.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            sizeLimit: validationTypes.additionalData.sizeLimit,
                             allowedExtensions: ['pdf']
                         }}
                         areAssetsDownloadable={true}

js/components/ascribe_forms/form_loan.js

@@ -25,6 +25,7 @@ import { mergeOptions } from '../../utils/general_utils';
 let LoanForm = React.createClass({
     propTypes: {
         loanHeading: React.PropTypes.string,
+        buttons: React.PropTypes.element,
         email: React.PropTypes.string,
         gallery: React.PropTypes.string,
         startDate: React.PropTypes.object,
@@ -60,6 +61,14 @@ let LoanForm = React.createClass({
         };
     },
 
+    componentWillReceiveProps(nextProps) {
+        if (this.props.email !== nextProps.email) {
+            this.setState({
+                email: nextProps.email
+            });
+        }
+    },
+
     onChange(state) {
         this.setState(state);
     },
@@ -80,7 +89,11 @@ let LoanForm = React.createClass({
     },
 
     getButtons() {
-        if(this.props.loanHeading) {
+        const { buttons, loanHeading } = this.props;
+
+        if (buttons) {
+            return buttons;
+        } else if (loanHeading) {
             return (
                 <button
                     type="submit"
@@ -158,7 +171,7 @@ let LoanForm = React.createClass({
                     editable={!gallery}
                     overrideForm={!!gallery}>
                     <input
-                        value={gallery}
+                        defaultValue={gallery}
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>
                 </Property>
@@ -197,8 +210,7 @@ let LoanForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Loan Contract')}
-                    className="ascribe-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle">
-                    style={{paddingBottom: 0}}>
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />

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,31 +29,13 @@ 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() {
-        return UserStore.getState();
-    },
-
-    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);
+        const notification = new GlobalNotificationModel(getLangText('Login successful'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         if (success) {
@@ -65,7 +44,11 @@ let LoginForm = React.createClass({
     },
 
     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,8 +76,7 @@ let LoginForm = React.createClass({
                     <input
                         type="email"
                         placeholder={getLangText('Enter your email')}
-                        name="email"
+                        defaultValue={emailQuery}
-                        defaultValue={email}
                         required/>
                 </Property>
                 <Property
@@ -103,7 +85,6 @@ let LoginForm = React.createClass({
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}
-                        name="password"
                         required/>
                 </Property>
             </Form>

js/components/ascribe_forms/form_piece_extradata.js

@@ -13,43 +13,48 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 let PieceExtraDataForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number,
+        name: React.PropTypes.string.isRequired,
+        pieceId: React.PropTypes.number.isRequired,
+
+        convertLinks: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
         extraData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
-        name: React.PropTypes.string,
+        title: React.PropTypes.string
-        title: React.PropTypes.string,
-        editable: React.PropTypes.bool
     },
 
     getFormData() {
-        let extradata = {};
-        extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
         return {
-            extradata: extradata,
+            extradata: {
+                [this.props.name]: this.refs.form.refs[this.props.name].state.value
+            },
             piece_id: this.props.pieceId
         };
     },
 
     render() {
-        let defaultValue = this.props.extraData[this.props.name] || '';
+        const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props;
-        if (defaultValue.length === 0 && !this.props.editable){
+        const defaultValue = (extraData && extraData[name]) || null;
+
+        if (!defaultValue && !editable) {
             return null;
         }
-        let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
+
         return (
             <Form
                 ref='form'
-                url={url}
+                disabled={!editable}
-                handleSuccess={this.props.handleSuccess}
                 getFormData={this.getFormData}
-                disabled={!this.props.editable}>
+                handleSuccess={handleSuccess}
+                url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}>
                 <Property
-                    name={this.props.name}
+                    name={name}
-                    label={this.props.title}>
+                    label={title}>
                     <InputTextAreaToggable
                         rows={1}
+                        convertLinks={convertLinks}
                         defaultValue={defaultValue}
-                        placeholder={getLangText('Fill in%s', ' ') + this.props.title}
+                        placeholder={getLangText('Fill in%s', ' ') + title}
                         required />
                 </Property>
                 <hr />

js/components/ascribe_forms/form_register_piece.js

@@ -2,39 +2,40 @@
 
 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';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import FormSubmitButton from '../ascribe_buttons/form_submit_button';
 
 import { FileStatus } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
 
 import AscribeSpinner from '../ascribe_spinner';
 
 import ApiUrls from '../../constants/api_urls';
 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,25 +53,9 @@ let RegisterPieceForm = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return {
-            {
             digitalWorkFile: null
-            },
+        }
-            UserStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
     },
 
     /**
@@ -112,6 +97,11 @@ let RegisterPieceForm = React.createClass({
         );
     },
 
+    handleThumbnailValidationFailed(thumbnailFile) {
+        // If the validation fails, set the thumbnail as submittable since its optional
+        this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
+    },
+
     isThumbnailDialogExpanded() {
         const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
@@ -127,16 +117,17 @@ let RegisterPieceForm = React.createClass({
     },
 
     render() {
-        const { disabled,
+        const {
+            children,
+            currentUser,
+            disabled,
+            enableLocalHashing,
             handleSuccess,
-                submitMessage,
             headerMessage,
             isFineUploaderActive,
             isFineUploaderEditable,
             location,
-                children,
+            submitMessage } = this.props;
-                enableLocalHashing } = this.props;
-        const { currentUser} = this.state;
 
         const profileHashLocally = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
         const hashLocally = profileHashLocally && enableLocalHashing;
@@ -178,7 +169,7 @@ let RegisterPieceForm = React.createClass({
                         createBlobRoutine={{
                             url: ApiUrls.blob_digitalworks
                         }}
-                        validation={AppConstants.fineUploader.validation.registerWork}
+                        validation={validationTypes.registerWork}
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
@@ -198,15 +189,16 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
+                        onValidationFailed={this.handleThumbnailValidationFailed}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
-                            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                            allowedExtensions: validationParts.allowedExtensions.images
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
                         fileClassToUpload={{

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_send_contract_agreement.js

@@ -58,11 +58,15 @@ let SendContractAgreementForm = React.createClass({
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getFormData() {
-        return {'appendix': {'default': this.refs.form.refs.appendix.state.value}};
+        const appendixValue = this.refs.form.refs.appendix.state.value;
+
+        if (appendixValue) {
+            return { 'appendix': { 'default': appendixValue } };
+        }
     },
 
     getContracts() {

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,19 +53,21 @@ 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 {
+            children,
+            headerMessage,
+            location: { query: { email: emailQuery } },
+            submitMessage } = this.props;
+
+        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') + '!';
 
-        let email = this.props.location.query.email || null;
-
         return (
             <Form
                 className="ascribe-form-bordered"
@@ -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,11 +118,10 @@ let SignupForm = React.createClass({
                         autoComplete="on"
                         required/>
                 </Property>
-                {this.props.children}
+                {children}
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle">
-                    style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '}

js/components/ascribe_forms/form_submit_to_prize.js

@@ -66,8 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle">
-                    style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}

js/components/ascribe_forms/form_transfer.js

@@ -18,12 +18,11 @@ 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() {
@@ -31,13 +30,14 @@ let TransferForm = React.createClass({
     },
 
     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/input_contract_agreement_checkbox.js

@@ -156,7 +156,7 @@ const InputContractAgreementCheckbox = React.createClass({
                 return (
                     <div
                         className="notification-contract-pdf"
-                        style={{paddingBottom: '1em'}}>
+                        style={{paddingBottom: '0.25em'}}>
                         <embed
                             className="embed-form"
                             src={contractUrl}

js/components/ascribe_forms/input_date.js

@@ -17,10 +17,7 @@ let InputDate = React.createClass({
     },
 
     getInitialState() {
-        return {
+        return this.getStateFromMoment(this.props.defaultValue);
-            value: null,
-            value_moment: null
-        };
     },
 
     // InputDate needs to support setting a defaultValue from outside.
@@ -28,20 +25,30 @@ let InputDate = React.createClass({
     // to the outer Property
     componentWillReceiveProps(nextProps) {
         if(!this.state.value && !this.state.value_moment && nextProps.defaultValue) {
-            this.handleChange(this.props.defaultValue);
+            this.handleChange(nextProps.defaultValue);
         }
     },
 
-    handleChange(date) {
+    getStateFromMoment(date) {
-        let formattedDate = date.format('YYYY-MM-DD');
+        const state = {};
-        this.setState({
-            value: formattedDate,
-            value_moment: date
-        });
 
+        if (date) {
+            state.value = date.format('YYYY-MM-DD');
+            state.value_moment = date;
+        }
+
+        return state;
+    },
+
+    handleChange(date) {
+        const newState = this.getStateFromMoment(date);
+
+        this.setState(newState);
+
+        // Propagate change up by faking event
         this.props.onChange({
             target: {
-                value: formattedDate
+                value: newState.value
             }
         });
     },

js/components/ascribe_forms/input_fineuploader.js

@@ -25,49 +25,20 @@ const InputFineUploader = React.createClass({
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
-        setWarning: func,
+        createBlobRoutine: ReactS3FineUploader.propTypes.createBlobRoutine,
-        showErrorPrompt: bool,
+        enableLocalHashing: bool,
-
+        fileClassToUpload: ReactS3FineUploader.propTypes.fileClassToUpload,
+        fileInputElement: ReactS3FineUploader.propTypes.fileInputElement,
+        isReadyForFormSubmission: func,
+        keyRoutine: ReactS3FineUploader.propTypes.keyRoutine,
         handleChangedFile: func, // TODO: rename to onChangedFile
         submitFile: func, // TODO: rename to onSubmitFile
-
+        onValidationFailed: func,
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
-        isReadyForFormSubmission: func,
+        setWarning: func,
-
+        showErrorPrompt: bool,
-        enableLocalHashing: bool,
         uploadMethod: oneOf(['hash', 'upload']),
-
+        validation: ReactS3FineUploader.propTypes.validation,
-        fileClassToUpload: shape({
-            singular: string,
-            plural: string
-        }),
-
-        fileInputElement: oneOfType([
-            func,
-            element
-        ]),
-
-        keyRoutine: shape({
-            url: string,
-            fileClass: string,
-            pieceId: oneOfType([
-                string,
-                number
-            ])
-        }),
-        createBlobRoutine: shape({
-            url: string,
-            pieceId: oneOfType([
-                string,
-                number
-            ])
-        }),
-
-        validation: shape({
-            itemLimit: number,
-            sizeLimit: string,
-            allowedExtensions: arrayOf(string)
-        })
     },
 
     getDefaultProps() {
@@ -121,6 +92,7 @@ const InputFineUploader = React.createClass({
             isFineUploaderActive,
             isReadyForFormSubmission,
             keyRoutine,
+            onValidationFailed,
             setIsUploadReady,
             setWarning,
             showErrorPrompt,
@@ -142,6 +114,7 @@ const InputFineUploader = React.createClass({
                 createBlobRoutine={createBlobRoutine}
                 validation={validation}
                 submitFile={this.submitFile}
+                onValidationFailed={onValidationFailed}
                 setIsUploadReady={setIsUploadReady}
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}

js/components/ascribe_forms/input_textarea_toggable.js

@@ -4,17 +4,20 @@ import React from 'react';
 
 import TextareaAutosize from 'react-textarea-autosize';
 
+import { anchorize } from '../../utils/dom_utils';
+
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
         autoFocus: React.PropTypes.bool,
-        disabled: React.PropTypes.bool,
+        convertLinks: React.PropTypes.bool,
-        rows: React.PropTypes.number.isRequired,
-        required: React.PropTypes.bool,
         defaultValue: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
+        disabled: React.PropTypes.bool,
         onBlur: React.PropTypes.func,
-        onChange: React.PropTypes.func
+        onChange: React.PropTypes.func,
+        placeholder: React.PropTypes.string,
+        required: React.PropTypes.bool,
+        rows: React.PropTypes.number.isRequired
     },
 
     getInitialState() {
@@ -49,28 +52,26 @@ let InputTextAreaToggable = React.createClass({
     },
 
     render() {
-        let className = 'form-control ascribe-textarea';
+        const { convertLinks, disabled, onBlur, placeholder, required, rows } = this.props;
-        let textarea = null;
+        const { value } = this.state;
 
-        if(!this.props.disabled) {
+        if (!disabled) {
-            className = className + ' ascribe-textarea-editable';
+            return (
-            textarea = (
                 <TextareaAutosize
                     ref='textarea'
-                    className={className}
+                    className='form-control ascribe-textarea ascribe-textarea-editable'
-                    value={this.state.value}
+                    value={value}
-                    rows={this.props.rows}
+                    rows={rows}
                     maxRows={10}
-                    required={this.props.required}
+                    required={required}
                     onChange={this.handleChange}
-                    onBlur={this.props.onBlur}
+                    onBlur={onBlur}
-                    placeholder={this.props.placeholder} />
+                    placeholder={placeholder} />
             );
         } else {
-            textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
+            // Can only convert links when not editable, as textarea does not support anchors
+            return <pre className="ascribe-pre">{convertLinks ? anchorize(value) : value}</pre>;
         }
-
-        return textarea;
     }
 });
 

js/components/ascribe_forms/list_form_request_actions.js

@@ -4,33 +4,36 @@ 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;
         }
+    }
 });
 
 export default ListRequestActions;

js/components/ascribe_forms/property.js

@@ -244,7 +244,17 @@ const Property = React.createClass({
     },
 
     handleCheckboxToggle() {
-        this.setExpanded(!this.state.expanded);
+        const expanded = !this.state.expanded;
+
+        this.setExpanded(expanded);
+
+        // Reset the value to be the initial value when the checkbox is unticked since the
+        // user doesn't want to specify their own value.
+        if (!expanded) {
+            this.setState({
+                value: this.state.initialValue
+            });
+        }
     },
 
     renderChildren(style) {
@@ -289,7 +299,7 @@ const Property = React.createClass({
     },
 
     getCheckbox() {
-        const { checkboxLabel } = this.props;
+        const { checkboxLabel, name } = this.props;
 
         if (checkboxLabel) {
             return (
@@ -297,10 +307,10 @@ const Property = React.createClass({
                     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_media/media_player.js

@@ -184,7 +184,7 @@ let Video = React.createClass({
             );
         } else {
             return (
-                <Image src={this.props.preview} />
+                <Image preview={this.props.preview} />
             );
         }
     }

js/components/ascribe_modal/modal_wrapper.js

@@ -1,23 +1,24 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import Modal from 'react-bootstrap/lib/Modal';
 
 let ModalWrapper = React.createClass({
     propTypes: {
-        trigger: React.PropTypes.element,
+        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,
             React.PropTypes.string
         ]).isRequired,
-        handleSuccess: React.PropTypes.func.isRequired,
+
-        children: React.PropTypes.oneOfType([
+        handleCancel: React.PropTypes.func,
-            React.PropTypes.arrayOf(React.PropTypes.element),
+        handleSuccess: React.PropTypes.func,
-            React.PropTypes.element
+        trigger: React.PropTypes.element
-        ])
     },
 
     getInitialState() {
@@ -38,15 +39,32 @@ let ModalWrapper = React.createClass({
         });
     },
 
+    handleCancel() {
+        if (typeof this.props.handleCancel === 'function') {
+            this.props.handleCancel();
+        }
+
+        this.hide();
+    },
+
     handleSuccess(response) {
+        if (typeof this.props.handleSuccess === 'function') {
             this.props.handleSuccess(response);
+        }
+
         this.hide();
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child) => {
+        return React.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+            return React.cloneElement(child, {
-                handleSuccess: this.handleSuccess
+                handleSuccess: (response) => {
+                    if (typeof child.props.handleSuccess === 'function') {
+                        child.props.handleSuccess(response);
+                    }
+
+                    this.handleSuccess(response);
+                }
             });
         });
     },
@@ -54,14 +72,23 @@ let ModalWrapper = React.createClass({
     render() {
         const { trigger, title } = this.props;
 
-        // If the trigger component exists, we add the ModalWrapper's show() as its onClick method.
+        // If the trigger component exists, we add the ModalWrapper's show() to its onClick method.
         // The trigger component should, in most cases, be a button.
-        const clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show})
+        const clonedTrigger = React.isValidElement(trigger) ?
-                                                            : null;
+            React.cloneElement(trigger, {
+                onClick: (...params) => {
+                    if (typeof trigger.props.onClick === 'function') {
+                        trigger.props.onClick(...params);
+                    }
+
+                    this.show();
+                }
+            }) : null;
+
         return (
             <span>
                 {clonedTrigger}
-                <Modal show={this.state.showModal} onHide={this.hide}>
+                <Modal show={this.state.showModal} onHide={this.handleCancel}>
                     <Modal.Header closeButton>
                         <Modal.Title>
                             {title}

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
         ])
     },
 
-    getFilterWidget(){
-        if (this.props.filterParams){
-            return (
-                <PieceListToolbarFilterWidget
-                    filterParams={this.props.filterParams}
-                    filterBy={this.props.filterBy}
-                    applyFilterBy={this.props.applyFilterBy} />
-            );
-        }
-        return null;
-    },
-
-    getOrderWidget(){
-        if (this.props.orderParams){
-            return (
-                <PieceListToolbarOrderWidget
-                    orderParams={this.props.orderParams}
-                    orderBy={this.props.orderBy}
-                    applyOrderBy={this.props.applyOrderBy}/>
-            );
-        }
-        return null;
-    },
-
     render() {
         const { className, children, searchFor, searchQuery } = this.props;
 
@@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
                                 {children}
                             </span>
                             <span className="pull-right">
-                                {this.getOrderWidget()}
+                                <PieceListToolbarOrderWidget
-                                {this.getFilterWidget()}
+                                    orderParams={this.props.orderParams}
+                                    orderBy={this.props.orderBy}
+                                    applyOrderBy={this.props.applyOrderBy}/>
+                                <PieceListToolbarFilterWidget
+                                    filterParams={this.props.filterParams}
+                                    filterBy={this.props.filterBy}
+                                    applyFilterBy={this.props.applyFilterBy} />
                             </span>
                             <SearchBar
                                 className="pull-right search-bar ascribe-input-glyph"

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
 
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
-        if(trueValuesOnly.length > 0) {
+        if (trueValuesOnly.length) {
             return { visibility: 'visible'};
         } else {
             return { visibility: 'hidden' };
@@ -81,8 +81,10 @@ let PieceListToolbarFilterWidget = React.createClass({
             </span>
         );
 
+        if (this.props.filterParams && this.props.filterParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-filter-widget-dropdown"
                     pullRight={true}
                     title={filterIcon}
                     className="ascribe-piece-list-toolbar-filter-widget">
@@ -90,13 +92,13 @@ let PieceListToolbarFilterWidget = React.createClass({
                         label also iterate over its items, to get all filterable options */}
                     {this.props.filterParams.map(({ label, items }, i) => {
                         return (
-                        <div>
+                            <div key={label}>
-                            <li
+                                <li style={{'textAlign': 'center'}}>
-                                style={{'textAlign': 'center'}}
-                                key={i}>
                                     <em>{label}:</em>
                                 </li>
-                            {items.map((param, j) => {
+                                {items.map((paramItem) => {
+                                    let itemLabel;
+                                    let param;
 
                                     // As can be seen in the PropTypes, a param can either
                                     // be a string or an object of the shape:
@@ -107,22 +109,22 @@ let PieceListToolbarFilterWidget = React.createClass({
                                     // }
                                     //
                                     // This is why we need to distinguish between both here.
-                                if(typeof param !== 'string') {
+                                    if (typeof paramItem !== 'string') {
-                                    label = param.label;
+                                        param = paramItem.key;
-                                    param = param.key;
+                                        itemLabel = paramItem.label;
                                     } else {
-                                    param = param;
+                                        param = paramItem;
-                                    label = param.split('acl_')[1].replace(/_/g, ' ');
+                                        itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
                                     }
 
                                     return (
                                         <li
-                                        key={j}
+                                            key={itemLabel}
                                             onClick={this.filterBy(param)}
                                             className="filter-widget-item">
                                             <div className="checkbox-line">
                                                 <span>
-                                                {getLangText(label)}
+                                                    {getLangText(itemLabel)}
                                                 </span>
                                                 <input
                                                     readOnly
@@ -137,6 +139,9 @@ let PieceListToolbarFilterWidget = React.createClass({
                     })}
                 </DropdownButton>
             );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     isOrderActive() {
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
-        if(this.props.orderBy.length > 0) {
+        if (this.props.orderBy && this.props.orderBy.length) {
             return { visibility: 'visible'};
         } else {
             return { visibility: 'hidden' };
@@ -45,24 +45,25 @@ let PieceListToolbarOrderWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        let orderIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
                 <span style={this.isOrderActive()}>&middot;</span>
             </span>
         );
-        return (
 
+        if (this.props.orderParams && this.props.orderParams.length) {
+            return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-order-widget-dropdown"
                     pullRight={true}
-                title={filterIcon}
+                    className="ascribe-piece-list-toolbar-filter-widget"
-                className="ascribe-piece-list-toolbar-filter-widget">
+                    title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
                     </li>
                     {this.props.orderParams.map((param) => {
                         return (
-                        <div>
                             <li
                                 key={param}
                                 onClick={this.orderBy(param)}
@@ -77,11 +78,13 @@ let PieceListToolbarOrderWidget = React.createClass({
                                         checked={param.indexOf(this.props.orderBy) > -1} />
                                 </div>
                             </li>
-                        </div>
                         );
                     })}
                 </DropdownButton>
             );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/ascribe_routes/proxy_handler.js

@@ -0,0 +1,126 @@
+'use strict';
+
+import React from 'react';
+import { RouteContext } from 'react-router';
+import history from '../../history';
+
+import UserStore from '../../stores/user_store';
+
+import AppConstants from '../../constants/application_constants';
+
+
+const { object } = React.PropTypes;
+const WHEN_ENUM = ['loggedIn', 'loggedOut'];
+
+/**
+ * Redirects the user conditionally according to his authentication
+ *
+ * @param {enum/string} options.when ('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) {
+        const whenValues = WHEN_ENUM.join(', ');
+        throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
+    }
+
+    return function(currentUser, query) {
+        const { redirectAuthenticated, redirect } = query;
+
+        // The user of this handler specifies with `when`, what kind of status
+        // needs to be checked to conditionally do - if that state is `true` -
+        // a redirect.
+        //
+        // So if when === 'loggedIn', we're checking if the user is logged in (and
+        // vice versa)
+        const isLoggedIn = Object.keys(currentUser).length && currentUser.email;
+        const exprToValidate = when === 'loggedIn' ? isLoggedIn : !isLoggedIn;
+
+        // and redirect if `true`.
+        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) {
+            delete query.redirect;
+            window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
+            return true;
+
+        } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
+            /*
+             * redirectAuthenticated contains an arbitrary path
+             * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
+             * hence transitionTo cannot be used directly.
+             *
+             * While we're getting rid of `query.redirect` explicitly in the
+             * above `else if` statement, here it's sufficient to just call
+             * `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well.
+             */
+            window.location = AppConstants.baseUrl + redirectAuthenticated;
+            return true;
+        }
+
+        return false;
+    };
+}
+
+/**
+ * Can be used in combination with `Route` as an intermediate Handler
+ * between the actual component we want to display dependent on a certain state
+ * that is required to display that component.
+ *
+ * @param {[function]} redirectFn A function that conditionally redirects
+ */
+export function ProxyHandler(...redirectFunctions) {
+    return (Component) => {
+        return React.createClass({
+            displayName: 'ProxyHandler',
+
+            propTypes: {
+                // Provided from AscribeApp
+                currentUser: React.PropTypes.object.isRequired,
+                whitelabel: React.PropTypes.object,
+
+                // Provided from router
+                location: object
+            },
+
+            // We need insert `RouteContext` here in order to be able
+            // to use the `Lifecycle` widget in further down nested components
+            mixins: [RouteContext],
+
+            componentDidMount() {
+                this.evaluateRedirectFunctions();
+            },
+
+            componentWillReceiveProps(nextProps) {
+                this.evaluateRedirectFunctions(nextProps);
+            },
+
+            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)) {
+                            break;
+                        }
+                    }
+                }
+            },
+
+            render() {
+                return (
+                    <Component {...this.props} />
+                );
+            }
+        });
+    };
+}

js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js

@@ -1,115 +0,0 @@
-'use strict';
-
-import React from 'react';
-import { History, RouteContext } from 'react-router';
-
-import UserStore from '../../../stores/user_store';
-import UserActions from '../../../actions/user_actions';
-
-import AppConstants from '../../../constants/application_constants';
-
-
-const { object } = React.PropTypes;
-const WHEN_ENUM = ['loggedIn', 'loggedOut'];
-
-/**
- * Can be used in combination with `Route` as an intermediate Handler
- * between the actual component we want to display dependent on a certain state
- * that is required to display that component.
- *
- * @param {string} options.to   Any type of route path that is defined in routes.js
- * @param {enum/string} options.when ('loggedIn' || 'loggedOut')
- */
-export default function AuthProxyHandler({to, when}) {
-
-    // validate `when`, must be contained in `WHEN_ENUM`.
-    // Throw an error otherwise.
-    if(WHEN_ENUM.indexOf(when) === -1) {
-        let whenValues = WHEN_ENUM.join(', ');
-        throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
-    }
-
-    return (Component) => {
-        return React.createClass({
-            displayName: 'AuthProxyHandler',
-
-            propTypes: {
-                location: object
-            },
-
-            // We need insert `RouteContext` here in order to be able
-            // to use the `Lifecycle` widget in further down nested components
-            mixins: [History, RouteContext],
-
-            getInitialState() {
-                return UserStore.getState();
-            },
-
-            componentDidMount() {
-                UserStore.listen(this.onChange);
-                UserActions.fetchCurrentUser();
-            },
-
-            componentDidUpdate() {
-                // Only refresh this component, when UserSources are not loading
-                // data from the server
-                if(!UserStore.isLoading()) {
-                    this.redirectConditionally();
-                }
-            },
-
-            componentWillUnmount() {
-                UserStore.unlisten(this.onChange);
-            },
-
-            redirectConditionally() {
-                const { query } = this.props.location;
-                const { redirectAuthenticated, redirect } = query;
-
-                // The user of this handler specifies with `when`, what kind of status
-                // needs to be checked to conditionally do - if that state is `true` -
-                // a redirect.
-                //
-                // So if when === 'loggedIn', we're checking if the user is logged in (and
-                // vice versa)
-                let exprToValidate = when === 'loggedIn' ?
-                    this.state.currentUser && this.state.currentUser.email :
-                    this.state.currentUser && !this.state.currentUser.email;
-
-                // and redirect if `true`.
-                if(exprToValidate) {
-                    window.setTimeout(() => this.history.replaceState(null, to, query));
-
-                    // 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) {
-
-                    delete query.redirect;
-                    window.setTimeout(() => this.history.replaceState(null, '/' + redirect, query));
-
-                } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
-                    /*
-                     * redirectAuthenticated contains an arbirary path
-                     * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
-                     * hence transitionTo cannot be used directly.
-                     *
-                     * While we're getting rid of `query.redirect` explicitly in the
-                     * above `else if` statement, here it's sufficient to just call
-                     * `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well.
-                     */
-                    window.location = AppConstants.baseUrl + redirectAuthenticated;
-                }
-            },
-
-            onChange(state) {
-                this.setState(state);
-            },
-
-            render() {
-                return (
-                    <Component {...this.props}/>
-                );
-            }
-        });
-    };
-}

js/components/ascribe_settings/account_settings.js

@@ -28,7 +28,8 @@ let AccountSettings = React.createClass({
 
     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);
     },
 
@@ -37,10 +38,11 @@ let AccountSettings = React.createClass({
     },
 
     render() {
+        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}
@@ -78,10 +80,9 @@ let AccountSettings = React.createClass({
                         getFormData={this.getFormDataProfile}>
                         <Property
                             name="hash_locally"
-                            className="ascribe-property-collapsible-toggle"
+                            className="ascribe-property-collapsible-toggle">
-                            style={{paddingBottom: 0}}>
                             <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>
@@ -97,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,34 +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);
     },
 
@@ -64,11 +53,11 @@ let ContractSettings = React.createClass({
             ContractListActions.removeContract(contract.id)
                 .then((response) => {
                     ContractListActions.fetchContractList(true);
-                    let notification = new GlobalNotificationModel(response.notification, 'success', 4000);
+                    const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 })
                 .catch((err) => {
-                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
+                    const notification = new GlobalNotificationModel(err, 'danger', 10000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
         };
@@ -83,8 +72,9 @@ let ContractSettings = React.createClass({
     },
 
     render() {
-        let publicContracts = this.getPublicContracts();
+        const { currentUser, location, whitelabel } = this.props;
-        let privateContracts = this.getPrivateContracts();
+        const publicContracts = this.getPublicContracts();
+        const privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
 
         setDocumentTitle(getLangText('Contracts settings'));
@@ -92,12 +82,11 @@ let ContractSettings = React.createClass({
         if (publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
-                    isPublic={true}
                     fileClassToUpload={{
                         singular: 'new contract',
                         plural: 'new contracts'
                     }}
-                    location={this.props.location}/>
+                    isPublic={true} />
             );
         }
 
@@ -108,23 +97,21 @@ 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) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                 <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_public_contract">
-                                                    <ContractSettingsUpdateButton
+                                                    <ContractSettingsUpdateButton contract={contract} />
-                                                        contract={contract}
-                                                        location={this.props.location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -147,29 +134,26 @@ let ContractSettings = React.createClass({
                     </AclProxy>
                     <AclProxy
                         aclName="acl_edit_private_contract"
-                        aclObject={this.state.currentUser.acl}>
+                        aclObject={currentUser.acl}>
                         <div>
                             <CreateContractForm
-                            isPublic={false}
                                 fileClassToUpload={{
                                     singular: getLangText('new contract'),
                                     plural: getLangText('new contracts')
                                 }}
-                            location={this.props.location}/>
+                                isPublic={false} />
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_private_contract">
-                                                    <ContractSettingsUpdateButton
+                                                    <ContractSettingsUpdateButton contract={contract} />
-                                                        contract={contract}
-                                                        location={this.props.location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"

js/components/ascribe_settings/contract_settings_update_button.js

@@ -2,17 +2,18 @@
 
 import React from 'react';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -24,38 +25,42 @@ let ContractSettingsUpdateButton = React.createClass({
     },
 
     submitFile(file) {
-        let contract = this.props.contract;
-
         // override the blob with the key's value
-        contract.blob = file.key;
+        const contract = Object.assign(this.props.contract, { blob: file.key });
 
         // send it to the server
         ContractListActions
             .changeContract(contract)
             .then((res) => {
-
                 // Display feedback to the user
-                let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000);
+                const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
 
                 // and refresh the contract list to get the updated contracs
-                return ContractListActions.fetchContractList(true);
+                return ContractListActions
-            })
+                            .fetchContractList(true)
-            .then(() => {
+                            // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
-                // Also, reset the fineuploader component so that the user can again 'update' his contract
+                            .then(this.refs.fineuploader.reset)
-                this.refs.fineuploader.reset();
-            })
                             .catch((err) => {
-                console.logGlobal(err);
+                                const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
-                let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
                                 GlobalNotificationActions.appendGlobalNotification(notification);
+
+                                return Promise.reject(err);
                             });
+            }, (err) => {
+                const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
+                GlobalNotificationActions.appendGlobalNotification(notification);
+
+                return Promise.reject(err);
+            })
+            .catch(console.logGlobal);
     },
 
     render() {
         return (
            <ReactS3FineUploader
-                fileInputElement={UploadButton()}
+               ref='fineuploader'
+               fileInputElement={UploadButton({ showLabel: false })}
                keyRoutine={{
                    url: AppConstants.serverUrl + 's3/key/',
                    fileClass: 'contract'
@@ -64,8 +69,8 @@ let ContractSettingsUpdateButton = React.createClass({
                    url: ApiUrls.blob_contracts
                }}
                validation={{
-                    itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                   itemLimit: validationTypes.registerWork.itemLimit,
-                    sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                   sizeLimit: validationTypes.additionalData.sizeLimit,
                    allowedExtensions: ['pdf']
                }}
                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}

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
-    },
+        ]),
 
-    getInitialState() {
+        // Provided from AscribeApp
-        return mergeOptions(
+        currentUser: React.PropTypes.object.isRequired,
-            UserStore.getState(),
+        whitelabel: React.PropTypes.object.isRequired,
-            WhitelabelStore.getState()
-        );
-    },
 
-    componentDidMount() {
+        // Provided from router
-        UserStore.listen(this.onChange);
+        location: React.PropTypes.object
-        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/ascribe_settings/webhook_settings.js

@@ -34,7 +34,6 @@ let WebhookSettings = React.createClass({
     componentDidMount() {
         WebhookStore.listen(this.onChange);
         WebhookActions.fetchWebhooks();
-        WebhookActions.fetchWebhookEvents();
     },
 
     componentWillUnmount() {
@@ -49,7 +48,7 @@ let WebhookSettings = React.createClass({
         return (event) => {
             WebhookActions.removeWebhook(webhookId);
 
-            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            const notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         };
     },
@@ -57,16 +56,16 @@ let WebhookSettings = React.createClass({
     handleCreateSuccess() {
         this.refs.webhookCreateForm.reset();
         WebhookActions.fetchWebhooks(true);
-        let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
+
+        const notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getWebhooks() {
-        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
-
         if (this.state.webhooks) {
-            content = this.state.webhooks.map(function(webhook, i) {
+            return this.state.webhooks.map(function(webhook, i) {
                 const event = webhook.event.split('.')[0];
+
                 return (
                     <ActionPanel
                         name={webhook.event}
@@ -94,8 +93,11 @@ let WebhookSettings = React.createClass({
                         } />
                     );
             }, this);
+        } else {
+            return (
+                <AscribeSpinner color='dark-blue' size='lg'/>
+            );
         }
-        return content;
     },
 
     getEvents() {
@@ -117,11 +119,11 @@ let WebhookSettings = React.createClass({
                         })}
                     </select>
                 </Property>);
-        }
+        } else {
             return null;
+        }
     },
 
-    
     render() {
         return (
             <CollapsibleParagraph
@@ -138,8 +140,7 @@ let WebhookSettings = React.createClass({
                         a target url.
                     </p>
                 </div>
-                <AclProxy
+                <AclProxy show={this.state.webhookEvents && this.state.webhookEvents.length}>
-                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
                     <Form
                         ref="webhookCreateForm"
                         url={ApiUrls.webhooks}

js/components/ascribe_slides_container/slides_container.js

@@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
     // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
     nextSlide(additionalQueryParams) {
         const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
-        let nextSlide = slideNum + 1;
+        this.setSlideNum(slideNum + 1, additionalQueryParams);
-        this.setSlideNum(nextSlide, additionalQueryParams);
     },
 
     setSlideNum(nextSlideNum, additionalQueryParams = {}) {
-        let queryParams = Object.assign(this.props.location.query, additionalQueryParams);
+        const { location: { pathname } } = this.props;
-        queryParams.slide_num = nextSlideNum;
+        const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
-        this.history.pushState(null, this.props.location.pathname, queryParams);
+
+        this.history.push({ pathname, query });
     },
 
     // breadcrumbs are defined as attributes of the slides.
     // To extract them we have to read the DOM element's attributes
     extractBreadcrumbs() {
         const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
-        let breadcrumbs = [];
+        const breadcrumbs = [];
 
         React.Children.map(this.props.children, (child, i) => {
             if(child && i >= startFrom && child.props['data-slide-title']) {

js/components/ascribe_social_share/facebook_share_button.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import FacebookHandler from '../../third_party/facebook_handler';
+
 import AppConstants from '../../constants/application_constants';
 
 import { InjectInHeadUtils } from '../../utils/inject_utils';
@@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({
         };
     },
 
-    componentDidMount() {
+    getInitialState() {
-        /**
+        return FacebookHandler.getState();
-         * Ideally we would only use FB.XFBML.parse() on the component that we're
-         * mounting, but doing this when we first load the FB sdk causes unpredictable behaviour.
-         * The button sometimes doesn't get initialized, likely because FB hasn't properly
-         * been initialized yet.
-         *
-         * To circumvent this, we always have the sdk parse the entire DOM on the initial load
-         * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
-         */
-
-        InjectInHeadUtils
-            .inject(AppConstants.facebook.sdkUrl)
-            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
     },
 
-    shouldComponentUpdate(nextProps) {
+    componentDidMount() {
-        return this.props.type !== nextProps.type;
+        FacebookHandler.listen(this.onChange);
+
+        this.loadFacebook();
+    },
+
+    shouldComponentUpdate(nextProps, nextState) {
+        // Don't update if the props haven't changed or the FB SDK loading status is still the same
+        return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded;
+    },
+
+    componentDidUpdate() {
+        // If the component changes, we need to reparse the share button's XFBML.
+        // To prevent cases where the Facebook SDK hasn't been loaded yet at this stage,
+        // let's make sure that it's injected before trying to reparse.
+        this.loadFacebook();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    loadFacebook() {
+        InjectInHeadUtils
+            .inject(AppConstants.facebook.sdkUrl)
+            .then(() => {
+                if (this.state.loaded) {
+                    FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
+                }
+            });
     },
 
     render() {

js/components/ascribe_table/models/table_models.js

@@ -2,15 +2,15 @@
 
 export class ColumnModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) {
+    constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) {
         this.transformFn = transformFn;
         this.columnName = columnName;
-        this.displayName = displayName;
+        this.displayElement = displayElement;
         this.displayType = displayType;
         this.rowWidth = rowWidth;
         this.canBeOrdered = canBeOrdered;
         this.transition = transition;
-        this.className = className ? className : '';
+        this.className = className;
     }
 }
 
@@ -28,7 +28,7 @@ export class ColumnModel {
  * our selfes, using this TransitionModel.
  */
 export class TransitionModel {
-    constructor(to, queryKey, valueKey, callback) {
+    constructor({ to, queryKey, valueKey, callback }) {
         this.to = to;
         this.queryKey = queryKey;
         this.valueKey = valueKey;

js/components/ascribe_table/table_header.js

@@ -1,5 +1,5 @@
-'use strict';
 
+'use strict';
 import React from 'react';
 
 import TableHeaderItem from './table_header_item';
@@ -29,7 +29,7 @@ let TableHeader = React.createClass({
                             <TableHeaderItem
                                 className={column.className}
                                 key={i}
-                                displayName={column.displayName}
+                                displayElement={column.displayElement}
                                 columnName={columnName}
                                 canBeOrdered={canBeOrdered}
                                 orderAsc={this.props.orderAsc}

js/components/ascribe_table/table_header_item.js

@@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
 let TableHeaderItem = React.createClass({
 
     propTypes: {
-        displayName: React.PropTypes.oneOfType([
+        displayElement: React.PropTypes.oneOfType([
             React.PropTypes.string,
             React.PropTypes.element
         ]).isRequired,
@@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
     },
 
     render() {
-        if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
+        const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
-            if(this.props.columnName === this.props.orderBy) {
+
+        if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
+            if (columnName === orderBy) {
                 return (
                     <th
-                        className={'ascribe-table-header-column ' + this.props.className}
+                        className={'ascribe-table-header-column ' + className}
                         onClick={this.changeOrder}>
-                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
+                        <span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
                     </th>
                 );
             } else {
                 return (
                     <th
-                        className={'ascribe-table-header-column ' + this.props.className}
+                        className={'ascribe-table-header-column ' + className}
                         onClick={this.changeOrder}>
-                        <span>{this.props.displayName}</span>
+                        <span>{displayElement}</span>
                     </th>
                 );
             }
         } else {
             return (
-                <th className={'ascribe-table-header-column ' + this.props.className}>
+                <th className={'ascribe-table-header-column ' + className}>
                     <span>
-                        {this.props.displayName}
+                        {displayElement}
                     </span>
                 </th>
             );

js/components/ascribe_table/table_item_acl_filtered.js

@@ -3,15 +3,15 @@
 import React from 'react';
 
 
-let TableItemAclFiltered = React.createClass({
+const TableItemAclFiltered = React.createClass({
     propTypes: {
         content: React.PropTypes.object,
-        notifications: React.PropTypes.string
+        notifications: React.PropTypes.array
     },
 
     render() {
-        var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
+        const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
-        if (this.props.notifications && this.props.notifications.length > 0){
+        if (this.props.notifications && this.props.notifications.length) {
             return (
                 <span>
                     {this.props.notifications[0].action_str}
@@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
             );
         }
 
-        let filteredAcls = Object.keys(this.props.content).filter((key) => {
+        const filteredAcls = Object.keys(this.props.content)
-            return availableAcls.indexOf(key) > -1 && this.props.content[key];
+            .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
-        });
+            .map((acl) => acl.split('acl_')[1])
-
+            .join('/');
-        filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
 
         return (
             <span>
-                {filteredAcls.join('/')}
+                {filteredAcls}
             </span>
         );
     }

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -25,7 +25,7 @@ let FileDragAndDropDialog = React.createClass({
     getDragDialog(fileClass) {
         if (dragAndDropAvailable) {
             return [
-                <p>{getLangText('Drag %s here', fileClass)}</p>,
+                <p className="file-drag-and-drop-dialog-title">{getLangText('Drag %s here', fileClass)}</p>,
                 <p>{getLangText('or')}</p>
             ];
         } else {
@@ -40,6 +40,7 @@ let FileDragAndDropDialog = React.createClass({
             uploadMethod,
             fileClassToUpload,
             onClick } = this.props;
+        let dialogElement;
 
         if (enableLocalHashing && !uploadMethod) {
             const currentQueryParams = getCurrentQueryParams();
@@ -50,9 +51,9 @@ let FileDragAndDropDialog = React.createClass({
             const queryParamsUpload = Object.assign({}, currentQueryParams);
             queryParamsUpload.method = 'upload';
 
-            return (
+            dialogElement = (
-                <div className="file-drag-and-drop-dialog present-options">
+                <div className="present-options">
-                    <p>{getLangText('Would you rather')}</p>
+                    <p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
                     {/*
                         The frontend in live is hosted under /app,
                         Since `Link` is appending that base url, if its defined
@@ -67,7 +68,7 @@ let FileDragAndDropDialog = React.createClass({
                         </span>
                     </Link>
 
-                    <span> or </span>
+                    <span> {getLangText('or')} </span>
 
                    <Link
                         to={`/${window.location.pathname.split('/').pop()}`}
@@ -80,31 +81,39 @@ let FileDragAndDropDialog = React.createClass({
             );
         } else {
             if (multipleFiles) {
-                return (
+                dialogElement = [
-                    <span className="file-drag-and-drop-dialog">
+                    this.getDragDialog(fileClassToUpload.plural),
-                        {this.getDragDialog(fileClassToUpload.plural)}
+                    (<span
-                        <span
                         className="btn btn-default"
                         onClick={onClick}>
                             {getLangText('choose %s to upload', fileClassToUpload.plural)}
-                        </span>
+                    </span>)
-                    </span>
+                ];
-                );
             } else {
                 const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
                                                        : getLangText('choose a %s to upload', fileClassToUpload.singular);
 
-                return (
+                dialogElement = [
-                    <span className="file-drag-and-drop-dialog">
+                    this.getDragDialog(fileClassToUpload.singular),
-                        {this.getDragDialog(fileClassToUpload.singular)}
+                    (<span
-                        <span
                         className="btn btn-default"
                         onClick={onClick}>
                             {dialog}
-                        </span>
+                    </span>)
-                    </span>
+                ];
-                );
             }
+
+            return (
+                <div className="file-drag-and-drop-dialog">
+                    <div className="hidden-print">
+                        {dialogElement}
+                    </div>
+                    {/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
+                    <p className="text-align-center visible-print">
+                        {getLangText('No files uploaded')}
+                    </p>
+                </div>
+            );
         }
     }
 });

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js

@@ -24,27 +24,30 @@ const FileDragAndDropPreview = React.createClass({
             s3Url: string,
             s3UrlSafe: string
         }).isRequired,
+
+        areAssetsDownloadable: bool,
+        areAssetsEditable: bool,
         handleDeleteFile: func,
         handleCancelFile: func,
         handlePauseFile: func,
         handleResumeFile: func,
-        areAssetsDownloadable: bool,
-        areAssetsEditable: bool,
         numberOfDisplayedFiles: number
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === FileStatus.UPLOADING) {
+        const { file, handlePauseFile, handleResumeFile } = this.props;
-            this.props.handlePauseFile(this.props.file.id);
+
-        } else if(this.props.file.status === FileStatus.PAUSED) {
+        if (file.status === FileStatus.UPLOADING) {
-            this.props.handleResumeFile(this.props.file.id);
+            handlePauseFile(file.id);
+        } else if (file.status === FileStatus.PAUSED) {
+            handleResumeFile(file.id);
         }
     },
 
     handleDeleteFile() {
-        const { handleDeleteFile,
+        const { file,
-                handleCancelFile,
+                handleDeleteFile,
-                file } = this.props;
+                handleCancelFile } = this.props;
         // `handleDeleteFile` is optional, so if its not submitted, don't run it
         //
         // For delete though, we only want to trigger it, when we're sure that
@@ -124,7 +127,7 @@ const FileDragAndDropPreview = React.createClass({
                 <FileDragAndDropPreviewOther
                     onClick={this.handleDeleteFile}
                     progress={file.progress}
-                    type={file.type.split('/')[1]}
+                    type={extractFileExtensionFromString(file.name)}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
                     downloadUrl={file.s3UrlSafe}

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js

@@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
 
         return (
             <div
-                className="file-drag-and-drop-preview-image"
+                className="file-drag-and-drop-preview-image hidden-print"
                 style={imageStyle}>
                     <AclProxy
                         show={showProgress}>

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js

@@ -71,17 +71,14 @@ const FileDragAndDropPreviewOther = React.createClass({
         }
 
         return (
-            <div
+            <div className="file-drag-and-drop-preview">
-                className="file-drag-and-drop-preview">
                 <ProgressBar
                     now={Math.ceil(progress)}
                     style={style}
                     className="ascribe-progress-bar ascribe-progress-bar-xs" />
-                <div className="file-drag-and-drop-preview-table-wrapper">
                 <div className="file-drag-and-drop-preview-other">
                     {actionSymbol}
-                        <p style={style}>{'.' + type}</p>
+                    <p style={style}>{'.' + (type ? type : 'file')}</p>
-                    </div>
                 </div>
             </div>
         );

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { displayValidProgressFilesFilter, FileStatus } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
@@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 const { func, array, bool, shape, string } = React.PropTypes;
 
 
-export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
+export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
     return React.createClass({
         displayName: 'UploadButton',
 
@@ -71,17 +72,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         handleOnClick() {
             if(!this.state.disabled) {
                 let evt;
-                const uploadingFiles = this.getUploadingFiles();
-                const uploadedFile = this.getUploadedFile();
 
-                this.clearSelection();
+                // First, remove any currently uploading or uploaded items
-                if(uploadingFiles.length) {
+                this.onClickRemove();
-                    this.props.handleCancelFile(uploadingFiles[0].id);
-                } else if(uploadedFile && !uploadedFile.s3UrlSafe) {
-                    this.props.handleCancelFile(uploadedFile.id);
-                } else if(uploadedFile && uploadedFile.s3UrlSafe) {
-                    this.props.handleDeleteFile(uploadedFile.id);
-                }
 
                 try {
                     evt = new MouseEvent('click', {
@@ -99,18 +92,19 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             }
         },
 
-        onClickCancel() {
-            this.clearSelection();
-            const uploadingFile = this.getUploadingFiles()[0];
-            this.props.handleCancelFile(uploadingFile.id);
-        },
-
         onClickRemove() {
-            this.clearSelection();
+            const uploadingFiles = this.getUploadingFiles();
             const uploadedFile = this.getUploadedFile();
-            this.props.handleDeleteFile(uploadedFile.id);
-        },
 
+            this.clearSelection();
+            if(uploadingFiles.length) {
+                this.props.handleCancelFile(uploadingFiles[0].id);
+            } else if(uploadedFile && !uploadedFile.s3UrlSafe) {
+                this.props.handleCancelFile(uploadedFile.id);
+            } else if(uploadedFile && uploadedFile.s3UrlSafe) {
+                this.props.handleDeleteFile(uploadedFile.id);
+            }
+        },
 
         getButtonLabel() {
             let { filesToUpload, fileClassToUpload } = this.props;
@@ -126,6 +120,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFileLabel() {
+            if (showLabel) {
                 const uploadedFile = this.getUploadedFile();
                 const uploadingFiles = this.getUploadingFiles();
 
@@ -133,7 +128,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                     return (
                         <span>
                             {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
-                        [<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>]
+                            [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
                         </span>
                     );
                 } else if (uploadedFile) {
@@ -145,9 +140,8 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                         </span>
                     );
                 } else {
-                return (
+                    return <span>{getLangText('No file chosen')}</span>;
-                    <span>{getLangText('No file chosen')}</span>
+                }
-                );
             }
         },
 
@@ -165,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
              */
             return (
-                <div className="upload-button-wrapper">
+                <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
                     {/*
                         The button needs to be of `type="button"` as it would
                         otherwise submit the form its in.

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -17,8 +17,8 @@ import AppConstants from '../../constants/application_constants';
 import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants';
 
 import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
-import { computeHashOfFile } from '../../utils/file_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
+import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils';
 import { getLangText } from '../../utils/lang_utils';
 
 
@@ -42,11 +42,11 @@ const ReactS3FineUploader = React.createClass({
         areAssetsDownloadable: bool,
         areAssetsEditable: bool,
         errorNotificationMessage: string,
-        showErrorPrompt: bool,
-        setWarning: func, // for when the parent component wants to be notified of uploader warnings (ie. upload failed)
-
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
+        onValidationFailed: func,
+        setWarning: func, // for when the parent component wants to be notified of uploader warnings (ie. upload failed)
+        showErrorPrompt: bool,
 
         // Handle form validation
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
@@ -82,25 +82,36 @@ const ReactS3FineUploader = React.createClass({
         ]),
 
         // S3 helpers
+        createBlobRoutine: shape({
+            url: string,
+            pieceId: number
+        }),
         keyRoutine: shape({
             url: string,
             fileClass: string,
-            pieceId: oneOfType([
+            pieceId: number
-                string,
-                number
-            ])
-        }),
-        createBlobRoutine: shape({
-            url: string,
-            pieceId: oneOfType([
-                string,
-                number
-            ])
         }),
 
         // FineUploader options
-        autoUpload: bool,
         debug: bool,
+
+        autoUpload: bool,
+        chunking: shape({
+            enabled: bool
+        }),
+        cors: shape({
+            expected: bool
+        }),
+        deleteFile: shape({
+            enabled: bool,
+            method: string,
+            endpoint: string,
+            customHeaders: object
+        }).isRequired,
+        formatFileName: func,
+        messages: shape({
+            unsupportedBrowser: string
+        }),
         multiple: bool,
         objectProperties: shape({
             acl: string
@@ -112,6 +123,18 @@ const ReactS3FineUploader = React.createClass({
                 csrfmiddlewaretoken: string
             })
         }),
+        resume: shape({
+            enabled: bool
+        }),
+        retry: shape({
+            enableAuto: bool
+        }),
+        session: shape({
+            customHeaders: object,
+            endpoint: string,
+            params: object,
+            refreshOnRequests: bool
+        }),
         signature: shape({
             endpoint: string
         }).isRequired,
@@ -123,38 +146,10 @@ const ReactS3FineUploader = React.createClass({
                 bitcoin_ID_noPrefix: string
             })
         }),
-        cors: shape({
-            expected: bool
-        }),
-        chunking: shape({
-            enabled: bool
-        }),
-        resume: shape({
-            enabled: bool
-        }),
-        deleteFile: shape({
-            enabled: bool,
-            method: string,
-            endpoint: string,
-            customHeaders: object
-        }).isRequired,
-        session: shape({
-            customHeaders: object,
-            endpoint: string,
-            params: object,
-            refreshOnRequests: bool
-        }),
         validation: shape({
             itemLimit: number,
-            sizeLimit: string,
+            sizeLimit: number,
             allowedExtensions: arrayOf(string)
-        }),
-        messages: shape({
-            unsupportedBrowser: string
-        }),
-        formatFileName: func,
-        retry: shape({
-            enableAuto: bool
         })
     },
 
@@ -314,22 +309,6 @@ const ReactS3FineUploader = React.createClass({
         this.setState(this.getInitialState());
     },
 
-    // Cancel uploads and clear previously selected files on the input element
-    cancelUploads(id) {
-        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
-
-        // Reset the file input element to clear the previously selected files so that
-        // the user can reselect them again.
-        this.clearFileSelection();
-    },
-
-    clearFileSelection() {
-        const { fileInput } = this.refs;
-        if (fileInput && typeof fileInput.clearSelection === 'function') {
-            fileInput.clearSelection();
-        }
-    },
-
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         let uuid = this.state.uploader.getUuid(fileId);
@@ -375,6 +354,7 @@ const ReactS3FineUploader = React.createClass({
                 // still we warn the user of this component
                 console.warn('createBlobRoutine was not defined for ReactS3FineUploader. Continuing without creating the blob on the server.');
                 resolve();
+                return;
             }
 
             window.fetch(createBlobRoutine.url, {
@@ -419,25 +399,13 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
-    setThumbnailForFileId(fileId, url) {
+    // Cancel uploads and clear previously selected files on the input element
-        const { filesToUpload } = this.state;
+    cancelUploads(id) {
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
 
-        if(fileId < filesToUpload.length) {
+        // Reset the file input element to clear the previously selected files so that
-            const changeSet = { $set: url };
+        // the user can reselect them again.
-            const newFilesToUpload = React.addons.update(filesToUpload, {
+        this.clearFileSelection();
-                [fileId]: { thumbnailUrl: changeSet }
-            });
-
-            this.setState({ filesToUpload: newFilesToUpload });
-        } else {
-            throw new Error('Accessing an index out of range of filesToUpload');
-        }
-    },
-
-    setWarning(hasWarning) {
-        if (typeof this.props.setWarning === 'function') {
-            this.props.setWarning(hasWarning);
-        }
     },
 
     checkFormSubmissionReady() {
@@ -453,18 +421,20 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
-    isFileValid(file) {
+    clearFileSelection() {
-        const { validation } = this.props;
+        const { fileInput } = this.refs;
+        if (fileInput && typeof fileInput.clearSelection === 'function') {
+            fileInput.clearSelection();
+        }
+    },
 
-        if (validation && file.size > validation.sizeLimit) {
+    getAllowedExtensions() {
-            const fileSizeInMegaBytes = validation.sizeLimit / 1000000;
+        const { validation: { allowedExtensions } = {} } = this.props;
 
-            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+        if (allowedExtensions && allowedExtensions.length) {
-            GlobalNotificationActions.appendGlobalNotification(notification);
+            return transformAllowedExtensionsToInputAcceptProp(allowedExtensions);
-
-            return false;
         } else {
-            return true;
+            return null;
         }
     },
 
@@ -503,8 +473,99 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
-    /* FineUploader specific callback function handlers */
+    isDropzoneInactive() {
+        const { areAssetsEditable, enableLocalHashing, multiple, showErrorPrompt, uploadMethod } = this.props;
+        const { errorState, filesToUpload } = this.state;
 
+        const filesToDisplay = filesToUpload.filter((file) => {
+            return file.status !== FileStatus.DELETED &&
+                   file.status !== FileStatus.CANCELED &&
+                   file.status !== FileStatus.UPLOAD_FAILED &&
+                   file.size !== -1;
+        });
+
+        return (enableLocalHashing && !uploadMethod) ||
+                !areAssetsEditable ||
+                (showErrorPrompt && errorState.errorClass) ||
+                (!multiple && filesToDisplay.length);
+    },
+
+    isFileValid(file) {
+        const { validation: { allowedExtensions, sizeLimit = 0 }, onValidationFailed } = this.props;
+        const fileExt = extractFileExtensionFromString(file.name);
+
+        if (file.size > sizeLimit) {
+            const fileSizeInMegaBytes = sizeLimit / 1000000;
+
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            if (typeof onValidationFailed === 'function') {
+                onValidationFailed(file);
+            }
+
+            return false;
+        } else if (allowedExtensions && !allowedExtensions.includes(fileExt)) {
+            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${allowedExtensions.join(', ')}`), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            return false;
+        } else {
+            return true;
+        }
+    },
+
+    selectValidFiles(files) {
+        return Array.from(files).reduce((validFiles, file) => {
+            if (this.isFileValid(file)) {
+                validFiles.push(file);
+            }
+            return validFiles;
+        }, []);
+    },
+
+    // This method has been made promise-based to immediately afterwards
+    // call a callback function (instantly after this.setState went through)
+    // This is e.g. needed when showing/hiding the optional thumbnail upload
+    // field in the registration form
+    setStatusOfFile(fileId, status) {
+        return Q.Promise((resolve) => {
+            let changeSet = {};
+
+            if (status === FileStatus.DELETED || status === FileStatus.CANCELED || status === FileStatus.UPLOAD_FAILED) {
+                changeSet.progress = { $set: 0 };
+            }
+
+            changeSet.status = { $set: status };
+
+            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
+
+            this.setState({ filesToUpload }, resolve);
+        });
+    },
+
+    setThumbnailForFileId(fileId, url) {
+        const { filesToUpload } = this.state;
+
+        if(fileId < filesToUpload.length) {
+            const changeSet = { $set: url };
+            const newFilesToUpload = React.addons.update(filesToUpload, {
+                [fileId]: { thumbnailUrl: changeSet }
+            });
+
+            this.setState({ filesToUpload: newFilesToUpload });
+        } else {
+            throw new Error('Accessing an index out of range of filesToUpload');
+        }
+    },
+
+    setWarning(hasWarning) {
+        if (typeof this.props.setWarning === 'function') {
+            this.props.setWarning(hasWarning);
+        }
+    },
+
+    /* FineUploader specific callback function handlers */
     onUploadChunk(id, name, chunkData) {
         let chunks = this.state.chunks;
 
@@ -546,7 +607,7 @@ const ReactS3FineUploader = React.createClass({
     onComplete(id, name, res, xhr) {
         // There has been an issue with the server's connection
         if (xhr && xhr.status === 0 && res.success) {
-            console.logGlobal(new Error('Upload succeeded with a status code 0'), false, {
+            console.logGlobal(new Error('Upload succeeded with a status code 0'), {
                 files: this.state.filesToUpload,
                 chunks: this.state.chunks,
                 xhr: this.getXhrErrorComment(xhr)
@@ -592,7 +653,7 @@ const ReactS3FineUploader = React.createClass({
         const { errorNotificationMessage, showErrorPrompt } = this.props;
         const { chunks, filesToUpload } = this.state;
 
-        console.logGlobal(errorReason, false, {
+        console.logGlobal(errorReason, {
             files: filesToUpload,
             chunks: chunks,
             xhr: this.getXhrErrorComment(xhr)
@@ -755,6 +816,13 @@ const ReactS3FineUploader = React.createClass({
         this.cancelUploads(fileId);
     },
 
+    handleCancelHashing() {
+        // Every progress tick of the hashing function in handleUploadFile there is a
+        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
+        // the hashing of all files immediately.
+        this.setState({ hashingProgress: -1 });
+    },
+
     handlePauseFile(fileId) {
         if(this.state.uploader.pauseUpload(fileId)) {
             this.setStatusOfFile(fileId, FileStatus.PAUSED);
@@ -806,15 +874,8 @@ const ReactS3FineUploader = React.createClass({
             return;
         }
 
-        // validate each submitted file if it fits the file size
+        // Select only the submitted files that fit the file size and allowed extensions
-        let validFiles = [];
+        files = this.selectValidFiles(files);
-        for(let i = 0; i < files.length; i++) {
-            if(this.isFileValid(files[i])) {
-                validFiles.push(files[i]);
-            }
-        }
-        // override standard files list with only valid files
-        files = validFiles;
 
         // if multiple is set to false and user drops multiple files into the dropzone,
         // take the first one and notify user that only one file can be submitted
@@ -928,13 +989,6 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
-    handleCancelHashing() {
-        // Every progress tick of the hashing function in handleUploadFile there is a
-        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
-        // the hashing of all files immediately.
-        this.setState({ hashingProgress: -1 });
-    },
-
     // ReactFineUploader is essentially just a react layer around s3 fineuploader.
     // However, since we need to display the status of a file (progress, uploading) as well as
     // be able to execute actions on a currently uploading file we need to exactly sync the file list
@@ -1004,56 +1058,6 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
-    // This method has been made promise-based to immediately afterwards
-    // call a callback function (instantly after this.setState went through)
-    // This is e.g. needed when showing/hiding the optional thumbnail upload
-    // field in the registration form
-    setStatusOfFile(fileId, status) {
-        return Q.Promise((resolve) => {
-            let changeSet = {};
-
-            if (status === FileStatus.DELETED || status === FileStatus.CANCELED || status === FileStatus.UPLOAD_FAILED) {
-                changeSet.progress = { $set: 0 };
-            }
-
-            changeSet.status = { $set: status };
-
-            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
-
-            this.setState({ filesToUpload }, resolve);
-        });
-    },
-
-    isDropzoneInactive() {
-        const { areAssetsEditable, enableLocalHashing, multiple, showErrorPrompt, uploadMethod } = this.props;
-        const { errorState, filesToUpload } = this.state;
-
-        const filesToDisplay = filesToUpload.filter((file) => {
-            return file.status !== FileStatus.DELETED &&
-                   file.status !== FileStatus.CANCELED &&
-                   file.status !== FileStatus.UPLOAD_FAILED &&
-                   file.size !== -1;
-        });
-
-        if ((enableLocalHashing && !uploadMethod) || !areAssetsEditable ||
-            (showErrorPrompt && errorState.errorClass) ||
-            (!multiple && filesToDisplay.length > 0)) {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
-    getAllowedExtensions() {
-        const { validation } = this.props;
-
-        if (validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
-            return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
-        } else {
-            return null;
-        }
-    },
-
     render() {
         const { errorState: { errorClass }, filesToUpload, uploadInProgress } = this.state;
         const {

js/components/ascribe_uploader/react_s3_fine_uploader_utils.js

@@ -1,6 +1,8 @@
 'use strict';
 
 import fineUploader from 'fineUploader';
+import MimeTypes from '../../constants/mime_types';
+
 
 // Re-export qq.status from FineUploader with an additional online
 // state that we use to keep track of files from S3.
@@ -89,8 +91,11 @@ export function displayValidProgressFilesFilter(file) {
  * @return {string}                   Joined string (comma-separated) of the passed-in array
  */
 export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) {
-    // add a dot in front of the extension
+    // Get the mime type of the extension if it's defined or add a dot in front of the extension
-    const prefixedAllowedExtensions = allowedExtensions.map((ext) => '.' + ext);
+    // This is important for Safari as it doesn't understand just the extension.
+    const prefixedAllowedExtensions = allowedExtensions.map((ext) => {
+        return MimeTypes[ext] || ('.' + ext);
+    });
 
     // generate a comma separated list to add them to the DOM element
     // See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

js/components/coa_verify_container.js

@@ -17,7 +17,17 @@ 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
+    },
+
     render() {
+        const { message, signature } = this.props.location.query;
         setDocumentTitle(getLangText('Verify your Certificate of Authenticity'));
 
         return (
@@ -27,7 +37,9 @@ let CoaVerifyContainer = React.createClass({
                     {getLangText('Verify your Certificate of Authenticity')}
                 </div>
 
-                <CoaVerifyForm />
+                <CoaVerifyForm
+                    message={message}
+                    signature={signature}/>
                 <br />
                 <br />
                 {getLangText('ascribe is using the following public key for verification')}:
@@ -47,17 +59,22 @@ let CoaVerifyContainer = React.createClass({
 
 
 let CoaVerifyForm = React.createClass({
+    propTypes: {
+        message: React.PropTypes.string,
+        signature: React.PropTypes.string
+    },
+
     handleSuccess(response){
-        let notification = null;
         if (response.verdict) {
-            notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
+            const notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
 
     render() {
+        const { message, signature } = this.props;
+
         return (
-            <div>
             <Form
                 url={ApiUrls.coa_verify}
                 handleSuccess={this.handleSuccess}
@@ -66,7 +83,8 @@ let CoaVerifyForm = React.createClass({
                         type="submit"
                         className="btn btn-default btn-wide">
                         {getLangText('Verify your Certificate of Authenticity')}
-                        </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
@@ -79,7 +97,7 @@ let CoaVerifyForm = React.createClass({
                         type="text"
                         placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
                         autoComplete="on"
-                            name="username"
+                        defaultValue={message}
                         required />
                 </Property>
                 <Property
@@ -90,11 +108,11 @@ let CoaVerifyForm = React.createClass({
                     <InputTextAreaToggable
                         rows={3}
                         placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
+                        defaultValue={signature}
                         required />
                 </Property>
                 <hr />
             </Form>
-            </div>
         );
     }
 });

js/components/error_not_found_page.js

@@ -1,21 +1,42 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
 
 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],
+
     getDefaultProps() {
         return {
             message: getLangText("Oops, the page you are looking for doesn't exist.")
         };
     },
 
+    componentDidMount() {
+        // The previous page, if any, is the second item in the locationQueue
+        const { locationQueue: [ , previousPage ] } = this.history;
+
+        if (previousPage) {
+            console.logGlobal('Page not found', {
+                previousPath: previousPage.pathname
+            });
+        }
+    },
+
     render() {
         return (
             <div className="row">

js/components/footer.js

@@ -5,9 +5,13 @@ import React from 'react';
 import { getLangText } from '../utils/lang_utils';
 
 let Footer = React.createClass({
+    propTypes: {
+        activeRoute: React.PropTypes.object.isRequired
+    },
+
     render() {
-        return (
+        return !this.props.activeRoute.hideFooter ? (
-            <div className="ascribe-footer">
+            <div className="ascribe-footer hidden-print">
                 <p className="ascribe-sub-sub-statement">
                   <br />
                   <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |
@@ -24,7 +28,7 @@ let Footer = React.createClass({
                     <a href="https://www.linkedin.com/company/4816284?trk=vsrp_companies_res_name&trkInfo=VSRPsearchId%3A122827941425632318075%2CVSRPtargetId%3A4816284%2CVSRPcmpt%3Aprimary" className="social social-linked-in" target="_blank"></a>
                 </p>
             </div>
-        );
+        ) : null;
     }
 });
 

js/components/global_action.js

@@ -1,43 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-let GlobalAction = React.createClass({
-    propTypes: {
-        requestActions: React.PropTypes.object
-    },
-
-    render() {
-        let pieceActions = null;
-        if (this.props.requestActions && this.props.requestActions.pieces){
-            pieceActions = this.props.requestActions.pieces.map((item) => {
-                return (
-                    <div className="ascribe-global-action">
-                        {item}
-                    </div>);
-            });
-        }
-        let editionActions = null;
-        if (this.props.requestActions && this.props.requestActions.editions){
-            editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => {
-                return this.props.requestActions.editions[pieceId].map((item) => {
-                    return (
-                        <div className="ascribe-global-action">
-                            {item}
-                        </div>);
-                });
-            });
-        }
-
-        if (pieceActions || editionActions) {
-            return (
-                <div className="ascribe-global-action-wrapper">
-                    {pieceActions}
-                    {editionActions}
-                </div>);
-        }
-        return null;
-    }
-});
-
-export default GlobalAction;

js/components/header.js

@@ -14,51 +14,34 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import AclProxy from './acl_proxy';
-
-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 EventActions from '../actions/event_actions';
 
+import PieceListStore from '../stores/piece_list_store';
+
+import AclProxy from './acl_proxy';
 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: {
-        showAddWork: React.PropTypes.bool,
+        currentUser: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-    },
+        whitelabel: React.PropTypes.object.isRequired
-
-    getDefaultProps() {
-        return {
-            showAddWork: true
-        };
     },
 
     getInitialState() {
-        return mergeOptions(
+        return PieceListStore.getState();
-            WhitelabelStore.getState(),
-            UserStore.getState()
-        );
     },
 
     componentDidMount() {
-        UserActions.fetchCurrentUser();
+        // Listen to the piece list store, but don't fetch immediately to avoid
-        UserStore.listen(this.onChange);
+        // conflicts with routes that may need to wait to load the piece list
-        WhitelabelActions.fetchWhitelabel();
+        PieceListStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
 
         // react-bootstrap 0.25.1 has a bug in which it doesn't
         // close the mobile expanded navigation after a click by itself.
@@ -67,13 +50,16 @@ let Header = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
+        PieceListStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
         //history.unlisten(this.onRouteChange);
     },
 
+    onChange(state) {
+        this.setState(state);
+    },
+
     getLogo() {
-        let { whitelabel } = this.state;
+        const { whitelabel } = this.props;
 
         if (whitelabel.head) {
             constructHead(whitelabel.head);
@@ -85,19 +71,19 @@ let Header = React.createClass({
                     <img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
                 </Link>
             );
-        }
+        } else {
-
             return (
                 <span>
                     <Link className="icon-ascribe-logo" to="/collection"/>
                 </span>
             );
+        }
     },
 
     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">
@@ -109,14 +95,6 @@ let Header = React.createClass({
         );
     },
 
-    onChange(state) {
-        this.setState(state);
-
-        if(this.state.currentUser && this.state.currentUser.email) {
-            EventActions.profileDidLoad.defer(this.state.currentUser);
-        }
-    },
-
     onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
@@ -146,63 +124,76 @@ let Header = React.createClass({
     // the collapsibleNav by itself on click. setState() isn't available on a ref so
     // doing this explicitly is the only way for now.
     onRouteChange() {
+        if (this.refs.navbar) {
             this.refs.navbar.state.navExpanded = false;
+        }
     },
 
     render() {
+        const { currentUser, routes  } = this.props;
+        const { unfilteredPieceListCount } = this.state;
+
         let account;
         let signup;
         let navRoutesLinks;
-        if (this.state.currentUser.username){
+
+        if (currentUser.username) {
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
+                    id="nav-route-user-dropdown"
                     eventKey="1"
-                    title={this.state.currentUser.username}>
+                    title={currentUser.username}>
                     <LinkContainer
                         to="/settings"
                         onClick={this.onMenuItemClick}>
-                        <MenuItem
+                        <MenuItem eventKey="2">
-                            eventKey="2">
                             {getLangText('Account Settings')}
                         </MenuItem>
                     </LinkContainer>
                     <AclProxy
-                        aclObject={this.state.currentUser.acl}
+                        aclObject={currentUser.acl}
                         aclName="acl_view_settings_contract">
                         <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>
                 </DropdownButton>
             );
-            navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
+
-        }
+            // Let's assume that if the piece list hasn't loaded yet (ie. when unfilteredPieceListCount === -1)
-        else {
+            // then the user has pieces
+            // FIXME: this doesn't work that well as the user may not load their piece list
+            // until much later, so we would show the 'Collection' header as available until
+            // they actually click on it and get redirected to piece registration.
+            navRoutesLinks = (
+                <NavRoutesLinks
+                    navbar
+                    right
+                    hasPieces={!!unfilteredPieceListCount}
+                    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>
@@ -213,12 +204,12 @@ let Header = React.createClass({
         return (
             <div>
                 <Navbar
+                    ref="navbar"
                     brand={this.getLogo()}
                     toggleNavKey={0}
                     fixedTop={true}
-                    ref="navbar">
+                    className="hidden-print">
-                    <CollapsibleNav
+                    <CollapsibleNav eventKey={0}>
-                        eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>
@@ -231,6 +222,9 @@ let Header = React.createClass({
                         {navRoutesLinks}
                     </CollapsibleNav>
                 </Navbar>
+                <p className="ascribe-print-header visible-print">
+                    <span className="icon-ascribe-logo" />
+                </p>
             </div>
         );
     }

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() {
@@ -125,7 +121,8 @@ let HeaderNotifications = React.createClass({
             return (
                 <Nav navbar right>
                     <DropdownButton
-                        ref='dropdownbutton'
+                        ref='dropdownButton'
+                        id="header-notification-dropdown"
                         eventKey="1"
                         title={
                             <span>

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/nav_routes_links.js

@@ -11,14 +11,33 @@ import AclProxy from './acl_proxy';
 import { sanitizeList } from '../utils/general_utils';
 
 
+const DISABLE_ENUM = ['hasPieces', 'noPieces'];
+
 let NavRoutesLinks = React.createClass({
     propTypes: {
+        hasPieces: React.PropTypes.bool,
         routes: React.PropTypes.arrayOf(React.PropTypes.object),
         userAcl: React.PropTypes.object
     },
 
+    isRouteDisabled(disableOn) {
+        const { hasPieces } = this.props;
+
+        if (disableOn) {
+            if (!DISABLE_ENUM.includes(disableOn)) {
+                throw new Error(`"disableOn" must be one of: [${DISABLE_ENUM.join(', ')}] got "${disableOn}" instead`);
+            }
+
+            if (disableOn === 'hasPieces') {
+                return hasPieces;
+            } else if (disableOn === 'noPieces') {
+                return !hasPieces;
+            }
+        }
+    },
+
     /**
-     * This method generales a bunch of react-bootstrap specific links
+     * This method generates a bunch of react-bootstrap specific links
      * from the routes we defined in one of the specific routes.js file
      *
      * We can define a headerTitle as well as a aclName and according to that the
@@ -33,21 +52,30 @@ let NavRoutesLinks = React.createClass({
             return;
         }
 
-        let links = node.childRoutes.map((child, j) => {
+        const links = node.childRoutes.map((child, j) => {
-            let childrenFn = null;
+            const { aclName, disableOn, headerTitle, path, childRoutes } = child;
-            let { aclName, headerTitle, path, childRoutes } = child;
-
-            // If the node has children that could be rendered, then we want
-            // to execute this function again with the child as the root
-            //
-            // Otherwise we'll just pass childrenFn as false
-            if(child.childRoutes && child.childRoutes.length > 0) {
-                childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
-            }
 
             // We validate if the user has set the title correctly,
             // otherwise we're not going to render his route
             if (headerTitle && typeof headerTitle === 'string') {
+                let nestedChildren = null;
+
+                // If the node has children that could be rendered, then we want
+                // to execute this function again with the child as the root
+                //
+                // Otherwise we'll just pass nestedChildren as false
+                if (child.childRoutes && child.childRoutes.length) {
+                    nestedChildren = this.extractLinksFromRoutes(child, userAcl, i++);
+                }
+
+                const navLinkProps = {
+                    headerTitle,
+                    children: nestedChildren,
+                    depth: i,
+                    disabled: this.isRouteDisabled(disableOn),
+                    routePath: `/${path}`
+                };
+
                 // if there is an aclName present on the route definition,
                 // we evaluate it against the user's acl
                 if (aclName && typeof aclName !== 'undefined') {
@@ -56,21 +84,14 @@ let NavRoutesLinks = React.createClass({
                             key={j}
                             aclName={aclName}
                             aclObject={this.props.userAcl}>
-                            <NavRoutesLinksLink
+                            <NavRoutesLinksLink {...navLinkProps} />
-                                headerTitle={headerTitle}
-                                routePath={'/' + path}
-                                depth={i}
-                                children={childrenFn}/>
                         </AclProxy>
                     );
                 } else {
                     return (
                         <NavRoutesLinksLink
                             key={j}
-                            headerTitle={headerTitle}
+                            {...navLinkProps} />
-                            routePath={'/' + path}
-                            depth={i}
-                            children={childrenFn}/>
                     );
                 }
             } else {
@@ -84,7 +105,7 @@ let NavRoutesLinks = React.createClass({
     },
 
     render() {
-        let {routes, userAcl} = this.props;
+        const {routes, userAcl} = this.props;
 
         return (
             <Nav {...this.props}>

js/components/nav_routes_links_link.js

@@ -11,25 +11,27 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 let NavRoutesLinksLink = React.createClass({
     propTypes: {
-        headerTitle: React.PropTypes.string,
-        routePath: React.PropTypes.string,
-
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ]),
-
+        disabled: React.PropTypes.bool,
-        depth: React.PropTypes.number
+        depth: React.PropTypes.number,
+        headerTitle: React.PropTypes.string,
+        routePath: React.PropTypes.string
     },
 
     render() {
-        let { children, headerTitle, depth, routePath } = this.props;
+        const { children, headerTitle, depth, disabled, routePath } = this.props;
 
         // if the route has children, we're returning a DropdownButton that will get filled
         // with MenuItems
         if (children) {
             return (
-                <DropdownButton title={headerTitle}>
+                <DropdownButton
+                    disabled={disabled}
+                    id={`nav-route-${headerTitle.toLowerCase()}-dropdown`}
+                    title={headerTitle}>
                     {children}
                 </DropdownButton>
             );
@@ -38,13 +40,17 @@ let NavRoutesLinksLink = React.createClass({
                 // if the node's child is actually a node of level one (a child of a node), we're
                 // returning a DropdownButton matching MenuItem
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <MenuItem>{headerTitle}</MenuItem>
                     </LinkContainer>
                 );
             } else if (depth === 0) {
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <NavItem>{headerTitle}</NavItem>
                     </LinkContainer>
                 );