From 7fcc7753f854a0f8a4caa27e2c98db6e2a30dda5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 10 Oct 2017 12:50:31 -0300
Subject: [PATCH] Update

---
 .../src/routes/Community/components/Table.js  | 12 ++++-----
 .../src/routes/Stories/components/Stories.js  |  4 +--
 client/coral-ui/components/Dropdown.js        | 27 +++++++------------
 client/coral-ui/components/Option.js          |  6 ++---
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
index 2efa5944b..846287dc1 100644
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ b/client/coral-admin/src/routes/Community/components/Table.js
@@ -35,8 +35,8 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
               label={capitalize(row.status)}
               placeholder={t('community.status')}
               onChange={(status) => onCommenterStatusChange(row.id, status)}>     
-              <Option value={'ACTIVE'}>{t('community.active')}</Option>
-              <Option value={'BANNED'}>{t('community.banned')}</Option>
+              <Option value={'ACTIVE'} label={t('community.active')} />
+              <Option value={'BANNED'} label={t('community.banned')} />
             </Dropdown>       
           </td>
           <td className="mdl-data-table__cell--non-numeric">
@@ -45,10 +45,10 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
               label={capitalize(row.roles[0]) || t('community.none')}
               placeholder={t('community.role')}
               onChange={(role) => onRoleChange(row.id, role)}>
-              <Option value={''}>{t('community.none')}</Option>
-              <Option value={'STAFF'}>{t('community.staff')}</Option>
-              <Option value={'MODERATOR'}>{t('community.moderator')}</Option>
-              <Option value={'ADMIN'}>{t('community.admin')}</Option>
+              <Option value={''} label={t('community.none')} />
+              <Option value={'STAFF'} label={t('community.staff')} />
+              <Option value={'MODERATOR'} label={t('community.moderator')} />
+              <Option value={'ADMIN'} label={t('community.admin')} />
             </Dropdown>
           </td>
         </tr>
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index af6b7a8f7..7a1332b5a 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -69,8 +69,8 @@ class Stories extends Component {
         value={closed}
         label={closed ? t('streams.closed') : t('streams.open')}
         onChange={(value) => this.onStatusClick(!value, id)}>     
-        <Option value={null}>{t('streams.closed')}</Option>
-        <Option value={true}>{t('streams.open')}</Option>
+        <Option value={null} label={t('streams.closed')} />
+        <Option value={true} label={t('streams.open')} />
       </Dropdown> 
     );
   }
diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index 820f33346..abbdf8a64 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/client/coral-ui/components/Dropdown.js
@@ -7,29 +7,22 @@ import ClickOutside from 'coral-framework/components/ClickOutside';
 
 class Dropdown extends React.Component {
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+
     this.state = {
       isOpen: false
     };
   }
-
-  fireChange = (newState) => {
-    if (this.props.onChange) {
-      this.props.onChange(newState.selected.value);
-    }
-  }
   
   setValue = (value, label) => {
-    const newState = {
-      selected: {
-        label: label,
-        value: value
-      },
+    if (this.props.onChange) {
+      this.props.onChange(value, label);
+    }
+
+    this.setState({
       isOpen: false
-    };
-    this.fireChange(newState);
-    this.setState(newState);
+    });
   }
 
   handleClick = () => {
@@ -66,7 +59,7 @@ class Dropdown extends React.Component {
               .map((child) =>
                 React.cloneElement(child, {
                   key: child.props.value,
-                  onClick: () => this.setValue(child.props.value, child.props.children)
+                  onClick: () => this.setValue(child.props.value, child.props.label)
                 }))}
           </ul>
         </div>
diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js
index ffafe948c..8b8645528 100644
--- a/client/coral-ui/components/Option.js
+++ b/client/coral-ui/components/Option.js
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import styles from './Option.css';
 import cn from 'classnames';
 
-const Option = ({className, children, onClick}) => (
+const Option = ({className, label = '', onClick}) => (
   <li className={cn(styles.option, className)} onClick={onClick}>
-    {children || ''}
+    {label}
   </li>
 );
 
 Option.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.string,
+  label: PropTypes.string,
   onClick: PropTypes.func,
   value: PropTypes.oneOfType([
     PropTypes.number,