Fix app crashing warnings

js/components/ascribe_buttons/acl_information.js

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

js/components/ascribe_detail/edition.js

@@ -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>,

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -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'}}
+                                    style={{'textAlign': 'center'}}>
-                                    key={i}>
                                     <em>{label}:</em>
                                 </li>
                                 {items.map((param, j) => {

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js

@@ -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">
@@ -89,4 +89,4 @@ let PieceListToolbarOrderWidget = React.createClass({
     }
 });
 
-export default PieceListToolbarOrderWidget;
+export default PieceListToolbarOrderWidget;

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

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

js/components/header.js

@@ -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" />

js/components/header_notification.js

@@ -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}
+                                    pieceOrEdition={pieceNotification.piece}/>
-                                    onClick={this.onMenuItemClick}/>
                             </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}
+                                    pieceOrEdition={editionNotification.edition}/>
-                                    onClick={this.onMenuItemClick}/>
                             </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="row notification-wrapper">
+                    <div className="col-xs-4 clear-paddings">
-                        <div className="col-xs-4 clear-paddings">
+                        <div className="thumbnail-wrapper">
-                            <div className="thumbnail-wrapper">
+                            <img src={this.props.pieceOrEdition.thumbnail.url_safe}/>
-                                <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>
                     </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;