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({
-    propTypes: {
-        action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        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 function ({ action, displayName, title, tooltip }) {
+    if (AppConstants.aclList.indexOf(action) < 0) {
+        console.warn('Your specified aclName did not match a an acl class.');
     }
-});
 
-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({
-    propTypes: {
-        ...omitFromObject(AclButton.propTypes, ['action']),
-        email: React.PropTypes.string
-    },
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_consign'
-                title={getLangText('Consign artwork')}
-                tooltip={getLangText('Have someone else sell the artwork')} />
-        );
-    }
+export default AclButton({
+    action: 'acl_consign',
+    displayName: 'ConsignButton',
+    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({
-    propTypes: {
-        ...omitFromObject(AclButton.propTypes, ['action']),
-        email: React.PropTypes.string
-    },
-
-    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 AclButton({
+    action: 'acl_loan',
+    displayName: 'LoanButton',
+    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({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
-
-    render() {
-        return (
-            <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 AclButton({
+    action: 'acl_loan_request',
+    displayName: 'LoanRequestButton',
+    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({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_share'
-                title={getLangText('Share artwork')}
-                tooltip={getLangText('Share the artwork')} />
-        );
-    }
+export default AclButton({
+    action: 'acl_share',
+    displayName: 'ShareButton',
+    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({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_transfer'
-                title={getLangText('Transfer artwork')}
-                tooltip={getLangText('Transfer the ownership of the artwork')} />
-        );
-    }
+export default AclButton({
+    action: 'acl_transfer',
+    displayName: 'TransferButton',
+    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({
-    propTypes: omitFromObject(AclButton.propTypes, ['action']),
-
-    render() {
-        return (
-            <AclButton
-                {...this.props}
-                action='acl_unconsign'
-                title={getLangText('Unconsign artwork')}
-                tooltip={getLangText('Have the owner manage his sales again')} />
-        );
-    }
+export default AclButton({
+    action: 'acl_unconsign',
+    displayName: 'UnconsignButton',
+    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,