content: import React, { Component } from 'react';
  import { ipcRenderer } from 'electron';
  import RhHelper from '../robinhood';
  import FuzzyDate from '../assets/date';
  
  import '../assets/styles/app.scss';
  
  const opts = {
    API_UPDATE_INTERVAL: {
      MARKET_OPEN: 1000 * 10,         // 10 seconds
      MARKET_CLOSED: 1000 * 60 * 5    // 5 minutes
    }
  }
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.store = {};
      this.state = {
        positions: []
      };
    }
    componentWillUnmount() {
      clearInterval(this.timer);
      clearInterval(this.lastUpdateTimer);
    }
    componentDidMount() {
      (async () => {
        this.helper = new RhHelper();
        this.store = await this.helper.getStore();
        this.store.lastUpdatedDate = new Date();
        this.setState(this.store);
        this.timer = setInterval(() => this.update(), this.store.marketOpen ? opts.API_UPDATE_INTERVAL.MARKET_OPEN : opts.API_UPDATE_INTERVAL.MARKET_CLOSED);
  
        this.dom = {};
        this.dom.heading = document.getElementById('heading-main');
  
        await this.update();
      })();
  
      this.renderLastUpdated();
    }
    formatAmountChange(rhMoney) {
      return  `${rhMoney.change.direction == 'positive' ? '+' : ''}${rhMoney.change.amount} (${ rhMoney.change.percent }%)`;
    }
    async update() {
      let dh = this.dom.heading;
      let headings = {};
      let updates = await this.helper.getStoreUpdates();
      let portfolio = this.store.portfolio;
      let priceUpdate = this.formatAmountChange(portfolio.equity.total);
  
      headings.equityHeading = portfolio.equity.open.amount;
      headings.equityChangeOpen = this.formatAmountChange(portfolio.equity.open);
  
      if (!this.store.marketOpen) {
        headings.equityHeading = portfolio.equity.afterHours.amount;
        headings.equityChangeAfterHours = this.formatAmountChange(portfolio.equity.afterHours);
      }
  
      ipcRenderer.send('priceUpdate', priceUpdate);
  
      dh.classList.remove('negative', 'positive');
      dh.classList.add(portfolio.equity.open.change.direction);
  
      this.setState((previousState, props) => {
        let previousEquity = previousState.equity ? previousState.equity.open.amount : 0;
        let equityDirection = updates.equity.open.amount > previousEquity ? 'up' : 'down';
        
        dh.classList.add(equityDirection, 'updating');
        dh.addEventListener('transitionend', (e) => {
          dh.classList.remove(equityDirection, 'updating');
        }, { once: true });
  
        if (!updates.marketOpen) {
          document.body.classList.add('market-closed');
        }
  
        this.store.lastUpdatedDate = new Date();
  
        return Object.assign({
          lastUpdatedDate: this.store.lastUpdatedDate
        }, headings, updates);
      });
  
      this.renderPositions();
    }
    renderPositions() {
      const positions = this.store.portfolio.positions.map(position => {
        //let price = this.store.marketOpen ? position.price : position.priceAfterHours;
        let price = position.priceTotal;
        let priceDirectionClass = price.amount > price.amountPrevious ? 'up' : 'down';
        return (
          <li key={ position.id } className={ priceDirectionClass }>
            <div className="header">
              <h3>{ position.symbol }</h3>
              <span className="small">{ position.quantity }</span>
            </div>
            <div className="price">
              <h3>{ price.amount }</h3>
              <span className="small">{ this.formatAmountChange(price) }</span>
              <span className="small todays-profit">{ price.change.total }</span>
            </div>
          </li>
        )
      });
  
      this.setState({
        positions: positions
      });
    }
    renderLastUpdated() {
      this.lastUpdateTimer = setInterval(() => {
        let fuzzyDate = new FuzzyDate(this.state.lastUpdatedDate);
        this.setState({
          lastUpdated: fuzzyDate.render()
        });
      }, 1000);
    }
    render() {
      return (
        <div className="container">
          <div className="refresh" onClick={() => this.update() } />
          <div className="drag-handle" />
          <section className="heading">
            <h1 id="heading-main">{ this.state.equityHeading }</h1>
            <h4 id="previous" className="small">{ this.state.equityChangeOpen } <span>Today</span></h4>
            { this.state.equityChangeAfterHours &&
              <h4 id="previous-ah" className="small">{ this.state.equityChangeAfterHours } <span>After Hours</span></h4>
            }
            <h4 id="updated" className="small">Last Updated: { this.state.lastUpdated }</h4>
          </section>
          <ul className="list">{ this.state.positions }</ul>
        </div>
      )
    }
  }
  
  export default App;
  