From 4c250640febe3f871414570ff646866746862377 Mon Sep 17 00:00:00 2001
From: Juan Tejada <juans.tejada@gmail.com>
Date: Tue, 5 Apr 2016 14:49:03 -0700
Subject: [PATCH] fix(react): Fix several warnings in missing imports

---
 .../lib/sidebar-participant-picker.jsx        | 32 ++++++++++++-------
 .../stylesheets/message-list.less             |  1 +
 internal_packages/plugins/lib/package-set.jsx |  2 +-
 internal_packages/plugins/lib/package.jsx     | 10 +++---
 .../plugins/lib/tab-installed.jsx             |  2 +-
 .../lib/tabs/preferences-keymaps.jsx          |  8 ++---
 .../search-bar/lib/search-bar.cjsx            |  1 +
 src/components/newsletter-signup.cjsx         | 26 +++++++++------
 8 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/internal_packages/message-list/lib/sidebar-participant-picker.jsx b/internal_packages/message-list/lib/sidebar-participant-picker.jsx
index dc339c183..bcdfd5172 100644
--- a/internal_packages/message-list/lib/sidebar-participant-picker.jsx
+++ b/internal_packages/message-list/lib/sidebar-participant-picker.jsx
@@ -38,17 +38,11 @@ export default class SidebarParticipantPicker extends React.Component {
     };
   }
 
