Improve DRYness of acl buttons

The React dev tools don’t seem to be able to automatically pick up the
displayName when using createClass from within another function, so
it’s added here to give clarity when debugging.

js/components/ascribe_buttons/acls/acl_button.js

@@ -19,65 +19,67 @@ import ApiUrls from '../../../constants/api_urls';
 import { getAclFormMessage, getAclFormDataId } from '../../../utils/form_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let AclButton = React.createClass({
+export default function ({ action, displayName, title, tooltip }) {
-    propTypes: {
+    if (AppConstants.aclList.indexOf(action) < 0) {
-        action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
+        console.warn('Your specified aclName did not match a an acl class.');
-        availableAcls: React.PropTypes.object.isRequired,
-        buttonAcceptName: React.PropTypes.string,
-        buttonAcceptClassName: React.PropTypes.string,
-        currentUser: React.PropTypes.object.isRequired,
-        email: React.PropTypes.string,
-        pieceOrEditions: React.PropTypes.oneOfType([
-            React.PropTypes.object,
-            React.PropTypes.array
-        ]).isRequired,
-        title: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func.isRequired,
-        className: React.PropTypes.string
-    },
-
-    // Removes the acl_ prefix and converts to upper case
-    sanitizeAction() {
-        if (this.props.buttonAcceptName) {
-            return this.props.buttonAcceptName;
-        }
-        return this.props.action.split('acl_')[1].toUpperCase();
-    },
-
-    render() {
-        const {
-            action,
-            availableAcls,
-            buttonAcceptClassName,
-            currentUser,
-            email,
-            pieceOrEditions,
-            handleSuccess,
-            title } = this.props;
-
-        return (
-            <AclProxy
-                aclName={action}
-                aclObject={availableAcls}>
-                <ModalWrapper
-                    trigger={
-                        <button
-                            className={classNames('btn', 'btn-default', 'btn-sm', buttonAcceptClassName)}>
-                            {this.sanitizeAction()}
-                        </button>
-                    }
-                    handleSuccess={handleSuccess}
-                    title={title}>
-                    <AclFormFactory
-                        action={action}
-                        currentUser={currentUser}
-                        email={email}
-                        pieceOrEditions={pieceOrEditions}
-                        showNotification />
-                </ModalWrapper>
-            </AclProxy>
-        );
     }
-});
 
-export default AclButton;
+    return React.createClass({
+        displayName: displayName,
+
+        propTypes: {
+            availableAcls: React.PropTypes.object.isRequired,
+            buttonAcceptName: React.PropTypes.string,
+            buttonAcceptClassName: React.PropTypes.string,
+            currentUser: React.PropTypes.object.isRequired,
+            email: React.PropTypes.string,
+            pieceOrEditions: React.PropTypes.oneOfType([
+                React.PropTypes.object,
+                React.PropTypes.array
+            ]).isRequired,
+            handleSuccess: React.PropTypes.func.isRequired,
+            className: React.PropTypes.string
+        },
+
+        // Removes the acl_ prefix and converts to upper case
+        sanitizeAction() {
+            if (this.props.buttonAcceptName) {
+                return this.props.buttonAcceptName;
+            }
+            return action.split('acl_')[1].toUpperCase();
+        },
+
+        render() {
+            const {
+                availableAcls,
+                buttonAcceptClassName,
+                currentUser,
+                email,
+                pieceOrEditions,
+                handleSuccess } = this.props;
+
+            return (
+                <AclProxy
+                    aclName={action}
+                    aclObject={availableAcls}>
+                    <ModalWrapper
+                        trigger={
+                            <button
+                                className={classNames('btn', 'btn-default', 'btn-sm', buttonAcceptClassName)}>
+                                {this.sanitizeAction()}
+                            </button>
+                        }
+                        handleSuccess={handleSuccess}
+                        title={title}>
+                        <AclFormFactory
+                            action={action}
+                            currentUser={currentUser}
+                            email={email}
+                            pieceOrEditions={pieceOrEditions}
+                            showNotification />
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        }
+    });
+}

js/components/ascribe_buttons/acls/consign_button.js

@@ -4,24 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let ConsignButton = React.createClass({
+export default AclButton({
-    propTypes: {
+    action: 'acl_consign',
-        ...omitFromObject(AclButton.propTypes, ['action']),
+    displayName: 'ConsignButton',
-        email: React.PropTypes.string
+    title: getLangText('Consign artwork'),
-    },
+    tooltip: getLangText('Have someone else sell the artwork')
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_consign'
-                title={getLangText('Consign artwork')}
-                tooltip={getLangText('Have someone else sell the artwork')} />
-        );
-    }
 });
