1
0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00

Fix app crashing warnings

This commit is contained in:
tim 2016-05-04 16:44:39 +02:00
parent 5900e900ae
commit 810ceadae9
7 changed files with 48 additions and 97 deletions

View File

@ -37,13 +37,13 @@ let AclInformation = React.createClass({
}
},
getInfoText(title, info, example){
getInfoText(title, info, example, key){
const aim = this.props.aim;
if(aim) {
if(aim === 'form') {
return (
<p>
<p key={key}>
<span className="info">
{replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
</span>
@ -55,7 +55,7 @@ let AclInformation = React.createClass({
}
else if(aim === 'button') {
return (
<p>
<p key={key}>
<span className="title">
{title}
</span>
@ -94,13 +94,13 @@ let AclInformation = React.createClass({
verbsToDisplay = verbsToDisplay.concat(intersectLists(verbs, Object.keys(sanitizedAclObject)));
}
return verbsToDisplay.map((verb) => {
return verbsToDisplay.map((verb, i) => {
const title = titles[verb];
const informationSentence = informationSentences[verb];
const exampleSentence = exampleSentences[verb];
if (title && informationSentence && exampleSentence) {
return this.getInfoText(getLangText(title), getLangText(informationSentence), getLangText(exampleSentence));
return this.getInfoText(getLangText(title), getLangText(informationSentence), getLangText(exampleSentence), i);
}
});
},

View File

@ -269,6 +269,7 @@ let CoaDetails = React.createClass({
} else if (typeof coa === 'string') {
coaDetailElement = coa;
} else {
// TODO: Define Keys
coaDetailElement = [
<AscribeSpinner color='dark-blue' size='md'/>,
<p>{getLangText("Just a sec, we're generating your COA")}</p>,

View File

@ -91,10 +91,10 @@ let PieceListToolbarFilterWidget = React.createClass({
label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => {
return (
<div>
<div
key={i}>
<li
style={{'textAlign': 'center'}}
key={i}>
style={{'textAlign': 'center'}}>
<em>{label}:</em>
</li>
{items.map((param, j) => {

View File

@ -63,9 +63,9 @@ let PieceListToolbarOrderWidget = React.createClass({
</li>
{this.props.orderParams.map((param) => {
return (
<div>
<div
key={param}>
<li
key={param}
onClick={this.orderBy(param)}
className="filter-widget-item">
<div className="checkbox-line">

View File

@ -87,6 +87,7 @@ let FileDragAndDropDialog = React.createClass({
);
} else {
if (multipleFiles) {
// TODO: Use key property
dialogElement = [
this.getDragDialog(fileClassToUpload.plural),
<span
@ -99,6 +100,7 @@ let FileDragAndDropDialog = React.createClass({
const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
: getLangText('choose a %s to upload', fileClassToUpload.singular);
// TODO: Use key property
dialogElement = [
this.getDragDialog(fileClassToUpload.singular),
<span

View File

@ -55,11 +55,6 @@ let Header = React.createClass({
WhitelabelStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel.defer();
// react-bootstrap 0.25.1 has a bug in which it doesn't
// close the mobile expanded navigation after a click by itself.
// To get rid of this, we set the state of the component ourselves.
history.listen(this.onRouteChange);
if (this.state.currentUser && this.state.currentUser.email) {
EventActions.profileDidLoad.defer(this.state.currentUser);
}
@ -146,15 +141,6 @@ let Header = React.createClass({
this.refs.dropdownbutton.setDropdownState(false);
},
// On route change, close expanded navbar again since react-bootstrap doesn't close
// the collapsibleNav by itself on click. setState() isn't available on a ref so
// doing this explicitly is the only way for now.
onRouteChange() {
if (this.refs.navbar) {
this.refs.navbar.state.navExpanded = false;
}
},
render() {
let account;
let signup;
@ -195,7 +181,7 @@ let Header = React.createClass({
</LinkContainer>
</DropdownButton>
);
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar pullRight/>;
}
else {
account = (
@ -220,23 +206,26 @@ let Header = React.createClass({
<div>
<Navbar
ref="navbar"
brand={this.getLogo()}
toggleNavKey={0}
fixedTop={true}
className="hidden-print">
<CollapsibleNav
<Navbar.Header>
<Navbar.Brand>
{this.getLogo()}
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse
eventKey={0}>
<Nav navbar left>
<Nav navbar pullLeft>
{this.getPoweredBy()}
</Nav>
<Nav navbar right>
<Nav navbar pullRight>
<HeaderNotificationDebug show={false}/>
{account}
{signup}
</Nav>
<HeaderNotifications />
{navRoutesLinks}
</CollapsibleNav>
</Navbar.Collapse>
</Navbar>
<p className="ascribe-print-header visible-print">
<span className="icon-ascribe-logo" />

View File

@ -15,7 +15,7 @@ import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils';
let HeaderNotifications = React.createClass({
let HeaderNotification = React.createClass({
getInitialState() {
return mergeOptions(
@ -37,31 +37,6 @@ let HeaderNotifications = React.createClass({
this.setState(state);
},
onMenuItemClick() {
/*
This is a hack to make the dropdown close after clicking on an item
The function just need to be defined
from https://github.com/react-bootstrap/react-bootstrap/issues/368:
@jvillasante - Have you tried to use onSelect with the DropdownButton?
I don't have a working example that is exactly like yours,
but I just noticed that the Dropdown closes when I've attached an event handler to OnSelect:
<DropdownButton eventKey={3} title="Admin" onSelect={ this.OnSelected } >
onSelected: function(e) {
// doesn't need to have functionality (necessarily) ... just wired up
}
Internally, a call to DropdownButton.setDropDownState(false) is made which will hide the dropdown menu.
So, you should be able to call that directly on the DropdownButton instance as well if needed.
NOW, THAT DIDN'T WORK - the onSelect routine isnt triggered in all cases
Hence, we do this manually
*/
this.refs.dropdownbutton.setDropdownState(false);
},
getPieceNotifications(){
if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
return (
@ -71,12 +46,14 @@ let HeaderNotifications = React.createClass({
</div>
{this.state.pieceListNotifications.map((pieceNotification, i) => {
return (
<MenuItem eventKey={i + 2}>
<MenuItem
href={`/pieces/${pieceNotification.piece.id}`}
key={i}
eventKey={i + 2}>
<NotificationListItem
ref={i}
notification={pieceNotification.notification}
pieceOrEdition={pieceNotification.piece}
onClick={this.onMenuItemClick}/>
pieceOrEdition={pieceNotification.piece}/>
</MenuItem>
);
}
@ -96,12 +73,14 @@ let HeaderNotifications = React.createClass({
</div>
{this.state.editionListNotifications.map((editionNotification, i) => {
return (
<MenuItem eventKey={i + 2}>
<MenuItem
href={`/editions/${editionNotification.edition.bitcoin_id}`}
eventKey={i + 2}
key={i}>
<NotificationListItem
ref={'edition' + i}
notification={editionNotification.notification}
pieceOrEdition={editionNotification.edition}
onClick={this.onMenuItemClick}/>
pieceOrEdition={editionNotification.edition}/>
</MenuItem>
);
}
@ -123,7 +102,7 @@ let HeaderNotifications = React.createClass({
numNotifications += this.state.editionListNotifications.length;
}
return (
<Nav navbar right>
<Nav navbar pullRight>
<DropdownButton
ref='dropdownbutton'
eventKey="1"
@ -148,25 +127,6 @@ let NotificationListItem = React.createClass({
propTypes: {
notification: React.PropTypes.array,
pieceOrEdition: React.PropTypes.object,
onClick: React.PropTypes.func
},
isPiece() {
return !(this.props.pieceOrEdition && this.props.pieceOrEdition.parent);
},
getLinkData() {
let { pieceOrEdition } = this.props;
if (this.isPiece()) {
return `/pieces/${pieceOrEdition.id}`;
} else {
return `/editions/${pieceOrEdition.bitcoin_id}`;
}
},
onClick(event){
this.props.onClick(event);
},
getNotificationText(){
@ -184,23 +144,22 @@ let NotificationListItem = React.createClass({
render() {
if (this.props.pieceOrEdition) {
return (
<Link to={this.getLinkData()} onClick={this.onClick}>
<div className="row notification-wrapper">
<div className="col-xs-4 clear-paddings">
<div className="thumbnail-wrapper">
<img src={this.props.pieceOrEdition.thumbnail.url_safe}/>
</div>
</div>
<div className="col-xs-8 notification-list-item-header">
<h1>{this.props.pieceOrEdition.title}</h1>
<div className="sub-header">by {this.props.pieceOrEdition.artist_name}</div>
{this.getNotificationText()}
<div className="row notification-wrapper">
<div className="col-xs-4 clear-paddings">
<div className="thumbnail-wrapper">
<img src={this.props.pieceOrEdition.thumbnail.url_safe}/>
</div>
</div>
</Link>);
<div className="col-xs-8 notification-list-item-header">
<h1>{this.props.pieceOrEdition.title}</h1>
<div className="sub-header">by {this.props.pieceOrEdition.artist_name}</div>
{this.getNotificationText()}
</div>
</div>
);
}
return null;
}
});
export default HeaderNotifications;
export default HeaderNotification;