From d40e5826e8d5c0201f22b582f8f43e50614d51e8 Mon Sep 17 00:00:00 2001
From: Michael Kelly <mkelly@mozilla.com>
Date: Fri, 28 Sep 2018 14:49:04 -0700
Subject: [PATCH 1/2] Fix #113: Sort products by oldest price date, descending.

---
 .../components/TrackedProductList.jsx           | 17 ++++++++++++++---
 src/state/prices.js                             | 17 +++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/browser_action/components/TrackedProductList.jsx b/src/browser_action/components/TrackedProductList.jsx
index 693b8b9..1ffcffa 100644
--- a/src/browser_action/components/TrackedProductList.jsx
+++ b/src/browser_action/components/TrackedProductList.jsx
@@ -4,9 +4,11 @@
 
 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';
@@ -14,13 +16,22 @@ 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 = {
@@ -28,12 +39,12 @@ export default class TrackedProductList extends React.Component {
   }
 
   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>
diff --git a/src/state/prices.js b/src/state/prices.js
index f0f8bcd..fb0f614 100644
--- a/src/state/prices.js
+++ b/src/state/prices.js
@@ -327,6 +327,23 @@ 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 (
+    [...products]
+      .map(product => [product, getOldestPriceForProduct(state, product.id)])
+      .sort(
+        ([, priceA], [, priceB]) => priceB.amount.getAmount() - priceA.amount.getAmount(),
+      )
+      .map(([product]) => product)
+  );
+}
+
 // Helpers
 
 /**

From 1d03691ecec260a4ab7b6376538f3994186a5b96 Mon Sep 17 00:00:00 2001
From: Michael Kelly <mkelly@mozilla.com>
Date: Mon, 8 Oct 2018 16:22:22 -0700
Subject: [PATCH 2/2] Replace complex ordering method with lodash helper.

---
 package-lock.json   |  5 +++++
 package.json        |  1 +
 src/state/prices.js | 12 ++++--------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2603a87..8019695 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7331,6 +7331,11 @@
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
       "dev": true
     },
+    "lodash.orderby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.orderby/-/lodash.orderby-4.6.0.tgz",
+      "integrity": "sha1-5pfwTOXXhSL1TZM4syuBozk+TrM="
+    },
     "lodash.set": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
diff --git a/package.json b/package.json
index 2a912a7..a9caae3 100644
--- a/package.json
+++ b/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",
diff --git a/src/state/prices.js b/src/state/prices.js
index fb0f614..90baa2c 100644
--- a/src/state/prices.js
+++ b/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';
@@ -334,14 +335,9 @@ export function getPriceAlertForPrice(state, priceId) {
  * @return {Product[]}
  */
 export function getSortedProductsByOldestPrice(state, products) {
-  return (
-    [...products]
-      .map(product => [product, getOldestPriceForProduct(state, product.id)])
-      .sort(
-        ([, priceA], [, priceB]) => priceB.amount.getAmount() - priceA.amount.getAmount(),
-      )
-      .map(([product]) => product)
-  );
+  return orderBy(products, [
+    product => getOldestPriceForProduct(state, product.id).date,
+  ], ['desc']);
 }
 
 // Helpers