🎨 - testing NewHabitForm

Following inspiration from https://github.com/hamza-mirza/react-weather-app, making some of our forms statless chingu-voyages#94
paulywill · Apr 29, 2019 · 38f78b6 · 38f78b6
1 parent 233b9b0
commit 38f78b6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/client/src/components/Dashboard.js b/client/src/components/Dashboard.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 
 import NewHabit from './NewHabit';
+import NewHabitForm from './NewHabitForm';
 import CheckIn from './CheckIn';
 import CurrentHabit from './CurrentHabit';
 import Progress from './Progress';
@@ -17,14 +18,6 @@ class Dashboard extends Component {
         habitExist: false
     };
 
-    //open check in form
-    handleCheckIn = () => {
-        this.setState((prevState) => ({
-            checkIn: !prevState.checkIn
-        }))
-    }
-
-
     //used componentDidUpdate due to async nature of firebase/props
     componentDidUpdate(prevProps) {
         if (this.props.email !== undefined && this.props.email !== prevProps.email) {
@@ -55,6 +48,8 @@ class Dashboard extends Component {
         this.setState({ checkIn: false })
     }
 
+
+
     //toggle visibility of sidebar with Button
     hamburgerToggle = () => {
         this.setState((prevState) => ({
@@ -69,13 +64,26 @@ class Dashboard extends Component {
         }))
     }
 
+    //open check in form
+    handleCheckIn = () => {
+        this.setState((prevState) => ({
+            checkIn: !prevState.checkIn
+        }))
+    }
+
     render()  {       
         return (
             <div>           
                 <main>
                     <h1>Hello, {this.props.displayName}!</h1>
                     <p>Have a habit? : {this.state.habitExist.toString()}</p>
-
+                    {/* TESTING FORM  */}
+                    <NewHabitForm />
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                    {/* TESTING FORM  */}
                     {this.state.habitExist && 
                         <div>
                             <button className='habitButton' onClick={this.handleCheckIn}>Check In</button> 
@@ -99,7 +107,12 @@ class Dashboard extends Component {
 
                     <Progress />
                     <CurrentHabit {...this.state.habitData} />
+
+
+
                 </main>
+
+
             </div>
         );
     }

diff --git a/client/src/components/NewHabit.js b/client/src/components/NewHabit.js
@@ -26,12 +26,14 @@ class NewHabit extends Component {
 
     handleSubmit = (event) => {
         event.preventDefault();
-        if (this.state.habit.length > 0 && this.state.length.length > 0 && this.state.intervals.length > 0 && this.state.intervals !== 'select'){
+        console.log((this.state.habit && this.state.length && this.state.intervals && this.state.intervals !== 'select'))
+        if (this.state.habit && this.state.length && this.state.intervals && this.state.intervals !== 'select'){
             this.setState({fieldsValid: true});    
-            const { name, habit, smart, length, intervals, date } = this.state;
-            axios.post('/api/habits/newhabit', { name, habit, smart, length, intervals, date })
+            const { habit, smart, length, intervals, date } = this.state;
+            console.log(this.props.email + { habit, smart, length, intervals, date })
+            axios.post('/api/habits/newhabit', this.props.email + {  habit, smart, length, intervals, date })
                 .then((result) => {
-                  console.log(result.data);
+                    console.log("result.data: " + result.data);
                   this.setState({habitData: result.data})  
                 })
                 .catch((error) => {
@@ -98,23 +100,23 @@ class NewHabit extends Component {
                         </label>
                         <label>
                             Habit:
-                    </label>
+                        </label>
                         <input type='text' name='habit' placeholder="Please enter new habit to be tracked" value={this.state.habit} onChange={this.onChange} />
                         <label>
                             Smart Goals: (OPTIONAL)
-                    </label>
+                        </label>
                         <input type='text' name='smart' placeholder="Please separate goals with commas"
                             value={this.state.smart} onChange={this.onChange} />
 
                         <HabitSubmission handleOkClick={this.handleOkClick} submit={this.state.submit} />
 
                         <label>
                             Length of Time to Track:
-                    </label>
+                        </label>
                         <input type='text' name='length' placeholder="Please enter time in months" value={this.state.length} onChange={this.onLengthChange} />
                         <label>
                             Daily Checkin Intervals:
-                    </label>
+                         </label>
                         <select name='intervals' value={this.state.intervals} onChange={this.onChange}>
                             <option value="select">Select One Option Please</option>
                             <option value="daily">Daily</option>