Response cards

src/App.js

@@ -8,6 +8,8 @@ import Footer from "./components/Footer";
 import base from "./utils/base";
 import RecordWeight from "./components/RecordWeight";
 import "./App.css";
+import WeightResponseCard from "./components/WeightResponseCard";
+import { auth, firebaseApp} from "./utils/base";
 
 library.add(faChevronRight);
 
@@ -22,13 +24,52 @@ class Weight extends Component {
       chartData: null,
       weighins: null,
       showWeightInput: false,
+      showResponseCard: false,
+      weightChangeState: 0,
+      enteredWeight: 0,
       lastTracked: null
     };
 
     this.handleRecordWeightClick = this.handleRecordWeightClick.bind(this);
     this.closeRecordOverlay = this.closeRecordOverlay.bind(this);
   }
 
+  updateWeight() {
+    // In reality it should be something like this:
+    // delta-time = time-of-last-weight-measurement - time-of-current-weight-measurement (get in hours, between 0 and 24)
+    // delta-weight = new weight - last-weight  
+    // allowed-weight-fluctuation = delta-time / 24 *  2.5 KG (= maximum normal weight fluctuation) 
+    // if (abs(delta-weight) < allowed-weight-fluctuation) {
+    //  'nothing to see here' 
+    // else {
+    // positive or negative weight loss  
+    // }
+
+    this.setState({
+      showWeightInput: false
+    })
+
+    const delta = this.state.enteredWeight - this.state.currentWeight;
+    let weightChange = 0;
+
+    if (delta > 0.5) {
+      weightChange = 1;
+    } else if (delta < -0.5) {
+      weightChange = -1;
+    }
+    console.log("weightChange", weightChange);
+
+    this.setState({
+      weightChangeState: weightChange,
+      showResponseCard: true
+    })
+  }
+
+
+  handleWeightChange(event) {
+    this.setState({enteredWeight: event.target.value})
+  }
+
   handleRecordWeightClick() {
     this.setState({
       showWeightInput: true
@@ -41,11 +82,18 @@ class Weight extends Component {
     })
   }
 
+  closeResponseCard() {
+    console.log("closeResponseCard");
+    this.setState({
+      showResponseCard: false,
+    })
+  }
+
   componentDidMount() {
     base
-    .fetch("users/cYzlSenFtBVM5GYsLZsIf1vSsKr2", {
-      context: this,
-      asArray: false
+     .fetch("users/"+auth.currentUser.uid, {
+       context: this,
+       asArray: false
     })
     .then(data => {
       console.log("data", data);
@@ -54,15 +102,46 @@ class Weight extends Component {
         currentWeight: data.weighins[data.weighins.length -1].weight,
         lastTracked: data.weighins[data.weighins.length -1].date
       })
+      .then(data => {
+        this.setState({
+          targetWeight: data.tagetWeight,
+          currentWeight: data.weighins[data.weighins.length - 1].weight
+        })
+      });
+    });
+  }
+
+  componentWillMount() {
+
+    auth.onAuthStateChanged(user => {
+      if (user) {
+        this.setState({
+          authenticated: true,
+          currentUser: user,
+          loading: false
+        });
+      } else {
+        this.setState({
+          authenticated: false,
+          currentUser: null,
+          loading: false
+        });
+      }
     });
   }
 
   render() {
     return (
-      <div className="App"> 
+      <div className="App">
         <Header />
         <div className="home">
           <div className="hero">
+            { this.state.showResponseCard === true ? (
+              <WeightResponseCard weightChangeState={this.state.weightChangeState} closeResponseCard={this.closeResponseCard.bind(this)}/>
+            ) : (
+              null
+            )
+            }
             <Link to={"/weight-summary"}>
               <span>Current weight</span>
               <span>{this.state.currentWeight}</span><span className="unit">kg</span>
@@ -72,12 +151,12 @@ class Weight extends Component {
           </div>
         </div>
         <div>
-        { this.state.showWeightInput === true ? (
-            <RecordWeight currentWeight={this.state.currentWeight} closeRecordOverlay={this.closeRecordOverlay} />
-          ) : 
-          null }
+          {this.state.showWeightInput === true ? (
+            <RecordWeight handleWeightChange={this.handleWeightChange.bind(this)} currentWeight={this.state.currentWeight} closeRecordOverlay={this.closeRecordOverlay.bind(this)} updateWeight={this.updateWeight.bind(this)} />
+          ) :
+            null}
         </div>
-        <Footer handleRecordWeightClick={this.handleRecordWeightClick} showWeightInput={this.state.showWeightInput}  />
+        <Footer handleRecordWeightClick={this.handleRecordWeightClick} showWeightInput={this.state.showWeightInput} />
       </div>
     );
   }

src/PrivateRoute.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+export default function PrivateRoute({
+  component: Component,
+  authenticated,
+  ...rest
+}) {
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        authenticated === true ? (
+          <Component {...props} {...rest} />
+        ) : (
+          <Redirect to="/login" />
+        )
+      }
+    />
+  );
+}

src/WeightResponseCard.css

@@ -0,0 +1,30 @@
+.card-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: white;
+
+}
+
+.response-card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 10px;
+}
+
+img {
+    width: 100%;
+    max-height: 200px;
+}
+
+.close-button {
+    margin: 40px;
+    border: 2px solid #484ea7;
+    color: #484ea7;
+    background: white;
+}

