less hacking way of pulling poe data

app/components/home.tsx

@@ -1,109 +0,0 @@
-import { WebviewTag } from 'electron';
-import * as _ from 'lodash';
-import React from 'react';
-import { ItemTextService } from '../services';
-import { PoeService } from '../services/poe.service';
-import { LoginWebview } from './login-webview';
-import { PriceListItem } from './price-list-item/price-list-item';
-
-interface IState {
-  showLogin: boolean;
-  data: any;
-}
-
-export class Home extends React.Component<any, IState> {
-  private webview: WebviewTag;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      showLogin: false,
-      data: [],
-    };
-  }
-
-  componentDidMount() {
-    this.addWebviewListeners();
-  }
-
-  public addWebviewListeners() {
-    this.webview = this.refs['webview'] as any;
-    this.webview.addEventListener('dom-ready', () => {
-      // this.webview.openDevTools();
-    });
-
-    this.webview.addEventListener('ipc-message', e => {
-      if (e.channel === 'html-content') {
-        const htmlContents = e.args[0];
-        this.handleResponse(htmlContents);
-      }
-    });
-  }
-
-  public handleResponse(res: any) {
-    const json = JSON.parse(res);
-
-    if (json === null || json['error']) {
-      this.setState({ showLogin: true });
-    } else if (json.items) {
-      const items = _.map(json.items, item => {
-        item.fullText = ItemTextService.parseItem(item);
-        return item;
-      });
-
-      this.setState({ showLogin: false, data: items });
-      this.getItemPrice(items, 0);
-    }
-  }
-
-  onLogin = () => {
-    this.setState({ showLogin: false });
-    this.webview.reload();
-  };
-
-  async getItemPrice(data: any[], index: number) {
-    if (!data[index] || data !== this.state.data) {
-      return;
-    }
-
-    console.log(data[index]);
-    console.log(data[index].fullText + '\n\n\n');
-    const res = await PoeService.priceCheck(data[index].fullText);
-    if ((res.min && res.currency) || (res.currency_rec && res.min_price)) {
-      const dataCopy: any = [...data];
-      dataCopy[index].priceInfo = res;
-      await new Promise(resolve => this.setState({ data: dataCopy }, resolve));
-    }
-
-    setTimeout(() => {
-      this.getItemPrice(this.state.data, index + 1);
-    }, 1000);
-  }
-
-  renderPriceList = (data: any[]) => {
-    return data.map((item, index) => <PriceListItem data={item} key={index} />);
-  };
-
-  public render() {
-    const { data, showLogin } = this.state;
-
-    const url =
-      'https://www.pathofexile.com/character-window/get-stash-items' +
-      '?league=Incursion&tabs=1&tabIndex=0&accountName=DoctorCoctor';
-
-    return (
-      <div style={{ padding: '20px' }}>
-        {showLogin && <LoginWebview onSuccess={this.onLogin} />}
-        {data && this.renderPriceList(data)}
-        {/* {data && <StashTab data={data} />} */}
-        <webview
-          ref="webview"
-          partition="persist:poe"
-          preload="ipc-renderer.js"
-          src={url}
-          style={{ opacity: 0, width: '0', height: '0' }}
-        />
-      </div>
-    );
-  }
-}

app/components/home/home.tsx

@@ -0,0 +1,34 @@
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { AppStore } from '../../stores/app.store';
+import { Navbar } from '../navbar/navbar';
+import { PriceListItem } from '../price-list-item/price-list-item';
+import './home.scss';
+
+interface IProps {
+  appStore?: AppStore;
+}
+
+interface IState {}
+
+@inject('appStore')
+@observer
+export class Home extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Navbar />
+        <div style={{ padding: '10px' }}>
+          {this.props.appStore!.stashItems.map((v, k) => {
+            return <PriceListItem key={k} data={v} />;
+          })}
+        </div>
+      </div>
+    );
+  }
+}

app/components/index.ts

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

app/components/login-webview.tsx

@@ -1,37 +0,0 @@
-import { WebviewTag } from 'electron';
-import React from 'react';
-
-interface IProps {
-  onSuccess: () => void;
-}
-
-export class LoginWebview extends React.Component<IProps, any> {
-  private webview: WebviewTag;
-
-  constructor(props: IProps) {
-    super(props);
-  }
-
-  componentDidMount() {
-    this.webview = this.refs['webview'] as any;
-
-    this.webview.addEventListener('did-stop-loading', this.didStopLoading);
-  }
-
-  didStopLoading = (event: any) => {
-    if ((event.target.src as string).includes('my-account')) {
-      this.props.onSuccess();
-    }
-  };
-
-  render() {
-    return (
-      <webview
-        ref="webview"
-        partition="persist:poe"
-        src="https://www.pathofexile.com/login"
-        style={{ height: '500px', width: '100%' }}
-      />
-    );
-  }
-}

app/components/login-webview/login-webview.tsx

