1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Add AppBase HOC to improve DRYness of functionality reused across apps

This commit is contained in:
Brett Sun 2016-01-19 15:00:50 +01:00
parent 7e77cb58dc
commit 7e1cfbb490
6 changed files with 105 additions and 75 deletions

55
js/components/app_base.js Normal file
View File

@ -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>
);
}
});
};

View File

@ -1,39 +1,21 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { History } from 'react-router';
import AppBase from './app_base';
import Header from './header'; import Header from './header';
import Footer from './footer';
import GlobalNotification from './global_notification';
import AppConstants from '../constants/application_constants'; import AppConstants from '../constants/application_constants';
let AscribeApp = React.createClass({ let AscribeApp = React.createClass({
propTypes: { propTypes: {
routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
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() { render() {
@ -46,12 +28,9 @@ let AscribeApp = React.createClass({
<div className="ascribe-body"> <div className="ascribe-body">
{children} {children}
</div> </div>
<Footer />
<GlobalNotification />
<div id="modal" className="container"></div>
</div> </div>
); );
} }
}); });
export default AscribeApp; export default AppBase(AscribeApp);

View File

@ -14,7 +14,7 @@ import AppConstants from '../../../constants/application_constants';
import { AclInformationText } from '../../../constants/acl_information_text'; 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) { if (AppConstants.aclList.indexOf(action) < 0) {
console.warn('Your specified aclName did not match a an acl class.'); console.warn('Your specified aclName did not match a an acl class.');
} }

View File

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

View File

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

View File

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