From 56eff0d9edb392f9a710b3418d2eeb9cee4255dc Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Fri, 6 Nov 2015 15:10:29 +0100 Subject: [PATCH] Improve DRYness of acl buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../ascribe_buttons/acls/acl_button.js | 122 +++++++++--------- .../ascribe_buttons/acls/consign_button.js | 23 +--- .../ascribe_buttons/acls/loan_button.js | 23 +--- .../acls/loan_request_button.js | 20 +-- .../ascribe_buttons/acls/share_button.js | 20 +-- .../ascribe_buttons/acls/transfer_button.js | 20 +-- .../ascribe_buttons/acls/unconsign_button.js | 20 +-- .../proxy_routes/auth_proxy_handler.js | 2 + js/constants/application_constants.js | 2 +- 9 files changed, 95 insertions(+), 157 deletions(-) diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js index d81a19f4..82650bb6 100644 --- a/js/components/ascribe_buttons/acls/acl_button.js +++ b/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 ( - - - {this.sanitizeAction()} - - } - handleSuccess={handleSuccess} - title={title}> - - - - ); +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 ( + + + {this.sanitizeAction()} + + } + handleSuccess={handleSuccess} + title={title}> + + + + ); + } + }); +} diff --git a/js/components/ascribe_buttons/acls/consign_button.js b/js/components/ascribe_buttons/acls/consign_button.js index 6a3759db..88c86097 100644 --- a/js/components/ascribe_buttons/acls/consign_button.js +++ b/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 ( - - ); - } +export default AclButton({ + action: 'acl_consign', + displayName: 'ConsignButton', + title: getLangText('Consign artwork'), + tooltip: getLangText('Have someone else sell the artwork') }); - -export default ConsignButton; diff --git a/js/components/ascribe_buttons/acls/loan_button.js b/js/components/ascribe_buttons/acls/loan_button.js index 283b43eb..4b803ceb 100644 --- a/js/components/ascribe_buttons/acls/loan_button.js +++ b/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 ( - - ); - } +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; diff --git a/js/components/ascribe_buttons/acls/loan_request_button.js b/js/components/ascribe_buttons/acls/loan_request_button.js index f4ffe9a4..a1ec5f3b 100644 --- a/js/components/ascribe_buttons/acls/loan_request_button.js +++ b/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 ( - - ); - } +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; diff --git a/js/components/ascribe_buttons/acls/share_button.js b/js/components/ascribe_buttons/acls/share_button.js index 4fb914a0..83781aed 100644 --- a/js/components/ascribe_buttons/acls/share_button.js +++ b/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 ( - - ); - } +export default AclButton({ + action: 'acl_share', + displayName: 'ShareButton', + title: getLangText('Share artwork'), + tooltip: getLangText('Share the artwork') }); - -export default ShareButton; diff --git a/js/components/ascribe_buttons/acls/transfer_button.js b/js/components/ascribe_buttons/acls/transfer_button.js index e85a81d1..346907ca 100644 --- a/js/components/ascribe_buttons/acls/transfer_button.js +++ b/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 ( - - ); - } +export default AclButton({ + action: 'acl_transfer', + displayName: 'TransferButton', + title: getLangText('Transfer artwork'), + tooltip: getLangText('Transfer the ownership of the artwork') }); - -export default TransferButton; diff --git a/js/components/ascribe_buttons/acls/unconsign_button.js b/js/components/ascribe_buttons/acls/unconsign_button.js index 39029c18..ce1ed0bc 100644 --- a/js/components/ascribe_buttons/acls/unconsign_button.js +++ b/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 ( - - ); - } +export default AclButton({ + action: 'acl_unconsign', + displayName: 'UnconsignButton', + title: getLangText('Unconsign artwork'), + tooltip: getLangText('Have the owner manage his sales again') }); - -export default UnconsignButton; diff --git a/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js b/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js index cdfc129b..4f0fe307 100644 --- a/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js +++ b/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 }, diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index 0fe5e210..84e8fd2f 100644 --- a/js/constants/application_constants.js +++ b/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,