Clap shows wtfCounts

plazma-prizma · Dec 21, 2017 · 4d94890 · 4d94890
1 parent c9f2164
commit 4d94890
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 17 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import logo from './logo.svg';
 import './components/App.css';
 import firebase from 'firebase'
 import YoutubePlayer from './components/youtube-player'
@@ -10,23 +9,24 @@ require("firebase/firestore");
 
 var wtfApp = firebase.initializeApp(config);
 
-// You can retrieve services via the defaultApp variable...
-var defaultStorage = wtfApp.storage();
-var defaultDatabase = wtfApp.database();
-
-// ... or you can use the equivalent shorthand notation
-defaultStorage = firebase.storage();
-defaultDatabase = firebase.database();
-
-// Initialize Cloud Firestore through Firebase
-var db = firebase.firestore();
+// // You can retrieve services via the defaultApp variable...
+// var defaultStorage = wtfApp.storage();
+// var defaultDatabase = wtfApp.database();
+//
+// // ... or you can use the equivalent shorthand notation
+// defaultStorage = firebase.storage();
+// defaultDatabase = firebase.database();
+//
+// // Initialize Cloud Firestore through Firebase
+// var db = firebase.firestore();
 
 class App extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
             data: [],
+            video: {},
             index: 0,
             wtfCount: 0,
             videoMode: false
@@ -79,15 +79,14 @@ class App extends Component {
         const index = this.state.index;
         const length = this.state.data.length;
         let randomIndex = Math.floor(Math.random() * length);
-
-        this.setState({videoMode: true, index: randomIndex})
+        //this.state.data[randomIndex].wtfCount
+        this.setState({videoMode: true, index: randomIndex, wtfCount: 11})
     }
 
     openingContent = () => {
         return (
             <div>
                 <h1 className="App-title">WHAT THE FUCK DID I JUST WATCH</h1>
-                <ClapAdapter/>
             </div>
         )
     }
@@ -99,10 +98,12 @@ class App extends Component {
                 <div className="App">
                     <header className="App-header">
                         {!this.state.videoMode && this.openingContent()}
-                        {/*data &&
+                        {data &&
                         <YoutubePlayer videoId={data.url} onEnd={this._onEnd}
-                                       onPause={this._onPause} onReady={this._onReady}/>*/}
+                                       onPause={this._onPause} onReady={this._onReady}/>}
                     </header>
+                    {this.state.videoMode && <ClapAdapter wtfCount={this.state.wtfCount}
+                                                          onWtfButtonClick={this.onWtfButtonClick}/>}
                 </div>
             </div>
         );

diff --git a/src/components/clap/clap.js b/src/components/clap/clap.js
@@ -11,7 +11,7 @@ class ClapAdapter extends Component {
         super(props)
         this.state = {
             count: 0,
-            countTotal: this._generateRandomNumber(500,10000),
+            countTotal: props.wtfCount,//this._generateRandomNumber(500,10000),
             isClicked: false,
         }
         this._handleClick = this._handleClick.bind(this);
@@ -93,6 +93,11 @@ class ClapAdapter extends Component {
         return Math.floor(Math.random()*(max-min+1)+min)
     }
 
+    componentWillReceiveProps(nextProps){
+        if(this.props !== this.nextProps){
+            this.setState({countTotal:nextProps.wtfCount});
+        }
+    }
 
     _handleClick () {
         this._animationTimeline.replay()
@@ -103,6 +108,7 @@ class ClapAdapter extends Component {
                 isClicked: true
             }
         })
+        this.props.onWtfButtonClick();
     }
 
     render() {