@@ -0,0 +1,53 @@
+import { WebviewTag } from 'electron';
+import * as _ from 'lodash';
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { POE_HOME } from '../../constants';
+import { AppStore } from '../../stores/app.store';
+
+interface IProps {
+  appStore?: AppStore;
+}
+
+@inject('appStore')
+@observer
+export class LoginWebview extends React.Component<IProps, any> {
+  private webview: WebviewTag;
+
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.webview = this.refs['webview'] as any;
+    this.webview.addEventListener('did-stop-loading', this.didStopLoading);
+  }
+
+  // if webview redirect to my-account - means user logged in
+  didStopLoading = (event: any) => {
+    if ((event.target.src as string).includes('my-account')) {
+      this.getCookies();
+    }
+  };
+
+  // get cookies from login and store username/sessionID
+  getCookies() {
+    const session = this.webview.getWebContents().session;
+    session.cookies.get({ url: POE_HOME }, async (error, cookies) => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+      try {
+        const cookie: any = _.find(cookies, c => c.name === 'POESESSID');
+        this.props.appStore!.performLogin(cookie.value);
+      } catch (e) {
+        this.props.appStore!.resetState();
+      }
+    });
+  }
+
+  render() {
+    return <webview ref="webview" src={`${POE_HOME}/login`} style={{ height: '100%', width: '100%' }} />;
+  }
+}

app/components/navbar/navbar.scss

@@ -0,0 +1,10 @@
+@import '../../scss/variables.scss';
+
+.navbar {
+  background: $dark2;
+  border-bottom: 1px solid $dark1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}

app/components/navbar/navbar.tsx

@@ -0,0 +1,68 @@
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { AppStore } from '../../stores/app.store';
+import './navbar.scss';
+
+interface IProps {
+  appStore?: AppStore;
+}
+
+@inject('appStore')
+@observer
+export class Navbar extends React.Component<IProps, any> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  onLeagueSelect = (event: any) => {
+    this.props.appStore!.setActiveLeague(event.target.value);
+  };
+
+  onStashSelect = (event: any) => {
+    this.props.appStore!.loadItems(event.target.value);
+  };
+
+  renderStashTabSelector() {
+    const { stashTabs } = this.props.appStore!;
+    if (stashTabs.length < 1) {
+      return null;
+    }
+    return (
+      <select defaultValue={stashTabs[0].n} onChange={this.onStashSelect}>
+        {stashTabs.map((v, k) => (
+          <option key={k} value={k}>
+            {v.n}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  renderLeagueSelector() {
+    const { activeLeague, leagues } = this.props.appStore!;
+    if (!leagues || !activeLeague) {
+      return null;
+    }
+
+    return (
+      <select onChange={this.onLeagueSelect} defaultValue={activeLeague.id}>
+        {leagues!.map((l, k) => {
+          return (
+            <option key={k} value={l.id}>
+              {l.id}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+
+  render() {
+    return (
+      <div className="navbar">
+        {this.renderLeagueSelector()}
+        {this.renderStashTabSelector()}
+      </div>
+    );
+  }
+}

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

@@ -1,23 +1,22 @@
-@import '~open-color/open-color.scss';
+@import '../../scss/variables.scss';
 
 .pli {
-  padding: 20px;
+  padding: 10px;
   border-radius: 4px;
-  background: $oc-gray-3;
-  border-color: $oc-gray-5;
+  background: $dark3;
+  border: 1px solid $dark1;
   display: flex;
   flex-direction: row;
   width: 300px;
   word-break: break-word;
 
   & + & {
-    margin-top: 20px;
+    margin-top: 10px;
   }
 
   &__img {
-    max-width: 100px;
+    max-width: 50px;
     max-height: 50px;
-    padding-right: 20px;
-    cursor: pointer;
+    padding-right: 10px;
   }
 }

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}` : ''}

app/components/price-list.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { PriceListItem } from './price-list-item/price-list-item';
-
-interface IProps {
-  data: any[];
-}
-
-export class PriceList extends React.Component<IProps, any> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
-  // componentDidMount() {
-  //   console.log(this.props.data);
-  // }
-
-  // componentWillReceiveProps(nextProps: IProps) {
-  //   if (this.props !== nextProps) {
-  //     // do stuff
-  //     console.log(nextProps);
-  //   }
-  // }
-
-  render = () => this.props.data.map((value, index) => <PriceListItem data={value} key={index} />);
-}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PriceListItem } from '../price-list-item/price-list-item';
+
+interface IProps {
+  data: any[];
+}
+
+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} />);
+}

app/components/stash-tab/stash-tab.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { PoeService } from '../services/poe.service';
 import './stash-tab.scss';
 
 interface IProps {
@@ -7,13 +6,6 @@ interface IProps {
 }
 
 export class StashTab extends React.Component<IProps, any> {
-  componentDidMount() {
-    console.log(this.props.data);
-    PoeService.priceCheck(`Superior Laboratory Map`).then(res => {
-      console.log(res);
-    });
-  }
-
   render() {
     return <div style={{ height: '577px', width: '577px' }} className="quad-tab" />;
   }