40 |
48 | )
49 | }
50 | }
51 |
52 | export default LeftPanelModule
53 |
--------------------------------------------------------------------------------
/src/containers/PriceAlertToggle.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import {
4 | deleteMonitorTicker,
5 | addMonitorTicker
6 | } from '../actions'
7 | import '../styles/PriceAlertToggle.css'
8 |
9 | class PriceAlertToggle extends Component {
10 | static propTypes = {
11 | symbol: PropTypes.string.isRequired,
12 | last_price: PropTypes.number.isRequired,
13 | instrument_id: PropTypes.string.isRequired
14 | }
15 |
16 | handleTogglePriceAlert = (event) => {
17 | const target = event.target;
18 | const value = target.type === 'checkbox' ? target.checked : target.value;
19 | this.props.onToggleMonitorTicker(value);
20 | }
21 |
22 | render() {
23 | const { ticker } = this.props;
24 | const isIn = (ticker)? true : false;
25 |
26 | return (
27 |
41 | 
44 | {this.props.moduleName}
45 |
46 | {moduleOpen? data : null}
47 |
28 |
39 | )
40 | }
41 | }
42 |
43 | const mapStateToProps = ({ monitorReducer }, ownProps) => {
44 | const { tickers } = monitorReducer;
45 | return { ticker: tickers[ownProps.instrument_id] };
46 | }
47 |
48 | const mapDispatchToProps = (dispatch, ownProps) => ({
49 | onToggleMonitorTicker: (value) => {
50 | if(value) {
51 | dispatch(addMonitorTicker(ownProps.instrument_id, ownProps.symbol, 3, ownProps.last_price));
52 | }
53 | else {
54 | dispatch(deleteMonitorTicker(ownProps.instrument_id));
55 | }
56 | }
57 | })
58 |
59 | export default connect(mapStateToProps, mapDispatchToProps)(PriceAlertToggle)
60 |
--------------------------------------------------------------------------------
/src/components/PriceAlertTicker.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import NumericInput from 'react-numeric-input';
3 | NumericInput.style.input.width = '65px';
4 | NumericInput.style.input.height = '25px';
5 | import '../styles/PriceAlertPage.css'
6 |
7 | class PriceAlertTicker extends Component {
8 | static propTypes = {
9 | ticker: PropTypes.object.isRequired
10 | }
11 |
12 | percentageFormat = (num) => {
13 | return num + '%';
14 | }
15 |
16 | priceFormat = (num) => {
17 | return '$' + num;
18 | }
19 |
20 | render() {
21 | const {
22 | ticker,
23 | onChangeMonitorTickerPercentage,
24 | onChangeMonitorTickerLastPrice,
25 | onDeleteMonitorTicker
26 | } = this.props;
27 | const { instrument_id, percentage, last_price, symbol} = ticker;
28 |
29 | return (
30 | PRICE ALERT
29 | 38 |
31 |
56 | )
57 | }
58 | }
59 |
60 | export default PriceAlertTicker
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ROBINDAHOOD",
3 | "version": "1.0.3",
4 | "license": "MIT",
5 | "description": "A Robinhood desktop app",
6 | "author": "Ed Lai {`$${symbol}`}
32 |
33 | {onChangeMonitorTickerPercentage(instrument_id, number);}}
39 | />
40 | of
41 | {onChangeMonitorTickerLastPrice(instrument_id, number);}}
48 | />
49 |
50 |
51 |
54 |
55 |
64 | Loading...
65 |
66 | )
67 | }
68 | return (
69 |
47 |
48 |
49 |
53 |
57 | )
58 | }
59 | }
60 |
61 | const mapStateToProps = ({ monitorReducer }) => {
62 | const { tickers } = monitorReducer;
63 | return { tickers };
64 | }
65 |
66 | const mapDispatchToProps = (dispatch, ownProps) => ({
67 | onChangeMonitorTickerPercentage: (instrument_id, percentage) => {
68 | dispatch(changeMonitorTickerPercentage(instrument_id, percentage));
69 | },
70 | onChangeMonitorTickerLastPrice: (instrument_id, last_price) => {
71 | dispatch(changeMonitorTickerLastPrice(instrument_id, last_price));
72 | },
73 | onDeleteMonitorTicker: (instrument_id) => {
74 | dispatch(deleteMonitorTicker(instrument_id));
75 | }
76 | })
77 |
78 | export default connect(mapStateToProps, mapDispatchToProps)(PriceAlertPage)
79 |
--------------------------------------------------------------------------------
/src/components/LeftPanelFolder.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | import '../styles/LeftPanelFolder.css'
4 | import arrow from '../styles/arrow.png';
5 | import LeftPanelItem from '../components/LeftPanelItem'
6 | import { displayPercentage } from '../utils'
7 |
8 | class LeftPanelFolder extends Component {
9 | static propTypes = {
10 | moduleName: PropTypes.string.isRequired,
11 | moduleData: PropTypes.array.isRequired,
12 | selectedKey: PropTypes.string.isRequired,
13 | callback: PropTypes.func.isRequired,
14 | toggleLocallist: PropTypes.func.isRequired,
15 | quotes: PropTypes.object.isRequired
16 | }
17 |
18 | handleClick = (id) => {
19 | this.props.callback(this.props.moduleData[id]);
20 | }
21 |
22 | openClose = () => {
23 | this.props.toggleLocallist();
24 | }
25 |
26 | render() {
27 | let { quotes } =this.props;
28 |
29 | let data = this.props.moduleData.map((instrument, index) => {
30 | if(!quotes[instrument.symbol]) return null;
31 |
32 | let last_price = (quotes[instrument.symbol].last_extended_hours_trade_price)? quotes[instrument.symbol].last_extended_hours_trade_price : quotes[instrument.symbol].last_trade_price;
33 | let colorClassName = (Number(last_price) > Number(quotes[instrument.symbol].previous_close))?
34 | "greenUp" : (Number(last_price) === Number(quotes[instrument.symbol].previous_close))?
35 | "whiteNomove":"redDown";
36 |
37 | return(
38 |
50 |
52 | Price Alert
51 |-
54 | { allTickers }
55 |
46 | { `$${Number(last_price).toFixed(2)}` }
47 |
48 |
49 | { displayPercentage(last_price, quotes[instrument.symbol].previous_close) }
50 |
51 |
59 |
67 | )
68 | }
69 | }
70 |
71 | export default LeftPanelFolder
72 |
--------------------------------------------------------------------------------
/src/styles/App.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 | html, body, div, span, applet, object, iframe,
6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7 | a, abbr, acronym, address, big, cite, code,
8 | del, dfn, em, img, ins, kbd, q, s, samp,
9 | small, strike, strong, sub, sup, tt, var,
10 | b, u, i, center,
11 | dl, dt, dd, ol, ul, li,
12 | fieldset, form, label, legend,
13 | table, caption, tbody, tfoot, thead, tr, th, td,
14 | article, aside, canvas, details, embed,
15 | figure, figcaption, footer, header, hgroup,
16 | menu, nav, output, ruby, section, summary,
17 | time, mark, audio, video {
18 | margin: 0;
19 | padding: 0;
20 | border: 0;
21 | font-size: 100%;
22 | font: inherit;
23 | vertical-align: baseline;
24 | }
25 | /* HTML5 display-role reset for older browsers */
26 | article, aside, details, figcaption, figure,
27 | footer, header, hgroup, menu, nav, section {
28 | display: block;
29 | }
30 | body {
31 | line-height: 1;
32 | }
33 | ol, ul {
34 | list-style: none;
35 | }
36 | blockquote, q {
37 | quotes: none;
38 | }
39 | blockquote:before, blockquote:after,
40 | q:before, q:after {
41 | content: '';
42 | content: none;
43 | }
44 | table {
45 | border-collapse: collapse;
46 | border-spacing: 0;
47 | }
48 | /*****************************************************/
49 | @import url('https://fonts.googleapis.com/css?family=Roboto');
50 |
51 | html, body {
52 | width: 100%;
53 | height: 100%;
54 | background-color: #1C1C1C;
55 | color: white;
56 | text-align: center;
57 | font-family: 'Roboto', sans-serif;
58 | font-size: 16px;
59 | cursor: default;
60 | overflow: hidden;
61 | /*
62 | background-image: url('./logo.png');
63 | background-repeat: no-repeat;
64 | background-position: calc(50% + 61px) calc(50% - 19px);
65 | */
66 | background-image: url('./onTheMoon1920x1200.jpg');
67 | background-repeat: no-repeat;
68 | background-position: bottom;
69 | background-size: cover;
70 |
71 | }
72 |
73 | :root {
74 | --main-color: #40C9BD;
75 | }
76 |
77 | .AppProvider {
78 | background-color: var(--main-color);
79 | height: 100vh;
80 | line-height: 100vh;
81 | }
82 |
83 | .elephantprint {
84 | position: relative;
85 | /*background-image: url('./eprint_1024x1024.png');*/
86 | background-size:cover;
87 | width: 100vw;
88 | height: 100vh;
89 | }
90 |
91 | ::-webkit-scrollbar {
92 | width: 7px;
93 | background-color: #46e3c1;
94 | }
95 |
96 | ::-webkit-scrollbar-track {
97 |
98 | }
99 |
100 | ::-webkit-scrollbar-thumb {
101 | background-color: teal;
102 | }
103 |
--------------------------------------------------------------------------------
/src/containers/EditableLocalPositions.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { connect } from 'react-redux'
3 |
4 | import SectionWrapper from '../components/SectionWrapper'
5 | import ListContainer from '../components/ListContainer'
6 |
7 | import {
8 | reorderLocalPosition,
9 | addLocalPositionFolder,
10 | deleteLocalPositionFolder,
11 | reorderLocalPositions,
12 | renameLocalPositionFolder,
13 | } from '../actions'
14 |
15 | import '../styles/News.css'
16 |
17 | class EditableLocalPositions extends Component {
18 |
19 | addFolder = () => {
20 | const { onAddFolder, localPositions } = this.props;
21 | onAddFolder(localPositions.length);
22 | }
23 |
24 | render() {
25 | const {
26 | localPositions,
27 | instruments,
28 | // position handlers
29 | onDeleteFolder,
30 | onReorderPosition,
31 | onReorderLocalPosition,
32 | onRenameLocalPosition
33 | } = this.props;
34 |
35 | return (
36 |
60 |
63 | {this.props.moduleName}
64 |
65 | {open? data : null}
66 |
38 |
46 | Positions
39 | 45 |
65 |
68 |
69 | ) : null}
70 | { this.dbContainer = div; }}>
71 |
79 | )
80 | }
81 | }
82 |
83 | export default Dashboard
84 |
--------------------------------------------------------------------------------
/src/containers/EditableLocalWatchLists.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { connect } from 'react-redux'
3 |
4 | import SectionWrapper from '../components/SectionWrapper'
5 | import ListContainer from '../components/ListContainer'
6 |
7 | import {
8 | reorderLocalWatchlist,
9 | addLocalWatchlistFolder,
10 | deleteLocalWatchlistFolder,
11 | reorderLocalWatchlists,
12 | renameLocalWatchlistFolder,
13 | } from '../actions'
14 |
15 | import '../styles/News.css'
16 |
17 | class EditableLocalWatchLists extends Component {
18 |
19 | addFolder = () => {
20 | const { onAddWatchListFolder, localWatchlists } = this.props;
21 | onAddWatchListFolder(localWatchlists.length);
22 | }
23 |
24 | render() {
25 | const {
26 | localWatchlists,
27 | localPositions,
28 | instruments,
29 | // watchlists handlers
30 | onDeleteWatchListFolder,
31 | onReorderWatchList,
32 | onReorderLocalWatchList,
33 | onRenameWatchListFolder
34 | } = this.props;
35 |
36 | return (
37 | { this.dbLeftPanel = div; }}>
72 | {left}
73 |
74 | { this.dbRightPanel = div; }}>
75 |
78 | { this.dbDrag = div; }}>
76 | {React.cloneElement(right, {width: this.state.rightWidth})}
77 |
39 |
47 | Watchlists
40 | 46 |
48 |
59 |
45 |
70 | )
71 | }
72 |
73 |
74 | Position.propTypes = {
75 | position: PropTypes.object.isRequired
76 | }
77 |
78 | export default Position
79 |
--------------------------------------------------------------------------------
/src/components/Symbol.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'; //, PropTypes
2 | import { DragSource, DropTarget } from 'react-dnd';
3 |
4 | import {flow} from '../utils';
5 |
6 | const style = {
7 | border: '1px dashed gray',
8 | padding: '5px 10px',
9 | margin: '2px',
10 | backgroundColor: 'white',
11 | color: 'black',
12 | cursor: 'move'
13 | };
14 |
15 | class Symbol extends Component {
16 |
17 | render() {
18 | const { isDragging, connectDragSource, connectDropTarget, symbol } = this.props;
19 | const opacity = isDragging ? 0 : 1;
20 |
21 | return connectDragSource(connectDropTarget(
22 |
46 |
55 |
47 |
50 | {Number(quantity)}
48 | Shares
49 |
51 |
54 | ${equityValue}
52 | Equity Value
53 |
56 |
69 |
57 |
60 | Average Cost
58 | ${Number(average_buy_price).toFixed(2)}
59 |
61 |
64 | Total Return
62 | {totalReturn} ({totalReturnPercentage}%)
63 |
65 |
68 | Today's Return
66 | {todaysReturn} ({todaysReturnPercentage}%)
67 | (this.node = node)}>
23 | {symbol}
24 |
25 | ));
26 | }
27 | }
28 |
29 | const cardSource = {
30 |
31 | beginDrag(props) {
32 | return {
33 | index: props.index,
34 | listId: props.listId,
35 | card: props.card,
36 | type: 'CARD'
37 | };
38 | },
39 |
40 | endDrag(props, monitor) {
41 | const item = monitor.getItem();
42 | const dropResult = monitor.getDropResult();
43 |
44 | if ( dropResult && dropResult.listId !== item.listId ) {
45 | props.removeCard(item.index);
46 | }
47 | }
48 | };
49 |
50 | const cardTarget = {
51 |
52 | hover(props, monitor, component) {
53 | const dragIndex = monitor.getItem().index;
54 | const hoverIndex = props.index;
55 | const sourceListId = monitor.getItem().listId;
56 |
57 | // Don't replace items with themselves
58 | if (dragIndex === hoverIndex) {
59 | return;
60 | }
61 |
62 | // Determine rectangle on screen
63 | const hoverBoundingRect = component.node.getBoundingClientRect();
64 |
65 | // Get vertical middle
66 | const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
67 |
68 | // Determine mouse position
69 | const clientOffset = monitor.getClientOffset();
70 |
71 | // Get pixels to the top
72 | const hoverClientY = clientOffset.y - hoverBoundingRect.top;
73 |
74 | // Only perform the move when the mouse has crossed half of the items height
75 | // When dragging downwards, only move when the cursor is below 50%
76 | // When dragging upwards, only move when the cursor is above 50%
77 |
78 | // Dragging downwards
79 | if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
80 | return;
81 | }
82 |
83 | // Dragging upwards
84 | if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
85 | return;
86 | }
87 |
88 | // Time to actually perform the action
89 | if ( props.listId === sourceListId ) {
90 | props.moveCard(dragIndex, hoverIndex);
91 |
92 | // Note: we're mutating the monitor item here!
93 | // Generally it's better to avoid mutations,
94 | // but it's good here for the sake of performance
95 | // to avoid expensive index searches.
96 | monitor.getItem().index = hoverIndex;
97 | }
98 | }
99 | };
100 |
101 | export default flow([
102 | DropTarget("CARD", cardTarget, connect => ({
103 | connectDropTarget: connect.dropTarget()
104 | })),
105 | DragSource("CARD", cardSource, (connect, monitor) => ({
106 | connectDragSource: connect.dragSource(),
107 | isDragging: monitor.isDragging()
108 | }))
109 | ])(Symbol);
110 |
--------------------------------------------------------------------------------
/src/styles/PlaceOrder.css:
--------------------------------------------------------------------------------
1 | .tradeButtonWrapper {
2 | margin: 20px 0 5px 0;
3 | width: 100%;
4 | display: flex;
5 | justify-content:space-around;
6 | }
7 |
8 | .tradeButton {
9 | width: 45%;
10 | margin: 0 2.5%;
11 | padding: 10px 0;
12 | background-color: white;
13 | border-radius: 5px;
14 | color: black;
15 | text-align: center;
16 | border: none;
17 | font-weight: bold;
18 | cursor: pointer;
19 | position: relative;
20 | top: 0;
21 | flex: 1;
22 | }
23 |
24 | .tradeButton:hover {
25 | background-color: #E0F7F1;
26 | }
27 |
28 | .placeOrderWrapper {
29 |
30 | }
31 |
32 | .placeOrderHeader {
33 | background-color: var(--main-color);
34 | }
35 |
36 | .placeOrderHeader > h2 {
37 | font-size: 1.8rem;
38 | padding: 10px;
39 | color: white;
40 | }
41 |
42 | .placeOrderHeader > h3 {
43 | font-size: 1.4rem;
44 | padding: 6px 10px;
45 | font-weight: bold;
46 | background-color: #A9F5EB;
47 | color: black;
48 | }
49 |
50 | .placeOrderSection{
51 | padding: 20px;
52 | }
53 |
54 | .orderOptionWrapper {
55 | width: 100%;
56 | display: flex;
57 | align-items:center;
58 | border-bottom: 1px solid var(--main-color);
59 | padding: 5px 0;
60 | margin-top: 10px;
61 | }
62 |
63 | .orderOptionName {
64 | width: 35%;
65 | margin-left: 5px;
66 | }
67 |
68 | .orderOption {
69 | width: 65%;
70 | }
71 |
72 | .orderWarning {
73 | margin-top: 3px;
74 | color: red;
75 | }
76 |
77 | .green {
78 | color: var(--main-color);
79 | margin-top: 0;
80 | }
81 |
82 | .grey {
83 | color: grey;
84 | margin-top: 0;
85 | border-bottom: 3px solid grey;
86 | }
87 |
88 | .resultWrapper {
89 | width: 100%;
90 | display: flex;
91 | padding: 5px 0;
92 | margin-top: 10px;
93 | font-weight: bold;
94 | font-size: 1.2rem;
95 | align-items:center;
96 | }
97 |
98 | .placeOrderButtonsWrapper {
99 | margin-top: 40px;
100 | display: flex;
101 | justify-content:space-between;
102 | }
103 |
104 | .placeOrderButton {
105 | background-color: white;
106 | color: black;
107 | border: 2px solid black;
108 | border-radius: 2px;
109 | padding: 5px;
110 | font-weight: bold;
111 | cursor: pointer;
112 | }
113 |
114 | .placeOrderButton:hover {
115 | background-color: #D8D8D8;
116 | }
117 |
118 | .cancel {
119 | background-color: #FA5882;
120 | color: white;
121 | }
122 |
123 | .cancel:hover {
124 | background-color: #F78181;
125 | }
126 |
127 | .orderingDiv {
128 | width: 100%;
129 | color: black;
130 | text-align: center;
131 | margin-top: calc(50%);
132 | padding: 10px 0;
133 | background-color: var(--main-color);
134 | }
135 |
136 | .orderedDivWrapper {
137 | text-align: center;
138 | }
139 |
140 | .orderedDiv {
141 | width: 100%;
142 | color: black;
143 | text-align: center;
144 | padding: 10px 0;
145 | color: white;
146 | background-color: var(--main-color);
147 | }
148 |
149 | .orderedReasonDiv {
150 | width: 100%;
151 | color: black;
152 | text-align: center;
153 | padding: 15px 0;
154 | }
155 |
156 | .orderedButton {
157 | background-color: white;
158 | color: black;
159 | border: 2px solid black;
160 | border-radius: 2px;
161 | padding: 5px;
162 | font-weight: bold;
163 | cursor: pointer;
164 | margin-top: 20px;
165 | }
166 |
167 | .orderedButton:hover {
168 | background-color: #D8D8D8;
169 | }
170 |
--------------------------------------------------------------------------------
/src/reducers/reducer_positions.js:
--------------------------------------------------------------------------------
1 | import * as actions from '../actions';
2 |
3 | const positionsReducer = (state = {
4 | isAskingPositions: false,
5 | error: "",
6 | positions: [],
7 | positionsWithZero: [],
8 | eachPosition: {}
9 | }, action) => {
10 | switch (action.type) {
11 | case actions.ASKING_POSITIONS:
12 | return {
13 | ...state,
14 | error: "",
15 | isAskingPositions: true
16 | }
17 | case actions.ASKING_POSITIONS_FAILED:
18 | return {
19 | ...state,
20 | isAskingPositions: false,
21 | error: action.error,
22 | positions: []
23 | }
24 | case actions.ADD_POSITIONS:
25 | return {
26 | ...state,
27 | isAskingPositions: false,
28 | positions: action.positions,
29 | }
30 | case actions.ADD_MORE_POSITIONS:
31 | return {
32 | ...state,
33 | isAskingPositions: false,
34 | positions: state.positions.concat(action.positions)
35 | }
36 | case actions.DELETE_POSITIONS:
37 | return {
38 | isAskingPositions: false,
39 | error: "",
40 | positions: [],
41 | positionsWithZero: [],
42 | eachPosition: {}
43 | }
44 | case actions.ADD_POSITION:
45 | let tempPosition = {};
46 | tempPosition[action.position.instrument] = action.position;
47 | return {
48 | ...state,
49 | eachPosition: Object.assign({}, state.eachPosition, tempPosition)
50 | }
51 | case actions.ADD_POSITIONS_WITH_ZERO:
52 | return {
53 | ...state,
54 | positionsWithZero: action.positions,
55 | }
56 | case actions.ADD_MORE_POSITIONS_WITH_ZERO:
57 | return {
58 | ...state,
59 | positionsWithZero: state.positionsWithZero.concat(action.positions)
60 | }
61 | default:
62 | return state
63 | }
64 | }
65 |
66 | export default positionsReducer
67 |
68 |
69 | /*
70 | "positions":[
71 | {
72 | "account":"https://api.robinhood.com/accounts/accountnumber/",
73 | "intraday_quantity":"0.0000",
74 | "intraday_average_buy_price":"0.0000",
75 | "url":"https://api.robinhood.com/positions/accountnumber/stringOfSomething/",
76 | "created_at":"2017-03-02T03:52:54.895476Z",
77 | "updated_at":"2017-03-28T16:23:05.714421Z",
78 | "shares_held_for_buys":"0.0000",
79 | "average_buy_price":"1.33",
80 | "instrument":"https://api.robinhood.com/instruments/stringOfSomething/",
81 | "shares_held_for_sells":"0.0000",
82 | "quantity":"495.0000"
83 | },
84 | ]
85 |
86 | "eachPosition":{
87 | "https://api.robinhood.com/instruments/stringOfSomething/":{
88 | "account":"https://api.robinhood.com/accounts/accountnumber/",
89 | "intraday_quantity":"0.0000",
90 | "intraday_average_buy_price":"0.0000",
91 | "url":"https://api.robinhood.com/positions/stringOfSomething/",
92 | "created_at":"2017-03-02T03:52:54.895476Z",
93 | "updated_at":"2017-03-28T16:23:05.714421Z",
94 | "shares_held_for_buys":"0.0000",
95 | "average_buy_price":"6.33",
96 | "instrument":"https://api.robinhood.com/instruments/stringOfSomething/",
97 | "shares_held_for_sells":"0.0000",
98 | "quantity":"100.0000"
99 | },
100 | }
101 | */
102 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | export const myFixed = (number) => {
2 | if(Number(number) < 1){
3 | return Number( number.toFixed(4) ).toString();
4 | }
5 | else {
6 | return Number(number).toFixed(2);
7 | }
8 | }
9 |
10 | export const capFirst = (string) => {
11 | if(typeof string !== 'string'){
12 | return `${string}`;
13 | }
14 | return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
15 | }
16 |
17 | export const formatAMPM = (dateString) => {
18 | let date = new Date(dateString);
19 | var hours = date.getHours();
20 | var minutes = date.getMinutes();
21 | var ampm = hours >= 12 ? 'pm' : 'am';
22 | hours %= 12;
23 | hours = hours ? hours : 12; // the hour '0' should be '12'
24 | hours = (hours<10)? '0'+hours : hours;
25 | minutes = minutes < 10 ? '0'+minutes : minutes;
26 | var strTime = hours + ':' + minutes + ' ' + ampm;
27 |
28 | return strTime;
29 | }
30 |
31 | export const printDate = (dateString) => {
32 | let newsDate = new Date(dateString);
33 | let now = new Date();
34 | let res = "";
35 | if(newsDate.getDate()===now.getDate() &&
36 | newsDate.getMonth()===now.getMonth() &&
37 | newsDate.getFullYear()===now.getFullYear()
38 | ){
39 | res = formatAMPM(dateString);
40 | }
41 | else{
42 | res = `${newsDate.getMonth()+1}/${newsDate.getDate()}/${newsDate.getFullYear()}`
43 | }
44 |
45 | return res;
46 | }
47 |
48 | export const printDateOnly = (dateString) => {
49 | let newsDate = new Date(dateString);
50 |
51 | return `${newsDate.getMonth()+1}/${newsDate.getDate()}/${newsDate.getFullYear()}`;
52 | }
53 |
54 |
55 | // a and b are string
56 | export const dateDiffInDays = (a) => {
57 | const _MS_PER_DAY = 1000 * 60 * 60 * 24;
58 | let aDate = new Date(a);
59 | let bDate = new Date();
60 | // Discard the time and time-zone information.
61 | var utc1 = Date.UTC(aDate.getFullYear(), aDate.getMonth(), aDate.getDate());
62 | var utc2 = Date.UTC(bDate.getFullYear(), bDate.getMonth(), bDate.getDate());
63 |
64 | return Math.floor((utc2 - utc1) / _MS_PER_DAY);
65 | }
66 |
67 | export const displayPercentage = (newString, oldString) => {
68 | let newNum = Number(newString);
69 | let oldNum = Number(oldString);
70 | let negPos = (newNum - oldNum > 0)? "+" : "";
71 |
72 | return negPos + ((newNum - oldNum) / oldNum * 100).toFixed(2) + "%"
73 | }
74 |
75 | export const isLater = (newDateStr, oldDateStr) => {
76 | return new Date(newDateStr) > new Date(oldDateStr);
77 | }
78 |
79 | export const flow = (funcs) => {
80 | const length = funcs ? funcs.length : 0
81 | let index = length
82 | while (index--) {
83 | if (typeof funcs[index] !== 'function') {
84 | throw new TypeError('Expected a function')
85 | }
86 | }
87 | return function(...args) {
88 | let index = 0
89 | let result = length ? funcs[index].apply(this, args) : args[0]
90 | while (++index < length) {
91 | result = funcs[index].call(this, result)
92 | }
93 | return result
94 | }
95 | }
96 |
97 | export const carry = (numString) => {
98 | const numNum = Number(numString);
99 | let res = "";
100 | if(numNum > 1000000000){
101 | res = Math.round(numNum/1000000000 * 100) / 100 + "B"
102 | }
103 | else if(numNum > 1000000){
104 | res = Math.round(numNum/1000000 * 1000) / 1000 + "M"
105 | }
106 | else {
107 | res = Number(numNum);
108 | }
109 |
110 | return res;
111 | }
112 |
--------------------------------------------------------------------------------
/src/containers/PendingOrdersPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import { askCurrentOrder, cancelOrder } from '../actions'
4 | import SectionWrapper from '../components/SectionWrapper'
5 | import Orders from '../components/Orders'
6 | import { askHistoricalsOrders } from '../actions'
7 | import '../styles/HistoryPage.css'
8 |
9 | class PendingOrdersPage extends Component {
10 | static propTypes = {
11 | isAskingCurrentOrder: PropTypes.bool.isRequired,
12 | currentOrder: PropTypes.object.isRequired,
13 | currentOrderFailedReason: PropTypes.string.isRequired,
14 | cancelCurrentOrderState: PropTypes.string.isRequired,
15 | instruments: PropTypes.object.isRequired,
16 | isCurrent: PropTypes.bool.isRequired
17 | }
18 |
19 | componentDidMount() {
20 | this.props.onFetchHistoricalsOrders();
21 | }
22 |
23 | askCurrentOrder = (orderId) => {
24 | this.props.onFetchCurrentOrder(orderId);
25 | }
26 |
27 | cancelOrder = (cancelLink, orderId) => {
28 | this.props.onCancelOrder(cancelLink, orderId);
29 | }
30 |
31 | render() {
32 | const props = { ...this.props };
33 |
34 | //show null if not cuttent page
35 | if(!this.props.isCurrent){ return null; }
36 |
37 | const pendingOrdersArray = Object.keys(props.pendingOrders).map( orderID => props.pendingOrders[orderID] );
38 | //sort by date
39 | pendingOrdersArray.sort((a, b) => {
40 | a = new Date(a.created_at);
41 | b = new Date(b.created_at);
42 | return a>b ? -1 : a console.log("this is for pending orders") }
51 | askCurrentOrder={ this.askCurrentOrder }
52 | cancelOrder={ this.cancelOrder }
53 | />
54 | : "Loading...";
55 |
56 | return (
57 |
58 |
59 |
60 |
64 |
65 |
66 | { pendingOrdersBlock }
67 |
68 |
69 |
70 | )
71 | }
72 | }
73 |
74 | const mapStateToProps = ({ ordersReducer, instrumentsReducer }) => {
75 | const {
76 | pendingOrders,
77 | isAskingCurrentOrder,
78 | currentOrder,
79 | currentOrderFailedReason,
80 | cancelCurrentOrderState
81 | } = ordersReducer;
82 |
83 | const { instruments } = instrumentsReducer;
84 |
85 | return {
86 | pendingOrders,
87 | isAskingCurrentOrder,
88 | currentOrder,
89 | currentOrderFailedReason,
90 | cancelCurrentOrderState,
91 | instruments
92 | };
93 | }
94 |
95 | const mapDispatchToProps = (dispatch, ownProps) => ({
96 | onFetchHistoricalsOrders: () => {
97 | dispatch(askHistoricalsOrders());
98 | },
99 | onFetchCurrentOrder: (orderId) => {
100 | dispatch(askCurrentOrder(orderId))
101 | },
102 | onCancelOrder: (cancelLink, orderId) => {
103 | dispatch(cancelOrder(cancelLink, orderId));
104 | }
105 | })
106 |
107 | export default connect(mapStateToProps, mapDispatchToProps)(PendingOrdersPage)
108 |
--------------------------------------------------------------------------------
/src/containers/Earnings.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 |
4 | import SectionWrapper from '../components/SectionWrapper'
5 | import EarningsChart from '../components/EarningsChart'
6 | import { askEarnings } from '../actions'
7 | import '../styles/Earnings.css'
8 |
9 | class Earnings extends Component {
10 | static propTypes = {
11 | symbol: PropTypes.string.isRequired
12 | }
13 |
14 |
15 | componentDidMount() {
16 | this.props.onFetchEarnings();
17 | }
18 |
19 | render() {
20 | const earnings = this.props.earnings;
21 |
22 | if(!earnings || earnings.length === 0) return null;
23 |
24 | let localLast = (earnings.length > 2)? earnings.length-2 : earnings.length-1;
25 |
26 | let displayData = [];
27 | for(let i = localLast; i > 0; i--) {
28 | if( i === earnings.length-7 ){ break; }
29 | let tempEstimate = {}
30 | let tempActual = {}
31 |
32 | tempEstimate.xIndex = 5 - (localLast - i) ;
33 | tempEstimate.year = earnings[i].year;
34 | tempEstimate.quarter = `Q${earnings[i].quarter}`;
35 | tempEstimate.eps = ( earnings[i].eps.estimate )? Math.round(Number(earnings[i].eps.estimate) * 100) / 100 : null;
36 | tempEstimate.epsType = "estimate";
37 |
38 | tempActual.xIndex = 5 - (localLast - i) ;
39 | tempActual.year = earnings[i].year;
40 | tempActual.quarter = `Q${earnings[i].quarter}`;
41 | tempActual.eps = ( earnings[i].eps.actual )? Math.round(Number(earnings[i].eps.actual) * 100) / 100 : null;
42 | tempActual.epsType = "actual";
43 |
44 | displayData.push(tempEstimate);
45 | displayData.push(tempActual);
46 | }
47 |
48 | return (
49 |
61 |
63 | Pending Orders
62 |
53 |
79 |
54 |
61 | Expected EPS •
55 |
56 | {(earnings[localLast].eps.estimate)?
57 | `${Number(earnings[localLast].eps.estimate) < 0 ? "-" : ""}US$${Math.abs(Number(earnings[localLast].eps.estimate)).toFixed(2)}`
58 | : "N/A"}
59 |
60 |
62 |
78 | Actual EPS •
63 |
64 | {(earnings[localLast].eps.actual)?
65 | `${Number(earnings[localLast].eps.actual) < 0 ? "-" : ""}US$${Math.abs(Number(earnings[localLast].eps.actual)).toFixed(2)}`
66 | : (earnings[localLast].report)? (
67 |
77 |
68 |
75 | ) : null }
76 |
69 | {`${(earnings[localLast].report.verified)? "Available" : "Expected"} on ${earnings[localLast].report.date},`}
70 |
71 |
72 | {(earnings[localLast].report.timing === "am")? "Pre-market" : "After-hours"}
73 |
74 | { this.qw = div; }} >
66 |
67 |
68 |
69 | }/>:
75 | }/>
76 | }
77 | {(selectedButtonName==="1D")? (
78 |
81 |
82 |
83 |
84 | )
85 | }
86 | }
87 |
88 | export default QuotesForPortfolios
89 |
--------------------------------------------------------------------------------
/src/containers/HistoryPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import {
4 | askHistoricalsOrders, askCurrentOrder, cancelOrder
5 | } from '../actions'
6 | import SectionWrapper from '../components/SectionWrapper'
7 | import Orders from '../components/Orders'
8 | import '../styles/HistoryPage.css'
9 |
10 | class HistoryPage extends Component {
11 | static propTypes = {
12 | historicalsOrders: PropTypes.array.isRequired,
13 | historicalsOrdersNextLink: PropTypes.string.isRequired,
14 | isAskingCurrentOrder: PropTypes.bool.isRequired,
15 | currentOrder: PropTypes.object.isRequired,
16 | currentOrderFailedReason: PropTypes.string.isRequired,
17 | cancelCurrentOrderState: PropTypes.string.isRequired,
18 | instruments: PropTypes.object.isRequired,
19 | isCurrent: PropTypes.bool.isRequired
20 | }
21 |
22 | componentDidMount(){
23 | this.props.onFetchHistoricalsOrders();
24 | }
25 |
26 | componentWillReceiveProps(nextProps){
27 | if(nextProps.isCurrent && !this.props.isCurrent){
28 | this.props.onFetchHistoricalsOrders();
29 | }
30 | }
31 |
32 | addMoreHistoricalsOrder = () => {
33 | this.props.onFetchHistoricalsOrders(this.props.historicalsOrdersNextLink);
34 | }
35 |
36 | askCurrentOrder = (orderId) => {
37 | this.props.onFetchCurrentOrder(orderId);
38 | }
39 |
40 | cancelOrder = (cancelLink, orderId) => {
41 | this.props.onCancelOrder(cancelLink, orderId);
42 | }
43 |
44 | render() {
45 | const props = { ...this.props };
46 |
47 | //show null if not cuttent page
48 | if(!this.props.isCurrent){ return null; }
49 |
50 | const historicalsOrdersBlock = ( props.historicalsOrders )?
51 |
61 |
62 |
63 |
67 |
68 |
69 | { historicalsOrdersBlock }
70 |
71 |
72 |
73 |
74 | )
75 | }
76 | }
77 |
78 | const mapStateToProps = ({ ordersReducer, instrumentsReducer }) => {
79 | const {
80 | historicalsOrders,
81 | historicalsOrdersNextLink,
82 | isAskingCurrentOrder,
83 | currentOrder,
84 | currentOrderFailedReason,
85 | cancelCurrentOrderState
86 | } = ordersReducer;
87 |
88 | const { instruments } = instrumentsReducer;
89 |
90 | return {
91 | historicalsOrders,
92 | historicalsOrdersNextLink,
93 | isAskingCurrentOrder,
94 | currentOrder,
95 | currentOrderFailedReason,
96 | cancelCurrentOrderState,
97 | instruments
98 | };
99 | }
100 |
101 | const mapDispatchToProps = (dispatch, ownProps) => ({
102 | onFetchHistoricalsOrders: (link) => {
103 | if(!link) {
104 | dispatch(askHistoricalsOrders());
105 | }
106 | else{
107 | dispatch(askHistoricalsOrders(link));
108 | }
109 | },
110 | onFetchCurrentOrder: (orderId) => {
111 | dispatch(askCurrentOrder(orderId))
112 | },
113 | onCancelOrder: (cancelLink, orderId) => {
114 | dispatch(cancelOrder(cancelLink, orderId));
115 | }
116 | })
117 |
118 | export default connect(mapStateToProps, mapDispatchToProps)(HistoryPage)
119 |
--------------------------------------------------------------------------------
/src/containers/LoginPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { connect } from 'react-redux'
3 | import { askToken, resetTokenError } from '../actions'
4 | import Input from '../components/Input'
5 | import '../styles/LoginPage.css'
6 |
7 | class LoginPage extends Component {
8 | static propTypes = {
9 | tokenError: PropTypes.string.isRequired,
10 | isAskingToken: PropTypes.bool.isRequired,
11 | accountError: PropTypes.string.isRequired,
12 | isAskingAccount: PropTypes.bool.isRequired,
13 | needMFA: PropTypes.bool.isRequired
14 | }
15 |
16 | constructor(props) {
17 | super(props);
18 | this.state = {
19 | username: "",
20 | password: "",
21 | mfa: "",
22 | unMessage: "",
23 | pwMessage: "",
24 | mfaMessage:""
25 | };
26 | }
27 |
28 | componentDidMount() {
29 | this.props.onResetTokenError();
30 | }
31 |
32 | handleUsernameChange = event => {
33 | this.setState({username: event.target.value, unMessage:""});
34 | }
35 |
36 | handlePasswordChange = event => {
37 | this.setState({password: event.target.value, pwMessage:""});
38 | }
39 |
40 | handleMFAChange = event => {
41 | this.setState({mfa: event.target.value, mfaMessage:""});
42 | }
43 |
44 | handleSubmit = event => {
45 | event.preventDefault();
46 | if((this.state.username === "") || (this.state.password === "")){
47 | if(this.state.username === "") { this.setState({unMessage: "This field may not be blank."}); }
48 | if(this.state.password === "") { this.setState({pwMessage: "This field may not be blank."}); }
49 | return;
50 | }
51 | if(this.props.needMFA && this.state.mfa === ""){
52 | this.setState({mfaMessage: "This field may not be blank."});
53 | return;
54 | }
55 |
56 | this.props.onFetchToken(this.state.username, this.state.password, this.state.mfa)
57 | }
58 |
59 | render() {
60 | const { isAskingToken, tokenError, needMFA, isAskingAccount, accountError } = this.props
61 | const isAsking = isAskingToken || isAskingAccount;
62 | const Errors = tokenError || accountError;
63 |
64 | return (
65 |
64 |
66 | History
65 |
66 |
67 |
78 | )
79 | }
80 | }
81 |
82 | const mapStateToProps = ({ tokenReducer, accountReducer }) => {
83 | const {
84 | isAskingToken,
85 | tokenError,
86 | needMFA
87 | } = tokenReducer;
88 | const {
89 | isAskingAccount,
90 | accountError
91 | } = accountReducer;
92 |
93 | return {
94 | isAskingToken,
95 | tokenError,
96 | needMFA,
97 | isAskingAccount,
98 | accountError
99 | };
100 | }
101 |
102 | const mapDispatchToProps = (dispatch, ownProps) => ({
103 | onFetchToken: (username, password, mfa) => {
104 | dispatch(askToken(username, password, mfa));
105 | },
106 | onResetTokenError: () => {
107 | dispatch(resetTokenError());
108 | }
109 | })
110 |
111 | export default connect(mapStateToProps, mapDispatchToProps)(LoginPage)
112 |
--------------------------------------------------------------------------------
/src/components/Quotes.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { LineChart, Line, XAxis, YAxis, Tooltip, ReferenceLine, ResponsiveContainer } from 'recharts';
3 | import WithoutTimeTooltip from './WithoutTimeTooltip'
4 | import WithTimeTooltip from './WithTimeTooltip'
5 | import { dateDiffInDays } from '../utils'
6 | import '../styles/Quotes.css'
7 |
8 | class Quotes extends Component {
9 | static propTypes = {
10 | historicals: PropTypes.array.isRequired,
11 | previous_close: PropTypes.string.isRequired,
12 | selectedButtonName: PropTypes.string.isRequired
13 | }
14 |
15 | constructor(props) {
16 | super(props);
17 | this.state = {width: 0};
18 | }
19 |
20 | componentDidMount() {
21 | window.addEventListener('resize', this.resetDimensions);
22 | this.resetDimensions();
23 | }
24 |
25 | componentWillUnmount() {
26 | window.removeEventListener('resize', this.resetDimensions);
27 | }
28 |
29 | shouldComponentUpdate(nextProps, nextState) {
30 | if(nextProps.selectedButtonName !== "1D" && this.props.selectedButtonName === nextProps.selectedButtonName) {
31 | return false;
32 | }
33 |
34 | return true;
35 | }
36 |
37 | resetDimensions = () => {
38 | this.setState({width: this.qw.offsetWidth });
39 | this.qw.style.height = ( this.qw.offsetWidth > 500 )? "250px" : this.qw.offsetWidth/2+"px";
40 | }
41 |
42 | render() {
43 | const { selectedButtonName, historicals, previous_close, last_price } = this.props;
44 | let data = [];
45 | if(selectedButtonName === "1M"){
46 | historicals.forEach((eachData)=>{
47 | if(dateDiffInDays(eachData.begins_at) <= 31){
48 | data.push(eachData);
49 | }
50 | })
51 | }
52 | else if(selectedButtonName === "3M"){
53 | historicals.forEach((eachData)=>{
54 | if(dateDiffInDays(eachData.begins_at) <= 92){
55 | data.push(eachData);
56 | }
57 | })
58 | }
59 | else {
60 | data = historicals;
61 | }
62 |
63 | ///*
64 | const strokeColor = (selectedButtonName==="1D")? (
65 | (previous_close < last_price)? '#00FF73' : '#F35A2B'
66 | ):(data[0].close_price < last_price)? '#00FF73' : '#F35A2B';
67 | //*/
68 | /*
69 | const strokeColor = (selectedButtonName==="1D")? (
70 | (previous_close < data[data.length-1].close_price)? '#00FF73' : '#F35A2B'
71 | ):(data[0].close_price < data[data.length-1].close_price)? '#00FF73' : '#F35A2B';
72 | */
73 |
74 | return (
75 | ROBINDAHOOD
68 | {Errors}
69 |
77 | { this.qw = div; }} >
76 |
77 |
78 | data.toFixed(2)}/>
83 | {selectedButtonName==="1D" || selectedButtonName==="1W"?
84 | }/>:
85 | }/>
86 | }
87 | {(selectedButtonName==="1D")? (
88 |
91 |
92 |
93 |
94 | )
95 | }
96 | }
97 |
98 | export default Quotes
99 |
--------------------------------------------------------------------------------
/src/components/EarningsChart.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, Tooltip, Cell } from 'recharts'
3 | import '../styles/Earnings.css'
4 |
5 | class CustomizedXLabel extends Component {
6 | render() {
7 | let { x, y, displayData, payload } = this.props;
8 | let index = -1;
9 | for(let i=0; i
53 |
57 | );
58 | }
59 |
60 | return null;
61 | }
62 | }
63 |
64 | class EarningsChart extends Component {
65 | static propTypes = {
66 | data: PropTypes.array.isRequired
67 | }
68 |
69 | constructor(props) {
70 | super(props);
71 | this.state = {width: 0};
72 | }
73 |
74 | componentDidMount() {
75 | window.addEventListener('resize', this.resetDimensions);
76 | this.resetDimensions();
77 | }
78 |
79 | componentWillUnmount() {
80 | window.removeEventListener('resize', this.resetDimensions);
81 | }
82 |
83 | resetDimensions = () => {
84 | this.setState({width: this.ew.offsetWidth });
85 | //console.log(this.state.width);
86 | this.ew.style.height = ( this.ew.offsetWidth > 500 )? "250px" : this.ew.offsetWidth/2+"px";
87 | }
88 |
89 | render() {
90 | const { data } = this.props;
91 |
92 | return (
93 | {`${eps.quarter} ${eps.year}`}
54 | {`${eps.epsType.toUpperCase()} EPS`}
55 | {eps.eps}
56 | { this.ew = div; }} >
94 |
95 |
96 | } />
98 |
99 | {
100 | data.map((entry, index) => (
101 | |
102 | ))
103 | }
104 |
105 | } />
106 |
107 |
108 |
109 | )
110 | }
111 | }
112 |
113 | export default EarningsChart
114 |
--------------------------------------------------------------------------------
/src/components/Search.js:
--------------------------------------------------------------------------------
1 | import React, { Component,PropTypes } from 'react'
2 | import Autosuggest from 'react-autosuggest';
3 | import '../styles/Search.css'
4 | /* ----------- */
5 | /* Utils */
6 | /* ----------- */
7 |
8 | // https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
9 | function escapeRegexCharacters(str) {
10 | return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
11 | }
12 |
13 | /* --------------- */
14 | /* Component */
15 | /* --------------- */
16 |
17 | const getSuggestionValue = (suggestion) => (suggestion.symbol);
18 |
19 | const renderSuggestionsContainer = ({ containerProps , children, query }) => {
20 | return (
21 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | const renderInputComponent = inputProps => (
28 |
29 |
30 |
31 | );
32 |
33 | class Search extends Component {
34 | static propTypes = {
35 | callback: PropTypes.func.isRequired
36 | }
37 |
38 | constructor() {
39 | super();
40 |
41 | this.state = {
42 | value: '',
43 | suggestions: [],
44 | //isLoading: false
45 | };
46 |
47 | this.lastRequestId = null;
48 | }
49 |
50 | handleClick = suggestion => {
51 | suggestion.instrument = suggestion.url
52 | suggestion.type = "watchlist"
53 | //console.log(suggestion)
54 | this.props.callback(suggestion);
55 | }
56 |
57 | renderSuggestion = (suggestion) => {
58 | return (
59 | this.handleClick(suggestion)} >
60 |
63 | );
64 | }
65 |
66 | getMatchingInstruments = (value) => {
67 | const escapedValue = escapeRegexCharacters(value.trim());
68 |
69 | if (escapedValue === '') {
70 | this.setState({
71 | //isLoading: false,
72 | suggestions: []
73 | });
74 | }
75 |
76 | return fetch(`https://api.robinhood.com/instruments/?query=${value}`, {
77 | method: 'GET',
78 | headers: new Headers({ 'Accept': 'application/json' })
79 | })
80 | .then(response => response.json())
81 | .then(jsonResult => {
82 | this.setState({
83 | //isLoading: false,
84 | suggestions: jsonResult.results
85 | });
86 | })
87 | .catch(function(reason) {
88 | console.log(reason);
89 | });
90 | }
91 |
92 | onSuggestionSelected= (e)=>{
93 | this.setState({value:''})
94 | }
95 |
96 | loadSuggestions=(value)=> {
97 | this.setState({
98 | //isLoading: true
99 | });
100 | this.getMatchingInstruments(value);
101 | }
102 |
103 | onChange = (event, { newValue }) => {
104 | this.setState({
105 | value: newValue
106 | });
107 | };
108 |
109 | onSuggestionsFetchRequested = ({ value }) => {
110 | this.loadSuggestions(value);
111 | };
112 |
113 | onSuggestionsClearRequested = () => {
114 | this.setState({
115 | suggestions: []
116 | });
117 | };
118 |
119 | render() {
120 | const { value, suggestions } = this.state;
121 | const inputProps = {
122 | placeholder: "SEARCH",
123 | value,
124 | onChange: this.onChange
125 | };
126 |
127 | return (
128 | {suggestion.symbol}
61 | {suggestion.name}
62 |
129 |
141 | );
142 | }
143 | }
144 |
145 | export default Search
146 |
--------------------------------------------------------------------------------
/src/containers/BuyingPower.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { connect } from 'react-redux'
3 | import SectionWrapper from '../components/SectionWrapper'
4 | import '../styles/BuyingPower.css'
5 |
6 | class BuyingPower extends Component {
7 |
8 | getBuyingPower = () => {
9 | const { type, cash_balances, margin_balances } = this.props.account;
10 | if( type === "cash" ) {
11 | return Number(cash_balances.buying_power);
12 | }
13 | else {
14 | let temp = Number(margin_balances.overnight_buying_power) / Number(margin_balances.overnight_ratio);
15 | if( Number(margin_balances.margin_limit) === 0 ) {
16 | return temp;
17 | }
18 | else {
19 | return Math.min(temp, Number(margin_balances.unallocated_margin_cash) );
20 | }
21 | }
22 | }
23 |
24 | getGoldUsed = () => {
25 | const { type, margin_balances } = this.props.account;
26 | if( type === "cash" ) {
27 | return 0;
28 | }
29 | else {
30 | let margin_limit = Number(margin_balances.margin_limit);
31 | let unallocated_margin_cash = Number(margin_balances.unallocated_margin_cash);
32 | let isGold = ( margin_limit !== 0 )? true : false;
33 | if( isGold && ( margin_limit !== 0 ) ) {
34 | if( margin_limit > unallocated_margin_cash ) {
35 | return margin_limit - unallocated_margin_cash;
36 | }
37 | return 0;
38 | }
39 | return 0;
40 | }
41 | }
42 |
43 | getGoldWithheld = () => {
44 | const { type, margin_balances } = this.props.account;
45 | if( type === "cash" ) {
46 | return 0;
47 | }
48 | else {
49 | let margin_limit = Number(margin_balances.margin_limit);
50 | let cash_held_for_orders = Number(margin_balances.cash_held_for_orders);
51 | let isGold = ( margin_limit !== 0 )? true : false;
52 | if( isGold && ( margin_limit !== 0 ) ) {
53 | return Math.max( 0, ( margin_limit - this.getGoldUsed() - this.getBuyingPower() - cash_held_for_orders ) )
54 | }
55 | return 0;
56 | }
57 | }
58 |
59 | getRobinhoodGold = () => {
60 | const { type, margin_balances } = this.props.account;
61 | if( type === "cash" ) {
62 | return 0;
63 | }
64 | else {
65 | return Number(margin_balances.margin_limit);
66 | }
67 | }
68 |
69 | render() {
70 | if(!this.props.account) return null;
71 | if(this.props.account.type === "cash"){
72 | if(!this.props.account.cash_balances) return null;
73 | }
74 | else{
75 | if(!this.props.account.margin_balances) return null;
76 | }
77 |
78 | return (
79 |
81 |
125 |
82 |
91 |
83 | Robinhood Gold
84 |
85 |
86 |
87 |
88 | {`$${ this.getRobinhoodGold().toFixed(2) }`}
89 |
90 |
92 |
102 |
93 | Gold used
94 |
95 |
96 | -
97 |
98 |
99 | {`$${ this.getGoldUsed().toFixed(2) }`}
100 |
101 |
103 |
113 |
104 | Gold withheld
105 |
106 |
107 | -
108 |
109 |
110 | {`$${ this.getGoldWithheld().toFixed(2) }`}
111 |
112 |
114 |
123 |
124 |
115 | Buying power
116 |
117 |
118 |
119 |
120 | {`$${ this.getBuyingPower().toFixed(2) }`}
121 |
122 |
121 | {lists.map((localList, index)=>{
122 | return (
123 |
140 | );
141 | }
142 | }
143 |
144 | export default flow([
145 | DropTarget("LIST", listTarget, connect => ({
146 | connectDropTarget: connect.dropTarget(),
147 | })),
148 | DragDropContext(HTML5Backend)
149 | ])(ListContainer);
150 |
--------------------------------------------------------------------------------
/src/components/HistoryPriceDisplay.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import '../styles/HistoryPriceDisplay.css'
3 | import { displayPercentage, printDateOnly, dateDiffInDays } from '../utils'
4 |
5 | class HistoryPriceDisplay extends Component {
6 | static propTypes = {
7 | historicals: PropTypes.array.isRequired,
8 | previous_close: PropTypes.string.isRequired,
9 | selectedButtonName: PropTypes.string.isRequired
10 | }
11 |
12 | render() {
13 | const {
14 | selectedButtonName, historicals,
15 | previous_close, last_trade_price, updated_at, last_extended_hours_trade_price
16 | } = this.props;
17 |
18 | let data = [];
19 | if(selectedButtonName === "1M"){
20 | historicals.forEach((eachData)=>{
21 | if(dateDiffInDays(eachData.begins_at) <= 31){
22 | data.push(eachData);
23 | }
24 | })
25 | }
26 | else if(selectedButtonName === "3M"){
27 | historicals.forEach((eachData)=>{
28 | if(dateDiffInDays(eachData.begins_at) <= 92){
29 | data.push(eachData);
30 | }
31 | })
32 | }
33 | else {
34 | data = historicals;
35 | }
36 |
37 | let displayBlock = null;
38 | if(selectedButtonName === "1D"){
39 | displayBlock = (
40 | - reorderLocalList(index, list)}
129 | moveList={this.moveList}
130 | findList={this.findList}
131 | reorderLocalLists={reorderLocalLists}
132 | deleteLocalListFolder={()=>deleteLocalListFolder(index)}
133 | renameLocallistFolder={(name)=>renameLocallistFolder(index, name)}
134 | instruments={instruments}
135 | noDuplicateName={this.noDuplicateName}
136 | />
137 | )
138 | })}
139 |
41 |
72 | );
73 | }
74 | else if(data[0]) {
75 | let firstDayPrice = data[0].adjusted_open_equity || data[0].close_price ;
76 | //let lastDayPrice = data[data.length-1].close_price || data[data.length-1].adjusted_open_equity;
77 | console.log(last_trade_price);
78 | console.log(data[0]);
79 | displayBlock = (
80 | 42 | Number(previous_close))? 44 | "greenUp" 45 | : 46 | (Number(last_trade_price).toFixed(2) === Number(previous_close))? 47 | "whiteNomove":"redDown" 48 | }> 49 | { (Number(last_trade_price) - Number(previous_close) >0)? '+' : (Number(last_trade_price) - Number(previous_close) < 0)? '-' : ''} 50 | { 'US$' } 51 | { Math.abs((Number(last_trade_price) - Number(previous_close)).toFixed(2)) } 52 | { ' (' } 53 | { displayPercentage(last_trade_price, previous_close) } 54 | { ')' } 55 | 56 | 57 | { ` ${printDateOnly(updated_at)}` } 58 | 59 |
60 | { (last_extended_hours_trade_price)? ( 61 |62 | { (Number(last_extended_hours_trade_price) - Number(last_trade_price) >0)? '+' : (Number(last_extended_hours_trade_price) - Number(last_trade_price) < 0)? '-' : ''} 63 | { 'US$' } 64 | { Math.abs((Number(last_extended_hours_trade_price) - Number(last_trade_price)).toFixed(2)) } 65 | { ' (' } 66 | { displayPercentage(Number(last_extended_hours_trade_price)-Number(last_trade_price)+Number(previous_close), previous_close) } 67 | { `) After Hours` } 68 |
69 | ): null 70 | } 71 |81 | Number(firstDayPrice))? 83 | "greenUp" 84 | : 85 | (Number(last_trade_price).toFixed(2) === Number(firstDayPrice))? 86 | "whiteNomove":"redDown" 87 | }> 88 | { (Number(last_trade_price) - Number(firstDayPrice) >0)? '+' : (Number(last_trade_price) - Number(firstDayPrice) < 0)? '-' : ''} 89 | { 'US$' } 90 | { Math.abs((Number(last_trade_price) - Number(firstDayPrice)).toFixed(2)) } 91 | { ' (' } 92 | { displayPercentage(last_trade_price, firstDayPrice) } 93 | { ')' } 94 | 95 | 96 | { ` Past ${ 97 | (selectedButtonName === "1W")? "Week" : 98 | (selectedButtonName === "1M")? "Month" : 99 | (selectedButtonName === "3M")? "3M" : 100 | (selectedButtonName === "1Y")? "Year" : 101 | "5 Years" 102 | }` } 103 | 104 |
105 | ); 106 | } 107 | 108 | 109 | 110 | return ( 111 |
112 | { displayBlock }
113 |
114 | )
115 | }
116 | }
117 |
118 | export default HistoryPriceDisplay
119 | /*
120 |
121 | */
122 |
--------------------------------------------------------------------------------
/src/components/Orders.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import Modal from 'react-modal'
3 | import OrderDetail from './OrderDetail'
4 | import { capFirst, printDate } from '../utils'
5 | import '../styles/Orders.css'
6 |
7 | const customStyles = {
8 | content : {
9 | top : '50px',
10 | backgroundColor : 'black',
11 | textAlign : 'center',
12 | padding : '0px',
13 | border : '0px solid black',
14 | overflowY : 'auto'
15 | },
16 | overlay :{ zIndex: 999 }
17 | };
18 |
19 | class Orders extends Component {
20 | static propTypes = {
21 | historicalsOrders: PropTypes.array.isRequired,
22 | historicalsOrdersNextLink: PropTypes.string.isRequired,
23 | isAskingCurrentOrder: PropTypes.bool.isRequired,
24 | currentOrder: PropTypes.object.isRequired,
25 | currentOrderFailedReason: PropTypes.string.isRequired,
26 | instruments: PropTypes.object.isRequired,
27 | addMoreHistoricalsOrder: PropTypes.func.isRequired,
28 | askCurrentOrder: PropTypes.func.isRequired,
29 | cancelCurrentOrderState: PropTypes.string.isRequired,
30 | forInstrument: PropTypes.bool.isRequired
31 | }
32 |
33 | constructor(props) {
34 | super(props);
35 | this.state = { modalIsOpen: false };
36 | }
37 |
38 | closeModal = () => {
39 | this.setState({ modalIsOpen: false });
40 | }
41 |
42 | openModalAndAskCurrentOrder = (orderId) => {
43 | this.props.askCurrentOrder(orderId);
44 | this.setState({ modalIsOpen: true });
45 | }
46 |
47 | typeName = (trigger, type) => {
48 | let typeName = ""
49 | if(trigger === "immediate" && type === "market") {typeName="Market"}
50 | else if(trigger === "immediate" && type === "limit") {typeName="Limit"}
51 | else if(trigger === "stop" && type === "market") {typeName="Stop Loss"}
52 | else if(trigger === "stop" && type === "limit") {typeName="Stop Limit"}
53 |
54 | return typeName;
55 | }
56 |
57 | render() {
58 | const { historicalsOrders, historicalsOrdersNextLink,
59 | isAskingCurrentOrder, currentOrder, currentOrderFailedReason,
60 | forInstrument, instruments,
61 | addMoreHistoricalsOrder, cancelOrder, cancelCurrentOrderState
62 | } = this.props
63 |
64 |
65 |
66 | let recentOrders = historicalsOrders.map((order, i)=>{
67 | if(!instruments[order.instrument]) {
68 | return null;
69 | }
70 | return (
71 | this.openModalAndAskCurrentOrder(order.id)} >
72 |
86 | )
87 | })
88 |
89 | return (
90 |
73 | {((forInstrument)? "" : instruments[order.instrument].symbol+": ")+this.typeName(order.trigger, order.type)+" "+capFirst(order.side)}
74 |
78 |
75 | {printDate(order.updated_at)}
76 |
77 |
79 | {(order.state === "filled")?
80 | "$"+(Number(order.quantity) * Number(order.average_price)).toFixed(2)
81 | : (order.state === "unconfirmed" || order.state === "confirmed")?
82 | "Placed" :
83 | capFirst(order.state)}
84 |
85 |
91 |
109 |
118 |
119 | )
120 | }
121 | }
122 |
123 | export default Orders
124 |
--------------------------------------------------------------------------------
/src/actions/action_quotes.js:
--------------------------------------------------------------------------------
1 | ////////////QUOTES
2 | export const ADD_HIS_QUOTES = 'ADD_HIS_QUOTES'
3 | export const DELETE_HIS_QUOTES = 'DELETE_HIS_QUOTES'
4 | export const ADD_QUOTE = 'ADD_QUOTE'
5 | export const DELETE_QUOTE = 'DELETE_QUOTE'
6 | export const ADD_MULTIPLE_QUOTES = 'ADD_MULTIPLE_QUOTES'
7 |
8 | export const addHistoricalsQuotes = (symbol, hisType, quotes) => ({
9 | type: ADD_HIS_QUOTES,
10 | symbol,
11 | hisType,
12 | quotes
13 | })
14 |
15 | export const deleteHistoricalsQuotes = (symbolHisType) => ({
16 | type: DELETE_HIS_QUOTES,
17 | symbolHisType
18 | })
19 |
20 | export const askHistoricalsQuotes = (symbol, span, interval, bounds) => (dispatch, getState) => {
21 | //check if already requested on sameday
22 | if( span !== "day" && getState().quotesReducer.historicalsQuotes[ symbol+span+interval+bounds ] ){
23 | if( getState().quotesReducer.historicalsQuotes[symbol+span+interval+bounds].timestamp === (new Date()).toISOString().substring(0, 10) ){
24 | return;
25 | }
26 | }
27 |
28 | return fetch(`https://api.robinhood.com/quotes/historicals/${symbol}/?span=${span}&interval=${interval}&bounds=${bounds}`, {
29 | method: 'GET',
30 | headers: new Headers({
31 | 'Accept': 'application/json',
32 | 'Authorization': getState().tokenReducer.token
33 | })
34 | })
35 | .then(response => response.json())
36 | .then(jsonResult => {
37 | //parse string to number
38 | //open_price, close_price, high_price, low_price
39 | jsonResult.historicals.forEach((historical, index, theArray)=>{
40 | theArray[index].open_price= Number(historical.open_price);
41 | theArray[index].close_price= Number(historical.close_price);
42 | theArray[index].high_price= Number(historical.high_price);
43 | theArray[index].low_price= Number(historical.low_price);
44 | //custom
45 | theArray[index].not_reg_close_price = Number(historical.close_price);
46 | theArray[index].reg_close_price= (historical.session !== "reg")? undefined : Number(historical.close_price);
47 | })
48 |
49 | //add timestamp so dont need to request everytime
50 | jsonResult.timestamp = (new Date()).toISOString().substring(0, 10);
51 | dispatch(addHistoricalsQuotes(symbol, span+interval+bounds, jsonResult));
52 | })
53 | .catch(function(reason) {
54 | console.log(reason);
55 | });
56 | }
57 |
58 | export const addQuote = (symbol, quote) => ({
59 | type: ADD_QUOTE,
60 | symbol,
61 | quote
62 | })
63 |
64 | export const deleteQuote = (symbol) => ({
65 | type: DELETE_QUOTE,
66 | symbol
67 | })
68 |
69 | export const askQuote = (symbol) => (dispatch, getState) => {
70 |
71 | return fetch(`https://api.robinhood.com/quotes/${symbol}/`, {
72 | method: 'GET',
73 | headers: new Headers({
74 | 'Accept': 'application/json',
75 | 'Authorization': getState().tokenReducer.token
76 | })
77 | })
78 | .then(response => response.json())
79 | .then(jsonResult => {
80 | dispatch(addQuote(symbol, jsonResult));
81 | })
82 | .catch(function(reason) {
83 | console.log(reason);
84 | });
85 | }
86 |
87 | export const addMultipleQuotes = (quotesArray) => ({
88 | type: ADD_MULTIPLE_QUOTES,
89 | quotesArray
90 | })
91 |
92 | export const askMultipleQuotes = () => (dispatch, getState) => {
93 | let symbolArray = Object.keys(getState().instrumentsReducer.instruments).map((instrumentKey)=>{
94 | return getState().instrumentsReducer.instruments[instrumentKey].symbol;
95 | });
96 | if(symbolArray.length === 0) {
97 | return;
98 | }
99 |
100 | return fetch(`https://api.robinhood.com/quotes/?symbols=${symbolArray.join(',')}`, {
101 | method: 'GET',
102 | headers: new Headers({
103 | 'Accept': 'application/json',
104 | 'Authorization': getState().tokenReducer.token
105 | })
106 | })
107 | .then(response => response.json())
108 | .then(jsonResult => {
109 | if(jsonResult.results){
110 | dispatch(addMultipleQuotes(jsonResult.results));
111 | }
112 | })
113 | .catch(function(reason) {
114 | console.log(reason);
115 | });
116 | }
117 |
118 | export const cleanUpQuotes = () => (dispatch, getState) => {
119 | Object.keys(getState().quotesReducer.quotes).forEach((symbol) => {
120 | if(getState().tabsReducer.keys.indexOf(symbol) === -1) {
121 | dispatch(deleteQuote(symbol));
122 | }
123 | });
124 |
125 | //delet his quotes
126 | Object.keys(getState().quotesReducer.historicalsQuotes).forEach((symbolHisType) => {
127 | for(let i=0; i
92 | {(historicalsOrders.length > 0)? recentOrders : "No Orders"}
93 |
94 | {(historicalsOrdersNextLink)? (
95 |
96 |
99 |
100 | ) : null}
101 |
56 | {connectDragSource(
57 |
81 | {list.map((card, i) => {
82 | return (
83 |
94 |
95 | ));
96 | }
97 | }
98 |
99 | const listSource = {
100 | canDrag(props, monitor) {
101 | /*
102 | if(props.id === "default") {
103 | return false;
104 | }
105 | */
106 | return true;
107 | },
108 |
109 | beginDrag(props) {
110 | return {
111 | id: props.id,
112 | originalIndex: props.findList(props.id).index,
113 | lastIndex: props.findList(props.id).index,
114 | type: 'LIST'
115 | };
116 | },
117 |
118 | endDrag(props, monitor) {
119 | const { id: droppedId, originalIndex, lastIndex } = monitor.getItem();
120 | const didDrop = monitor.didDrop();
121 |
122 | if (!didDrop) {
123 | props.moveList(droppedId, originalIndex);
124 | }
125 |
126 | props.reorderLocalLists(originalIndex, lastIndex);
127 | },
128 | };
129 |
130 | const cardListTarget = {
131 | canDrop(props, monitor) {
132 | const { type } = monitor.getItem();
133 | if(type === "LIST"){
134 | return false;
135 | }
136 | return true;
137 | },
138 |
139 | hover(props, monitor) {
140 | const { id: draggedId, type } = monitor.getItem();
141 | const { id: overId } = props;
142 | /////// props.id === "default"
143 | if(type === "CARD" ) {
144 | return;
145 | }
146 |
147 | if (draggedId !== overId) {
148 | const { index: overIndex } = props.findList(overId);
149 | props.moveList(draggedId, overIndex);
150 | monitor.getItem().lastIndex = overIndex;
151 | }
152 | },
153 |
154 | drop(props, monitor, component ) {
155 | const { id } = props;
156 | const sourceObj = monitor.getItem();
157 |
158 | if(sourceObj.type === "LIST") {
159 | return;
160 | }
161 |
162 | if ( id !== sourceObj.listId ) component.pushCard(sourceObj.card);
163 | return {
164 | listId: id
165 | };
166 | }
167 | };
168 |
169 | export default flow([
170 | DropTarget(["CARD", "LIST"], cardListTarget, (connect, monitor) => ({
171 | connectDropTarget: connect.dropTarget(),
172 | isOver: monitor.isOver(),
173 | canDrop: monitor.canDrop()
174 | })),
175 | DragSource("LIST", listSource, (connect, monitor) => ({
176 | connectDragSource: connect.dragSource(),
177 | connectDragPreview: connect.dragPreview(),
178 | isDragging: monitor.isDragging(),
179 | }))
180 | ])(List);
181 |
--------------------------------------------------------------------------------
/src/actions/action_watchlists.js:
--------------------------------------------------------------------------------
1 | import { askInstrument } from './action_instruments'
2 | import { addLocalWatchlists, addLocalWatchlist, removeLocalWatchlist } from './action_local'
3 | ////////////WATCHLISTS
4 | export const ADD_WATCHLISTS = 'ADD_WATCHLISTS'
5 | export const ADD_MORE_WATCHLISTS = 'ADD_MORE_WATCHLISTS'
6 | export const ADD_WATCHLIST = 'ADD_WATCHLIST'
7 | export const DELETE_WATCHLISTS = 'DELETE_WATCHLISTS'
8 | export const REMOVE_FROM_WATCHLISTS = 'REMOVE_FROM_WATCHLISTS'
9 | export const REMOVE_WATCHLIST = 'REMOVE_WATCHLIST'
10 | export const ASKING_WATCHLISTS = 'ASKING_WATCHLISTS'
11 | export const ASKING_WATCHLISTS_FAILED = 'ASKING_WATCHLISTS_FAILED'
12 |
13 | export const askingWatchlistsFailed = (error) => ({
14 | type: ASKING_WATCHLISTS_FAILED,
15 | error
16 | })
17 |
18 | export const askingWatchlists = () => ({
19 | type: ASKING_WATCHLISTS
20 | })
21 |
22 | export const addWatchlists = watchlists => ({
23 | type: ADD_WATCHLISTS,
24 | watchlists
25 | })
26 |
27 | export const addMoreWatchlists = watchlists => ({
28 | type: ADD_MORE_WATCHLISTS,
29 | watchlists
30 | })
31 |
32 | export const addWatchlist = watchlist => ({
33 | type: ADD_WATCHLIST,
34 | watchlist
35 | })
36 |
37 | export const deleteWatchlists = () => ({
38 | type: DELETE_WATCHLISTS
39 | })
40 |
41 | export const askWatchlists = (...theArgs) => (dispatch, getState) => {
42 | let link = (theArgs.length === 0)? "https://api.robinhood.com/watchlists/Default/" : theArgs[0];
43 | dispatch(askingWatchlists());
44 | return fetch(link, {
45 | method: 'GET',
46 | headers: new Headers({
47 | 'Accept': 'application/json',
48 | 'Authorization': getState().tokenReducer.token
49 | })
50 | })
51 | .then(response => response.json())
52 | .then(jsonResult => {
53 | if(jsonResult.hasOwnProperty("results")){
54 | if(theArgs.length === 0){
55 | dispatch(addWatchlists(jsonResult.results));
56 | dispatch(addLocalWatchlists(jsonResult.results.map((instrument)=>{
57 | return instrument.instrument
58 | })));
59 | jsonResult.results.forEach((instrument)=>{
60 | if(!getState().instrumentsReducer.instruments[instrument.instrument]){
61 | dispatch(askInstrument(instrument.instrument));
62 | }
63 | });
64 | }
65 | else {
66 | console.log("more watchlists!")
67 | dispatch(addMoreWatchlists(jsonResult.results));
68 | if( !jsonResult.next ){
69 | dispatch(addLocalWatchlists([...getState().watchlistsReducer.watchlists, ...jsonResult.results].map((instrument)=>{
70 | return instrument.instrument
71 | })));
72 | }
73 | jsonResult.results.forEach((instrument)=>{
74 | if(!getState().instrumentsReducer.instruments[instrument.instrument]){
75 | dispatch(askInstrument(instrument.instrument));
76 | }
77 | });
78 | }
79 |
80 | if(jsonResult.next){
81 | dispatch(askWatchlists(jsonResult.next));
82 | }
83 | }
84 | else {
85 | dispatch(askingWatchlistsFailed("something not right"));
86 | }
87 | })
88 | .catch(function(reason) {
89 | console.log(reason);
90 | dispatch(askingWatchlistsFailed(reason));
91 | });
92 | }
93 |
94 | export const addToWatchlists = (instrumentSymbol) => (dispatch, getState) => {
95 | var form = new FormData();
96 | form.append('symbols', instrumentSymbol);
97 |
98 | return fetch(`https://api.robinhood.com/watchlists/Default/bulk_add/`, {
99 | method: 'POST',
100 | headers: new Headers({
101 | 'Accept': 'application/json',
102 | 'Authorization': getState().tokenReducer.token
103 | }),
104 | body: form
105 | })
106 | .then(response => response.json())
107 | .then(jsonResult => {
108 | if(jsonResult[0].created_at){
109 | dispatch(addWatchlist(jsonResult[0]));
110 | dispatch(addLocalWatchlist(jsonResult[0].instrument));
111 | }
112 | })
113 | .catch(function(reason) {
114 | console.log(reason);
115 | });
116 | }
117 |
118 | export const removeInstrumentInWatchlist = instrumentIndex => ({
119 | type: REMOVE_WATCHLIST,
120 | instrumentIndex
121 | })
122 |
123 | export const removeWatchlist = (instrumentId) => (dispatch, getState) => {
124 | let tempWatchlists = getState().watchlistsReducer.watchlists.slice(0);
125 | let instrument = `https://api.robinhood.com/instruments/${instrumentId}/`;
126 | let instrumentIndex = -1;
127 |
128 | for(let i=0; i
58 |
59 | {(listName === "default")? (
60 | capFirst(listName)
61 | ) : (
62 |
73 | {(listName === "default")? null : (
74 |
77 | )}
78 |
79 | )}
80 |
59 | {(listName === "default")? (
60 | capFirst(listName)
61 | ) : (
62 |
73 | {(listName === "default")? null : (
74 |
77 | )}
78 | NOTHING HERE
117 |
122 |
163 |
123 |
124 | `${name}`}
134 | >
135 | {
136 | chartData.map((entry, index) => (
137 | |
138 | ))
139 | }
140 | |
141 | }
144 | />
145 |
146 |
147 |
148 |
149 |
162 |
150 |
153 | {(goldUsed)? "Portfolio" : "Stocks" }
151 | {(account.type === "cash" || !goldUsed)? `$${Number(market_value).toFixed(2)}` : `$${equity}`}
152 |
154 |
157 | {`${cashName}`}
155 | {`$${Number(cashValue).toFixed(2)}`}
156 |
158 |
161 | Total market value
159 | {(account.type === "cash" || !goldUsed)? `$${equity}` : `$${Number(market_value).toFixed(2)}`}
160 |