-
-export default ConsignButton;

js/components/ascribe_buttons/acls/loan_button.js

@@ -4,24 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let LoanButton = React.createClass({
+export default AclButton({
-    propTypes: {
+    action: 'acl_loan',
-        ...omitFromObject(AclButton.propTypes, ['action']),
+    displayName: 'LoanButton',
-        email: React.PropTypes.string
+    title: getLangText('Loan artwork'),
-    },
+    tooltip: getLangText('Loan your artwork for a limited period of time')
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_loan'
-                title={getLangText('Loan artwork')}
-                tooltip={getLangText('Loan your artwork for a limited period of time')} />
-        );
-    }
 });
-
-export default LoanButton;

js/components/ascribe_buttons/acls/loan_request_button.js

@@ -4,21 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let LoanButton = React.createClass({
+export default AclButton({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
+    action: 'acl_loan_request',
-
+    displayName: 'LoanRequestButton',
-    render() {
+    title: getLangText('Loan artwork'),
-        return (
+    tooltip: getLangText('Someone requested you to loan your artwork for a limited period of time')
-            <AclButton
-                {...this.props}
-                action='acl_loan_request'
-                title={getLangText('Loan artwork')}
-                tooltip={getLangText('Someone requested you to loan your artwork for a limited period of time')} />
-        );
-    }
 });
-
-export default LoanButton;

js/components/ascribe_buttons/acls/share_button.js

@@ -4,21 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let ShareButton = React.createClass({
+export default AclButton({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
+    action: 'acl_share',
-
+    displayName: 'ShareButton',
-    render() {
+    title: getLangText('Share artwork'),
-        return (
+    tooltip: getLangText('Share the artwork')
-            <AclButton
-                {...this.props}
-                action='acl_share'
-                title={getLangText('Share artwork')}
-                tooltip={getLangText('Share the artwork')} />
-        );
-    }
 });
-
-export default ShareButton;

js/components/ascribe_buttons/acls/transfer_button.js

@@ -4,21 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let TransferButton = React.createClass({
+export default AclButton({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
+    action: 'acl_transfer',
-
+    displayName: 'TransferButton',
-    render() {
+    title: getLangText('Transfer artwork'),
-        return (
+    tooltip: getLangText('Transfer the ownership of the artwork')
-            <AclButton
-                {...this.props}
-                action='acl_transfer'
-                title={getLangText('Transfer artwork')}
-                tooltip={getLangText('Transfer the ownership of the artwork')} />
-        );
-    }
 });
-
-export default TransferButton;

js/components/ascribe_buttons/acls/unconsign_button.js

@@ -4,21 +4,11 @@ import React from 'react';
 
 import AclButton from './acl_button';
 
-import { omitFromObject } from '../../../utils/general_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
-let UnconsignButton = React.createClass({
+export default AclButton({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
+    action: 'acl_unconsign',
-
+    displayName: 'UnconsignButton',
-    render() {
+    title: getLangText('Unconsign artwork'),
-        return (
+    tooltip: getLangText('Have the owner manage his sales again')
-            <AclButton
-                {...this.props}
-                action='acl_unconsign'
-                title={getLangText('Unconsign artwork')}
-                tooltip={getLangText('Have the owner manage his sales again')} />
-        );
-    }
 });
-
-export default UnconsignButton;

js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js

@@ -31,6 +31,8 @@ export default function AuthProxyHandler({to, when}) {
 
     return (Component) => {
         return React.createClass({
+            displayName: 'AuthProxyHandler',
+
             propTypes: {
                 location: object
             },

js/constants/application_constants.js

@@ -11,7 +11,7 @@ let constants = {
     'serverUrl': window.SERVER_URL,
     'baseUrl': window.BASE_URL,
     'aclList': ['acl_coa', 'acl_consign', 'acl_delete', 'acl_download', 'acl_edit', 'acl_create_editions', 'acl_view_editions',
-                'acl_loan', 'acl_share', 'acl_transfer', 'acl_unconsign', 'acl_unshare', 'acl_view',
+                'acl_loan', 'acl_loan_request', 'acl_share', 'acl_transfer', 'acl_unconsign', 'acl_unshare', 'acl_view',
                 'acl_withdraw_transfer', 'acl_wallet_submit'],
 
     'version': 0.1,