diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js index a4a5ffe3..b1b8ef8a 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js @@ -20,11 +20,11 @@ import AccordionListItemEditionWidget from './accordion_list_item_edition_widget import CreateEditionsForm from '../ascribe_forms/create_editions_form'; import AclProxy from '../acl_proxy'; +import withContext from '../context/with_context'; import { whitelabelShape } from '../prop_types'; import { mergeOptions } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withWhitelabel } from '../../utils/react_utils'; let AccordionListItemWallet = React.createClass({ @@ -165,4 +165,4 @@ let AccordionListItemWallet = React.createClass({ } }); -export default withWhitelabel(AccordionListItemWallet); +export default withContext(AccordionListItemWallet, 'whitelabel'); diff --git a/js/components/ascribe_buttons/unconsign_request_button.js b/js/components/ascribe_buttons/unconsign_request_button.js index aa67e0fa..ab9258b5 100644 --- a/js/components/ascribe_buttons/unconsign_request_button.js +++ b/js/components/ascribe_buttons/unconsign_request_button.js @@ -7,10 +7,10 @@ import Button from 'react-bootstrap/lib/Button'; import ModalWrapper from '../ascribe_modal/modal_wrapper'; import UnConsignRequestForm from '../ascribe_forms/form_unconsign_request'; +import withContext from '../context/with_context'; import { currentUserShape } from '../prop_types'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; import ApiUrls from '../../constants/api_urls'; @@ -50,4 +50,4 @@ ${currentUser.username}` } }); -export default withCurrentUser(UnConsignRequestButton); +export default withContext(UnConsignRequestButton, 'currentUser'); diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index bb71e184..5d8f5e78 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -22,12 +22,12 @@ import Form from '../ascribe_forms/form'; import Property from '../ascribe_forms/property'; import AclProxy from '../acl_proxy'; +import withContext from '../context/with_context'; import ApiUrls from '../../constants/api_urls'; import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; /** @@ -151,7 +151,7 @@ const Edition = React.createClass({ }); -let EditionSummary = withCurrentUser(React.createClass({ +let EditionSummary = withContext(React.createClass({ propTypes: { edition: React.PropTypes.object.isRequired, @@ -216,7 +216,7 @@ let EditionSummary = withCurrentUser(React.createClass({ ); } -})); +}), 'isLoggedIn'); let CoaDetails = React.createClass({ @@ -359,4 +359,4 @@ let SpoolDetails = React.createClass({ } }); -export default withCurrentUser(Edition); +export default withContext(Edition, 'isLoggedIn'); diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 2433f625..3c084873 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -17,14 +17,13 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button'; import AscribeSpinner from '../ascribe_spinner'; import AclProxy from '../acl_proxy'; - +import withContext from '../context/with_context'; import { currentUserShape } from '../prop_types'; import AppConstants from '../../constants/application_constants'; import { extractFileExtensionFromUrl } from '../../utils/file_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; const EMBED_IFRAME_HEIGHT = { @@ -184,4 +183,4 @@ let MediaContainer = React.createClass({ } }); -export default withCurrentUser(MediaContainer); +export default withContext(MediaContainer, 'currentUser'); diff --git a/js/components/ascribe_detail/note.js b/js/components/ascribe_detail/note.js index 83d3a88f..6f03877f 100644 --- a/js/components/ascribe_detail/note.js +++ b/js/components/ascribe_detail/note.js @@ -9,8 +9,9 @@ import Form from '../ascribe_forms/form'; import Property from '../ascribe_forms/property'; import InputTextAreaToggable from '../ascribe_forms/input_textarea_toggable'; +import withContext from '../context/with_context'; + import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; let Note = React.createClass({ propTypes: { @@ -78,4 +79,4 @@ let Note = React.createClass({ } }); -export default withCurrentUser(Note); +export default withContext(Note, 'isLoggedIn'); diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index e750568b..43dac691 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -37,13 +37,13 @@ import ListRequestActions from '../ascribe_forms/list_form_request_actions'; import AclProxy from '../acl_proxy'; import AscribeSpinner from '../ascribe_spinner'; +import withContext from '../context/with_context'; import ApiUrls from '../../constants/api_urls'; import { setDocumentTitle } from '../../utils/dom_utils'; import { mergeOptions } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; /** * This is the component that implements resource/data specific functionality @@ -341,4 +341,4 @@ const PieceContainer = React.createClass({ } }); -export default withRouter(withCurrentUser(PieceContainer)); +export default withRouter(withContext(PieceContainer, 'isLoggedIn')); diff --git a/js/components/ascribe_forms/acl_form_factory.js b/js/components/ascribe_forms/acl_form_factory.js index a0b577be..4c45caf1 100644 --- a/js/components/ascribe_forms/acl_form_factory.js +++ b/js/components/ascribe_forms/acl_form_factory.js @@ -12,13 +12,13 @@ import LoanForm from '../ascribe_forms/form_loan'; import LoanRequestAnswerForm from '../ascribe_forms/form_loan_request_answer'; import ShareForm from '../ascribe_forms/form_share_email'; +import withContext from '../context/with_context'; import { currentUserShape } from '../prop_types'; import AppConstants from '../../constants/application_constants'; import ApiUrls from '../../constants/api_urls'; import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils'; -import { withCurrentUser } from '../../utils/react_utils'; let AclFormFactory = React.createClass({ propTypes: { @@ -138,4 +138,4 @@ let AclFormFactory = React.createClass({ } }); -export default withCurrentUser(AclFormFactory); +export default withContext(AclFormFactory, 'currentUser'); diff --git a/js/components/ascribe_forms/form_copyright_association.js b/js/components/ascribe_forms/form_copyright_association.js index 529ffc3a..b0b1b577 100644 --- a/js/components/ascribe_forms/form_copyright_association.js +++ b/js/components/ascribe_forms/form_copyright_association.js @@ -8,13 +8,13 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import Form from './form'; import Property from './property'; +import withContext from '../context/with_context'; import { currentUserShape } from '../prop_types'; import ApiUrls from '../../constants/api_urls'; import AppConstants from '../../constants/application_constants'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; const { bool } = React.PropTypes; @@ -85,4 +85,4 @@ const CopyrightAssociationForm = React.createClass({ } }); -export default withCurrentUser(CopyrightAssociationForm); +export default withContext(CopyrightAssociationForm, 'currentUser', 'isLoggedIn'); diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js index ca1b92ba..9c9d06aa 100644 --- a/js/components/ascribe_forms/form_register_piece.js +++ b/js/components/ascribe_forms/form_register_piece.js @@ -11,6 +11,7 @@ import FormSubmitButton from '../ascribe_buttons/form_submit_button'; import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button'; import AscribeSpinner from '../ascribe_spinner'; +import withContext from '../context/with_context'; import { currentUserShape } from '../prop_types'; import ApiUrls from '../../constants/api_urls'; @@ -19,7 +20,6 @@ import { validationParts, validationTypes } from '../../constants/uploader_const import { FileStatus, formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser } from '../../utils/react_utils'; let RegisterPieceForm = React.createClass({ @@ -240,4 +240,4 @@ let RegisterPieceForm = React.createClass({ } }); -export default withCurrentUser(RegisterPieceForm); +export default withContext(RegisterPieceForm, 'currentUser'); diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js index 12a0e40c..49e9b924 100644 --- a/js/components/ascribe_routes/proxy_handler.js +++ b/js/components/ascribe_routes/proxy_handler.js @@ -5,12 +5,11 @@ import withRouter from 'react-router/es6/withRouter'; import UserStore from '../../stores/user_store'; +import withContext from '../context/with_context'; import { currentUserShape, whitelabelShape } from '../prop_types'; import AppConstants from '../../constants/application_constants'; -import { withCurrentUser, withWhitelabel } from '../../utils/react_utils'; - const { bool, object } = React.PropTypes; const WHEN_ENUM = ['loggedIn', 'loggedOut']; @@ -135,6 +134,6 @@ export function ProxyHandler(...redirectFunctions) { } }); - return withRouter(withCurrentUser(withWhitelabel(ProxyHandlerComponent))); + return withRouter(withContext(ProxyHandlerComponent, 'currentUser', 'isLoggedIn', 'whitelabel')); }; } diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js index b4ca588c..980a19be 100644 --- a/js/components/ascribe_settings/account_settings.js +++ b/js/components/ascribe_settings/account_settings.js @@ -14,12 +14,12 @@ import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; import AclProxy from '../acl_proxy'; import AscribeSpinner from '../ascribe_spinner'; +import withContext from '../context/with_context'; import { currentUserShape, whitelabelShape } from '../prop_types'; import ApiUrls from '../../constants/api_urls'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../utils/react_utils'; let AccountSettings = React.createClass({ propTypes: { @@ -112,4 +112,4 @@ let AccountSettings = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(AccountSettings)); +export default withContext(AccountSettings, 'currentUser', 'whitelabel'); diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 51afb34b..d6187870 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -16,12 +16,12 @@ import CreateContractForm from '../ascribe_forms/form_create_contract'; import ActionPanel from '../ascribe_panel/action_panel'; import AclProxy from '../acl_proxy'; +import withContext from '../context/with_context'; import { currentUserShape, whitelabelShape } from '../prop_types'; import { setDocumentTitle } from '../../utils/dom_utils'; import { truncateTextAtCharIndex } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../utils/react_utils'; let ContractSettings = React.createClass({ @@ -183,4 +183,4 @@ let ContractSettings = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(ContractSettings)); +export default withContext(ContractSettings, 'currentUser', 'whitelabel'); diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js index e7e4dce4..a62d7aa2 100644 --- a/js/components/ascribe_settings/settings_container.js +++ b/js/components/ascribe_settings/settings_container.js @@ -10,11 +10,11 @@ import BitcoinWalletSettings from './bitcoin_wallet_settings'; import WebhookSettings from './webhook_settings'; import AclProxy from '../acl_proxy'; +import withContext from '../context/with_context'; import { whitelabelShape } from '../prop_types'; import { setDocumentTitle } from '../../utils/dom_utils'; import { getLangText } from '../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../utils/react_utils'; let SettingsContainer = React.createClass({ @@ -64,4 +64,4 @@ let SettingsContainer = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(SettingsContainer)); +export default withContext(SettingsContainer, 'isLoggedIn', 'whitelabel'); diff --git a/js/components/context/with_context.js b/js/components/context/with_context.js new file mode 100644 index 00000000..307e9bc0 --- /dev/null +++ b/js/components/context/with_context.js @@ -0,0 +1,137 @@ +import React from 'react'; +import { currentUserShape, whitelabelShape } from '../prop_types'; + +import { selectFromObject } from '../../utils/general_utils'; +import { getDisplayName } from '../../utils/react_utils'; + + +/** + * ContextPropDefinitions + * ====================== + * contextType definitions for `contextProp`s. + * + * Each definition is of the form: + * + * contextProp = { + * 'contextTypes': { + * 'contextType': contextType used by the contextProp, + * ... + * }, + * transformToProps: (optional) function that will receive the contextTypes from the component's + * context and should return an object containing the props to inject. + * } + * + * In the common case where your `contextProp` maps directly to the `contextType` used + * (eg. using `currentUser` as a `contextProp` to get the `currentUser` from context), you can omit + * the object definition and simply assign the `contextType` to the `contextProp`: + * + * contextProp = contextType + * + * as opposed to: + * + * contextProp = { + * 'contextTypes': { + * contextProp: contextType + * } + * } + */ +const ContextPropDefinitions = { + currentUser: currentUserShape.isRequired, + isLoggedIn: { + contextTypes: { + currentUser: currentUserShape.isRequired + }, + transformToProps: ({ currentUser }) => ({ isLoggedIn: !!currentUser.email }) + }, + whitelabel: whitelabelShape.isRequired +}; + +// Expand any shortform definitions in ContextPropDefinitions into a normalized form that's +// easier for withContext to work with +Object.entries(ContextPropDefinitions).forEach(([prop, def]) => { + if (!def.hasOwnProperty('contextTypes')) { + ContextPropDefinitions[prop] = { + contextTypes: { + [prop]: def + } + }; + } +}); + +/** + * Generalized version of react-router's `withRouter`. + * This injects the given `contextProp`s from the WrappedComponent's context into the component as + * a prop. + * + * Given `contextProp`s must have a matching definition in `ContextPropDefinitions`. + * + * @param {Component} WrappedComponent Component to inject context into + * @param {...string} contextProps Argument list of `contextProp`s (that must be registered in + * `ContextPropDefinitions`) to be injected into component as + * props + * @return {Component} Wrapped component + */ +export default function withContext(WrappedComponent, ...contextProps) { + const wrappedComponentName = getDisplayName(WrappedComponent); + + if (!contextProps.length) { + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn(`Used withContext on ${wrappedComponentName} without supplying any ` + + "items to inject from the component's context. Ignoring..."); + } + + return WrappedComponent; + } + + const contextTypes = contextProps.reduce((types, contextProp) => { + const contextDef = ContextPropDefinitions[contextProp]; + + if (contextDef) { + Object.assign(types, contextDef.contextTypes); + } else if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn(`No context types were found for '${contextProp}' when adding context ` + + `to ${wrappedComponentName}. Make sure to add the context information ` + + 'with_context.js.'); + } + + return types; + }, {}); + + const WithContext = (props, context) => { + if (process.env.NODE_ENV !== 'production') { + // Check if the expected context was available + Object.keys(contextTypes).forEach((contextType) => { + if (!context[contextType]) { + // eslint-disable-next-line no-console + console.warn(`Expected '${contextType}' did not exist in ` + + `${wrappedComponentName}'s context during mounting`); + } + }); + } + + const injectedProps = Object.assign({}, ...contextProps.map((contextProp) => { + const contextDef = ContextPropDefinitions[contextProp]; + + if (contextDef) { + const contextForProp = selectFromObject(context, Object.keys(contextDef.contextTypes)); + return typeof contextDef.transformToProps === 'function' + ? contextDef.transformToProps(contextForProp) + : contextForProp; + } else { + // Will be ignored by Object.assign() + return undefined; + } + })); + + return ( + + ); + }; + + WithContext.displayName = `WithContext(${wrappedComponentName}): ${contextProps.join(', ')}`; + WithContext.contextTypes = contextTypes; + + return WithContext; +} diff --git a/js/components/header.js b/js/components/header.js index 2111a17a..642c3951 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -14,6 +14,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import PieceListStore from '../stores/piece_list_store'; import AclProxy from './acl_proxy'; +import withContext from './context/with_context'; import HeaderNotifications from './header_notifications'; import HeaderNotificationDebug from './header_notification_debug'; import NavRoutesLinks from './nav_routes_links'; @@ -21,7 +22,6 @@ import { currentUserShape, whitelabelShape } from './prop_types'; import { constructHead } from '../utils/dom_utils'; import { getLangText } from '../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../utils/react_utils'; let Header = React.createClass({ @@ -219,4 +219,4 @@ let Header = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(Header)); +export default withContext(Header, 'currentUser', 'isLoggedIn', 'whitelabel'); diff --git a/js/components/header_notifications.js b/js/components/header_notifications.js index aedaba43..aed0e9da 100644 --- a/js/components/header_notifications.js +++ b/js/components/header_notifications.js @@ -10,10 +10,10 @@ import Nav from 'react-bootstrap/lib/Nav'; import NotificationActions from '../actions/notification_actions'; import NotificationStore from '../stores/notification_store'; +import withContext from './context/with_context'; import { currentUserShape } from './prop_types'; import { getLangText } from '../utils/lang_utils'; -import { withCurrentUser } from '../utils/react_utils'; let HeaderNotifications = React.createClass({ @@ -158,4 +158,4 @@ let NotificationListItem = React.createClass({ } }); -export default withCurrentUser(HeaderNotifications); +export default withContext(HeaderNotifications, 'currentUser', 'isLoggedIn'); diff --git a/js/components/login_container.js b/js/components/login_container.js index 15b09466..6e010cab 100644 --- a/js/components/login_container.js +++ b/js/components/login_container.js @@ -5,11 +5,11 @@ import Link from 'react-router/es6/Link'; import LoginForm from './ascribe_forms/form_login'; +import withContext from './context/with_context'; import { whitelabelShape } from './prop_types'; import { setDocumentTitle } from '../utils/dom_utils'; import { getLangText } from '../utils/lang_utils'; -import { withWhitelabel } from '../utils/react_utils'; let LoginContainer = React.createClass({ @@ -43,4 +43,4 @@ let LoginContainer = React.createClass({ } }); -export default withWhitelabel(LoginContainer); +export default withContext(LoginContainer, 'whitelabel'); diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 6bbd6fe3..78bf1f01 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -13,7 +13,9 @@ import GlobalNotificationActions from '../actions/global_notification_actions'; import Property from './ascribe_forms/property'; import RegisterPieceForm from './ascribe_forms/form_register_piece'; +import withContext from './context/with_context'; import { whitelabelShape } from './prop_types'; + import { getLangText } from '../utils/lang_utils'; import { setDocumentTitle } from '../utils/dom_utils'; @@ -105,5 +107,4 @@ const RegisterPiece = React.createClass( { } }); - -export default withRouter(RegisterPiece); +export default withRouter(withContext(RegisterPiece, 'whitelabel')); diff --git a/js/components/search_bar.js b/js/components/search_bar.js index bb1b2375..d2cc2863 100644 --- a/js/components/search_bar.js +++ b/js/components/search_bar.js @@ -2,6 +2,7 @@ import React from 'react'; +// FIXME: Input is deprecated import Input from 'react-bootstrap/lib/Input'; import Glyphicon from 'react-bootstrap/lib/Glyphicon'; @@ -140,4 +141,4 @@ const SearchBar = React.createClass({ }); -export default SearchBar; \ No newline at end of file +export default SearchBar; diff --git a/js/components/signup_container.js b/js/components/signup_container.js index 74c21218..7e7817b9 100644 --- a/js/components/signup_container.js +++ b/js/components/signup_container.js @@ -3,11 +3,11 @@ import Link from 'react-router/es6/Link'; import SignupForm from './ascribe_forms/form_signup'; +import withContext from './context/with_context'; import { whitelabelShape } from './prop_types'; import { setDocumentTitle } from '../utils/dom_utils'; import { getLangText } from '../utils/lang_utils'; -import { withWhitelabel } from '../utils/react_utils'; let SignupContainer = React.createClass({ @@ -68,4 +68,4 @@ let SignupContainer = React.createClass({ }); -export default withWhitelabel(SignupContainer); +export default withContext(SignupContainer, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js index fa2849a3..2dc28444 100644 --- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js +++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let Vivi23Landing = React.createClass({ @@ -69,4 +69,4 @@ let Vivi23Landing = React.createClass({ } }); -export default withWhitelabel(Vivi23Landing); +export default withContext(Vivi23Landing, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/artcity/artcity_landing.js b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js index 766be2da..1ed1ea5a 100644 --- a/js/components/whitelabel/wallet/components/artcity/artcity_landing.js +++ b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { getLangText } from '../../../../../utils/lang_utils'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let ArtcityLanding = React.createClass({ @@ -63,4 +63,4 @@ let ArtcityLanding = React.createClass({ } }); -export default withWhitelabel(ArtcityLanding); +export default withContext(ArtcityLanding, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js index 9454cacd..74a55095 100644 --- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js +++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js @@ -7,10 +7,10 @@ import AclButtonList from '../../../../ascribe_buttons/acl_button_list'; import DeleteButton from '../../../../ascribe_buttons/delete_button'; import AclProxy from '../../../../acl_proxy'; +import withContext from '../../../../context/with_context'; import { currentUserShape } from '../../../../prop_types'; import { mergeOptions } from '../../../../../utils/general_utils'; -import { withCurrentUser } from '../../../../../utils/react_utils'; let WalletActionPanel = React.createClass({ @@ -71,4 +71,4 @@ let WalletActionPanel = React.createClass({ } }); -export default withCurrentUser(WalletActionPanel); +export default withContext(WalletActionPanel, 'currentUser'); diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js index ed05f235..45093893 100644 --- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js +++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js @@ -13,11 +13,11 @@ import Note from '../../../../ascribe_detail/note'; import Piece from '../../../../../components/ascribe_detail/piece'; import AscribeSpinner from '../../../../ascribe_spinner'; +import withContext from '../../../../context/with_context'; import ApiUrls from '../../../../../constants/api_urls'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser } from '../../../../../utils/react_utils'; let WalletPieceContainer = React.createClass({ @@ -101,4 +101,4 @@ let WalletPieceContainer = React.createClass({ } }); -export default withCurrentUser(WalletPieceContainer); +export default withContext(WalletPieceContainer, 'isLoggedIn'); diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js index 9b9f74d1..b4bae8b7 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js @@ -6,11 +6,11 @@ import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let CylandLanding = React.createClass({ @@ -64,4 +64,4 @@ let CylandLanding = React.createClass({ } }); -export default withWhitelabel(CylandLanding); +export default withContext(CylandLanding, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js index d24d963c..5c0e7620 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js @@ -5,11 +5,11 @@ import PieceList from '../../../../piece_list'; import CylandAccordionListItem from './cyland_accordion_list/cyland_accordion_list_item'; +import withContext from '../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; let CylandPieceList = React.createClass({ propTypes: { @@ -57,4 +57,4 @@ let CylandPieceList = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(CylandPieceList)); +export default withContext(CylandPieceList, 'currentUser', 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js index 99edb2c0..bc278322 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js @@ -24,6 +24,7 @@ import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; import SlidesContainer from '../../../../ascribe_slides_container/slides_container'; +import withContext from '../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import ApiUrls from '../../../../../constants/api_urls'; @@ -32,7 +33,6 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getAclFormMessage } from '../../../../../utils/form_utils'; import { getLangText } from '../../../../../utils/lang_utils'; import { mergeOptions } from '../../../../../utils/general_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; const CylandRegisterPiece = React.createClass({ @@ -221,4 +221,4 @@ const CylandRegisterPiece = React.createClass({ } }); -export default withRouter(withCurrentUser(withWhitelabel(CylandRegisterPiece))); +export default withRouter(withContext(CylandRegisterPiece, 'currentUser', 'isLoggedIn')); diff --git a/js/components/whitelabel/wallet/components/demo/demo_landing.js b/js/components/whitelabel/wallet/components/demo/demo_landing.js index 5b005813..8c06913b 100644 --- a/js/components/whitelabel/wallet/components/demo/demo_landing.js +++ b/js/components/whitelabel/wallet/components/demo/demo_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let DemoLanding = React.createClass({ @@ -63,4 +63,4 @@ let DemoLanding = React.createClass({ } }); -export default withWhitelabel(DemoLanding); +export default withContext(DemoLanding, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js index d19f89f4..7aab851b 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js @@ -14,11 +14,10 @@ import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button'; import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece'; import AclProxy from '../../../../../acl_proxy'; +import withContext from '../../../../../context/with_context'; import { currentUserShape } from '../../../../../prop_types'; import { getLangText } from '../../../../../../utils/lang_utils'; -import { mergeOptions } from '../../../../../../utils/general_utils'; -import { withCurrentUser } from '../../../../../../utils/react_utils'; let IkonotvAccordionListItem = React.createClass({ @@ -120,4 +119,4 @@ let IkonotvAccordionListItem = React.createClass({ } }); -export default withCurrentUser(IkonotvAccordionListItem); +export default withContext(IkonotvAccordionListItem, 'currentUser'); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js index a0d6d7a2..e1987274 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js @@ -15,13 +15,13 @@ import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher'; import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association'; import Property from '../../../../ascribe_forms/property'; +import withContext from '../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import AppConstants from '../../../../../constants/application_constants'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; const IkonotvContractNotifications = React.createClass({ @@ -201,4 +201,4 @@ const IkonotvContractNotifications = React.createClass({ } }); -export default withRouter(withCurrentUser(withWhitelabel(IkonotvContractNotifications))); +export default withRouter(withContext(IkonotvContractNotifications, 'currentUser', 'whitelabel')); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js index f7f99041..55ca0e45 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js @@ -6,9 +6,10 @@ import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; + import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser } from '../../../../../utils/react_utils'; let IkonotvLanding = React.createClass({ @@ -101,4 +102,4 @@ let IkonotvLanding = React.createClass({ } }); -export default withCurrentUser(IkonotvLanding); +export default withContext(IkonotvLanding, 'isLoggedIn'); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js index 1b54ccad..014c2712 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js @@ -8,11 +8,11 @@ import NotificationStore from '../../../../../stores/notification_store'; import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item'; +import withContext from '../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; let IkonotvPieceList = React.createClass({ @@ -91,4 +91,4 @@ let IkonotvPieceList = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(IkonotvPieceList)); +export default withContext(IkonotvPieceList, 'currentUser', 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js index 15ba35ab..1c3dfdf0 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js @@ -22,13 +22,13 @@ import LoanForm from '../../../../ascribe_forms/form_loan'; import SlidesContainer from '../../../../ascribe_slides_container/slides_container'; +import withContext from '../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import ApiUrls from '../../../../../constants/api_urls'; import { mergeOptions } from '../../../../../utils/general_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; const IkonotvRegisterPiece = React.createClass({ @@ -246,4 +246,4 @@ const IkonotvRegisterPiece = React.createClass({ } }); -export default withRouter(withCurrentUser(withWhitelabel(IkonotvRegisterPiece))); +export default withRouter(withContext(IkonotvRegisterPiece, 'currentUser', 'whitelabel')); diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js index 48024ce4..97cf9b32 100644 --- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js +++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let LumenusLanding = React.createClass({ @@ -65,4 +65,4 @@ let LumenusLanding = React.createClass({ } }); -export default withWhitelabel(LumenusLanding); +export default withContext(LumenusLanding, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js index a7ff297d..e9efdf64 100644 --- a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js +++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js @@ -14,11 +14,11 @@ import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory'; import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper'; import AclProxy from '../../../../../acl_proxy'; +import withContext from '../../../../../context/with_context'; import { currentUserShape, whitelabelShape } from '../../../../../prop_types'; import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils'; import { getLangText } from '../../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../../utils/react_utils'; let MarketSubmitButton = React.createClass({ propTypes: { @@ -187,4 +187,4 @@ let MarketSubmitButton = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(MarketSubmitButton)); +export default withContext(MarketSubmitButton, 'currentUser', 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/market/market_landing.js b/js/components/whitelabel/wallet/components/market/market_landing.js index 026ddec5..be6213fc 100644 --- a/js/components/whitelabel/wallet/components/market/market_landing.js +++ b/js/components/whitelabel/wallet/components/market/market_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let MarketLanding = React.createClass({ @@ -69,4 +69,4 @@ let MarketLanding = React.createClass({ } }); -export default withWhitelabel(MarketLanding); +export default withContext(MarketLanding, 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js index fdddf66b..63bed28f 100644 --- a/js/components/whitelabel/wallet/components/market/market_piece_list.js +++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js @@ -4,12 +4,12 @@ import React from 'react'; import MarketAclButtonList from './market_buttons/market_acl_button_list'; +import withContext from '../../../../context/with_context'; import PieceList from '../../../../piece_list'; import { currentUserShape, whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withCurrentUser, withWhitelabel } from '../../../../../utils/react_utils'; let MarketPieceList = React.createClass({ propTypes: { @@ -71,4 +71,4 @@ let MarketPieceList = React.createClass({ } }); -export default withCurrentUser(withWhitelabel(MarketPieceList)); +export default withContext(MarketPieceList, 'currentUser', 'whitelabel'); diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js index a943226d..ea3f14c2 100644 --- a/js/components/whitelabel/wallet/components/market/market_register_piece.js +++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js @@ -17,12 +17,12 @@ import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; import SlidesContainer from '../../../../ascribe_slides_container/slides_container'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { mergeOptions } from '../../../../../utils/general_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let MarketRegisterPiece = React.createClass({ propTypes: { @@ -162,4 +162,4 @@ let MarketRegisterPiece = React.createClass({ } }); -export default withRouter(withWhitelabel(MarketRegisterPiece)); +export default withRouter(withContext(MarketRegisterPiece, 'whitelabel')); diff --git a/js/components/whitelabel/wallet/components/polline/polline_landing.js b/js/components/whitelabel/wallet/components/polline/polline_landing.js index 085975d0..52b74529 100644 --- a/js/components/whitelabel/wallet/components/polline/polline_landing.js +++ b/js/components/whitelabel/wallet/components/polline/polline_landing.js @@ -5,11 +5,11 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; +import withContext from '../../../../context/with_context'; import { whitelabelShape } from '../../../../prop_types'; import { setDocumentTitle } from '../../../../../utils/dom_utils'; import { getLangText } from '../../../../../utils/lang_utils'; -import { withWhitelabel } from '../../../../../utils/react_utils'; let PollineLanding = React.createClass({ @@ -63,4 +63,4 @@ let PollineLanding = React.createClass({ } }); -export default withWhitelabel(PollineLanding); +export default withContext(PollineLanding, 'whitelabel'); diff --git a/js/utils/react_utils.js b/js/utils/react_utils.js index da176149..af70e083 100644 --- a/js/utils/react_utils.js +++ b/js/utils/react_utils.js @@ -1,7 +1,3 @@ -import React from 'react'; -import { currentUserShape, whitelabelShape } from '../components/prop_types'; - - /** * Taken from react-router (https://github.com/reactjs/react-router/blob/master/modules/withRouter.js) * FIXME: should be put into react-component's utils @@ -9,48 +5,3 @@ import { currentUserShape, whitelabelShape } from '../components/prop_types'; export function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } - -/** - * Similar to react-router's `withRouter`, this injects the `currentUser` from the Component's - * context into the Component as a prop. It also injects whether the user's logged in or not as - * `isLoggedIn`. - * - * @param {Component} Component Component to inject `context.currentUser` and `isLoggedIn` into - * @return {Component} Wrapped component - */ -export function withCurrentUser(Component) { - const contextTypes = { - currentUser: currentUserShape.isRequired - }; - - const WithCurrentUser = (props, { currentUser }) => ( - - ); - - WithCurrentUser.displayName = `WithCurrentUser(${getDisplayName(Component)})`; - WithCurrentUser.contextTypes = contextTypes; - - return WithCurrentUser; -} - -/** - * Similar to react-router's `withRouter`, this injects the `whitelabel` from the Component's - * context into the Component as a prop. - * - * @param {Component} Component Component to inject `context.whitelabel` into - * @return {Component} Wrapped component - */ -export function withWhitelabel(Component) { - const contextTypes = { - whitelabel: whitelabelShape.isRequired - }; - - const WithWhitelabel = (props, { whitelabel }) => ( - - ); - - WithWhitelabel.displayName = `WithWhitelabel(${getDisplayName(Component)})`; - WithWhitelabel.contextTypes = contextTypes; - - return WithWhitelabel; -}