fetch item prices - throttle end points with promise queue

app/components/home/home.tsx

@@ -1,5 +1,7 @@
+import * as _ from 'lodash';
 import { inject, observer } from 'mobx-react';
 import React from 'react';
+import { IItem, IItemPrice } from '../../model';
 import { AppStore } from '../../stores/app.store';
 import { Navbar } from '../navbar/navbar';
 import { PriceListItem } from '../price-list-item/price-list-item';
@@ -19,15 +21,29 @@ export class Home extends React.Component<IProps, IState> {
     this.state = {};
   }
 
+  onPriceUpdate = (id: string, itemPrice: IItemPrice) => {
+    this.props.appStore!.updateItemPrice(id, itemPrice);
+  };
+
+  renderItemList = () => {
+    const { activeLeague, stashItems } = this.props.appStore!;
+    const orderedItems = _.orderBy(
+      stashItems,
+      (i: IItem) => {
+        return i.itemPrice && i.itemPrice.recommendedPrice ? parseFloat(i.itemPrice.recommendedPrice) : 0;
+      },
+      ['desc'],
+    );
+    return orderedItems.map((v, k) => {
+      return <PriceListItem key={k} item={v} league={activeLeague!.id} onPriceUpdate={this.onPriceUpdate} />;
+    });
+  };
+
   render() {
     return (
       <div>
         <Navbar />
-        <div style={{ padding: '10px' }}>
-          {this.props.appStore!.stashItems.map((v, k) => {
-            return <PriceListItem key={k} data={v} />;
-          })}
-        </div>
+        <div style={{ padding: '10px' }}>{this.renderItemList()}</div>
       </div>
     );
   }