view app as a different user

1 files changed, 37 insertions, 20 deletions

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)
+}