🐛 - added key to list

 chingu-voyages#94

client/src/components/CurrentHabit.js

@@ -16,7 +16,7 @@ const CurrentHabit = ({_id, habit, length, date, smart}) => {
             <p>Habit name: {habit}</p>
             <p>Start date: {startDate}</p>
             <p>Smart habits:</p>
-            <ul>{smart.map(item => <li>{item}</li>)}</ul>
+          <ul>{smart.map(item => <li key={item.toString()}>{item}</li>)}</ul>
             <p>Duration (months): {length} </p>
             <p>Countdown to finish: <Countdown date={endDate} /> </p>
         </div>

client/src/components/Dashboard.js

@@ -1,23 +1,103 @@
 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 = {
+        newEntry: false,
+        newEntryButton: true,
+        habitData: [],
+        hamburgerOpen: false,
+        checkIn: false,
+        habitExist: false,
+    };
 
+
+    //used componentDidUpdate due to async nature of firebase/props
     componentDidUpdate(prevProps) {
         if (this.props.email != undefined && this.props.email !== prevProps.email) {
             // Do what you want with email
-            console.log(this.props.email)
+            const user = this.props.email
+            console.log("email is: " + user)
+
+            axios.get('/api/habits/first-habit/' + user)
+                .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)
+                )
+
         }
     }
 
+    handleNewHabit = () => {
+        this.setState({ newEntry: true })
+    }
+    handleNewHabitSubmit = (data) => {
+        this.setState({ newEntry: false, habitExist: true, newEntryButton: false, habitData: data });
+    }
+
+    handleCheckInSubmit = () => {
+        this.setState({ checkIn: false })
+    }
+
+    //toggle visibility of sidebar with Button
+    hamburgerToggle = () => {
+        this.setState((prevState) => ({
+            hamburgerOpen: !prevState.hamburgerOpen
+        }));
+    }
+
+    //open check in form
+    handleCheckIn = () => {
+        this.setState((prevState) => ({
+            checkIn: !prevState.checkIn
+        }))
+    }
+
     render()  {
-        const email = this.props.email
+        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;
+        }
+
 
         return (
             <div>
-                <h1>Hello, {this.props.displayName}!</h1>
-                <h2>Your email is: {email}</h2> 
+
+                <main>
+                    <h2>Daily Dashboard</h2>
+                    {newHabitButton}
+                    {checkInButton}
+                    <Progress />
+                    <CurrentHabit {...this.state.habitData} />
+                </main>
             </div>
         );
     }