new changes

package.json

@@ -16,12 +16,10 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.1",
     "redux": "^4.0.5",
-
-    "yup": "^0.28.1"
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^5.0.0"
-
+    "styled-components": "^5.0.0",
+    "yup": "^0.28.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,42 +1,37 @@
+import React from "react";
+import { reducer } from "./utils/reducers";
+import { createStore, applyMiddleware } from "redux";
+import { Provider } from "react-redux";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import PrivateRoute from './components/PrivateRoute';
 
-import React from 'react';
-import { reducer } from './utils/reducers'
-import { createStore, applyMiddleware } from 'redux';
-import { Provider } from 'react-redux'
-import { BrowserRouter as Router } from "react-router-dom";
+import SignUpForm from "./components/SignUpForm";
+import SignInForm from "./components/SignInForm";
 
-import SignUpForm from "./Components/SignUpForm"
-import SignInForm from "./Components/SignInForm"
 
-import thunk from 'redux-thunk';
-import logger from 'redux-logger';
 
-import ChartDisplay from './components/ChartDisplay';
-import Header from './components/Header';
 
-import './App.css';
 
-const store = createStore(
-  reducer, 
-  applyMiddleware (thunk, logger)
-)
+import MainPage from "./components/MainPage";
+import Header from "./components/Header";
 
