ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

31
js/components/ascribe_app.js
View File

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

2
js/components/ascribe_buttons/acls/acl_button.js
View File

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

34
js/components/whitelabel/prize/portfolioreview/pr_app.js
View File

@ -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)) {
header = <Header routes={routes} />;
} else if (currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
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);

28
js/components/whitelabel/prize/simple_prize/prize_app.js
View File

@ -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;
let header = null;
let subdomain = getSubdomain();
const { children, history, routes } = this.props;
const 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 />
<div id="modal" className="container"></div>
<Footer />
{children}
</div>
);
}
});
export default PrizeApp;
export default AppBase(PrizeApp);

30
js/components/whitelabel/wallet/wallet_app.js
View File

@ -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;
let subdomain = getSubdomain();
const { history, routes, children } = this.props;
const { children, history, routes } = this.props;
const 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') || 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);