Merge remote-tracking branch 'upstream/master'

Author: Kyle Kim

lib/CollapsibleFilter/CollapsibleFilter.js

@@ -98,8 +98,14 @@ var CollapsibleFilter = function (_React$Component) {
                 textMore = _props2.textMore,
                 textLess = _props2.textLess;
 
-            // Filter by search
 
+            var sortedFilter = filters[type].filter(function (a) {
+                return a._id;
+            }).sort(function (a, b) {
+                return a._id.localeCompare(b._id);
+            });
+
+            // Filter by search
             var filteredItems = search.all ? items : items.filter(function (job) {
                 return search.results.includes(job.permalink);
             }) || [];
@@ -109,11 +115,7 @@ var CollapsibleFilter = function (_React$Component) {
                 { className: 'wfui-filter-group' },
                 _react2.default.createElement(_FilterItems2.default, {
                     label: label,
-                    filterItems: filterItems || filters[type].filter(function (a) {
-                        return a._id;
-                    }).sort(function (a, b) {
-                        return a._id.localeCompare(b._id);
-                    }).map(function (item) {
+                    filterItems: filterItems || sortedFilter.map(function (item) {
                         return { _id: item._id, key: item._key || item._id, count: item.count };
                     }),
                     type: type,

lib/FilteredList/List.js

@@ -88,7 +88,7 @@ var List = function (_React$Component) {
         }
     }, {
         key: 'componentDidUpdate',
-        value: function componentDidUpdate() {
+        value: function componentDidUpdate(prevProps) {
             var _props3 = this.props,
                 onDisplay = _props3.onDisplay,
                 onNumOfListChange = _props3.onNumOfListChange,
@@ -102,7 +102,7 @@ var List = function (_React$Component) {
             /* Only setState and invoke callbacks when the state is changed to avoid infinite loop */
 
 
-            if (activeData.length !== this.state.numOfItems || startingArticle !== this.state.startingArticle || lastArticle !== this.state.lastArticle) {
+            if (activeData.length !== this.state.numOfItems || startingArticle !== this.state.startingArticle || lastArticle !== this.state.lastArticle || prevProps.data.length !== data.length) {
                 this.updateStatus();
             }
         }

src/CollapsibleFilter/CollapsibleFilter.jsx

@@ -40,14 +40,16 @@ class CollapsibleFilter extends React.Component {
     render() {
         const { label, type, filters, search, filterItems, items, category, filter, defaultExpand, numCollapse, textMore, textLess } = this.props;
 
+        const sortedFilter = filters[type].filter((a) => (a._id)).sort((a, b) => (a._id.localeCompare(b._id)));
+
         // Filter by search
         const filteredItems = search.all ? items : items.filter(job => search.results.includes(job.permalink)) || [];
 
         return (
             <div className="wfui-filter-group">
                 <FilterItems
                     label={label}
-                    filterItems={filterItems || filters[type].filter((a) => (a._id)).sort((a, b) => (a._id.localeCompare(b._id))).map(item => ({ _id: item._id, key: item._key || item._id, count: item.count }))}
+                    filterItems={filterItems || sortedFilter.map(item => ({ _id: item._id, key: item._key || item._id, count: item.count }))}
                     type={type}
                     category={category}
                     onHandleClick={this.onHandleClick}

src/FilteredList/List.js

@@ -53,14 +53,15 @@ class List extends React.Component {
         return populatedContainer;
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         const { onDisplay, onNumOfListChange, data } = this.props;
         const { activeData, startingArticle, lastArticle } = calcActiveData(this.props);
 
         /* Only setState and invoke callbacks when the state is changed to avoid infinite loop */
         if ( activeData.length !== this.state.numOfItems ||
             startingArticle !== this.state.startingArticle ||
-            lastArticle !== this.state.lastArticle) {
+            lastArticle !== this.state.lastArticle || 
+            prevProps.data.length !== data.length) {
             this.updateStatus();
         }
     }