Merge pull request #205 from ascribe/use-js-utility-belt

Use js-utility-belt

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "extends": "ascribe",
+    "extends": "ascribe-react",
     "rules": {
         "no-console": [1, { "allow": ["error", "logGlobal"] }]
     }

js/app.js

@@ -12,10 +12,10 @@ import history from './history';
 
 import AppConstants from './constants/application_constants';
 
-import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
+import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants';
-import { initLogging } from './utils/error_utils';
+import { initLogging } from './utils/error';
-import { getSubdomain } from './utils/general_utils';
+import { getCurrentSubdomain } from './utils/url';
-import requests from './utils/requests';
+import UrlResolver from './utils/url_resolver';
 
 
 // FIXME: rename these event actions
@@ -38,7 +38,7 @@ const AppGateway = {
         let subdomainSettings;
 
         try {
-            subdomainSettings = getSubdomainSettings(getSubdomain());
+            subdomainSettings = getSubdomainSettings(getCurrentSubdomain());
         } catch (err) {
             // if there are no matching subdomains, we''ll route to the default frontend
             console.logGlobal(err);
@@ -74,17 +74,8 @@ const AppGateway = {
         AppResolver
             .resolve(settings)
             .then(({ apiUrls, redirectRoute, routes }) => {
-                // Initialize api urls and defaults for outgoing requests
+                // Set url mapping for outgoing api requests
-                requests.defaults({
+                UrlResolver.setUrlMapping(apiUrls);
-                    urlMap: apiUrls,
-                    http: {
-                        headers: {
-                            'Accept': 'application/json',
-                            'Content-Type': 'application/json'
-                        },
-                        credentials: 'include'
-                    }
-                });
 
                 ReactDOM.render((
                     <Router history={history}>

js/components/app_base.js

@@ -9,7 +9,7 @@ import WhitelabelStore from '../stores/whitelabel_store';
 import GlobalNotification from './global_notification';
 import { currentUserShape, locationShape, whitelabelShape } from './prop_types';
 
-import { mergeOptions } from '../utils/general_utils';
+import { safeMerge } from '../utils/general';
 
 
 export default function AppBase(App) {
@@ -29,7 +29,7 @@ export default function AppBase(App) {
         },
 
         getInitialState() {
-            return mergeOptions(
+            return safeMerge(
                 UserStore.getState(),
                 WhitelabelStore.getState()
             );

js/components/ascribe_accordion_list/accordion_list.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import Link from 'react-router/es6/Link';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let AccordionList = React.createClass({

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -8,13 +8,11 @@ import EditionListStore from '../../stores/edition_list_store';
 
 import PieceListStore from '../../stores/piece_list_store';
 
-import Button from 'react-bootstrap/lib/Button';
-
 import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { mergeOptions } from '../../utils/general_utils';
+import { safeMerge } from '../../utils/general';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let AccordionListItemEditionWidget = React.createClass({
@@ -27,7 +25,7 @@ let AccordionListItemEditionWidget = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             EditionListStore.getState(),
             PieceListStore.getState()
         );

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -5,7 +5,7 @@ import React from 'react';
 import AccordionListItem from './accordion_list_item';
 import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let AccordionListItemPiece = React.createClass({

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -16,8 +16,8 @@ import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
 import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
-import { mergeOptions } from '../../utils/general_utils';
+import { safeMerge } from '../../utils/general';
 
 
 let AccordionListItemTableEditions = React.createClass({
@@ -28,7 +28,7 @@ let AccordionListItemTableEditions = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             EditionListStore.getState(),
             {
                 showMoreLoading: false

js/components/ascribe_accordion_list/accordion_list_item_wallet.js

@@ -23,8 +23,8 @@ import AclProxy from '../acl_proxy';
 import withContext from '../context/with_context';
 import { whitelabelShape } from '../prop_types';
 
-import { mergeOptions } from '../../utils/general_utils';
+import { safeMerge } from '../../utils/general';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let AccordionListItemWallet = React.createClass({
@@ -43,7 +43,7 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             PieceListStore.getState(),
             {
                 showCreateEditionsDialog: false

js/components/ascribe_buttons/acl_button_list.js

@@ -5,11 +5,10 @@ import React from 'react';
 import ConsignButton from './acls/consign_button';
 import EmailButton from './acls/email_button';
 import LoanButton from './acls/loan_button';
-import LoanRequestButton from './acls/loan_request_button';
 import TransferButton from './acls/transfer_button';
 import UnconsignButton from './acls/unconsign_button';
 
-import { selectFromObject } from '../../utils/general_utils';
+import { selectFromObject } from '../../utils/general';
 
 let AclButtonList = React.createClass({
     propTypes: {

js/components/ascribe_buttons/acl_information.js

@@ -4,8 +4,8 @@ import React from 'react';
 import classnames from 'classnames';
 
 import { AclInformationText } from '../../constants/acl_information_text';
-import { replaceSubstringAtIndex, sanitize, intersectLists } from '../../utils/general_utils';
+import { intersectLists, sanitize } from '../../utils/general';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let AclInformation = React.createClass({
@@ -45,7 +45,7 @@ let AclInformation = React.createClass({
                 return (
                     <p key={title}>
                         <span className="info">
-                            {replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
+                            {info.slice(2).replace('s', '')}
                         </span>
                         <span className="example">
                             {' ' + example}
@@ -90,7 +90,7 @@ let AclInformation = React.createClass({
             verbsToDisplay = verbsToDisplay.concat(verbs);
         } else if(aim === 'button' && this.props.aclObject) {
             const { aclObject } = this.props;
-            const sanitizedAclObject = sanitize(aclObject, (val) => !val);
+            const sanitizedAclObject = sanitize(aclObject);
             verbsToDisplay = verbsToDisplay.concat(intersectLists(verbs, Object.keys(sanitizedAclObject)));
         }
 

js/components/ascribe_buttons/acls/consign_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_consign',

js/components/ascribe_buttons/acls/email_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_share',

js/components/ascribe_buttons/acls/loan_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_loan',

js/components/ascribe_buttons/acls/loan_request_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_loan_request',

js/components/ascribe_buttons/acls/transfer_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_transfer',

js/components/ascribe_buttons/acls/unconsign_button.js

@@ -1,10 +1,8 @@
 'use strict';
 
-import React from 'react';
-
 import AclButton from './acl_button';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 export default AclButton({
     action: 'acl_unconsign',

js/components/ascribe_buttons/create_editions_button.js

@@ -1,15 +1,15 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import EditionListActions from '../../actions/edition_list_actions';
 import EditionListStore from '../../stores/edition_list_store';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
-import classNames from 'classnames';
 
 let CreateEditionsButton = React.createClass({
     propTypes: {
@@ -46,9 +46,9 @@ let CreateEditionsButton = React.createClass({
     startPolling() {
         // start polling until editions are defined
         let pollingIntervalIndex = setInterval(() => {
-
+            // TODO: re-evaluate whether this is necessary:
-            // requests, will try to merge the filterBy parameter with other parameters (mergeOptions).
+            // requests, will try to merge the filterBy parameter with other parameters (safeMerge).
-            // Therefore it can't but null but instead has to be an empty object
+            // Therefore it can't be null but instead has to be an empty object
             EditionListActions
                 .fetchEditionList({
                     pieceId: this.props.piece.id,

js/components/ascribe_buttons/delete_button.js

@@ -12,8 +12,8 @@ import PieceRemoveFromCollectionForm from '../ascribe_forms/form_remove_piece_fr
 
 import ModalWrapper from '../ascribe_modal/modal_wrapper';
 
-import { getAvailableAcls } from '../../utils/acl_utils';
+import { getAvailableAcls } from '../../utils/acl';
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
 
 
 let DeleteButton = React.createClass({
@@ -46,9 +46,9 @@ let DeleteButton = React.createClass({
             }
 
             btnDelete = <button className="btn btn-sm btn-tertiary">{getLangText('DELETE')}</button>;
-        
+
         } else if(availableAcls.acl_unshare){
-            
+
             if(this.props.editions) {
                 content = <EditionRemoveFromCollectionForm editions={this.props.editions}/>;
                 title = getLangText('Remove Edition from Collection');
@@ -58,7 +58,7 @@ let DeleteButton = React.createClass({
             }
 
             btnDelete = <Button bsStyle="default" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
-        
+
         } else {
             return null;
         }

js/components/ascribe_buttons/s3_download_button.js

@@ -2,14 +2,14 @@
 
 import React from 'react';
 
-import S3Fetcher from '../../fetchers/s3_fetcher';
-
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
+import S3Fetcher from '../../fetchers/s3_fetcher';
+
 import AppConstants from '../../constants/application_constants';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
-import { queryParamsToArgs } from '../../utils/url_utils';
+import { parseQueryParamStr } from '../../utils/url';
 
 
 const { string } = React.PropTypes;
@@ -52,7 +52,7 @@ const S3DownloadButton = React.createClass({
 
                 // The signed url, however can expire, which is why we need to set up a timer to
                 // renew it when it expires.
-                const expires = parseInt(queryParamsToArgs(downloadUrl.split('?')[1]).expires, 10);
+                const expires = parseInt(parseQueryParamStr(downloadUrl).expires, 10);
                 const now = new Date().getTime() / 1000;
 
                 // Amazon uses seconds as their signature unix timestamp while `setTimeout` uses

js/components/ascribe_buttons/unconsign_request_button.js

@@ -10,8 +10,8 @@ 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 { getLangText } from '../../utils/lang';
-import ApiUrls from '../../constants/api_urls';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 const UnConsignRequestButton = React.createClass({
@@ -36,7 +36,7 @@ const UnConsignRequestButton = React.createClass({
                 handleSuccess={handleSuccess}
                 title={getLangText('Request to Un-Consign')}>
                 <UnConsignRequestForm
-                    url={ApiUrls.ownership_unconsigns_request}
+                    url={resolveUrl('ownership_unconsigns_request')}
                     id={{'bitcoin_id': edition.bitcoin_id}}
                     message={`${getLangText('Hi')},
 

js/components/ascribe_detail/edition.js

@@ -24,10 +24,10 @@ 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 { resolveUrl } from '../../utils/url_resolver';
+import { getLangText } from '../../utils/lang';
 
 
 /**
@@ -120,7 +120,7 @@ const Edition = React.createClass({
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
-                            url={ApiUrls.note_private_edition} />
+                            url={resolveUrl('note_private_edition')} />
                         <Note
                             id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (public)')}
@@ -129,7 +129,7 @@ const Edition = React.createClass({
                             editable={!!edition.acl.acl_edit}
                             show={!!(edition.public_note || edition.acl.acl_edit)}
                             successMessage={getLangText('Public edition note saved')}
-                            url={ApiUrls.note_public_edition} />
+                            url={resolveUrl('note_public_edition')} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}

js/components/ascribe_detail/edition_action_panel.js

@@ -26,9 +26,8 @@ import AclProxy from '../acl_proxy';
 import withContext from '../context/with_context';
 import { routerShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
+import { getLangText } from '../../utils/lang';
-
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils';
 
 /*
     A component that handles all the actions inside of the edition detail
@@ -121,7 +120,7 @@ const EditionActionPanel = React.createClass({
                                 aclObject={edition.acl}
                                 aclName="acl_withdraw_transfer">
                                 <Form
-                                    url={ApiUrls.ownership_transfers_withdraw}
+                                    url={resolveUrl('ownership_transfers_withdraw')}
                                     handleSuccess={this.handleSuccess}
                                     className='inline'
                                     isInline={true}>
@@ -142,7 +141,7 @@ const EditionActionPanel = React.createClass({
                                 aclObject={edition.acl}
                                 aclName="acl_withdraw_consign">
                                 <Form
-                                    url={ApiUrls.ownership_consigns_withdraw}
+                                    url={resolveUrl('ownership_consigns_withdraw')}
                                     handleSuccess={this.handleSuccess}
                                     className='inline'
                                     isInline={true}>

js/components/ascribe_detail/edition_container.js

@@ -12,8 +12,8 @@ import Edition from './edition';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
-import { setDocumentTitle } from '../../utils/dom_utils';
+import { setDocumentTitle } from '../../utils/dom';
 
 
 /**

js/components/ascribe_detail/further_details.js

@@ -15,7 +15,7 @@ import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
 
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let FurtherDetails = React.createClass({

js/components/ascribe_detail/further_details_fileuploader.js

@@ -6,12 +6,12 @@ import Property from './../ascribe_forms/property';
 
 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 { makeCsrfHeader } from '../../utils/csrf';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 const { func, bool, number, object, string, arrayOf } = React.PropTypes;
@@ -75,16 +75,14 @@ let FurtherDetailsFileuploader = React.createClass({
                     areAssetsDownloadable
                     areAssetsEditable={editable}
                     createBlobRoutine={{
-                        url: ApiUrls.blob_otherdatas,
+                        url: resolveUrl('blob_otherdatas'),
                         pieceId: pieceId
                     }}
                     deleteFile={{
                         enabled: true,
                         method: 'DELETE',
                         endpoint: `${AppConstants.serverUrl}/s3/delete`,
-                        customHeaders: {
+                        customHeaders: makeCsrfHeader()
-                           'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                        }
                     }}
                     isReadyForFormSubmission={isReadyForFormSubmission}
                     keyRoutine={{
@@ -97,9 +95,7 @@ let FurtherDetailsFileuploader = React.createClass({
                     setIsUploadReady={setIsUploadReady}
                     session={{
                         endpoint: `${AppConstants.serverUrl}/api/blob/otherdatas/fineuploader_session/`,
-                        customHeaders: {
+                        customHeaders: makeCsrfHeader(),
-                            'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                        },
                         params: {
                             'pk': otherDataIds
                         },
@@ -110,9 +106,7 @@ let FurtherDetailsFileuploader = React.createClass({
                     }}
                     signature={{
                         endpoint: `${AppConstants.serverUrl}/s3/signature/`,
-                        customHeaders: {
+                        customHeaders: makeCsrfHeader()
-                           'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                        }
                     }}
                     submitFile={submitFile}
                     showErrorPrompt={showErrorPrompt}

js/components/ascribe_detail/history_iterator.js

@@ -5,8 +5,6 @@ import React from 'react';
 import Form from '../ascribe_forms/form';
 import Property from '../ascribe_forms/property';
 
-import { replaceSubstringAtIndex } from '../../utils/general_utils';
-
 
 let HistoryIterator = React.createClass({
     propTypes: {
@@ -18,7 +16,7 @@ let HistoryIterator = React.createClass({
             // We want to get the capturing group without the quotes,
             // which is why we access the match list at index 1 and not 0
             const contractName = historicalEvent[1].match(/\"(.*)\"/)[1];
-            const historicalEventDescription = replaceSubstringAtIndex(historicalEvent[1], `"${contractName}"`, '');
+            const historicalEventDescription = historicalEvent[1].replace(`"${contractName}"`, '');
             return (
                 <span>
                     {historicalEventDescription}

js/components/ascribe_detail/media_container.js

@@ -22,8 +22,8 @@ import { currentUserShape } from '../prop_types';
 
 import AppConstants from '../../constants/application_constants';
 
-import { extractFileExtensionFromUrl } from '../../utils/file_utils';
+import { extractFileExtensionFromUrl } from '../../utils/file';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 const EMBED_IFRAME_HEIGHT = {

js/components/ascribe_detail/note.js

@@ -11,7 +11,7 @@ import InputTextAreaToggable from '../ascribe_forms/input_textarea_toggable';
 
 import withContext from '../context/with_context';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 let Note = React.createClass({
     propTypes: {

js/components/ascribe_detail/piece_container.js

@@ -39,11 +39,10 @@ import AscribeSpinner from '../ascribe_spinner';
 import withContext from '../context/with_context';
 import { routerShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
+import { setDocumentTitle } from '../../utils/dom';
-
+import { safeMerge } from '../../utils/general';
-import { setDocumentTitle } from '../../utils/dom_utils';
+import { getLangText } from '../../utils/lang';
-import { mergeOptions } from '../../utils/general_utils';
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils';
 
 /**
  * This is the component that implements resource/data specific functionality
@@ -69,7 +68,7 @@ const PieceContainer = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             PieceListStore.getState(),
             PieceStore.getInitialState(),
             {
@@ -121,7 +120,7 @@ const PieceContainer = React.createClass({
 
          */
         if (state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') {
-            let pieceState = mergeOptions({}, state.piece);
+            const pieceState = Object.assign({}, state.piece);
             pieceState.acl.acl_loan = false;
             this.setState({
                 piece: pieceState
@@ -302,7 +301,7 @@ const PieceContainer = React.createClass({
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
-                            url={ApiUrls.note_private_piece} />
+                            url={resolveUrl('note_private_piece')} />
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (public)')}
@@ -311,7 +310,7 @@ const PieceContainer = React.createClass({
                             editable={!!piece.acl.acl_edit}
                             show={!!(piece.public_note || piece.acl.acl_edit)}
                             successMessage={getLangText('Public note saved')}
-                            url={ApiUrls.note_public_piece} />
+                            url={resolveUrl('note_public_piece')} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}

js/components/ascribe_forms/acl_form_factory.js

@@ -16,9 +16,9 @@ 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 { getAclFormMessage, getAclFormDataId } from '../../utils/form';
+import { resolveUrl } from '../../utils/url_resolver';
 
 let AclFormFactory = React.createClass({
     propTypes: {
@@ -86,7 +86,7 @@ let AclFormFactory = React.createClass({
                     message={formMessage}
                     labels={labels}
                     id={this.getFormDataId()}
-                    url={ApiUrls.ownership_consigns}
+                    url={resolveUrl('ownership_consigns')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_unconsign') {
@@ -94,7 +94,7 @@ let AclFormFactory = React.createClass({
                 <UnConsignForm
                     message={formMessage}
                     id={this.getFormDataId()}
-                    url={ApiUrls.ownership_unconsigns}
+                    url={resolveUrl('ownership_unconsigns')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_transfer') {
@@ -102,7 +102,7 @@ let AclFormFactory = React.createClass({
                 <TransferForm
                     message={formMessage}
                     id={this.getFormDataId()}
-                    url={ApiUrls.ownership_transfers}
+                    url={resolveUrl('ownership_transfers')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_loan') {
@@ -111,8 +111,8 @@ let AclFormFactory = React.createClass({
                     email={email}
                     message={formMessage}
                     id={this.getFormDataId()}
-                    url={this.isPiece() ? ApiUrls.ownership_loans_pieces
+                    url={resolveUrl(this.isPiece() ? 'ownership_loans_pieces'
-                                        : ApiUrls.ownership_loans_editions}
+                                                   : 'ownership_loans_editions')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_loan_request') {
@@ -120,7 +120,7 @@ let AclFormFactory = React.createClass({
                 <LoanRequestAnswerForm
                     message={formMessage}
                     id={this.getFormDataId()}
-                    url={ApiUrls.ownership_loans_pieces_request_confirm}
+                    url={resolveUrl('ownership_loans_pieces_request_confirm')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_share') {
@@ -128,8 +128,8 @@ let AclFormFactory = React.createClass({
                 <ShareForm
                     message={formMessage}
                     id={this.getFormDataId()}
-                    url={this.isPiece() ? ApiUrls.ownership_shares_pieces
+                    url={resolveUrl(this.isPiece() ? 'ownership_shares_pieces'
-                                        : ApiUrls.ownership_shares_editions}
+                                                   : 'ownership_shares_editions')}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else {

js/components/ascribe_forms/create_editions_form.js

@@ -9,9 +9,9 @@ import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import AscribeSpinner from '../ascribe_spinner';
-import ApiUrls from '../../constants/api_urls';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 let CreateEditionsForm = React.createClass({
     propTypes: {
@@ -40,7 +40,7 @@ let CreateEditionsForm = React.createClass({
         return (
             <Form
                 ref='form'
-                url={ApiUrls.editions}
+                url={resolveUrl('editions')}
                 getFormData={this.getFormData}
                 handleSuccess={this.handleSuccess}
                 buttons={

js/components/ascribe_forms/form.js

@@ -11,10 +11,10 @@ import AlertDismissable from './alert';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import requests from '../../utils/requests';
+import { sanitize } from '../../utils/general';
+import { getLangText } from '../../utils/lang';
+import request from '../../utils/request';
 
-import { getLangText } from '../../utils/lang_utils';
-import { sanitize } from '../../utils/general_utils';
 
 
 let Form = React.createClass({
@@ -95,32 +95,29 @@ let Form = React.createClass({
         }
     },
 
-    post() {
+    request(method) {
-        requests
+        request(this.props.url, {
-            .post(this.props.url, { body: this.getFormData() })
+            method,
+            jsonBody: this.getFormData()
+        })
             .then(this.handleSuccess)
             .catch(this.handleError);
     },
 
+    post() {
+        this.request('POST');
+    },
+
     put() {
-        requests
+        this.request('PUT');
-            .put(this.props.url, { body: this.getFormData() })
-            .then(this.handleSuccess)
-            .catch(this.handleError);
     },
 
     patch() {
-        requests
+        this.request('PATCH');
-            .patch(this.props.url, { body: this.getFormData() })
-            .then(this.handleSuccess)
-            .catch(this.handleError);
     },
 
     delete() {
-        requests
+        this.request('DELETE');
-            .delete(this.props.url, this.getFormData())
-            .then(this.handleSuccess)
-            .catch(this.handleError);
     },
 
     getFormData() {
@@ -370,7 +367,7 @@ let Form = React.createClass({
                 const validatedRef = this._hasRefErrors(refToValidate);
                 validatedFormInputs[refName] = validatedRef;
             });
-        const errorMessagesForRefs = sanitize(validatedFormInputs, (val) => !val);
+        const errorMessagesForRefs = sanitize(validatedFormInputs);
         this.handleError({ json: { errors: errorMessagesForRefs } });
         return !Object.keys(errorMessagesForRefs).length;
     },

js/components/ascribe_forms/form_consign.js

@@ -15,7 +15,7 @@ import AscribeSpinner from '../ascribe_spinner';
 
 import AclInformation from '../ascribe_buttons/acl_information';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang';
 
 let ConsignForm = React.createClass({
     propTypes: {

js/components/ascribe_forms/form_copyright_association.js

@@ -11,10 +11,10 @@ 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 { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 const { bool } = React.PropTypes;
@@ -50,7 +50,7 @@ const CopyrightAssociationForm = React.createClass({
             return (
                 <Form
                     ref='form'
-                    url={ApiUrls.users_profile}
+                    url={resolveUrl('users_profile')}
                     getFormData={this.getProfileFormData}
                     handleSuccess={this.handleSubmitSuccess}>
                     <Property

js/components/ascribe_forms/form_create_contract.js

@@ -12,12 +12,12 @@ 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 { getLangText } from '../../utils/lang';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let CreateContractForm = React.createClass({
@@ -64,7 +64,7 @@ let CreateContractForm = React.createClass({
         return (
             <Form
                 ref='form'
-                url={ApiUrls.ownership_contract_list}
+                url={resolveUrl('ownership_contract_list')}
                 handleSuccess={this.handleCreateSuccess}>
                 <Property
                     name="blob"
@@ -76,7 +76,7 @@ let CreateContractForm = React.createClass({
                             fileClass: 'contract'
                         }}
                         createBlobRoutine={{
-                            url: ApiUrls.blob_contracts
+                            url: resolveUrl('blob_contracts')
                         }}
                         validation={{
                             itemLimit: validationTypes.additionalData.itemLimit,

js/components/ascribe_forms/form_delete_edition.js

@@ -4,11 +4,14 @@ import React from 'react';
 
 import Form from './form';
 
-import ApiUrls from '../../constants/api_urls';
+import AclInformation from '../ascribe_buttons/acl_information';
+
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
-import AclInformation from '../ascribe_buttons/acl_information';
+import { formatText } from '../../utils/text';
+import { resolveUrl } from '../../utils/url_resolver';
+
 
 let EditionDeleteForm = React.createClass({
 
@@ -20,25 +23,22 @@ let EditionDeleteForm = React.createClass({
     },
 
     getBitcoinIds() {
-        return this.props.editions.map(function(edition){
+        return this.props.editions.map((edition) => edition.bitcoin_id);
-            return edition.bitcoin_id;
+    },
+
+    getUrl() {
+        return formatText(resolveUrl('edition_delete'), {
+            // Since this form can be used for either deleting a single edition or multiple we need
+            // to call getBitcoinIds to get the value of edition_id
+            editionId: this.getBitcoinIds().join(',')
         });
     },
 
-    // Since this form can be used for either deleting a single edition or multiple
+    render() {
-    // we need to call getBitcoinIds to get the value of edition_id
-    getFormData() {
-        return {
-            edition_id: this.getBitcoinIds().join(',')
-        };
-    },
-
-    render () {
         return (
             <Form
                 ref='form'
-                url={ApiUrls.edition_delete}
+                url={this.getUrl()}
-                getFormData={this.getFormData}
                 method="delete"
                 handleSuccess={this.props.handleSuccess}
                 buttons={

js/components/ascribe_forms/form_delete_piece.js

@@ -6,10 +6,11 @@ import Form from '../ascribe_forms/form';
 
 import AclInformation from '../ascribe_buttons/acl_information';
 
-import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { formatText } from '../../utils/text';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let PieceDeleteForm = React.createClass({
@@ -20,18 +21,17 @@ let PieceDeleteForm = React.createClass({
         handleSuccess: React.PropTypes.func
     },
 
-    getFormData() {
+    getUrl() {
-        return {
+        return formatText(resolveUrl('piece'), {
-            piece_id: this.props.pieceId
+            pieceId: this.props.pieceId
-        };
+        });
     },
 
     render() {
         return (
             <Form
                 ref='form'
-                url={ApiUrls.piece}
+                url={this.getUrl()}
-                getFormData={this.getFormData}
                 method="delete"
                 handleSuccess={this.props.handleSuccess}
                 buttons={

js/components/ascribe_forms/form_loan.js

@@ -5,21 +5,17 @@ import classnames from 'classnames';
 
 import Button from 'react-bootstrap/lib/Button';
 
-import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
-
 import Form from './form';
 import Property from './property';
-
 import InputDate from './input_date';
 import InputTextAreaToggable from './input_textarea_toggable';
 import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
 
-import AscribeSpinner from '../ascribe_spinner';
-
 import AclInformation from '../ascribe_buttons/acl_information';
 
-import { getLangText } from '../../utils/lang_utils';
+import AscribeSpinner from '../ascribe_spinner';
-import { mergeOptions } from '../../utils/general_utils';
+
+import { getLangText } from '../../utils/lang';
 
 
 let LoanForm = React.createClass({

js/components/ascribe_forms/form_loan_request_answer.js

@@ -3,14 +3,10 @@
 import React from 'react';
 import Moment from 'moment';
 
-import LoanForm from './form_loan';
-
 import OwnershipActions from '../../actions/ownership_actions';
 import OwnershipStore from '../../stores/ownership_store';
 
-import AppConstants from '../../constants/application_constants';
+import LoanForm from './form_loan';
-
-import { getLangText } from '../../utils/lang_utils';
 
 
 let LoanRequestAnswerForm = React.createClass({

js/components/ascribe_forms/form_login.js

@@ -14,9 +14,8 @@ import AscribeSpinner from '../ascribe_spinner';
 import withContext from '../context/with_context';
 import { locationShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
+import { getLangText } from '../../utils/lang';
-
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils';
 
 
 let LoginForm = React.createClass({
@@ -55,7 +54,7 @@ let LoginForm = React.createClass({
             <Form
                 className="ascribe-form-bordered"
                 ref="loginForm"
-                url={ApiUrls.users_login}
+                url={resolveUrl('users_login')}
                 handleSuccess={this.handleSuccess}
                 autoComplete="on"
                 buttons={

js/components/ascribe_forms/form_piece_extradata.js

@@ -2,15 +2,15 @@
 
 import React from 'react';
 
-import requests from '../../utils/requests';
-import { getLangText } from '../../utils/lang_utils.js';
-
-import ApiUrls from '../../constants/api_urls';
-
 import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
+import { getLangText } from '../../utils/lang.js';
+import { formatText } from '../../utils/text';
+import { resolveUrl } from '../../utils/url_resolver';
+
+
 let PieceExtraDataForm = React.createClass({
     propTypes: {
         name: React.PropTypes.string.isRequired,
@@ -24,16 +24,24 @@ let PieceExtraDataForm = React.createClass({
     },
 
     getFormData() {
+        const { name, pieceId } = this.props;
+
         return {
             extradata: {
-                [this.props.name]: this.refs.form.refs[this.props.name].state.value
+                [name]: this.refs.form.refs[name].state.value
             },
-            piece_id: this.props.pieceId
+            piece_id: pieceId
         };
     },
 
+    getUrl() {
+        return formatText(resolveUrl('piece_extradata'), {
+            pieceId: this.props.pieceId
+        });
+    },
+
     render() {
-        const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props;
+        const { convertLinks, editable, extraData, handleSuccess, name, title } = this.props;
         const defaultValue = (extraData && extraData[name]) || null;
 
         if (!defaultValue && !editable) {
@@ -46,7 +54,7 @@ let PieceExtraDataForm = React.createClass({
                 disabled={!editable}
                 getFormData={this.getFormData}
                 handleSuccess={handleSuccess}
-                url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}>
+                url={this.getUrl()}>
                 <Property
                     name={name}
                     label={title}>

js/components/ascribe_forms/form_register_piece.js

@@ -14,12 +14,12 @@ import AscribeSpinner from '../ascribe_spinner';
 import withContext from '../context/with_context';
 import { currentUserShape, locationShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 import { validationParts, validationTypes } from '../../constants/uploader_constants';
 
 import { FileStatus, formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let RegisterPieceForm = React.createClass({
@@ -138,7 +138,7 @@ let RegisterPieceForm = React.createClass({
                 disabled={disabled}
                 className="ascribe-form-bordered"
                 ref='form'
-                url={ApiUrls.pieces_list}
+                url={resolveUrl('pieces_list')}
                 handleSuccess={handleSuccess}
                 buttons={
                     <FormSubmitButton
@@ -168,7 +168,7 @@ let RegisterPieceForm = React.createClass({
                             fileClass: 'digitalwork'
                         }}
                         createBlobRoutine={{
-                            url: ApiUrls.blob_digitalworks
+                            url: resolveUrl('blob_digitalworks')
                         }}
                         validation={validationTypes.registerWork}
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
@@ -187,7 +187,7 @@ let RegisterPieceForm = React.createClass({
                         ref={ref => this.refs.thumbnailFineUploader = ref}
                         fileInputElement={UploadButton({ className: 'btn btn-secondary btn-sm' })}
                         createBlobRoutine={{
-                            url: ApiUrls.blob_thumbnails
+                            url: resolveUrl('blob_thumbnails')
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
                         onValidationFailed={this.handleThumbnailValidationFailed}

js/components/ascribe_forms/form_remove_editions_from_collection.js

@@ -4,10 +4,11 @@ import React from 'react';
 
 import Form from './form';
 
-import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { formatText } from '../../utils/text';
+import { resolveUrl } from '../../utils/url_resolver';
 
 let EditionRemoveFromCollectionForm = React.createClass({
     propTypes: {
@@ -18,25 +19,22 @@ let EditionRemoveFromCollectionForm = React.createClass({
     },
 
     getBitcoinIds() {
-        return this.props.editions.map(function(edition){
+        return this.props.editions.map((edition) => edition.bitcoin_id);
-            return edition.bitcoin_id;
-        });
     },
 
-    // Since this form can be used for either removing a single edition or multiple
+    getUrl() {
-    // we need to call getBitcoinIds to get the value of edition_id
+        return formatText(resolveUrl('edition_remove_from_collection'), {
-    getFormData() {
+            // Since this form can be used for either deleting a single edition or multiple we need
-        return {
+            // to call getBitcoinIds to get the value of edition_id
-            edition_id: this.getBitcoinIds().join(',')
+            editionId: this.getBitcoinIds().join(',')
-        };
+        });
     },
 
     render() {
         return (
             <Form
                 ref='form'
-                url={ApiUrls.edition_remove_from_collection}
+                url={this.getUrl()}
-                getFormData={this.getFormData}
                 method="delete"
                 handleSuccess={this.props.handleSuccess}
                 buttons={

js/components/ascribe_forms/form_remove_piece_from_collection.js

@@ -4,10 +4,10 @@ import React from 'react';
 
 import Form from './form';
 
-import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let PieceRemoveFromCollectionForm = React.createClass({
@@ -18,18 +18,17 @@ let PieceRemoveFromCollectionForm = React.createClass({
         handleSuccess: React.PropTypes.func
     },
 
-    getFormData() {
+    getUrl() {
-        return {
+        return formatText(resolveUrl('piece_remove_from_collection'), {
-            piece_id: this.props.pieceId
+            pieceId: this.props.pieceId
-        };
+        });
     },
 
     render () {
         return (
             <Form
                 ref='form'
-                url={ApiUrls.piece_remove_from_collection}
+                url={this.getUrl()}
-                getFormData={this.getFormData}
                 method="delete"
                 handleSuccess={this.props.handleSuccess}
                 buttons={

js/components/ascribe_forms/form_request_action.js

@@ -14,10 +14,9 @@ import NotificationActions from '../../actions/notification_actions';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import ApiUrls from '../../constants/api_urls';
+import { getAclFormDataId } from '../../utils/form';
-
+import { getLangText } from '../../utils/lang.js';
-import { getAclFormDataId } from '../../utils/form_utils';
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils.js';
 
 let RequestActionForm = React.createClass({
     propTypes: {
@@ -35,25 +34,30 @@ let RequestActionForm = React.createClass({
     },
 
     getUrls() {
-        let urls = {};
+        const urls = {};
 
         if (this.props.notifications.action === 'consign') {
-            urls.accept = ApiUrls.ownership_consigns_confirm;
+            urls.accept = 'ownership_consigns_confirm';
-            urls.deny = ApiUrls.ownership_consigns_deny;
+            urls.deny = 'ownership_consigns_deny';
         } else if (this.props.notifications.action === 'unconsign') {
-            urls.accept = ApiUrls.ownership_unconsigns;
+            urls.accept = 'ownership_unconsigns';
-            urls.deny = ApiUrls.ownership_unconsigns_deny;
+            urls.deny = 'ownership_unconsigns_deny';
         } else if (this.props.notifications.action === 'loan' && !this.isPiece()) {
-            urls.accept = ApiUrls.ownership_loans_confirm;
+            urls.accept = 'ownership_loans_confirm';
-            urls.deny = ApiUrls.ownership_loans_deny;
+            urls.deny = 'ownership_loans_deny';
         } else if (this.props.notifications.action === 'loan' && this.isPiece()) {
-            urls.accept = ApiUrls.ownership_loans_pieces_confirm;
+            urls.accept = 'ownership_loans_pieces_confirm';
-            urls.deny = ApiUrls.ownership_loans_pieces_deny;
+            urls.deny = 'ownership_loans_pieces_deny';
         } else if (this.props.notifications.action === 'loan_request' && this.isPiece()) {
-            urls.accept = ApiUrls.ownership_loans_pieces_request_confirm;
+            urls.accept = 'ownership_loans_pieces_request_confirm';
-            urls.deny = ApiUrls.ownership_loans_pieces_request_deny;
+            urls.deny = 'ownership_loans_pieces_request_deny';
         }
 
+        // Resolve the urls
+        Object.entries(urls).forEach(([key, val]) => {
+            urls[key] = resolveUrl(val);
+        });
+
         return urls;
     },
 

js/components/ascribe_forms/form_send_contract_agreement.js

@@ -16,10 +16,9 @@ import AscribeSpinner from '../ascribe_spinner';
 import withContext from '../context/with_context';
 import { routerShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
+import { safeMerge } from '../../utils/general';
-
+import { getLangText } from '../../utils/lang';
-import { getLangText } from '../../utils/lang_utils';
+import { resolveUrl } from '../../utils/url_resolver';
-import { mergeOptions } from '../../utils/general_utils';
 
 
 const SendContractAgreementForm = React.createClass({
@@ -31,7 +30,7 @@ const SendContractAgreementForm = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             ContractListStore.getState(),
             {
                 selectedContract: 0
@@ -103,7 +102,7 @@ const SendContractAgreementForm = React.createClass({
                 <Form
                     className="ascribe-form-bordered ascribe-form-wrapper"
                     ref='form'
-                    url={ApiUrls.ownership_contract_agreements}
+                    url={resolveUrl('ownership_contract_agreements')}
                     getFormData={this.getFormData}
                     handleSuccess={this.handleSubmitSuccess}
                     buttons={<button

js/components/ascribe_forms/form_share_email.js

@@ -2,17 +2,17 @@
 
 import React from 'react';
 
+import Button from 'react-bootstrap/lib/Button';
+
 import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-import Button from 'react-bootstrap/lib/Button';
-
 import AclInformation from '../ascribe_buttons/acl_information';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
 
 
 let ShareForm = React.createClass({

js/components/ascribe_forms/form_signup.js

@@ -15,9 +15,8 @@ import AscribeSpinner from '../ascribe_spinner';
 import withContext from '../context/with_context';
 import { locationShape } from '../prop_types';
 
-import ApiUrls from '../../constants/api_urls';
+import { getLangText } from '../../utils/lang';
-
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils';
 
 
 let SignupForm = React.createClass({
@@ -71,7 +70,7 @@ let SignupForm = React.createClass({
             <Form
                 className="ascribe-form-bordered"
                 ref='form'
-                url={ApiUrls.users_signup}
+                url={resolveUrl('users_signup')}
                 getFormData={this.getFormData}
                 handleSuccess={this.handleSuccess}
                 buttons={

js/components/ascribe_forms/form_transfer.js

@@ -13,7 +13,7 @@ import AclInformation from '../ascribe_buttons/acl_information';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
 
 
 let TransferForm = React.createClass({

js/components/ascribe_forms/form_unconsign.js

@@ -9,7 +9,8 @@ import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
 import AscribeSpinner from '../ascribe_spinner';
-import { getLangText } from '../../utils/lang_utils.js';
+
+import { getLangText } from '../../utils/lang.js';
 
 
 let UnConsignForm = React.createClass({

js/components/ascribe_forms/form_unconsign_request.js

@@ -9,7 +9,8 @@ import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
 import AscribeSpinner from '../ascribe_spinner';
-import { getLangText } from '../../utils/lang_utils.js';
+
+import { getLangText } from '../../utils/lang.js';
 
 
 let UnConsignRequestForm = React.createClass({

js/components/ascribe_forms/input_contract_agreement_checkbox.js

@@ -8,9 +8,9 @@ import InputCheckbox from './input_checkbox';
 import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
 import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
 
-import { getLangText } from '../../utils/lang_utils';
+import { safeMerge } from '../../utils/general';
-import { mergeOptions } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang';
-import { isEmail } from '../../utils/regex_utils';
+import { isEmail } from '../../utils/regex';
 
 
 const InputContractAgreementCheckbox = React.createClass({
@@ -37,7 +37,7 @@ const InputContractAgreementCheckbox = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
+        return safeMerge(
             ContractAgreementListStore.getState(),
             {
                 value: {
@@ -73,7 +73,7 @@ const InputContractAgreementCheckbox = React.createClass({
         // If there is no contract available, hide this `Property` from the user
         this.props.setExpanded(!!contractAgreement);
 
-        state = mergeOptions(state, {
+        this.setState({
             value: {
                 // If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
                 // is either:
@@ -93,8 +93,6 @@ const InputContractAgreementCheckbox = React.createClass({
                 terms: !contractAgreement || !!contractAgreement.datetime_accepted
             }
         });
-
-        this.setState(state);
     },
 
     onChange(event) {

js/components/ascribe_forms/input_fineuploader.js

@@ -7,10 +7,10 @@ import FileDragAndDrop from '../ascribe_uploader/ascribe_file_drag_and_drop/file
 
 import AppConstants from '../../constants/application_constants';
 
-import { getCookie } from '../../utils/fetch_api_utils';
+import { makeCsrfHeader } from '../../utils/csrf';
 
 
-const { func, bool, shape, string, number, element, oneOf, oneOfType, arrayOf } = React.PropTypes;
+const { func, bool, oneOf } = React.PropTypes;
 
 const InputFineUploader = React.createClass({
     propTypes: {
@@ -122,17 +122,13 @@ const InputFineUploader = React.createClass({
                 showErrorPrompt={showErrorPrompt}
                 signature={{
                     endpoint: `${AppConstants.serverUrl}/s3/signature/`,
-                    customHeaders: {
+                    customHeaders: makeCsrfHeader()
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
                 }}
                 deleteFile={{
                     enabled: true,
                     method: 'DELETE',
                     endpoint: `${AppConstants.serverUrl}/s3/delete`,
-                    customHeaders: {
+                    customHeaders: makeCsrfHeader()
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
                 }}
                 enableLocalHashing={enableLocalHashing}
                 uploadMethod={uploadMethod}

js/components/ascribe_forms/input_textarea_toggable.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import TextareaAutosize from 'react-textarea-autosize';
 
-import { anchorize } from '../../utils/dom_utils';
+import { anchorize } from '../../utils/dom';
 
 
 let InputTextAreaToggable = React.createClass({

js/components/ascribe_media/media_player.js

@@ -1,19 +1,15 @@
 'use strict';
 
 import React from 'react';
-import Q from 'q';
 
 import Panel from 'react-bootstrap/lib/Panel';
 
-import AppConstants from '../../constants/application_constants';
-
 import audiojs from '../../third_party/imports/audiojs';
 import shmui from '../../third_party/imports/shmui';
 import videojs from '../../third_party/imports/videojs';
 
-import { escapeHTML } from '../../utils/general_utils';
+import { escapeHTML } from '../../utils/dom';
-import { extractFileExtensionFromUrl } from '../../utils/file_utils';
+import { extractFileExtensionFromUrl } from '../../utils/file';
-import { InjectInHeadUtils } from '../../utils/inject_utils';
 
 
 /**

js/components/ascribe_modal/modal_password_request_reset.js

@@ -1,34 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import ModalWrapper from './modal_wrapper';
-import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_request';
-
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-import { getLangText } from '../../utils/lang_utils.js';
-
-let PasswordResetRequestModal = React.createClass({
-    propTypes: {
-        button: React.PropTypes.element
-    },
-
-    handleResetSuccess(){
-        let notificationText = getLangText('Request successfully sent, check your email');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-    render() {
-        return (
-            <ModalWrapper
-                trigger={this.props.button}
-                title={getLangText('Reset your password')}
-                handleSuccess={this.handleResetSuccess}>
-                <PasswordResetRequestForm />
-            </ModalWrapper>
-        );
-    }
-});
-
-export default PasswordResetRequestModal;

js/components/ascribe_pagination/pagination_button.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Link from 'react-router/es6/Link';
 
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let PaginationButton = React.createClass({

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -2,13 +2,12 @@
 
 import React from 'react';
 
-import { mergeOptions } from '../../utils/general_utils';
-
 import EditionListActions from '../../actions/edition_list_actions';
 
 import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
+
 
 let PieceListBulkModal = React.createClass({
     propTypes: {

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js

@@ -1,7 +1,8 @@
 'use strict';
 
 import React from 'react';
-import { getLangText } from '../../utils/lang_utils.js';
+
+import { getLangText } from '../../utils/lang.js';
 
 let PieceListBulkModalSelectedEditionsWidget = React.createClass({
     propTypes: {
@@ -17,4 +18,4 @@ let PieceListBulkModalSelectedEditionsWidget = React.createClass({
     }
 });
 
-export default PieceListBulkModalSelectedEditionsWidget;
+export default PieceListBulkModalSelectedEditionsWidget;

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
 
 
 let PieceListToolbarFilterWidget = React.createClass({

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang.js';
 
 let PieceListToolbarOrderWidget = React.createClass({
     propTypes: {

js/components/ascribe_routes/proxy_handler.js

@@ -1,5 +1,3 @@
-'use strict';
-
 import React from 'react';
 
 import UserStore from '../../stores/user_store';
@@ -10,7 +8,7 @@ import { currentUserShape, locationShape, routerShape, whitelabelShape } from '.
 import AppConstants from '../../constants/application_constants';
 
 
-const { bool, object } = React.PropTypes;
+const { bool } = React.PropTypes;
 const WHEN_ENUM = ['loggedIn', 'loggedOut'];
 
 /**
@@ -50,17 +48,17 @@ export function AuthRedirect({ to, when }) {
             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 set the
-             * location to `${baseUrl}/${redirectAuthenticated}`, as this will
+             * location to `${appBasePath}/${redirectAuthenticated}`, as this will
              * get rid of queries as well.
              */
-            window.location = `${AppConstants.baseUrl}/${redirectAuthenticated}`;
+            window.location = `${AppConstants.appBasePath}/${redirectAuthenticated}`;
             return true;
         }
 

js/components/ascribe_settings/account_settings.js

@@ -17,9 +17,8 @@ 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';
-
+import { resolveUrl } from '../../utils/url_resolver';
-import { getLangText } from '../../utils/lang_utils';
 
 let AccountSettings = React.createClass({
     propTypes: {
@@ -49,7 +48,7 @@ let AccountSettings = React.createClass({
         if (currentUser.username) {
             content = (
                 <Form
-                    url={ApiUrls.users_username}
+                    url={resolveUrl('users_username')}
                     handleSuccess={this.handleSuccess}>
                     <Property
                         name='username'
@@ -79,7 +78,7 @@ let AccountSettings = React.createClass({
                     aclObject={whitelabel}
                     aclName="acl_view_settings_account_hash">
                     <Form
-                        url={ApiUrls.users_profile}
+                        url={resolveUrl('users_profile')}
                         handleSuccess={this.handleSuccess}
                         getFormData={this.getFormDataProfile}>
                         <Property

js/components/ascribe_settings/api_settings.js

@@ -14,10 +14,10 @@ import Property from '../ascribe_forms/property';
 import ActionPanel from '../ascribe_panel/action_panel';
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
-import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let APISettings = React.createClass({
@@ -99,7 +99,7 @@ let APISettings = React.createClass({
                 title={getLangText('API Integration')}
                 defaultExpanded={this.props.defaultExpanded}>
                 <Form
-                    url={ApiUrls.applications}
+                    url={resolveUrl('applications')}
                     handleSuccess={this.handleCreateSuccess}>
                     <Property
                         name='name'

js/components/ascribe_settings/bitcoin_wallet_settings.js

@@ -12,7 +12,7 @@ import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let BitcoinWalletSettings = React.createClass({
@@ -68,4 +68,4 @@ let BitcoinWalletSettings = React.createClass({
     }
 });
 
-export default BitcoinWalletSettings;
+export default BitcoinWalletSettings;

js/components/ascribe_settings/contract_settings.js

@@ -19,9 +19,9 @@ import AclProxy from '../acl_proxy';
 import withContext from '../context/with_context';
 import { currentUserShape, whitelabelShape } from '../prop_types';
 
-import { setDocumentTitle } from '../../utils/dom_utils';
+import { setDocumentTitle } from '../../utils/dom';
-import { truncateTextAtCharIndex } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang';
-import { getLangText } from '../../utils/lang_utils';
+import { truncateText } from '../../utils/text';
 
 
 let ContractSettings = React.createClass({
@@ -105,7 +105,7 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={contract.id}
                                         title={contract.name}
-                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
+                                        content={truncateText(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                 <AclProxy
@@ -147,7 +147,7 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={contract.id}
                                         title={contract.name}
-                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
+                                        content={truncateText(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                <AclProxy

js/components/ascribe_settings/contract_settings_update_button.js

@@ -10,13 +10,13 @@ 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 { makeCsrfHeader } from '../../utils/csrf';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let ContractSettingsUpdateButton = React.createClass({
@@ -66,7 +66,7 @@ let ContractSettingsUpdateButton = React.createClass({
                    fileClass: 'contract'
                }}
                createBlobRoutine={{
-                   url: ApiUrls.blob_contracts
+                   url: resolveUrl('blob_contracts')
                }}
                validation={{
                    itemLimit: validationTypes.registerWork.itemLimit,
@@ -76,17 +76,13 @@ let ContractSettingsUpdateButton = React.createClass({
                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
                signature={{
                    endpoint: `${AppConstants.serverUrl}/s3/signature/`,
-                   customHeaders: {
+                   customHeaders: makeCsrfHeader()
-                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                   }
                }}
                deleteFile={{
                    enabled: true,
                    method: 'DELETE',
                    endpoint: `${AppConstants.serverUrl}/s3/delete`,
-                   customHeaders: {
+                   customHeaders: makeCsrfHeader()
-                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                   }
                }}
                fileClassToUpload={{
                    singular: getLangText('UPDATE'),

js/components/ascribe_settings/settings_container.js

@@ -13,8 +13,8 @@ import AclProxy from '../acl_proxy';
 import withContext from '../context/with_context';
 import { whitelabelShape } from '../prop_types';
 
-import { setDocumentTitle } from '../../utils/dom_utils';
+import { setDocumentTitle } from '../../utils/dom';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 let SettingsContainer = React.createClass({

js/components/ascribe_settings/webhook_settings.js

@@ -16,10 +16,10 @@ import AclProxy from '../acl_proxy';
 import ActionPanel from '../ascribe_panel/action_panel';
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
-import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
+import { resolveUrl } from '../../utils/url_resolver';
 
 
 let WebhookSettings = React.createClass({
@@ -143,7 +143,7 @@ let WebhookSettings = React.createClass({
                 <AclProxy show={this.state.webhookEvents && this.state.webhookEvents.length > 0}>
                     <Form
                         ref="webhookCreateForm"
-                        url={ApiUrls.webhooks}
+                        url={resolveUrl('webhooks')}
                         handleSuccess={this.handleCreateSuccess}>
                         {this.getEvents()}
                         <Property

js/components/ascribe_social_share/facebook_share_button.js

@@ -6,7 +6,7 @@ import FacebookHandler from '../../third_party/facebook_handler';
 
 import AppConstants from '../../constants/application_constants';
 
-import { InjectInHeadUtils } from '../../utils/inject_utils';
+import { InjectInHeadUtils } from '../../utils/inject';
 
 let FacebookShareButton = React.createClass({
     propTypes: {

js/components/ascribe_social_share/twitter_share_button.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import AppConstants from '../../constants/application_constants';
 
-import { InjectInHeadUtils } from '../../utils/inject_utils';
+import { InjectInHeadUtils } from '../../utils/inject';
 
 let TwitterShareButton = React.createClass({
     propTypes: {

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -9,7 +9,7 @@ import FileDragAndDropErrorDialog from './file_drag_and_drop_error_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 import { FileStatus } from '../react_s3_fine_uploader_utils';
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -3,9 +3,10 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-import { dragAndDropAvailable } from '../../../utils/feature_detection_utils';
+import { dragAndDropAvailable } from 'js-utility-belt/es6/feature_detection';
-import { getLangText } from '../../../utils/lang_utils';
+
-import { getCurrentQueryParams } from '../../../utils/url_utils';
+import { getLangText } from '../../../utils/lang';
+import { getCurrentQueryParams } from '../../../utils/url';
 
 let FileDragAndDropDialog = React.createClass({
     propTypes: {

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { ErrorClasses } from '../../../constants/error_constants';
 
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 let FileDragAndDropErrorDialog = React.createClass({
     propTypes: {

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js

@@ -6,9 +6,9 @@ import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
 import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
 
 import { FileStatus } from '../react_s3_fine_uploader_utils';
-import { getLangText } from '../../../utils/lang_utils';
+import { extractFileExtensionFromString } from '../../../utils/file';
-import { truncateTextAtCharIndex } from '../../../utils/general_utils';
+import { getLangText } from '../../../utils/lang';
-import { extractFileExtensionFromString } from '../../../utils/file_utils';
+import { truncateText } from '../../../utils/text';
 
 
 const { shape, string, number, func, bool } = React.PropTypes;
@@ -76,7 +76,7 @@ const FileDragAndDropPreview = React.createClass({
         if (numberOfDisplayedFiles === 1) {
             return (
                 <span className="file-name">
-                    {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
+                    {truncateText(file.name, 30, `(...).${extractFileExtensionFromString(file.name)}`)}
                 </span>
             );
         } else {

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js

@@ -5,7 +5,7 @@ import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import AclProxy from '../../acl_proxy';
 import AscribeSpinner from '../../ascribe_spinner';
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 
 const { number, string, func, bool } = React.PropTypes;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js

@@ -57,4 +57,4 @@ let FileDragAndDropPreviewIterator = React.createClass({
     }
 });
 
-export default FileDragAndDropPreviewIterator;
+export default FileDragAndDropPreviewIterator;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js

@@ -3,9 +3,8 @@
 import React from 'react';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
-import AclProxy from '../../acl_proxy';
 import AscribeSpinner from '../../ascribe_spinner';
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
 
 
 const { string, number, bool, func } = React.PropTypes;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js

@@ -55,4 +55,4 @@ const FileDragAndDropPreviewProgress = React.createClass({
     }
 });
 
-export default FileDragAndDropPreviewProgress;
+export default FileDragAndDropPreviewProgress;

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -4,8 +4,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { displayValidProgressFilesFilter, FileStatus } from '../react_s3_fine_uploader_utils';
-import { getLangText } from '../../../utils/lang_utils';
+import { getLangText } from '../../../utils/lang';
-import { truncateTextAtCharIndex } from '../../../utils/general_utils';
+import { truncateText } from '../../../utils/text';
 
 const { func, array, bool, shape, string } = React.PropTypes;
 
@@ -127,7 +127,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm', sho
                 if (uploadingFiles.length) {
                     return (
                         <span>
-                            {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
+                            {` ${truncateText(uploadingFiles[0].name, 40)} `}
                             [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
                         </span>
                     );
@@ -135,7 +135,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm', sho
                     return (
                         <span>
                             <span className='ascribe-icon icon-ascribe-ok'/>
-                            {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
+                            {` ${truncateText(uploadedFile.name, 40)} `}
                             [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
                         </span>
                     );

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -15,14 +15,13 @@ import ErrorQueueStore from '../../stores/error_queue_store';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import AppConstants from '../../constants/application_constants';
 import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants';
 import { RETRY_ATTEMPT_TO_SHOW_CONTACT_US, ENDPOINTS } from '../../constants/uploader_constants';
 
 import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
-import { getCookie } from '../../utils/fetch_api_utils';
+import { getCsrfToken, makeCsrfHeader } from '../../utils/csrf';
-import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils';
+import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file';
-import { getLangText } from '../../utils/lang_utils';
+import { getLangText } from '../../utils/lang';
 
 
 const { shape,
@@ -215,7 +214,7 @@ const ReactS3FineUploader = React.createClass({
         return {
             filesToUpload: [],
             uploader: this.createNewFineUploader(),
-            csrfToken: getCookie(AppConstants.csrftoken),
+            csrfToken: getCsrfToken(),
             errorState: {
                 manualRetryAttempt: 0,
                 errorClass: null
@@ -235,7 +234,7 @@ const ReactS3FineUploader = React.createClass({
         // since the csrf header is defined in this component's props,
         // everytime the csrf cookie is changed we'll need to reinitalize
         // fineuploader and update the actual csrf token
-        let potentiallyNewCSRFToken = getCookie(AppConstants.csrftoken);
+        let potentiallyNewCSRFToken = getCsrfToken();
         if(this.state.csrfToken !== potentiallyNewCSRFToken) {
             this.setState({
                 uploader: this.createNewFineUploader(),
@@ -318,7 +317,7 @@ const ReactS3FineUploader = React.createClass({
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json',
-                    'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    ...makeCsrfHeader()
                 },
                 credentials: 'include',
                 body: JSON.stringify({
@@ -361,7 +360,7 @@ const ReactS3FineUploader = React.createClass({
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json',
-                    'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    ...makeCsrfHeader()
                 },
                 credentials: 'include',
                 body: JSON.stringify({

js/components/coa_verify_container.js

@@ -13,10 +13,9 @@ import AscribeSpinner from './ascribe_spinner';
 import withContext from './context/with_context';
 import { locationShape } from './prop_types';
 
-import ApiUrls from '../constants/api_urls';
+import { setDocumentTitle } from '../utils/dom';
-
+import { getLangText } from '../utils/lang';
-import { getLangText } from '../utils/lang_utils';
+import { resolveUrl } from '../utils/url_resolver';
-import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let CoaVerifyContainer = React.createClass({
@@ -75,7 +74,7 @@ let CoaVerifyForm = React.createClass({
 
         return (
             <Form
-                url={ApiUrls.coa_verify}
+                url={resolveUrl('coa_verify')}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button

js/components/context/with_context.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { currentUserShape, locationShape, routerShape, whitelabelShape } from '../prop_types';
 
-import { selectFromObject } from '../../utils/general_utils';
+import { selectFromObject } from '../../utils/general';
-import { getDisplayName } from '../../utils/react_utils';
+import { getDisplayName } from '../../utils/react';
 
 /**
  * ContextPropDefinitions

js/components/error_not_found_page.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import history from '../history';
 
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 const ErrorNotFoundPage = React.createClass({

js/components/footer.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 const Footer = React.createClass({

js/components/global_notification.js

@@ -3,13 +3,12 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import GlobalNotificationActions from '../actions/global_notification_actions';
-import GlobalNotificationStore from '../stores/global_notification_store';
-
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import { mergeOptions } from '../utils/general_utils';
+import GlobalNotificationStore from '../stores/global_notification_store';
+
+import { safeMerge } from '../utils/general';
 
 const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
 
@@ -18,7 +17,7 @@ let GlobalNotification = React.createClass({
     getInitialState() {
         const notificationStore = GlobalNotificationStore.getState();
 
-        return mergeOptions(
+        return safeMerge(
             {
                 containerWidth: 0
             },
@@ -60,7 +59,7 @@ let GlobalNotification = React.createClass({
 
         const notificationClasses = [];
 
-        if (this.state.containerWidth > 768) {
+        if (this.state.containerWidth > MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH) {
             notificationClasses.push('ascribe-global-notification-bubble');
             notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
                                                                    : 'ascribe-global-notification-bubble-off');

js/components/header.js

@@ -20,8 +20,8 @@ import HeaderNotificationDebug from './header_notification_debug';
 import NavRoutesLinks from './nav_routes_links';
 import { currentUserShape, whitelabelShape } from './prop_types';
 
-import { constructHead } from '../utils/dom_utils';
+import { constructHead } from '../utils/dom';
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 let Header = React.createClass({

js/components/header_notifications.js

@@ -13,7 +13,7 @@ import NotificationStore from '../stores/notification_store';
 import withContext from './context/with_context';
 import { currentUserShape } from './prop_types';
 
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 let HeaderNotifications = React.createClass({

js/components/login_container.js

@@ -8,8 +8,8 @@ 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 { setDocumentTitle } from '../utils/dom';
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 let LoginContainer = React.createClass({

js/components/logout_container.js

@@ -2,12 +2,12 @@
 
 import React from 'react';
 
-import AscribeSpinner from './ascribe_spinner';
-
 import UserActions from '../actions/user_actions';
 
-import { getLangText } from '../utils/lang_utils';
+import AscribeSpinner from './ascribe_spinner';
-import { setDocumentTitle } from '../utils/dom_utils';
+
+import { setDocumentTitle } from '../utils/dom';
+import { getLangText } from '../utils/lang';
 
 
 let LogoutContainer = React.createClass({

js/components/nav_routes_links.js

@@ -4,11 +4,10 @@ import React from 'react';
 
 import Nav from 'react-bootstrap/lib/Nav';
 
+import AclProxy from './acl_proxy';
 import NavRoutesLinksLink from './nav_routes_links_link';
 
-import AclProxy from './acl_proxy';
+import { sanitizeList } from '../utils/general';
-
-import { sanitizeList } from '../utils/general_utils';
 
 
 const DISABLE_ENUM = ['hasPieces', 'noPieces'];

js/components/password_reset_container.js

@@ -12,10 +12,9 @@ import AscribeSpinner from './ascribe_spinner';
 import withContext from './context/with_context';
 import { locationShape, routerShape } from './prop_types';
 
-import ApiUrls from '../constants/api_urls';
+import { setDocumentTitle } from '../utils/dom';
-
+import { getLangText } from '../utils/lang';
-import { setDocumentTitle } from '../utils/dom_utils';
+import { resolveUrl } from '../utils/url_resolver';
-import { getLangText } from '../utils/lang_utils';
 
 
 let PasswordResetContainer = React.createClass({
@@ -76,7 +75,7 @@ let PasswordRequestResetForm = React.createClass({
             <Form
                 ref="form"
                 className='ascribe-form-wrapper'
-                url={ApiUrls.users_password_reset_request}
+                url={resolveUrl('users_password_reset_request')}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button
@@ -136,7 +135,7 @@ let PasswordResetForm = withContext(React.createClass({
             <Form
                 ref="form"
                 className='ascribe-form-wrapper'
-                url={ApiUrls.users_password_reset}
+                url={resolveUrl('users_password_reset')}
                 handleSuccess={this.handleSuccess}
                 getFormData={this.getFormData}
                 buttons={

js/components/piece_list.js

@@ -24,10 +24,10 @@ import AscribeSpinner from './ascribe_spinner';
 import withContext from './context/with_context';
 import { locationShape, routerShape } from './prop_types';
 
-import { getAvailableAcls } from '../utils/acl_utils';
+import { getAvailableAcls } from '../utils/acl';
-import { setDocumentTitle } from '../utils/dom_utils';
+import { setDocumentTitle } from '../utils/dom';
-import { mergeOptions, isShallowEqual } from '../utils/general_utils';
+import { safeMerge, isShallowEqual } from '../utils/general';
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 const PieceList = React.createClass({
@@ -75,7 +75,7 @@ const PieceList = React.createClass({
 
     getInitialState() {
         const pieceListStore = PieceListStore.getState();
-        const stores = mergeOptions(
+        const stores = safeMerge(
             pieceListStore,
             EditionListStore.getState(),
             {

js/components/register_piece.js

@@ -15,8 +15,8 @@ import RegisterPieceForm from './ascribe_forms/form_register_piece';
 import withContext from './context/with_context';
 import { routerShape, whitelabelShape } from './prop_types';
 
-import { setDocumentTitle } from '../utils/dom_utils';
+import { setDocumentTitle } from '../utils/dom';
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 const RegisterPiece = React.createClass( {

js/components/search_bar.js

@@ -4,11 +4,10 @@ import React from 'react';
 
 // FIXME: Input is deprecated
 import Input from 'react-bootstrap/lib/Input';
-import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
 import AscribeSpinner from './ascribe_spinner';
 
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 const { func, string, number } = React.PropTypes;

js/components/signup_container.js

@@ -6,8 +6,8 @@ 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 { setDocumentTitle } from '../utils/dom';
-import { getLangText } from '../utils/lang_utils';
+import { getLangText } from '../utils/lang';
 
 
 let SignupContainer = React.createClass({

js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js

@@ -8,8 +8,8 @@ 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 { setDocumentTitle } from '../../../../../utils/dom';
-import { getLangText } from '../../../../../utils/lang_utils';
+import { getLangText } from '../../../../../utils/lang';
 
 
 let Vivi23Landing = React.createClass({

js/components/whitelabel/wallet/components/artcity/artcity_landing.js

@@ -8,8 +8,8 @@ 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 { getLangText } from '../../../../../utils/lang';
-import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { setDocumentTitle } from '../../../../../utils/dom';
 
 
 let ArtcityLanding = React.createClass({

js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js

@@ -10,8 +10,6 @@ import AclProxy from '../../../../acl_proxy';
 import withContext from '../../../../context/with_context';
 import { currentUserShape } from '../../../../prop_types';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
-
 
 let WalletActionPanel = React.createClass({
     propTypes: {
@@ -40,7 +38,7 @@ let WalletActionPanel = React.createClass({
 
             if (piece && piece.acl && typeof piece.acl.acl_loan !== 'undefined') {
                 // make a copy to not have side effects
-                availableAcls = mergeOptions({}, piece.acl);
+                availableAcls = Object.assign({}, piece.acl);
                 availableAcls.acl_loan = false;
             }
             let SubmitButtonType = submitButtonType;

js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js

@@ -15,9 +15,8 @@ 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';
-
+import { resolveUrl } from '../../../../../utils/url_resolver';
-import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let WalletPieceContainer = React.createClass({
@@ -85,7 +84,7 @@ let WalletPieceContainer = React.createClass({
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
-                            url={ApiUrls.note_private_piece} />
+                            url={resolveUrl('note_private_piece')} />
                     </CollapsibleParagraph>
                     {children}
                 </Piece>