add news per stock page

sagivo · Mar 16, 2018 · a64a94c · a64a94c
1 parent 1c0d823
commit a64a94c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 6 deletions.
diff --git a/src/Main.js b/src/Main.js
@@ -23,7 +23,6 @@ export default class Main extends Component {
     const account = new rh.Account();
     const news = await account.news;
     if (news.results) {
-      console.log(news.results);
       this.setState({ ...this.state, allNews: news.results });
     }
   }

diff --git a/src/Stock.js b/src/Stock.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
-import { num } from './helpers/general';
+import { num, link } from './helpers/general';
 import RH from './helpers/rh/index';
 import Chart from './Chart';
 
@@ -10,8 +10,9 @@ export default class Stock extends Component {
     super(props);
 
     const stock = this.props.store.userStore.stocks.get(this.props.store.userStore.selectedStock);
-    this.state = { stock, side: 'buy', orderType: 'market', shares: '', limitPrice: '', stopPrice: '', showAdvanced: false, time: 'gfd', error: null, config: null, selectedTime: 'now' };
+    this.state = { stock, side: 'buy', orderType: 'market', shares: '', limitPrice: '', stopPrice: '', showAdvanced: false, time: 'gfd', error: null, config: null, selectedTime: 'now', news: [] };
     this.setChart('day');
+    this.getNews();
 
     this.setShares = this.setShares.bind(this);
     this.setLimitPrice = this.setLimitPrice.bind(this);
@@ -21,6 +22,14 @@ export default class Stock extends Component {
     this.setChart = this.setChart.bind(this);
   }
 
+  async getNews() {
+    const rh = new RH();
+    const stock = new rh.Stock(this.state.stock.symbol);
+    const res = await stock.news;
+    const news = res.results.map(n => ({ img: n.preview_image_url, time: n.published_at, source: n.source, summary: n.summary, title: n.title, url: n.url, uuid: n.uuid }))
+    this.setState({ ...this.state, news });
+  }
+
   async setChart(selectedTime) {
     try {
       const rh = new RH();
@@ -34,7 +43,6 @@ export default class Stock extends Component {
       const stock = new rh.Stock(this.state.stock.symbol);
 
       const res = await stock.getQuotes(options);
-      console.log(res);
       const data = res.historicals.map(d => [new Date(d['begins_at']).getTime(), parseFloat(d['close_price'])]);
       const config = {
         time: {timezoneOffset: 0},
@@ -52,7 +60,7 @@ export default class Stock extends Component {
         tooltip: {
           headerFormat: null,
           formatter: function() {
-              return  '<div class="point-data"><b>$' + this.point.y +'</b><br/>' + new Date(this.point.x).toLocaleString() + '</div>'
+              return  '<div className="point-data"><b>$' + this.point.y +'</b><br/>' + new Date(this.point.x).toLocaleString() + '</div>'
           }
         },
         scrollbar: {
@@ -224,6 +232,19 @@ export default class Stock extends Component {
             <button className="btn btn-primary btn-lg" onClick={this.placeOrder}>{this.state.side === "buy" ? 'BUY' : 'SELL'} {stock.symbol}</button>
           </div>
         </div>
+        <div id="stock-news" className="container">
+          {this.state.news.map(n => (
+            <div className="news-container" key={n.uuid}>
+              <div className="left-img"><img alt="" src={n.img} /></div>
+              <div className="stock-news-story">
+                <h5>{n.source} <span className="time">{new Date(n.time).toLocaleString()}</span></h5>
+                <h4><a href="#a" onClick={() => link(n.url)}>{n.title}</a></h4>
+                <div className="summary">{n.summary}</div>
+              </div>
+              <div className="clear"><hr/></div>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }

diff --git a/src/helpers/rh/core/Stock.js b/src/helpers/rh/core/Stock.js
@@ -27,6 +27,10 @@ export default class Stock {
     this.instruments = {};
   }
 
+  get news() {
+    return Request.get(`midlands/news/${this.symbols}`);
+  }
+
   get todayQuotes() {
     return Request.get(`quotes/historicals/${this.symbols}`, { interval: 'week', bounds: 'regular' } );
   }

diff --git a/src/styles/app.css b/src/styles/app.css
diff --git a/src/styles/app.css.map b/src/styles/app.css.map
diff --git a/src/styles/stylus/app.styl b/src/styles/stylus/app.styl
@@ -197,6 +197,35 @@ html
     margin-top 10px
   #action-error
     color red
+  #stock-news
+    margin-top 40px
+    .news-container
+      .clear
+        clear both
+        padding 20px 0
+      .left-img
+        width 20%
+        float left
+        img
+          width 100%
+      .stock-news-story
+        float right
+        width 80%
+        padding-left 20px
+        text-align left
+        h5
+          font-size 12px
+          margin 0
+          .time
+            color c1
+        h4
+          font-size 14px
+          margin 0
+          a
+            color c2
+        .summary
+          color c1
+          font-size 12px
 
 #orders
   button