init

app/components/home.tsx

@@ -0,0 +1,97 @@
+import { WebviewTag } from 'electron';
+import React from 'react';
+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) {
+      this.setState({ showLogin: false, data: json.items });
+      this.getItemPrice(json.items, 0);
+      console.log(json.items);
+    }
+  }
+
+  onLogin = () => {
+    this.setState({ showLogin: false });
+    this.webview.reload();
+  };
+
+  async getItemPrice(data: any[], index: number) {
+    if (!data[index] || data !== this.state.data) {
+      return;
+    }
+
+    const res = await PoeService.priceCheck(data[index].typeLine);
+    if (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;
+
+    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="https://www.pathofexile.com/character-window/get-stash-items?league=Incursion&tabs=1&tabIndex=13&accountName=DoctorCoctor"
+          style={{ opacity: 0, width: '0', height: '0' }}
+        />
+      </div>
+    );
+  }
+}

app/components/index.ts

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

app/components/login-webview.tsx

@@ -0,0 +1,37 @@
+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: '100%', width: '100%' }}
+      />
+    );
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import './price-list-item.scss';
+
+interface IProps {
+  data: any;
+}
+
+interface IState {
+  price?: String;
+}
+
+export class PriceListItem extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {}
+
+  render() {
+    const { data } = this.props;
+    return (
+      <div className="pli">
+        <div style={{ width: '100px' }}>
+          <img src={data.icon} className="pli__img" />
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ marginBottom: '10px' }}>
+            <b>{data.typeLine}</b>
+          </div>
+          <div>{data.priceInfo ? `${data.priceInfo.min_price} ${data.priceInfo.currency_rec}` : ''}</div>
+        </div>
+      </div>
+    );
+  }
+}

app/components/price-list.tsx

@@ -0,0 +1,25 @@
+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/stash-tab.scss

@@ -0,0 +1,5 @@
+.quad-tab {
+  background-size: 24px 24px;
+  background-image: linear-gradient(to right, grey 1px, transparent 1px),
+    linear-gradient(to bottom, grey 1px, transparent 1px);
+}

app/components/stash-tab.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PoeService } from '../services/poe.service';
+import './stash-tab.scss';
+
+interface IProps {
+  data: any;
+}
+
+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" />;
+  }
+}