Add AppBase HOC to improve DRYness of functionality reused across apps

js/components/app_base.js

@@ -0,0 +1,55 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+import { History } from 'react-router';
+
+import Footer from './footer';
+import GlobalNotification from './global_notification';
+
+import AppConstants from '../constants/application_constants';
+
+
+export default function AppBase(App) {
+    return React.createClass({
+        displayName: 'AppBase',
+
+        propTypes: {
+            history: React.PropTypes.object.isRequired,
+            location: React.PropTypes.object.isRequired,
+            routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+            children: React.PropTypes.oneOfType([
+                React.PropTypes.arrayOf(React.PropTypes.element),
+                React.PropTypes.element
+            ])
+        },
+
+        mixins: [History],
+
+        componentDidMount() {
+            this.history.locationQueue.push(this.props.location);
+        },
+
+        componentWillReceiveProps(nextProps) {
+            const { locationQueue } = this.history;
+            locationQueue.unshift(nextProps.location);
+
+            // Limit the number of locations to keep in memory to avoid too much memory usage
+            if (locationQueue.length > AppConstants.locationThreshold) {
+                locationQueue.length = AppConstants.locationThreshold;
+            }
+        },
+
+        render() {
+            return (
+                <div>
+                    <App {...this.props} />
+                    <Footer />
+                    <GlobalNotification />
+                    <div id="modal" className="container" />
+                </div>
+            );
+        }
+    });
+};

js/components/ascribe_app.js

@@ -1,39 +1,21 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
 
+import AppBase from './app_base';
 import Header from './header';
-import Footer from './footer';
-import GlobalNotification from './global_notification';
 
 import AppConstants from '../constants/application_constants';
 
 
 let AscribeApp = React.createClass({
     propTypes: {
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
+        ])
-        routes: React.PropTypes.arrayOf(React.PropTypes.object),
-        location: React.PropTypes.object
-    },
-
-    mixins: [History],
-
-    componentDidMount() {
-        this.history.locationQueue.push(this.props.location);
-    },
-
-    componentWillReceiveProps(nextProps) {
-        const { locationQueue } = this.history;
-        locationQueue.unshift(nextProps.location);
-
-        // Limit the number of locations to keep in memory to avoid too much memory usage
-        if (locationQueue.length > AppConstants.locationThreshold) {
-            locationQueue.length = AppConstants.locationThreshold;
-        }
     },
 
     render() {
@@ -46,12 +28,9 @@ let AscribeApp = React.createClass({
                 <div className="ascribe-body">
                     {children}
                 </div>
-                <Footer />
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
             </div>
         );
     }
 });
 
-export default AscribeApp;
+export default AppBase(AscribeApp);

js/components/ascribe_buttons/acls/acl_button.js

@@ -14,7 +14,7 @@ import AppConstants from '../../../constants/application_constants';
 import { AclInformationText } from '../../../constants/acl_information_text';
 
 
-export default function ({ action, displayName, title, tooltip }) {
+export default function AclButton({ action, displayName, title, tooltip }) {
     if (AppConstants.aclList.indexOf(action) < 0) {
         console.warn('Your specified aclName did not match a an acl class.');
     }

js/components/whitelabel/prize/portfolioreview/pr_app.js

@@ -1,28 +1,30 @@
 'use strict';
 
 import React from 'react';
-import GlobalNotification from '../../../global_notification';
-
-import Hero from './components/pr_hero';
-import Header from '../../../header';
 
 import EventActions from '../../../../actions/event_actions';
 
 import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
+import Hero from './components/pr_hero';
+
+import AppBase from '../../../app_base';
+import Header from '../../../header';
+
 import { getSubdomain } from '../../../../utils/general_utils';
 import { getCookie } from '../../../../utils/fetch_api_utils';
 
 
 let PRApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
+        ])
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     getInitialState() {
@@ -55,19 +57,19 @@ let PRApp = React.createClass({
         this.setState(state);
     },
 
+
     render() {
-        const { history, children, routes } = this.props;
+        const { children, history, routes } = this.props;
         const { currentUser } = this.state;
+        const subdomain = getSubdomain();
+
         let style = {};
-        let subdomain = getSubdomain();
         let header;
-
-
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
-            header = <Hero currentUser={currentUser} />;
+            header = (<Hero currentUser={currentUser} />);
             style = { paddingTop: '0 !important' };
-        } else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
+        } else if (currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
-            header = <Header routes={routes} />;
+            header = (<Header routes={routes} />);
         } else {
             style = { paddingTop: '0 !important' };
         }
@@ -79,12 +81,10 @@ let PRApp = React.createClass({
                     style={style}
                     className={'container ascribe-prize-app client--' + subdomain}>
                     {children}
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
                 </div>
             </div>
         );
     }
 });
 
-export default PRApp;
+export default AppBase(PRApp);

js/components/whitelabel/prize/simple_prize/prize_app.js

@@ -1,50 +1,50 @@
 'use strict';
 
 import React from 'react';
+
 import Hero from './components/prize_hero';
+
+import AppBase from '../../../app_base';
 import Header from '../../../header';
-import Footer from '../../../footer';
-import GlobalNotification from '../../../global_notification';
 
 import { getSubdomain } from '../../../../utils/general_utils';
 
 
 let PrizeApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
+        ])
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     render() {
-        const { history, routes } = this.props;
+        const { children, history, routes } = this.props;
-        let header = null;
+        const subdomain = getSubdomain();
-        let subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
-            header = <Hero />;
+            header = (<Hero />);
         } else {
-            header = <Header routes={routes}/>;
+            header = (<Header routes={routes} />);
         }
 
         return (
             <div className={'container ascribe-prize-app client--' + subdomain}>
                 {header}
                 {this.props.children}
-                <GlobalNotification />
+                    {children}
-                <div id="modal" className="container"></div>
-                <Footer />
             </div>
         );
     }
 });
 
-export default PrizeApp;
+export default AppBase(PrizeApp);

js/components/whitelabel/wallet/wallet_app.js

@@ -1,41 +1,40 @@
 'use strict';
 
 import React from 'react';
-import Header from '../../header';
-import Footer from '../../footer';
-
-import GlobalNotification from '../../global_notification';
-
 import classNames from 'classnames';
 
+import AppBase from '../../app_base';
+import Header from '../../header';
+
 import { getSubdomain } from '../../../utils/general_utils';
 
 
 let WalletApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
+        ])
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     render() {
-        let header = null;
+        const { children, history, routes } = this.props;
-        let subdomain = getSubdomain();
+        const subdomain = getSubdomain();
-        const { history, routes, children } = this.props;
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
             && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
-            header = (<div className="hero"/>);
+            header = (<div className="hero" />);
         } else {
-            header = <Header routes={routes} />;
+            header = (<Header routes={routes} />);
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
@@ -45,13 +44,10 @@ let WalletApp = React.createClass({
                 <div className='container'>
                     {header}
                     {children}
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
-                    <Footer />
                 </div>
             </div>
         );
     }
 });
 
-export default WalletApp;
+export default AppBase(WalletApp);