-  _renderSortedContacts() {
-    return this.state.sortedContacts.map((contact) => {
-      const selected = contact.email === (this.state.focusedContact || {}).email
-      const key = contact.email + SPLIT_KEY + contact.name;
-
-      return (
-        <option selected={selected} value={key} key={key}>
-          {contact.displayName({includeAccountLabel: true, forceAccountLabel: true})}
-        </option>
-      )
-    });
+  _getKeyForContact(contact) {
+    if (!contact) {
+      return null
+    }
+    return contact.email + SPLIT_KEY + contact.name
   }
 
   _onSelectContact = (event) => {
@@ -59,10 +53,24 @@ export default class SidebarParticipantPicker extends React.Component {
     return Actions.focusContact(contact);
   }
 
+  _renderSortedContacts() {
+    return this.state.sortedContacts.map((contact) => {
+      const key = this._getKeyForContact(contact)
+
+      return (
+        <option value={key} key={key}>
+          {contact.displayName({includeAccountLabel: true, forceAccountLabel: true})}
+        </option>
+      )
+    });
+  }
+
   render() {
+    const {focusedContact} = this.state
+    const value = this._getKeyForContact(focusedContact)
     return (
       <div className="sidebar-participant-picker">
-        <select tabIndex={-1} onChange={this._onSelectContact}>
+        <select tabIndex={-1} value={value} onChange={this._onSelectContact}>
         {this._renderSortedContacts()}
         </select>
       </div>
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 7273b0481..4a1d4c7bb 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -718,6 +718,7 @@ body.platform-win32 {
   text-align: right;
   select {
     max-width: 100%;
+    width: 100%;
   }
 }
 
diff --git a/internal_packages/plugins/lib/package-set.jsx b/internal_packages/plugins/lib/package-set.jsx
index 72a2d42e4..1577d3228 100644
--- a/internal_packages/plugins/lib/package-set.jsx
+++ b/internal_packages/plugins/lib/package-set.jsx
@@ -7,7 +7,7 @@ class PackageSet extends React.Component {
 
   static propTypes = {
     title: React.PropTypes.string.isRequired,
-    packages: React.PropTypes.array.isRequired,
+    packages: React.PropTypes.array,
     emptyText: React.PropTypes.element,
   }
 
diff --git a/internal_packages/plugins/lib/package.jsx b/internal_packages/plugins/lib/package.jsx
index 04c5644da..71e992b44 100644
--- a/internal_packages/plugins/lib/package.jsx
+++ b/internal_packages/plugins/lib/package.jsx
@@ -55,21 +55,21 @@ class Package extends React.Component {
     if (this.props.package.installed) {
       if (['user', 'dev', 'example'].indexOf(this.props.package.category) !== -1 && !this.props.package.theme) {
         if (this.props.package.enabled) {
-          actions.push(<Switch checked onChange={this._onDisablePackage}>Disable</Switch>);
+          actions.push(<Switch key="disable" checked onChange={this._onDisablePackage}>Disable</Switch>);
         } else {
-          actions.push(<Switch onChange={this._onEnablePackage}>Enable</Switch>);
+          actions.push(<Switch key="enable" onChange={this._onEnablePackage}>Enable</Switch>);
         }
       }
       if (this.props.package.category === 'user') {
         uninstallButton = <div className="uninstall-plugin" onClick={this._onUninstallPackage}>Uninstall</div>
       }
       if (this.props.package.category === 'dev') {
-        actions.push(<div className="btn" onClick={this._onShowPackage}>Show...</div>);
+        actions.push(<div key="show-package" className="btn" onClick={this._onShowPackage}>Show...</div>);
       }
     } else if (this.props.package.installing) {
-      actions.push(<div className="btn">Installing...</div>);
+      actions.push(<div key="installing" className="btn">Installing...</div>);
     } else {
-      actions.push(<div className="btn" onClick={this._onInstallPackage}>Install</div>);
+      actions.push(<div key="install" className="btn" onClick={this._onInstallPackage}>Install</div>);
     }
 
     const {name, description, title} = this.props.package;
diff --git a/internal_packages/plugins/lib/tab-installed.jsx b/internal_packages/plugins/lib/tab-installed.jsx
index 7eef3fe6c..9da05b202 100644
--- a/internal_packages/plugins/lib/tab-installed.jsx
+++ b/internal_packages/plugins/lib/tab-installed.jsx
@@ -65,7 +65,7 @@ class TabInstalled extends React.Component {
     let devCTA = (<div className="btn btn-large" onClick={this._onEnableDevMode}>Enable Debug Flags</div>);
 
     if (NylasEnv.inDevMode()) {
-      devPackages = this.state.packages.dev;
+      devPackages = this.state.packages.dev || [];
       devEmpty = (<span>
         {`You don't have any packages installed in ~/.nylas/dev/packages. `}
         These plugins are only loaded when you run the app with debug flags
diff --git a/internal_packages/preferences/lib/tabs/preferences-keymaps.jsx b/internal_packages/preferences/lib/tabs/preferences-keymaps.jsx
index 3e03f8c8a..55a88b2a8 100644
--- a/internal_packages/preferences/lib/tabs/preferences-keymaps.jsx
+++ b/internal_packages/preferences/lib/tabs/preferences-keymaps.jsx
@@ -168,7 +168,7 @@ class PreferencesKeymaps extends React.Component {
 
   _renderBindingsSection = (section) => {
     return (
-      <section>
+      <section key={`section-${section.title}`}>
         <div className="shortcut-section-title">{section.title}</div>
         {section.items.map(this._renderBindingFor)}
       </section>
@@ -196,14 +196,14 @@ class PreferencesKeymaps extends React.Component {
     );
   }
 
-  _renderKeystrokes = (keystrokes) => {
+  _renderKeystrokes = (keystrokes, idx) => {
     const elements = [];
     const splitKeystrokes = keystrokes.split(' ');
     splitKeystrokes.forEach((keystroke) => {
-      elements.push(<span>{this._formatKeystrokes(keystroke)}</span>);
+      elements.push(<span key={keystroke}>{this._formatKeystrokes(keystroke)}</span>);
     });
     return (
-      <span className="shortcut-value">{elements}</span>
+      <span key={`keystrokes-${idx}`} className="shortcut-value">{elements}</span>
     );
   }
 
diff --git a/internal_packages/search-bar/lib/search-bar.cjsx b/internal_packages/search-bar/lib/search-bar.cjsx
index e03e7e5a8..e4c7f7bd8 100644
--- a/internal_packages/search-bar/lib/search-bar.cjsx
+++ b/internal_packages/search-bar/lib/search-bar.cjsx
@@ -1,5 +1,6 @@
 _ = require 'underscore'
 React = require 'react'
+ReactDOM = require 'react-dom'
 classNames = require 'classnames'
 
 {Actions,
diff --git a/src/components/newsletter-signup.cjsx b/src/components/newsletter-signup.cjsx
index a22e46a50..5af0b9b02 100644
--- a/src/components/newsletter-signup.cjsx
+++ b/src/components/newsletter-signup.cjsx
@@ -17,10 +17,18 @@ class NewsletterSignup extends React.Component
     @_onGetStatus(nextProps) if not _.isEqual(@props, nextProps)
 
   componentDidMount: =>
+    @_mounted = true
     @_onGetStatus()
 
+  componentWillUnmount: =>
+    @_mounted = false
+
+  _setState: (state) =>
+    return unless @_mounted
+    @setState(state)
+
   _onGetStatus: (props = @props) =>
-    @setState({status: 'Pending'})
+    @_setState({status: 'Pending'})
     EdgehillAPI.request
       method: 'GET'
       path: @_path(props)
@@ -28,29 +36,29 @@ class NewsletterSignup extends React.Component
         if status is 'Never Subscribed'
           @_onSubscribe()
         else
-          @setState({status})
+          @_setState({status})
       error: =>
-        @setState({status: "Error"})
+        @_setState({status: "Error"})
 
   _onSubscribe: =>
-    @setState({status: 'Pending'})
+    @_setState({status: 'Pending'})
     EdgehillAPI.request
       method: 'POST'
       path: @_path()
       success: (status) =>
-        @setState({status})
+        @_setState({status})
       error: =>
-        @setState({status: "Error"})
+        @_setState({status: "Error"})
 
   _onUnsubscribe: =>
-    @setState({status: 'Pending'})
+    @_setState({status: 'Pending'})
     EdgehillAPI.request
       method: 'DELETE'
       path: @_path()
       success: (status) =>
-        @setState({status})
+        @_setState({status})
       error: =>
-        @setState({status: "Error"})
+        @_setState({status: "Error"})
 
   _path: (props = @props) =>
     "/newsletter-subscription/#{encodeURIComponent(props.emailAddress)}?name=#{encodeURIComponent(props.name)}"