Merge pull request #141 from mozilla/ordered-product-list

Fix #113: Sort products by oldest price date, descending.

package.json

@@ -51,6 +51,7 @@
     "fathom-web": "2.3.0",
     "lodash.maxby": "4.6.0",
     "lodash.minby": "4.6.0",
+    "lodash.orderby": "^4.6.0",
     "prop-types": "15.6.2",
     "react": "16.4.1",
     "react-dom": "16.4.1",

src/browser_action/components/TrackedProductList.jsx

@@ -4,36 +4,47 @@
 
 import pt from 'prop-types';
 import React from 'react';
+import {connect} from 'react-redux';
 
 import ProductCard from 'commerce/browser_action/components/ProductCard';
 import TrackProductButton from 'commerce/browser_action/components/TrackProductButton';
+import {getSortedProductsByOldestPrice} from 'commerce/state/prices';
 import {extractedProductShape, productShape} from 'commerce/state/products';
 
 import 'commerce/browser_action/components/TrackedProductList.css';
 
 /**
  * List of products that are currently being tracked.
  */
+@connect(
+  (state, {products}) => ({
+    sortedProducts: getSortedProductsByOldestPrice(state, products),
+  }),
+)
 export default class TrackedProductList extends React.Component {
   static propTypes = {
     // Direct props
     /** List of tracked products to display */
-    products: pt.arrayOf(productShape).isRequired,
+    products: pt.arrayOf(productShape).isRequired, // eslint-disable-line react/no-unused-prop-types
     /** Product detected on the current page, if any */
     extractedProduct: extractedProductShape,
+
+    // State props
+    /** Tracked products sorted by their oldest logged price */
+    sortedProducts: pt.arrayOf(productShape).isRequired,
   }
 
   static defaultProps = {
     extractedProduct: null,
   }
 
   render() {
-    const {extractedProduct, products} = this.props;
+    const {extractedProduct, sortedProducts} = this.props;
     return (
       <React.Fragment>
         <TrackProductButton className="menu-item" extractedProduct={extractedProduct} />
         <ul className="product-list">
-          {products.map(product => (
+          {sortedProducts.map(product => (
             <li className="product-list-item" key={product.id}>
               <ProductCard product={product} />
             </li>

src/state/prices.js

@@ -10,6 +10,7 @@
 import Dinero from 'dinero.js';
 import maxBy from 'lodash.maxby';
 import minBy from 'lodash.minby';
+import orderBy from 'lodash.orderby';
 import pt from 'prop-types';
 
 import config from 'commerce/config';
@@ -327,6 +328,18 @@ export function getPriceAlertForPrice(state, priceId) {
   return state.priceAlerts.find(alert => alert.priceId === priceId);
 }
 
+/**
+ * Sort a given list of products by the oldest logged price, most-recent first.
+ * @param {ReduxState} state
+ * @param {Product[]} products
+ * @return {Product[]}
+ */
+export function getSortedProductsByOldestPrice(state, products) {
+  return orderBy(products, [
+    product => getOldestPriceForProduct(state, product.id).date,
+  ], ['desc']);
+}
+
 // Helpers
 
 /**