less hacking way of pulling poe data

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

@@ -1,8 +1,12 @@
 import React from 'react';
+import { FrameType } from '../../model/frame-type';
+import { IItem } from '../../model/item';
+import { RarityColor } from '../../model/rarity-color';
+import { ItemTextService } from '../../services';
 import './price-list-item.scss';
 
 interface IProps {
-  data: any;
+  data: IItem;
 }
 
 interface IState {
@@ -18,16 +22,23 @@ export class PriceListItem extends React.Component<IProps, IState> {
   componentDidMount() {}
 
   render() {
-    const { fullText, icon, priceInfo, typeLine } = this.props.data;
+    const { icon, priceInfo, stackSize, typeLine, frameType } = this.props.data;
+    const name = ItemTextService.filterName(typeLine);
+    const fullText = ItemTextService.parseItem(this.props.data);
+
+    const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];
 
     return (
-      <div className="pli" title={fullText}>
-        <div style={{ width: '100px' }}>
-          <img src={icon} className="pli__img" />
+      <div className="pli" onClick={() => console.log(this.props.data)}>
+        <div style={{ width: '60px' }}>
+          <img title={fullText} src={icon} className="pli__img" />
         </div>
-        <div style={{ flex: 1 }}>
+        <div style={{ flex: 1 }} className="ellipsis">
           <div style={{ marginBottom: '10px' }}>
-            <b>{typeLine}</b>
+            <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}` : ''}