⚗ - trying to pass providerData to Dashboard

 chingu-voyages#94

client/src/App.js

@@ -1,6 +1,5 @@
 // React core.
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 // Firebase.
 import firebase from 'firebase/app';
@@ -14,14 +13,9 @@ import './firebaseui-styling.global.css'; // Import globally.
 //Components
 import Header from './components/Header';
 import Login from './components/Login';
-
-//import HeaderSignedIn from './components/HeaderSignedIn';
 import Footer from './components/Footer';
 import Dashboard from './components/Dashboard';
 
-// Get the Firebase config from the auto generated file.
-// *** REMOVED : just using auth from Firebase
-
 // Instantiate a Firebase app.
 const firebaseApp = firebase.initializeApp({
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
@@ -31,10 +25,6 @@ const firebaseApp = firebase.initializeApp({
 
 class App extends Component {
 
-  static propTypes = {
-    providerData: PropTypes.arrayOf(PropTypes.object).isRequired
-  };
-
   state = {
     isSignedIn: undefined,
     displayName: undefined,
@@ -53,30 +43,19 @@ class App extends Component {
     },
   };
 
-
-  /**
-   * @inheritDoc
-   */
   componentDidMount() {
     this.unregisterAuthObserver = firebaseApp.auth().onAuthStateChanged((user) => {
       this.setState({ isSignedIn: !!user });
       //User is signed in.
       console.info('User is signed in.');
-      this.setState({providerData: user.providerData})
-
-
+      this.setState({providerData: user.providerData})   
     });
   }
 
-  /**
-   * @inheritDoc
-   */
   componentWillUnmount() {
     this.unregisterAuthObserver();
   }
 
-
-
   render() {
     return (
 
@@ -96,8 +75,8 @@ class App extends Component {
           //Signed in
           <div className={styles.signedIn} id="content-wrap">
             <Header providerData={this.state.providerData} />
-            <Dashboard />
-          <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>
+            <Dashboard providerData={this.state.providerData} />
+            <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>
             <Footer /> 
           </div>
         }   

client/src/components/Dashboard.js

@@ -1,36 +1,30 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 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 {
-    static propTypes = {
-        providerData: PropTypes.arrayOf(PropTypes.object).isRequired
-    };
-
-    static defaultProps = {
-        providerData: []
-    };
-
+
     state = {
         providerData: this.props.providerData,
         newEntry: false,
         newEntryButton: true,
         habitData: [],
-        user: '',
+        user: "",
         hamburgerOpen: false,
         checkIn: false,
         habitExist: false,
+        data: [],
     };
 
-    /*
+
     componentDidMount = () => {
-        this.updateProviders(this.state.providerData);
+        /*
         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 }, () => {
@@ -40,53 +34,19 @@ class Dashboard extends Component {
             )
             .catch(error =>
                 console.log(error)
-            )
-
-    }
-
+            )            
+       */ 
+        }
+    
 
+    /*
     handleCurrentProviders = providerData => {
         this.updateProviders(providerData);
     };
-
-    updateProviders = providerData => {
-        let buttonList = { ...this.state.buttonList };
-
-        providerData.forEach(provider => {
-            const providerName = provider.providerId.split('.')[0];
-            buttonList = this.updateButtonList(buttonList, providerName, false);
-        });
-
-        this.setState({ buttonList, providerData });
-    };
-
-    /*
-    handleUnlinkedProvider = (providerName, providerData) => {
-        if (providerData.length < 1) {
-            auth
-                .getAuth()
-                .currentUser.delete()
-                .then(() => console.log('User Deleted'))
-                .catch(() => console.error('Error deleting user'));
-        }
-
-        let buttonList = { ...this.state.buttonList };
-        buttonList = this.updateButtonList(buttonList, providerName, true);
-
-        this.setState({ buttonList, providerData });
-    };
-     
-
-    updateButtonList = (buttonList, providerName, visible) => ({
-        ...buttonList,
-        [providerName]: {
-            ...buttonList[providerName],
-            visible
-        }
-    });
     */
 
 
+
     handleNewHabit = () => {
         this.setState({newEntry: true})
     }
@@ -136,13 +96,18 @@ class Dashboard extends Component {
 
         return (
             <div id="content-wrap">
+
                 <main {...this.state}>
-
-                <h2>Daily Dashboard</h2>
-                {newHabitButton}
-                {checkInButton}
-                <Progress />
-                <CurrentHabit {...this.state.habitData} />
+
+
+                    <h2>Daily Dashboard</h2>
+
+
+
+                    {newHabitButton}
+                    {checkInButton}
+                    <Progress />
+                    <CurrentHabit {...this.state.habitData} />
                 </main>
             </div>
         );

client/src/components/header.js

@@ -25,7 +25,6 @@ const Header = (props) => (
                 <h1>Habit Tracker</h1>
             </header>
         }
-
     </div>
 );  
 

client/src/components/widgets/CalHM.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import CalendarHeatmap from 'react-calendar-heatmap';
+import 'react-calendar-heatmap/dist/styles.css';
+import ReactTooltip from 'react-tooltip';
+
+class CalHM extends Component {
+
+    render() {
+        return (
+            <div>
+                <CalendarHeatmap
+                    startDate={new Date('2019-01-01')}
+                    endDate={new Date('2019-05-01')}
+                    values={[
+                        { date: '2019-04-20' },
+                        { date: '2019-04-21' },
+                        { date: '2016-04-22' },
+                        { date: '2016-04-23' },
+                        // ...and so on
+                    ]}
+                />
+                <ReactTooltip />
+            </div>
+        )
+
+    }
+}
+export default CalHM;