From 0bc016030ebfaefd8b6b47ab41083e8235249b31 Mon Sep 17 00:00:00 2001
From: Paul Gamble <pgamble@gmail.com>
Date: Sun, 28 Apr 2019 22:32:03 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9A=97=20=20-=20trying=20to=20pass=20provide?=
 =?UTF-8?q?rData=20to=20Dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 #94
---
 client/src/App.js                      | 27 +--------
 client/src/components/Dashboard.js     | 81 ++++++++------------------
 client/src/components/header.js        |  1 -
 client/src/components/widgets/CalHM.js | 28 +++++++++
 4 files changed, 54 insertions(+), 83 deletions(-)
 create mode 100644 client/src/components/widgets/CalHM.js

diff --git a/client/src/App.js b/client/src/App.js
index ea28ec3..80ee279 100644
--- a/client/src/App.js
+++ b/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>
         }   
diff --git a/client/src/components/Dashboard.js b/client/src/components/Dashboard.js
index 26339f6..b80f78f 100644
--- a/client/src/components/Dashboard.js
+++ b/client/src/components/Dashboard.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import axios from 'axios';
 import NewHabit from './NewHabit';
 import CheckIn from './check-in';
@@ -7,30 +6,25 @@ 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>
         );
diff --git a/client/src/components/header.js b/client/src/components/header.js
index 6bc46d7..a356987 100644
--- a/client/src/components/header.js
+++ b/client/src/components/header.js
@@ -25,7 +25,6 @@ const Header = (props) => (
                 <h1>Habit Tracker</h1>
             </header>
         }
-
     </div>
 );  
 
diff --git a/client/src/components/widgets/CalHM.js b/client/src/components/widgets/CalHM.js
new file mode 100644
index 0000000..7fbd788
--- /dev/null
+++ b/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;
\ No newline at end of file