app/frontend/comments/comment_order_selector.component.jsx in decidim-comments-0.0.1 vs app/frontend/comments/comment_order_selector.component.jsx in decidim-comments-0.0.2

@@ -1,28 +1,73 @@
-import { Component } from 'react';
+import { Component, PropTypes } from 'react';
 import { I18n }      from 'react-i18nify';
 
 /**
  * A simple static component with the comment's order selector markup
  * @class
  * @augments Component
  * @todo Needs a proper implementation
  */
-export default class CommentOrderSelector extends Component {
+class CommentOrderSelector extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      orderBy: this.props.defaultOrderBy
+    }
+  }
+
+  componentDidMount() {
+    $(document).foundation();
+  }
+
   render() {
+    const { orderBy } =  this.state;
+
     return (
       <div className="order-by__dropdown order-by__dropdown--right">
         <span className="order-by__text">{ I18n.t("components.comment_order_selector.title") }</span>
         <ul className="dropdown menu" data-dropdown-menu>
           <li>
-            <a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a>
+            <a>{ I18n.t(`components.comment_order_selector.${orderBy}`) }</a>
             <ul className="menu">
-              <li><a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a></li>
-              <li><a>{ I18n.t("components.comment_order_selector.order.recent") }</a></li>
-              <li><a>{ I18n.t("components.comment_order_selector.order.older") }</a></li>
+              <li>
+                <a href="" className="test" onClick={(event) => this._updateOrder(event, "best_rated")} >
+                  { I18n.t("components.comment_order_selector.order.best_rated") }
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "recent")} >
+                  { I18n.t("components.comment_order_selector.order.recent") }
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "older")} >
+                  { I18n.t("components.comment_order_selector.order.older") }
+                </a>
+              </li>   
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "most_discussed")} >
+                  { I18n.t("components.comment_order_selector.order.most_discussed") }
+                </a>
+              </li>
             </ul>
           </li>
         </ul>
       </div>
     );
   }
+
+  _updateOrder(event, orderBy) {  
+    event.preventDefault();
+    this.setState({ orderBy });
+    this.props.reorderComments(orderBy);
+  }
+
 }
+
+CommentOrderSelector.propTypes = {
+  reorderComments: PropTypes.func.isRequired,
+  defaultOrderBy: PropTypes.string.isRequired
+};
+
+export default CommentOrderSelector;