-function App() {
-  return (
-    <Provider store = {store}>
-      <Router>
-      <div className="App">
+import "./App.css";
 
-        <Header />
-        <ChartDisplay />
-        <Chart />
-        <Route exact path="/signup" component={SignUpForm}/> 
-        <Route exact path="/" component={SignInForm}/> 
 
-      </div>
-    </Router>
-    </Provider>
 
+function App() {
+  return (
+    <Router>
+
+        <div className="App">
+          <Header />
+
+          <PrivateRoute exact path="/main-page" component={MainPage} />
+          <Route exact path="/sign-in" component={SignInForm} />
+          <Route exact path="/" component={SignUpForm} />
+        </div>
+
+  </Router>
   );
 }
 

src/Components/SignInForm.js

@@ -1,79 +1,68 @@
 import React, { useState, useEffect } from "react";
-import { withFormik, Form, Field, Formik } from "formik";
-import * as Yup from "yup";
 import axios from "axios";
 import {Link} from "react-router-dom";
+import { login } from '../utils/actions/index';
+import { connect } from 'react-redux';
 
 
 
 
-const SignInForm = ({ values, errors, touched, status })=>{
-//   console.log("values", values);
-//   console.log("errors", errors);
-//   console.log("touched", touched);
-
-    const [users, setUsers] = useState([]);
-
-    useEffect(()=>{
-        console.log("status has changed", status);
-        status && setUsers(users=>[...users, status]);
-    }, [status]);
-
+const SignInForm = (props) => {
+    const [credentials, setCredentials] = useState({
+      email: '',
+      password: '',
+    });
+
+    const handleChange = (event) => {
+      event.preventDefault();
+      setCredentials({
+        ...credentials,
+        [event.target.name]: event.target.value
+      })
+    }
+
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      props.login(credentials);
+      setTimeout(() => {
+        props.history.push('/main-page');
+      }, 800)
+    }
+
     return (
-        <div>
-            <Form>
-                <label htmlFor="email">
-                    Email:
-                    <Field id="email" type="text" name="email" placeholder="enter email here"/>
-                    {touched.email && errors.email && (
-                    <p>{errors.email}</p>
-                    )}
-                </label>
-
-                <label htmlFor="password">
-                    Password: 
-                    <Field id="password" type="text" name="password" placeholder="enter password here"/>
-                    {touched.password && errors.password && (
-                    <p>{errors.password}</p>
-                    )}
-                </label>
-                <button type="submit">Submit!</button>
-                <Link to="/signup"><button>Sign Up</button></Link>
-
-                </Form>
-                {users.map(user=>{
-                    console.log(user)
-                })}
-        </div>
-    );
-};
-
-const FormikUserForm = withFormik({
-    mapPropsToValues(props){
-        return {
-            email: props.email || "",
-            password: props.password || ""
-        };
-    },
-
-    validationSchema: Yup.object().shape({
-        email: Yup.string().required("Email is Required"),
-        password: Yup.string().required("Password is Required"),
-    }),
-    handleSubmit(values, {setStatus, resetForm}){
-        console.log('submitting', values);
-        axios.post("https://reqres.in/api/users", values)
-        .then(response=>{
-            console.log("success", response)
-            setStatus(response.data);
-            resetForm()
-        })
-        .catch(error=> console.log(error.response));
+      <div>
+        <h1>Welcome!</h1>
+        <form onSubmit={handleSubmit}>
+          <input
+            name='email'
+            type='text'
+            placeholder="Email"
+            value={credentials.email}
+            onChange={handleChange}
+            required
+          />
+          <input
+            name='password'
+            type='password'
+            placeholder="Password"
+            value={credentials.password}
+            onChange={handleChange}
+            required
+          />
+          <button type="submit">Log in</button>
+        </form>
+        <Link to='/'><button>Register Here!</button></Link>
+      </div>
+    )
+  }
+
+  const mapStateToProps = state => {
+    return {
+      fetchingData: state.fetchingData,
+      isLoggedIn: state.isLoggedIn,
+      error: state.error,
+      id: state.id
     }
-})(SignInForm);
-
-export default FormikUserForm;
-
-
-
-
+  }
+
+  export default connect(mapStateToProps, { login })(SignInForm);

src/Components/SignUpForm.js

@@ -1,75 +1,104 @@
-import React, { Component} from 'react';
+
+import React, { useState } from 'react';
 import {Link} from "react-router-dom";
 import axios from "axios"
 
+import { register } from "../utils/actions/index";
+import { connect } from "react-redux";
 
-class SignUpForm extends Component{
-    constructor(props){
-    super(props)
-    this.state={
-        firstName:'',
-        lastName:'',
-        email:'',
-        password:'',
-    }
-}
-changeHandler=(e) =>{
-    this.setState({[e.target.name]: e.target.value})  // setting change handler to the "name" attribute. Avoids having to add handler to each input
+
+const SignUpForm = props => {
+console.log("this is props in Signupform", props)
+const initialState = {
+    firstName: "",
+        lastName: "",
+        email: "",
+        password: "",
+    };
+
+
+const [payload, setPayload] = useState(initialState);
+
+
+const changeHandler=(e) =>{
+    setPayload({...payload, [e.target.name]: e.target.value})  // setting change handler to the "name" attribute. Avoids having to add handler to each input
+
 }
 
-submitHandler = e =>{
+const submitHandler = e =>{
     e.preventDefault()
-    console.log(this.state)
-    axios.post("", this.state)// API LINK HERE
-    .then(response=>{
-        console.log(response)
-    })
-    .catch(error=>{
-        console.log("Data didn't post", error)
+    console.log("this is the object", payload)
+    props.history.push("/sign-in");
+    props.register(payload)
+    setPayload({
+      firstName: "",
+      lastName: "",
+      email: "",
+      password: "",
     })
+      // axios.post("https://bw-sleeptracker.herokuapp.com/api/auth/register", this.state)// API LINK HERE
+      // .then(response=>{
+      //     console.log("this is the response from submit", response)
+
+
+      // })
+      // .catch(error=>{
+      //     console.log("Data didn't post", error)
+      // })
 }
-    render(){
-        const {firstName, lastName, email, password} =this.state
-        return(
+    return (
         <div className="field">
-                <form className="form" onSubmit={this.submitHandler}>
+                <form className="form" onSubmit={submitHandler}>
                     <label>New User </label>
 
                     <div>
                         <label>First Name:
-                            <input className="input" type="text" name="firstName" value={firstName} onChange={this.changeHandler} placeholder="Enter First Name here"/>
+                            <input className="input" type="text" name="firstName" value={payload.firstName} onChange={changeHandler} placeholder="Enter First Name here"/>
                         </label>
                     </div>
 
                     <div>
                         <label>Last Name:
-                            <input className="input" type="text" name="lastName"value={lastName} onChange={this.changeHandler} placeholder="Enter Last Name here"/>
+                            <input className="input" type="text" name="lastName"value={payload.lastName} onChange={changeHandler} placeholder="Enter Last Name here"/>
                         </label>
                     </div>
                     <div>
                         <label>Your Email:
-                            <input className="input" type="text" name="email"value={email} onChange={this.changeHandler} placeholder="Enter Email here"/>
+                            <input className="input" type="text" name="email"value={payload.email} onChange={changeHandler} placeholder="Enter Email here"/>
                         </label>
                     </div>
 
                     <div>
                         <label>Password:
-                            <input className="input" type="text" name="password"value={password} onChange={this.changeHandler} placeholder="Enter Password here"/>
+                            <input className="input" type="text" name="password"value={payload.password} onChange={changeHandler} placeholder="Enter Password here"/>
                         </label>
                     </div>
 
-                    <div>
+                    {/* <div>
                         <label>Terms of Service:
                             <input className="input" name="TermsOfService" type="checkbox" onChange={this.changeHandler}/>
                         </label>
                  
-                    </div>
+                    </div> */}
 
-                <button type="submit">Submit</button>
-                <Link to="/"><button>Sign In</button></Link>
+                <button type="submit">Sign-Up!</button>
+                <Link to="/sign-in"><button>Sign In</button></Link>
                 </form>
             </div>
-        )
+    )
+  }
+
+const mapStateToProps = state => {
+    return {
+        data: [{ 
+          email: state.email,
+          name: state.name,
+          password: state.password
+        }]
     }
 }
-export default SignUpForm
+
+export default connect(
+  mapStateToProps,
+  { register }
+)(SignUpForm);

src/components/AddSleepEntry.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+import { AddEntry } from "../utils/actions/index";
+
+const initialFormValues = {
+    date: 0,
+    wakeUpRating: '',
+    dayRating: '',
+    nightRating: '',
+    wokeUp: "",
+    fellAsleep: ""
+
+}
+
+const AddSleepEntry = (props) => {
+    console.log("this is props in add entry", props)
+    const [input, setInput] = useState(initialFormValues)
+
+    const handleInputChange = (event) => {
+        setInput({ ...input, [event.target.name]: event.target.value });
+    };
+}
+
+export default AddSleepEntry;