src/components/Login/LoginView.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+const LoginView = ({ onSubmit }) => {
+  return (
+    <div>
+      <h1>Log In</h1>
+      <form onSubmit={onSubmit}>
+        <label className="label">
+          Email
+          <input
+            name="email"
+            type="email"
+            placeholder="Email"
+          />
+        </label>
+        <label>
+          Password
+          <input
+            name="password"
+            type="password"
+            placeholder="Password"
+          />
+        </label>
+        <button type="submit">Log In</button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginView;

src/components/Login/index.js

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import { withRouter } from "react-router";
+import { auth, firebaseApp} from "../../utils/base";
+
+import LoginView from "./LoginView";
+
+class LoginContainer extends Component {
+  handleLogin = async event => {
+    event.preventDefault();
+    const { email, password } = event.target.elements;
+    try {
+      const user = await auth
+        .signInWithEmailAndPassword(email.value, password.value);
+      this.props.history.push("/");
+      console.log("Logging in")
+    } catch (error) {
+      alert(error);
+    }
+  };
+
+  render() {
+    return <LoginView onSubmit={this.handleLogin} />;
+  }
+}
+
+export default withRouter(LoginContainer);

src/components/RecordWeight.js

@@ -6,6 +6,7 @@ import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 library.add(faCalendar);
 
 class RecordWeight extends Component {
+
   render() {
     return (
       <div className="overlay pa3">
@@ -14,7 +15,7 @@ class RecordWeight extends Component {
         </div>
         <div className="form-group center pa3 hidden ba mv3">
           <div className="form-input">
-            <input className="data-input" type="number" />
+            <input className="data-input" type="number" onInput={this.props.handleWeightChange}/>
             <span className="input-units">kg</span>
           </div>
             <div>
@@ -36,7 +37,7 @@ class RecordWeight extends Component {
           </div>
         </div>
         <div className="tc mv4">
-          <button className="button">Add Entry</button>
+          <button className="button" onClick={this.props.updateWeight}>Add Entry</button>
         </div>
         <div className="overlay__footer pa3 tc">
           <button onClick={this.props.closeRecordOverlay} className="button button--icon">×</button>

src/components/Router.js

@@ -1,17 +1,49 @@
-import React from "react";
+import React, { Component } from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import App from "../App";
 import WeightSummary from "./WeightSummary";
 import WeightStats from "./WeightStats";
+import Login from "./Login/index";
+import PrivateRoute from "../PrivateRoute"
+import { auth, firebaseApp} from "../utils/base";
 
-const Router = () => (
-  <BrowserRouter> 
-    <Switch>
-      <Route exact path="/" component={App}/>
-      <Route exact path="/weight-summary" component={WeightSummary}/>
-      <Route exact path="/weight-stats" component={WeightStats}/>
-    </Switch>
-  </BrowserRouter>
-);
+
+class Router extends Component {
+
+  state = { loading: true, authenticated: false, user: null };
+
+  componentWillMount() {
+
+    auth.onAuthStateChanged(user => {
+      if (user) {
+        this.setState({
+          authenticated: true,
+          currentUser: user,
+          loading: false
+        });
+      } else {
+        this.setState({
+          authenticated: false,
+          currentUser: null,
+          loading: false
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+      <BrowserRouter> 
+      <Switch>
+        <PrivateRoute exact path="/" component={App} authenticated={this.state.authenticated}/>
+        <Route exact path="/login" component={Login} />
+        <Route exact path="/weight-summary" component={WeightSummary}/>
+        <Route exact path="/weight-stats" component={WeightStats}/>
+      </Switch>
+    </BrowserRouter>
+
+    )
+  }
+};
 
 export default Router;