Change background color on interval

2 files changed, 38 insertions, 9 deletions

diff --git a/projects/3-realtime-stocks/src/app.js b/projects/3-realtime-stocks/src/app.js
index f06cc8e..b47b543 100644
--- a/projects/3-realtime-stocks/src/app.js
+++ b/projects/3-realtime-stocks/src/app.js
@@ -3,15 +3,33 @@ import { Stock } from './stock'
 import { StockDataProvider } from './stock-data'
 import './app.css'
 
+// https://stackoverflow.com/questions/1484506/random-color-generator
+// thnx internet
+const getRandomColor = () => {
+  let letters = '0123456789ABCDEF'
+  let color = '#'
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)]
+  }
+  return color
+}
+
 export class App extends Component {
-  // Make a new instance of our data provider
-  provider = new StockDataProvider()
+  // Make a new instance of our data provider.
+  // This is an excellent place to "inject" any
+  // dependencies required by StockDataProvider
+  provider = new StockDataProvider('Super secret API key')
   // Set our initial state (empty array)
-  state = { data: [] }
+  state = { data: [], backgroundColor: '#ffffff' }
   // When our component "mounts" on the page,
   // we should subscribe to our data
   componentDidMount() {
-    this.sub = this.provider.subscribeToStockData(1000, data => {
+    this.interval = setInterval(() => {
+      this.setState({ backgroundColor: getRandomColor() })
+    }, 3 * 1000)
+    // Store the the object returned from here
+    // so we can unsubscribe later
+    this.sub = this.provider.subscribeToStockData(3 * 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
@@ -23,11 +41,18 @@ export class App extends Component {
     if (this.sub) {
       this.sub.unsubscribe()
     }
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
   }
   render() {
     return (
       <main>
-        <Stock label="AAPL" data={this.state.data} />
+        <Stock
+          label="AAPL"
+          data={this.state.data}
+          backgroundColor={this.state.backgroundColor}
+        />
       </main>
     )
   }
diff --git a/projects/3-realtime-stocks/src/stock.js b/projects/3-realtime-stocks/src/stock.js
index 612033a..af9d4e4 100644
--- a/projects/3-realtime-stocks/src/stock.js
+++ b/projects/3-realtime-stocks/src/stock.js
@@ -35,14 +35,14 @@ export const charJsConfig = {
 // Take our data and transform it
 // the format required by chart.js.
 // We also mix in some color options
-export function normalizeData(data, label) {
+export function normalizeData(data, label, backgroundColor) {
   return {
     datasets: [
       {
         label,
         data: data.map(k => ({ x: k.datetime, y: k.value })),
         pointBackgroundColor: CHART_POINT_COLOR,
-        backgroundColor: CHART_BACKGROUND_COLOR
+        backgroundColor
       }
     ]
   }
@@ -53,12 +53,16 @@ export function normalizeData(data, label) {
 // we need. State is managed by this components parent,
 // and then passed down as props
 export function Stock(props) {
-  const normalizedData = normalizeData(props.data, props.label)
+  const normalizedData = normalizeData(
+    props.data,
+    props.label,
+    props.backgroundColor
+  )
   // don't return a component if we're
   // missing the required data prop
-  console.log(props.data)
   return props.data ? (
     <section>
+      <figcaption>💵trillion💰</figcaption>
       <LineChart data={normalizedData} options={charJsConfig} />
     </section>
   ) : null