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) {
         const aim = this.props.aim;
 
         if(aim) {
             if(aim === 'form') {
                 return (
-                    <p>
+                    <p key={title}>
                         <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={title}>
                         <span className="title">
                             {title}
                         </span>

js/components/ascribe_detail/edition.js

@@ -277,7 +277,7 @@ let CoaDetails = React.createClass({
             coaDetailElement = coa;
         } else {
             coaDetailElement = [
-                <AscribeSpinner color='dark-blue' size='md'/>,
+                <AscribeSpinner color='dark-blue' size='md' />,
                 <p>{getLangText("Just a sec, we're generating your COA")}</p>,
                 <p>{getLangText('(you may leave the page)')}</p>
             ];

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -34,11 +34,13 @@ let FileDragAndDropDialog = React.createClass({
     },
 
     render() {
-        const { enableLocalHashing,
+        const {
-                fileClassToUpload,
+            enableLocalHashing,
-                multipleFiles,
+            fileClassToUpload,
-                onClick,
+            multipleFiles,
-                uploadMethod } = this.props;
+            onClick,
+            uploadMethod
+        } = this.props;
         let dialogElement;
 
         if (enableLocalHashing && !uploadMethod) {
@@ -66,10 +68,8 @@ let FileDragAndDropDialog = React.createClass({
                             {getLangText('Hash your work')}
                         </span>
                     </Link>
-
                     <span> {getLangText('or')} </span>
-
+                    <Link
-                   <Link
                         to={`/${window.location.pathname.split('/').pop()}`}
                         query={queryParamsUpload}>
                         <span className="btn btn-default btn-sm">

js/components/header.js

@@ -3,11 +3,8 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-import history from '../history';
-
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
-import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import NavItem from 'react-bootstrap/lib/NavItem';
@@ -43,15 +40,10 @@ let Header = React.createClass({
         // conflicts with routes that may need to wait to load the piece list
         PieceListStore.listen(this.onChange);
 
-        // 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);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        //history.unlisten(this.onRouteChange);
     },
 
     onChange(state) {
@@ -116,15 +108,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() {
         const { currentUser, routes, whitelabel } = this.props;
         const { unfilteredPieceListCount } = this.state;
@@ -175,7 +158,7 @@ let Header = React.createClass({
             navRoutesLinks = (
                 <NavRoutesLinks
                     navbar
-                    right
+                    pullRight
                     hasPieces={!!unfilteredPieceListCount}
                     routes={routes}
                     userAcl={currentUser.acl} />
@@ -201,26 +184,30 @@ let Header = React.createClass({
             <div>
                 <Navbar
                     ref="navbar"
-                    brand={this.getLogo()}
-                    toggleNavKey={0}
                     fixedTop={true}
                     className="hidden-print">
-                    <CollapsibleNav eventKey={0}>
+                    <Navbar.Header>
-                        <Nav navbar left>
+                        <Navbar.Brand>
+                            {this.getLogo()}
+                        </Navbar.Brand>
+                    </Navbar.Header>
+                    <Navbar.Collapse
+                        eventKey={0}>
+                        <Nav navbar pullLeft>
                             <AclProxy
                                 aclObject={whitelabel}
                                 aclName="acl_view_powered_by">
                                 {this.getPoweredBy()}
                             </AclProxy>
                         </Nav>
-                        <Nav navbar right>
+                        <Nav navbar pullRight>
-                            <HeaderNotificationDebug show={false} />
+                            <HeaderNotificationDebug show={false}/>
                             {account}
                             {signup}
                         </Nav>
                         <HeaderNotifications currentUser={currentUser} />
                         {navRoutesLinks}
-                    </CollapsibleNav>
+                    </Navbar.Collapse>
                 </Navbar>
                 <p className="ascribe-print-header visible-print">
                     <span className="icon-ascribe-logo" />

js/components/header_notifications.js

@@ -45,31 +45,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);
-    },
-
     refreshNotifications() {
         NotificationActions.fetchPieceListNotifications();
         NotificationActions.fetchEditionListNotifications();
@@ -83,12 +58,18 @@ let HeaderNotifications = React.createClass({
                         {`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
                     </div>
                     {notifications.map((notification, i) => {
+                        const pieceOrEdition = isPiece ? notification.piece : notification.edition;
+                        const href = isPiece ? `/pieces/${pieceOrEdition.id}`
+                                             : `/editions/${pieceOrEdition.bitcoin_id}`;
+
                         return (
-                            <MenuItem eventKey={i + 2}>
+                            <MenuItem
+                                key={href}
+                                eventKey={i + 2}
+                                href={href}>
                                 <NotificationListItem
                                     notification={notification.notification}
-                                    pieceOrEdition={isPiece ? notification.piece : notification.edition}
+                                    pieceOrEdition={pieceOrEdition} />
-                                    onClick={this.onMenuItemClick}/>
                             </MenuItem>
                         );
                     })}
@@ -112,7 +93,7 @@ let HeaderNotifications = React.createClass({
             }
 
             return (
-                <Nav navbar right>
+                <Nav navbar pullRight>
                     <DropdownButton
                         ref='dropdownButton'
                         id="header-notification-dropdown"
@@ -138,25 +119,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(){
@@ -174,20 +136,19 @@ 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;
     }