From e1563509d244bb8f502d2be83ae6284489492c3f Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sat, 9 Jan 2016 12:22:37 -0800
Subject: [PATCH] Dynamically build sort dropdown list

---
 .../components/action-bar/SortDropdown.js     | 113 +++++++++---------
 1 file changed, 56 insertions(+), 57 deletions(-)

diff --git a/client/source/scripts/components/action-bar/SortDropdown.js b/client/source/scripts/components/action-bar/SortDropdown.js
index c29b21b3..46fdc2a2 100644
--- a/client/source/scripts/components/action-bar/SortDropdown.js
+++ b/client/source/scripts/components/action-bar/SortDropdown.js
@@ -10,6 +10,49 @@ const METHODS_TO_BIND = [
   'handleItemSelect'
 ];
 
+const SORT_PROPERTIES = [
+  {
+    displayName: 'Name',
+    value: 'name'
+  },
+  {
+    displayName: 'ETA',
+    value: 'eta'
+  },
+  {
+    displayName: 'Download Speed',
+    value: 'downloadRate'
+  },
+  {
+    displayName: 'Upload Speed',
+    value: 'uploadRate'
+  },
+  {
+    displayName: 'Ratio',
+    value: 'ratio'
+  },
+  {
+    displayName: 'Percent Complete',
+    value: 'percentComplete'
+  },
+  {
+    displayName: 'Downloaded',
+    value: 'downloadTotal'
+  },
+  {
+    displayName: 'Uploaded',
+    value: 'uploadTotal'
+  },
+  {
+    displayName: 'File Size',
+    value: 'sizeBytes'
+  },
+  {
+    displayName: 'Date Added',
+    value: 'added'
+  }
+];
+
 export default class SortDropdown extends React.Component {
   constructor() {
     super();
@@ -28,61 +71,18 @@ export default class SortDropdown extends React.Component {
     );
   }
 
-  getMenuItems() {
-    return [
-      [
-        {
-          displayName: 'Name',
-          property: 'sortBy',
-          value: 'name'
-        },
-        {
-          displayName: 'ETA',
-          property: 'sortBy',
-          value: 'eta'
-        },
-        {
-          displayName: 'Download Speed',
-          property: 'sortBy',
-          value: 'downloadRate'
-        },
-        {
-          displayName: 'Upload Speed',
-          property: 'sortBy',
-          value: 'uploadRate'
-        },
-        {
-          displayName: 'Ratio',
-          property: 'sortBy',
-          value: 'ratio'
-        },
-        {
-          displayName: 'Percent Complete',
-          property: 'sortBy',
-          value: 'percentComplete'
-        },
-        {
-          displayName: 'Downloaded',
-          property: 'sortBy',
-          value: 'downloadTotal'
-        },
-        {
-          displayName: 'Uploaded',
-          property: 'sortBy',
-          value: 'uploadTotal'
-        },
-        {
-          displayName: 'File Size',
-          property: 'sortBy',
-          value: 'sizeBytes'
-        },
-        {
-          displayName: 'Date Added',
-          property: 'sortBy',
-          value: 'added'
-        }
-      ]
-    ];
+  getDropdownMenus() {
+    let items = SORT_PROPERTIES.map((sortProp) => {
+      return {
+        displayName: sortProp.displayName,
+        property: 'sortBy',
+        selected: this.props.selectedItem.value === sortProp.value,
+        value: sortProp.value
+      }
+    });
+
+    // Dropdown expects an array of arrays.
+    return [items];
   }
 
   handleItemSelect(sortBy) {
@@ -109,8 +109,7 @@ export default class SortDropdown extends React.Component {
       <Dropdown
         handleItemSelect={this.handleItemSelect}
         header={this.getDropdownHeader()}
-        menuItems={this.getMenuItems()}
-        selectedItem={this.props.selectedItem}
+        menuItems={this.getDropdownMenus()}
         />
     );
   }