diff options
author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 00:34:51 -0700 |
---|---|---|
committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-11 00:35:35 -0700 |
commit | 3184b63823e768d4a9feaa93a7c7ddafc3ab2980 (patch) | |
tree | 25c4c5d0f646a6946862ba2ff9c9ca0ac0d2170e | |
parent | 2f5c6a4b0d6a0bc92161775d100b3a3dc4597f67 (diff) |
Try and fix path casing
This commit also implements a basic state container for the stock
component
-rw-r--r-- | projects/3-realtime-stocks/src/App.css | 32 | ||||
-rw-r--r-- | projects/3-realtime-stocks/src/App.js | 10 | ||||
-rw-r--r-- | projects/3-realtime-stocks/src/app.css | 8 | ||||
-rw-r--r-- | projects/3-realtime-stocks/src/app.js | 34 |
4 files changed, 42 insertions, 42 deletions
diff --git a/projects/3-realtime-stocks/src/App.css b/projects/3-realtime-stocks/src/App.css deleted file mode 100644 index 92f956e..0000000 --- a/projects/3-realtime-stocks/src/App.css +++ /dev/null @@ -1,32 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/projects/3-realtime-stocks/src/App.js b/projects/3-realtime-stocks/src/App.js deleted file mode 100644 index 272b4a2..0000000 --- a/projects/3-realtime-stocks/src/App.js +++ /dev/null @@ -1,10 +0,0 @@ -import React, { Component } from 'react' -import './app.css' - -class App extends Component { - render() { - return <main /> - } -} - -export default App diff --git a/projects/3-realtime-stocks/src/app.css b/projects/3-realtime-stocks/src/app.css new file mode 100644 index 0000000..ace355d --- /dev/null +++ b/projects/3-realtime-stocks/src/app.css @@ -0,0 +1,8 @@ +main { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + width: 90%; + margin: 0 auto; +} diff --git a/projects/3-realtime-stocks/src/app.js b/projects/3-realtime-stocks/src/app.js new file mode 100644 index 0000000..f06cc8e --- /dev/null +++ b/projects/3-realtime-stocks/src/app.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react' +import { Stock } from './stock' +import { StockDataProvider } from './stock-data' +import './app.css' + +export class App extends Component { + // Make a new instance of our data provider + provider = new StockDataProvider() + // Set our initial state (empty array) + state = { data: [] } + // When our component "mounts" on the page, + // we should subscribe to our data + componentDidMount() { + this.sub = this.provider.subscribeToStockData(1000, data => { + // Each time this callback is fired, + // we modify the state. The rest of the updating + // is handled by react as a result of our state change + this.setState({ data }) + }) + } + // Unsubscribe when the component leaves the page + componentWillUnmount() { + if (this.sub) { + this.sub.unsubscribe() + } + } + render() { + return ( + <main> + <Stock label="AAPL" data={this.state.data} /> + </main> + ) + } +} |