fetch item prices - throttle end points with promise queue

app/components/price-list-item/price-list-item.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
+import { IItemPrice } from '../../model';
 import { FrameType } from '../../model/frame-type';
 import { IItem } from '../../model/item';
 import { RarityColor } from '../../model/rarity-color';
-import { ItemTextService } from '../../services';
+import { ItemTextService, PoeService } from '../../services';
 import './price-list-item.scss';
 
 interface IProps {
-  data: IItem;
+  item: IItem;
+  league: string;
+  onPriceUpdate: (id: string, price: IItemPrice) => void;
 }
 
 interface IState {
@@ -19,17 +22,36 @@ export class PriceListItem extends React.Component<IProps, IState> {
     this.state = {};
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    PoeService.priceCheck(this.props.item, this.props.league).then((data: any) => {
+      this.props.onPriceUpdate(this.props.item.id, data);
+    });
+  }
+
+  getItemPriceText = (p: IItemPrice) => {
+    let s = '';
+    s += p.recommendedPrice ? `Recommended Price: ${p.median_price}\n` : '';
+    s += p.max_price ? `Max Price: ${p.max_price}\n` : '';
+    s += p.median_price ? `Median Price: ${p.median_price}\n` : '';
+
+    return s;
+  };
 
   render() {
-    const { icon, priceInfo, stackSize, typeLine, frameType } = this.props.data;
+    const { icon, itemPrice, stackSize, typeLine, frameType } = this.props.item;
     const name = ItemTextService.filterName(typeLine);
-    const fullText = ItemTextService.parseItem(this.props.data);
+    const fullText = ItemTextService.parseItem(this.props.item);
 
     const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];
 
+    const itemPriceElement = itemPrice ? (
+      <small title={this.getItemPriceText(itemPrice)}>
+        {itemPrice.recommendedPrice} {itemPrice.currency_rec}
+      </small>
+    ) : null;
+
     return (
-      <div className="pli" onClick={() => console.log(this.props.data)}>
+      <div className="pli" onClick={() => console.log(this.props.item)}>
         <div style={{ width: '60px' }}>
           <img title={fullText} src={icon} className="pli__img" />
         </div>
@@ -38,10 +60,10 @@ export class PriceListItem extends React.Component<IProps, IState> {
             <div className="ellipsis" title={name} style={{ color: rarityColor }}>
               {name}
             </div>
-            <div className="text-secondary">{stackSize && <small>Stack Size: {stackSize}</small>}</div>
-          </div>
-          <div>
-            {priceInfo ? `${priceInfo.min || priceInfo.min_price} ${priceInfo.currency || priceInfo.currency_rec}` : ''}
+            <div className="text-secondary">
+              {stackSize && <small>Stack Size: {stackSize}</small>}
+              <div>{itemPriceElement}</div>
+            </div>
           </div>
         </div>
       </div>