⚗ - finally passing data correctly, async issue

I was having a hell of time trying to pass the user's email to componentDidMount... after a lengthy post on Stackoverflow https://stackoverflow.com/questions/55904459/passing-props-to-componentdidmount finally got and answer. Will re-add all the code I removed for testing. chingu-voyages#94
paulywill · Apr 29, 2019 · 80819c3 · 80819c3
1 parent c8697d1
commit 80819c3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 107 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -28,8 +28,7 @@ class App extends Component {
   state = {
     isSignedIn: undefined,
     displayName: undefined,
-    email: undefined,
-    photoURL: undefined,
+    email: undefined
   };
 
 
@@ -48,7 +47,9 @@ class App extends Component {
       this.setState({ isSignedIn: !!user });
       //User is signed in.
       console.info('User is signed in.');
-      this.setState({providerData: user.providerData})   
+      this.setState({providerData: user.providerData}) 
+      this.setState({ displayName: user.providerData[0].displayName })  
+      this.setState({ email: user.providerData[0].email })   
     });
   }
 
@@ -75,7 +76,9 @@ class App extends Component {
           //Signed in
           <div className={styles.signedIn} id="content-wrap">
             <Header providerData={this.state.providerData} />
-            <Dashboard providerData={this.state.providerData} />
+            <Dashboard 
+              displayName={this.state.displayName} 
+              email={this.state.email} />
             <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>
             <Footer /> 
           </div>

diff --git a/client/src/components/Dashboard.js b/client/src/components/Dashboard.js
@@ -1,114 +1,23 @@
 import React, { Component } from 'react';
-import axios from 'axios';
-import NewHabit from './NewHabit';
-import CheckIn from './check-in';
-import CurrentHabit from './CurrentHabit';
-import Progress from './Progress';
+
 
 class Dashboard extends Component {
-
-    state = {
-        providerData: this.props.providerData,
-        newEntry: false,
-        newEntryButton: true,
-        habitData: [],
-        hamburgerOpen: false,
-        checkIn: false,
-        habitExist: false,
-    };
+
 
-
-    componentDidMount = () => {
-       /*
-        this.setState({ user: user[0].email })
- 
-        const user = this.state.providerData
-        this.setState({ user: user[0].email })
-      
-        axios.get('/api/habits/first-habit/' + user[0].email)
-            .then(res => 
-                this.setState({ habitData: res.data.data }, () => {
-                    this.state.habitData ? this.setState({newEntry: false, newEntryButton: false, 
-                        habitExist: true}) : this.setState({newEntry: true, newEntryButton: true, habitExist: false})
-                })
-            )
-            .catch(error =>
-                console.log(error)
-            )            
-       */ 
+    componentDidUpdate() {
+        if (this.props.email != undefined && this.props.email) {
+            // Do what you want with email
+            console.log(this.props.email)
         }
-
-
-    /*
-    handleCurrentProviders = providerData => {
-        this.updateProviders(providerData);
-    };
-    */
-
-
-
-    handleNewHabit = () => {
-        this.setState({newEntry: true})
-    }
-    handleNewHabitSubmit = (data) => {
-        this.setState({newEntry: false, habitExist: true, newEntryButton: false, habitData: data});
-    }
-
-    handleCheckInSubmit = () => {
-        this.setState({checkIn: false})
-    }
-
-    //toggle visability of sidebar with Button
-    hamburgerToggle = () => {
-        this.setState((prevState) => ({
-            hamburgerOpen: !prevState.hamburgerOpen
-        }));
-    }
-
-    //open check in form
-    handleCheckIn = () => {
-        this.setState((prevState) => ({
-            checkIn: !prevState.checkIn
-        }))
     }
 
-    render() {
-
-        let newHabitButton = null;
-        if (this.state.newEntryButton){
-            newHabitButton = <button className='habitButton' onClick={this.handleNewHabit} >Create New Habit</button>
-        } else {
-            newHabitButton = null
-        }
-
-        let checkInComp = null;
-        let checkInButton = null;
-        if (this.state.habitExist){
-            checkInComp = <CheckIn checkIn={this.state.checkIn} 
-                    habitId={this.state.habitData._id}
-                    handleCheckIn={this.handleCheckIn} 
-                    handleCheckInSubmit={this.handleCheckInSubmit} />;
-            checkInButton = <button className='habitButton' onClick={this.handleCheckIn}>Check In</button>
-        } else {
-            checkInComp = null;
-            checkInButton = null;
-        }
-
+    render()  {
+        const email = this.props.email
+
         return (
-            <div id="content-wrap">
-
-                <main {...this.state}>
-
-
-                    <h2>Daily Dashboard</h2>
-
-
-
-                    {newHabitButton}
-                    {checkInButton}
-                    <Progress />
-                    <CurrentHabit {...this.state.habitData} />
-                </main>
+            <div>
+                <h1>Hello, {this.props.displayName}!</h1>
+                <h2>Your email is: {email}</h2> 
             </div>
         );
     }