From 6ae0c07daeea0e03c832b3aa0f838778627431d8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Mar 2017 04:48:32 +0100
Subject: view app as a different user

---
 client/components/LoggedInView.jsx  | 26 ++++++++++++++---
 client/components/LoggedOutView.jsx | 32 +++++++++++++--------
 client/components/MealFilter.jsx    |  2 +-
 client/components/MealList.jsx      |  5 +---
 client/components/Menu.jsx          | 13 +++++++--
 client/components/UserList.jsx      | 57 ++++++++++++++++++++++++-------------
 6 files changed, 91 insertions(+), 44 deletions(-)

(limited to 'client/components')

diff --git a/client/components/LoggedInView.jsx b/client/components/LoggedInView.jsx
index 3fa3e8b..ecf1356 100644
--- a/client/components/LoggedInView.jsx
+++ b/client/components/LoggedInView.jsx
@@ -11,26 +11,44 @@ export default class LoggedInView extends React.Component {
     super()
     this.state = {
       user: Object.assign({}, props.user),
+      meals: [],
       mode: 'meals',
     }
     this.updateUser = this.updateUser.bind(this)
+    this.updateMeals = this.updateMeals.bind(this)
     this.toggleMode = this.toggleMode.bind(this)
   }
   toggleMode(){
-    this.state.mode = this.state.mode == 'meals' ? 'users' : 'meals'
+    this.setState({ mode: this.state.mode == 'meals' ? 'users' : 'meals' })
   }
   updateUser(user) {
     this.setState({
-      user: user
+      user: user,
+      mode: 'meals',
+    })
+  }
+  updateMeals(user) {
+    this.setState({
+      meals: meals,
     })
   }
   render() {
     let activity = null
     if (this.state.mode == 'meals') {
-      activity = (<MealList user={this.state.user} currentUser={this.props.user} />)
+      activity = (
+        <MealList user={this.state.user}
+          currentUser={this.props.user}
+          onUpdate={this.updateMeals}
+        />
+      )
     }
     else {
-      activity = (<UserList user={this.state.user} currentUser={this.props.user} updateUser={this.updateUser} />)
+      activity = (
+        <UserList user={this.state.user}
+          currentUser={this.props.user}
+          updateUser={this.updateUser}
+        />
+      )
     }
     return (
       <div>
diff --git a/client/components/LoggedOutView.jsx b/client/components/LoggedOutView.jsx
index 0773059..b176edb 100644
--- a/client/components/LoggedOutView.jsx
+++ b/client/components/LoggedOutView.jsx
@@ -20,21 +20,27 @@ export default class LoggedOutView extends React.Component {
     this.setState({ modal: '' })
   }
   render() {
-    const loginVisible = this.state.modal == 'login'
-    const signupVisible = this.state.modal == 'signup'
-    return (
-      <div>
-        <Welcome
-          onLoginClick={this.showLogin}
-          onSignupClick={this.showSignup} />
+    if (this.state.modal == 'login') {
+      return (
         <LoginForm
-          visible={loginVisible}
+          visible={true}
           onClose={this.closeModal} />
+      )
+    }
+    else if (this.state.modal == 'signup') {
+      return (
         <SignupForm
-          visible={signupVisible}
+          visible={true}
           onClose={this.closeModal} />
-      </div>
-    )
+      )
+    }
+    else {
+      return (
+        <Welcome
+          onLoginClick={this.showLogin}
+          onSignupClick={this.showSignup} />
+      )
+    }
   }
 }
 
@@ -95,6 +101,7 @@ class LoginForm extends React.Component {
         <form onSubmit={this.handleSubmit}>
           <input type='email'
                  name='email'
+                 autoFocus
                  placeholder='Email address'
                  onChange={this.updateState}
           /><br/>
@@ -159,6 +166,7 @@ class SignupForm extends React.Component {
         <form onSubmit={this.handleSubmit}>
           <input type='email'
                  name='email'
+                 autoFocus
                  placeholder='Email address'
                  onChange={this.updateState}
           /><br/>
@@ -171,7 +179,7 @@ class SignupForm extends React.Component {
                  name='goal'
                  min='0'
                  max='100000'
-                 placeholder='Calorie Goal'
+                 placeholder='Goal'
                  onChange={this.updateState}
           /><br/>
           <input type='submit'
diff --git a/client/components/MealFilter.jsx b/client/components/MealFilter.jsx
index e326b4b..c62f232 100644
--- a/client/components/MealFilter.jsx
+++ b/client/components/MealFilter.jsx
@@ -91,7 +91,7 @@ export default class MealFilter extends React.Component {
     var times = [
       [0, 11, 'Breakfast'],
       [12, 15, 'Lunch'],
-      [15, 23, 'Dinner'],
+      [16, 23, 'Dinner'],
       [0, 23, 'All'],
     ].map( (r,i) => {
       const start = r[0]
diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
index 7a46c6d..7efbf4d 100644
--- a/client/components/MealList.jsx
+++ b/client/components/MealList.jsx
@@ -48,7 +48,6 @@ export default class MealList extends React.Component {
     this.mealForm.pick(meal)
   }
   loadMeals(meals) {
-    console.log(meals)
     this.setState({ data: meals })
   }
   render() {
@@ -64,18 +63,16 @@ export default class MealList extends React.Component {
             onDelete={this.handleDelete} />
         )
       })
-      console.log(this.props.user.goal, group.calories)
       const isOverLimit = group.calories > this.props.user.goal ? 'isOverLimit' : 'isUnderLimit'
       return (
         <div key={group.date} className='group'>
           <span className='groupDate'>{group.date}</span>
-          <span className={'calories ' + isOverLimit}>{group.calories} cal.</span>
+          <span className={'calories ' + isOverLimit}>{group.calories} cal</span>
           <br />
           {mealitems}
         </div>
       )
     })
-    console.log(items)
     if (! items.length) {
       items.push(
         <div className='quiet' key='nomeals'>No meals found</div>
diff --git a/client/components/Menu.jsx b/client/components/Menu.jsx
index d53803d..471336e 100644
--- a/client/components/Menu.jsx
+++ b/client/components/Menu.jsx
@@ -27,10 +27,17 @@ export default class Menu extends React.Component {
   }
   render() {
     const user = this.props.user
+    const currentUser = this.props.currentUser
+    const observing = user.id !== currentUser.id
     const items = []
-    items.push( <li key='hello'>Hello {user.email}</li> )
-    items.push( <li key='goal' onClick={this.setGoal}><a href='#'>Goal</a>: {user.goal}</li> )
-    switch (user.role) {
+    if (observing) {
+      items.push( <li key='observing'><i>Viewing</i> {user.email}</li> )
+    }
+    else {
+      items.push( <li key='hello'>Hello {currentUser.email}</li> )
+    }
+    items.push( <li key='goal' onMouseDown={this.setGoal}><a href='#'>Goal</a>: {user.goal} cal</li> )
+    switch (currentUser.role) {
       case 'admin':
         if (this.props.user.id !== this.props.currentUser.id) {
           items.push( <li key='resetUser'><a href='#' onClick={this.resetUser}>Reset User</a></li> )
diff --git a/client/components/UserList.jsx b/client/components/UserList.jsx
index fb93b9f..3e87ec5 100644
--- a/client/components/UserList.jsx
+++ b/client/components/UserList.jsx
@@ -5,30 +5,37 @@ import client from '../client'
 export default class UserList extends React.Component {
   constructor(props){
     super()
-    console.log("WHAT")
+    console.log("USER")
     this.state = {
-      users: [],
+      data: [],
     }
-//     client.service('users').find({
-//       query: {
-//         '$sort': { 'date': '-1' },
-//         token: client.get('token'),
-//       },
-//     }).then((data) => {
-//       this.setState(data)
-//     }).catch((error) => {
-//       console.error(error)
-//     })
+    client.service('users').find({
+      query: {
+        '$sort': { 'email': '1' },
+        token: client.get('token'),
+      },
+    }).then((data) => {
+      this.setState(data)
+    }).catch((error) => {
+      console.error(error)
+    })
     this.pick.bind(this)
+    console.log(props)
   }
-  pick(){
+  pick(user){
+    // bubble this up..
+    console.log(user)
+    console.log(this)
+    this.props.updateUser(user)
   }
   render() {
-    const items = this.state.users.map((item,i) => {
+    console.log(this.state.data)
+    const items = this.state.data.map((user,i) => {
       return (
         <UserItem key={user.id}
           user={user}
-          onClick={this.pick}
+          activeUser={this.props.user}
+          onClick={(user) => this.pick(user)}
           onDelete={this.handleDelete} />
       )
     })
@@ -59,13 +66,15 @@ class UserItem extends React.Component {
   render() {
     const user = this.props.user
     // const canEdit = this.props.user.userid === this.props.currentUser.id ? 'canEdit' : ''
+    const userClass = this.props.user.id == this.props.activeUser.id ? 'active' : ''
     const canEdit = 'canEdit'
-    const date = parseDate(meal.date)
-    const time = parseTime(meal.date)
+    const date = parseDate(user.updatedAt)
+    const time = parseTime(user.updatedAt)
     return (
-      <div className={'user row ' + canEdit} onClick={() => this.props.onClick(meal)}>
-        <div className='name'>{meal.name}</div>
-        <div className='calories'>{meal.calories} cal</div>
+      <div className={'user row ' + canEdit} onClick={() => this.props.onClick(this.props.user)}>
+        <div className={'email ' + userClass}>{user.email}</div>
+        <div className='calories'>{user.goal} cal</div>
+        <div className={'role ' + user.role}>{user.role}</div>
         <div className='date'>{date}</div>
         <div className='time'>{time}</div>
         <div className='remove' onClick={this.remove}>x</div>
@@ -73,3 +82,11 @@ class UserItem extends React.Component {
     )
   }
 }
+
+function parseDate(d){
+  return new Date(d).toISOString().substr(0, 10)
+}
+
+function parseTime(d){
+  return new Date(d).toISOString().substr(11, 5)
+}
-- 
cgit v1.2.3-70-g09d2