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>
     );
   }

app/components/index.ts

@@ -2,5 +2,4 @@ export * from './home/home';
 export * from './login-webview/login-webview';
 export * from './navbar/navbar';
 export * from './price-list-item/price-list-item';
-export * from './price-list/price-list';
 export * from './stash-tab/stash-tab';

app/components/navbar/navbar.tsx

@@ -62,6 +62,7 @@ export class Navbar extends React.Component<IProps, any> {
       <div className="navbar">
         {this.renderLeagueSelector()}
         {this.renderStashTabSelector()}
+        <button onClick={() => this.props.appStore!.resetState()}>Logout</button>
       </div>
     );
   }

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>

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

@@ -1,14 +1,14 @@
-import React from 'react';
-import { PriceListItem } from '../price-list-item/price-list-item';
+// import React from 'react';
+// import { PriceListItem } from '../price-list-item/price-list-item';
 
-interface IProps {
-  data: any[];
-}
+// interface IProps {
+//   data: any[];
+// }
 
-export class PriceList extends React.Component<IProps, any> {
-  constructor(props: IProps) {
-    super(props);
-  }
+// export class PriceList extends React.Component<IProps, any> {
+//   constructor(props: IProps) {
+//     super(props);
+//   }
 
-  render = () => this.props.data.map((value, index) => <PriceListItem data={value} key={index} />);
-}
+//   render = () => this.props.data.map((value, index) => <PriceListItem data={value} key={index} />);
+// }