04_03e

Author: Ray Villalobos

builds/app/js/app.js

@@ -11,12 +11,12 @@ var SearchAppointments = React.createClass({
               <button type="button" className="btn btn-primary dropdown-toggle"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by: <span className="caret"></span></button>
                 <ul className="dropdown-menu dropdown-menu-right">
-                  <li><a href="#" id="petName">Pet Name</a></li>
-                  <li><a href="#" id="aptDate">Date</a></li>
-                  <li><a href="#" id="ownerName">Owner</a></li>
+                  <li><a href="#" id="petName">Pet Name { (this.props.orderBy === 'petName') ? <span className="glyphicon glyphicon-ok"></span>: null }</a></li>
+                  <li><a href="#" id="aptDate">Date { (this.props.orderBy === 'aptDate') ? <span className="glyphicon glyphicon-ok"></span>: null }</a></li>
+                  <li><a href="#" id="ownerName">Owner { (this.props.orderBy === 'ownerName') ? <span className="glyphicon glyphicon-ok"></span>: null }</a></li>
                   <li role="separator" className="divider"></li>
-                  <li><a href="#" id="asc">Asc</a></li>
-                  <li><a href="#" id="desc">Desc</a></li>
+                  <li><a href="#" id="asc">Asc { (this.props.orderDir === 'asc') ? <span className="glyphicon glyphicon-ok"></span>: null }</a></li>
+                  <li><a href="#" id="desc">Desc { (this.props.orderDir === 'desc') ? <span className="glyphicon glyphicon-ok"></span>: null }</a></li>
                 </ul>
             </div>
           </div>

process/js/SearchAppointments.js

@@ -10,6 +10,8 @@ var MainInterface = React.createClass({
   getInitialState: function() {
     return {
       aptBodyVisible: false,
+      orderBy: 'petName',
+      orderDir: 'asc',
       myAppointments: []
     } //return
   }, //getInitialState
@@ -52,6 +54,13 @@ var MainInterface = React.createClass({
 
   render: function() {
     var filteredApts = this.state.myAppointments;
+    var orderBy = this.state.orderBy;
+    var orderDir = this.state.orderDir;
+
+    filteredApts = _.orderBy(filteredApts, function(item) {
+      return item[orderBy].toLowerCase();
+    }, orderDir);//orderBy
+
     filteredApts = filteredApts.map(function(item, index) {
       return(
         <AptList key = { index }
@@ -67,7 +76,10 @@ var MainInterface = React.createClass({
           handleToggle = { this.toggleAddDisplay }
           addApt = { this.addItem }
         />
-        <SearchAppointments />
+        <SearchAppointments
+          orderBy = { this.state.orderBy }
+           orderDir = { this.state.orderDir }
+        />
         <ul className="item-list media-list">{filteredApts}</ul>
       </div>
     ) //return