From bf7ac6af587f68553b83a54fcb724dfc9d684644 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Mar 2017 01:03:23 +0100
Subject: refactor frontend

---
 client/components/App.jsx           |   4 +-
 client/components/LoggedInView.jsx  | 110 ++++++++++++
 client/components/LoggedOutView.jsx |   3 +-
 client/components/MealFilter.jsx    | 113 +++++++++++++
 client/components/MealList.jsx      | 242 +++++++++++++++++++++++++++
 client/components/MealView.jsx      | 324 ------------------------------------
 client/components/UserList.jsx      |  75 +++++++++
 7 files changed, 544 insertions(+), 327 deletions(-)
 create mode 100644 client/components/LoggedInView.jsx
 create mode 100644 client/components/MealFilter.jsx
 create mode 100644 client/components/MealList.jsx
 delete mode 100644 client/components/MealView.jsx
 create mode 100644 client/components/UserList.jsx

(limited to 'client/components')

diff --git a/client/components/App.jsx b/client/components/App.jsx
index 99c2c11..046ce72 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import LoggedOutView from './LoggedOutView.jsx'
-import MealView from './MealView.jsx'
+import LoggedInView from './LoggedInView.jsx'
 
 import client from '../client'
 
@@ -35,7 +35,7 @@ export default class App extends React.Component {
     if (this.state.ready) {
       if (this.state.loggedIn) {
         return (
-          <MealView user={this.state.user} />
+          <LoggedInView user={this.state.user} />
         )
       }
       else {
diff --git a/client/components/LoggedInView.jsx b/client/components/LoggedInView.jsx
new file mode 100644
index 0000000..5c7a690
--- /dev/null
+++ b/client/components/LoggedInView.jsx
@@ -0,0 +1,110 @@
+import React from 'react'
+import ModalDialog from './ModalDialog.jsx'
+import UserList from './UserList.jsx'
+import MealList from './MealList.jsx'
+
+import client from '../client'
+
+export default class LoggedInView extends React.Component {
+  constructor(props) {
+    super()
+    this.state = {
+      user: Object.assign({}, props.user),
+      mode: 'meals',
+    }
+    this.updateUser = this.updateUser.bind(this)
+    this.toggleMode = this.toggleMode.bind(this)
+  }
+  toggleMode(){
+    this.state.mode = this.state.mode == 'meals' ? 'users' : 'meals'
+  }
+  updateUser(user) {
+    this.setState({
+      user: user
+    })
+  }
+  render() {
+    let activity = null
+    if (this.state.mode == 'meals') {
+      activity = (<MealList user={this.state.user} currentUser={this.props.user} />)
+    }
+    else {
+      activity = (<UserList user={this.state.user} currentUser={this.props.user} updateUser={this.updateUser} />)
+    }
+    return (
+      <div>
+        <Menu mode={this.state.mode}
+              user={this.state.user}
+              toggleMode={this.toggleMode}
+              currentUser={this.props.user}
+              updateUser={this.updateUser} />
+        {activity}
+      </div>
+    )
+  }
+}
+
+
+class Menu extends React.Component {
+  constructor() {
+    super()
+    this.setGoal = this.setGoal.bind(this)
+    this.logout = this.logout.bind(this)
+  }
+  setGoal() {
+    const goal = Math.abs(parseInt(prompt('Please enter your calorie goal', this.props.user.goal)))
+    if (goal) {
+      client.service('users').patch(this.props.user.id, {
+        goal: goal,
+        token: client.get('token'),
+      }).then((user) => {
+        this.props.updateUser(user)
+      })
+    }
+  }
+  logout() {
+    client.logout().then(() => {
+      window.location.reload()
+    })
+  }
+  render() {
+    const user = this.props.user
+    const items = []
+    items.push( <li key='hello'>Hello {user.email}</li> )
+    items.push( <li key='goal'><a href='#' onClick={this.setGoal}>Goal</a>: {user.goal}</li> )
+    switch (user.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> )
+        }
+        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Users</a></li> )
+        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Meals</a></li> )
+        break
+      case 'manager':
+        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Users</a></li> )
+        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Meals</a></li> )
+      case 'user':
+        break
+    }
+    items.push( <li key='logout'><a href='#' onClick={this.logout}>Logout</a></li> )
+
+    return (
+      <div>
+        <ul className='menu'>
+          {items}
+        </ul>
+      </div>
+    )
+    // <ProfileModal user={user} visible={false} onClose={() => {}} />
+  }
+}
+
+
+// class ProfileModal extends React.Component {
+//   render() {
+//     return (
+//       <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
+//       </ModalDialog>
+//     )
+//   }
+// }
diff --git a/client/components/LoggedOutView.jsx b/client/components/LoggedOutView.jsx
index f217143..0773059 100644
--- a/client/components/LoggedOutView.jsx
+++ b/client/components/LoggedOutView.jsx
@@ -137,8 +137,9 @@ class SignupForm extends React.Component {
     event.preventDefault()
     const usersService = client.service('users')
     usersService.create(this.state).then(result => {
+      console.log(result)
       return client.authenticate({
-        strategy: 'local',
+        type: 'local',
         email: this.state.email,
         password: this.state.password,
       })
diff --git a/client/components/MealFilter.jsx b/client/components/MealFilter.jsx
new file mode 100644
index 0000000..cd78f89
--- /dev/null
+++ b/client/components/MealFilter.jsx
@@ -0,0 +1,113 @@
+import React from 'react'
+
+import client from '../client'
+
+import moment from 'moment'
+
+import { DateRange } from 'react-date-range';
+
+export default class MealFilter extends React.Component {
+  constructor(){
+    super()
+    const start = new Date ()
+    const end = new Date ()
+    end.setDate(end.getDate()-6)
+    this.state = {
+      startDate: moment(start),
+      endDate: moment(end),
+      startTime: 0,
+      endTime: 23,
+    }
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+  handleSelect(range){
+    console.log(range)
+    // range.startDate; // Momentjs object
+    // range.endDate
+    this.setState(range)
+  }
+  pickTimeRange(event,start,end){
+    this.setState({startTime: start, endTime: end})
+  }
+
+  render(){
+    var times = [
+      [0, 11, 'Breakfast'],
+      [12, 15, 'Lunch'],
+      [15, 23, 'Dinner'],
+      [0, 23, 'All'],
+    ].map( (r,i) => {
+      const start = r[0]
+      const end = r[1]
+      const name = r[2]
+      let className = ''
+      if (this.state.startTime === start && this.state.endTime === end) {
+        className = 'selected'
+      }
+      return (
+        <button
+          key={i}
+          className={className}
+          onClick={(e) => {this.pickTimeRange(e,start,end)}}>
+          {name}
+        </button>
+      )
+    })
+    return (
+      <div>
+        <DateRange
+          onInit={this.handleSelect}
+          onChange={this.handleSelect}
+          startDate={this.state.startDate}
+          endDate={this.state.endDate}
+        />
+        {times}
+      </div>
+    )
+  }
+}
+
+
+// class MealFilter extends React.Component {
+//   constructor(props){
+//     super()
+//     this.state = {
+//       fromDate: new Date (),
+//       toDate: new Date (),
+//       fromTime: new Date (),
+//       toTime: new Date (),
+//     }
+//     this.updateState = this.updateState.bind(this)
+//   }
+//   updateState(e){
+//     const name = event.target.name
+//     let value = event.target.value
+//     if (name === 'date') {
+//       value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
+//     } else if (name === 'time') {
+//       value = new Date(this.state.date.split("T")[0] + value).toString()
+//     }
+//     this.setState({
+//       [name]: value,
+//       error: null,
+//     })
+//   }
+//   render () {
+//     const fromDate = parseDate(this.state.fromDate)
+//     const toDate = parseDate(this.state.toDate)
+//     const fromTime = parseTime(this.state.fromTime)
+//     const toTime = parseTime(this.state.toTime)
+//     return (
+//       <div>
+//         Filter by date:
+//         <input type='date' name='fromDate' placeholder='From date' value={fromDate} required onChange={this.updateState} />
+//         to
+//         <input type='date' name='toDate' placeholder='To date' value={toDate} required onChange={this.updateState} />
+//         and from time
+//         <input type='time' name='fromTime' placeholder='From iime' value={fromTime} required onChange={this.updateState} step='3600' />
+//         to
+//         <input type='time' name='toTime' placeholder='To time' value={toTime} required onChange={this.updateState} step='3600' />
+//       </div>
+//     )
+//   }
+// }
diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
new file mode 100644
index 0000000..53c8289
--- /dev/null
+++ b/client/components/MealList.jsx
@@ -0,0 +1,242 @@
+import React from 'react'
+
+import client from '../client'
+
+import MealFilter from './MealFilter.jsx'
+
+export default class MealList extends React.Component {
+  constructor(props) {
+    super()
+
+    this.state = {
+      total: 0,
+      limit: 0,
+      skip: 0,
+      data: []
+    }
+
+    this.handleCreate = this.handleCreate.bind(this)
+    this.handleUpdate = this.handleUpdate.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+    this.pickMeal = this.pickMeal.bind(this)
+
+    client.service('meals').find({
+      query: {
+        userid: props.user.id,
+        '$sort': { 'date': '-1' },
+        token: client.get('token'),
+      },
+    }).then((data) => {
+      this.setState(data)
+    }).catch((error) => {
+      console.error(error)
+    })
+  }
+  handleCreate(meal) {
+    const meals = this.state.data.slice()
+    meals.unshift( meal )
+    this.setState({
+      data: meals.sort(sortByDate)
+    })
+  }
+  handleUpdate(meal) {
+    const meals = this.state.data.map((data) => {
+      return (data.id === meal.id) ? meal : data
+    }).sort(sortByDate)
+    this.setState({
+      data: meals
+    })
+  }
+  handleDelete(mealid) {
+    const meals = this.state.data.filter((data) => {
+      return data.id !== mealid
+    }).sort(sortByDate)
+    this.setState({
+      data: meals
+    })
+  }
+  pickMeal(meal) {
+    this.mealForm.pick(meal)
+  }
+  render() {
+    const items = this.state.data.map((meal) => {
+      return (
+        <MealItem key={meal.id}
+          meal={meal}
+          onClick={this.pickMeal}
+          onDelete={this.handleDelete} />
+      )
+    })
+    if (! items.length) {
+      items.push(
+        <div className='quiet' key='nomeals'>No meals found</div>
+      )
+    }
+    return (
+      <div>
+        <MealForm user={this.props.user}
+          ref={(mealForm) => { this.mealForm = mealForm }}
+          onCreate={(meal) => { this.handleCreate(meal) }}
+          onUpdate={(meal) => { this.handleUpdate(meal) }}
+        />
+        <MealFilter />
+        <div>
+          {items}
+        </div>
+      </div>
+    )
+  }
+}
+
+class MealItem extends React.Component {
+  constructor() {
+    super()
+    this.remove = this.remove.bind(this)
+  }
+  remove(e) {
+    e.stopPropagation()
+    const mealid = this.props.meal.id
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+    mealsService.remove(mealid, params).then(result => {
+      this.props.onDelete(mealid)
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+  render() {
+    const meal = this.props.meal
+    // const canEdit = this.props.meal.userid === this.props.currentUser.id ? 'canEdit' : ''
+    const canEdit = 'canEdit'
+    const date = parseDate(meal.date)
+    const time = parseTime(meal.date)
+    return (
+      <div className={'meal row ' + canEdit} onClick={() => this.props.onClick(meal)}>
+        <div className='name'>{meal.name}</div>
+        <div className='calories'>{meal.calories} cal</div>
+        <div className='date'>{date}</div>
+        <div className='time'>{time}</div>
+        <div className='remove' onClick={this.remove}>x</div>
+      </div>
+    )
+  }
+}
+
+class MealForm extends React.Component {
+  constructor(props) {
+    super()
+    this.state = {
+      id: '',
+      userid: props.user.id,
+      name: '',
+      calories: '',
+      date: new Date (),
+    }
+    this.updateState = this.updateState.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  reset() {
+    this.setState({
+      id: '',
+      name: '',
+      calories: '',
+      date: new Date (),
+    })
+  }
+  pick(meal){
+    this.setState(meal)
+  }
+  updateState(event){
+    const name = event.target.name
+    let value = event.target.value
+    if (name === 'date') {
+      value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
+    } else if (name === 'time') {
+      value = new Date(this.state.date.split("T")[0] + value).toString()
+    } else if (name === 'calories') {
+      value = parseInt(value)
+    }
+    this.setState({
+      [name]: value,
+      error: null,
+    })
+  }
+  handleSubmit(event) {
+    event.preventDefault()
+
+    const id = this.state.id
+
+    if (! id) {
+      this.create()
+    }
+    else {
+      this.update()
+    }
+  }
+  create() {
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+
+    mealsService.create(this.state, params).then(result => {
+      this.props.onCreate(result)
+      this.reset()
+    }).catch(error => {
+      console.error(error)
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  update() {
+    const mealsService = client.service('meals')
+    const params = { query: { token: client.get('token') } }
+
+    mealsService.update(this.state.id, this.state, params).then(result => {
+      this.props.onUpdate(result)
+      this.reset()
+    }).catch(error => {
+      console.error(error)
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  render() {
+    const id = this.state.id
+    const action = id ? 'update' : 'create'
+
+    const date = parseDate(this.state.date)
+    const time = parseTime(this.state.date)
+    return (
+      <form onSubmit={this.handleSubmit} className={action}>
+        <input type='hidden' name='id' value={this.state.id} readOnly />
+        <input type='hidden' name='userid' value={this.state.userid} readOnly />
+        <input type='text' name='name' placeholder='Name' value={this.state.name} required onChange={this.updateState} />
+        <input type='number' name='calories' placeholder='Calories' value={this.state.calories} required onChange={this.updateState} min='0' max='10000' />
+        <input type='date' name='date' placeholder='Date' value={date} required onChange={this.updateState} />
+        <input type='time' name='time' placeholder='Time' value={time} required onChange={this.updateState} step='60' />
+        <input type='submit' value={capitalize(action)} />
+        <span className='clear' onClick={() => this.reset()}>cancel</span>
+        <div className='error'>{this.state.error}</div>
+      </form>
+    )
+  }
+}
+
+function sortByDate(a,b){
+  return new Date(b.date) - new Date(a.date)
+}
+
+function parseDate(d){
+  return new Date(d).toISOString().substr(0, 10)
+}
+
+function parseTime(d){
+  return new Date(d).toISOString().substr(11, 5)
+}
+
+function capitalize(s){
+  s = s || '';
+  return (s[0] || '').toUpperCase() + s.substr(1)
+}
+
diff --git a/client/components/MealView.jsx b/client/components/MealView.jsx
deleted file mode 100644
index ab8cebf..0000000
--- a/client/components/MealView.jsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import React from 'react'
-import ModalDialog from './ModalDialog.jsx'
-
-import client from '../client'
-
-export default class MealView extends React.Component {
-  constructor(props) {
-    super()
-    this.state = {
-      user: Object.assign({}, props.user),
-      meals: [],
-    }
-    this.updateUser = this.updateUser.bind(this)
-  }
-  updateUser(user) {
-    this.setState({
-      user: user
-    })
-  }
-  render() {
-    const user = this.state.user
-    const meals = this.state.meals
-    return (
-      <div>
-        <Menu user={user} currentUser={this.props.user} updateUser={this.updateUser} />
-        <MealList user={user} currentUser={this.props.user} />
-        <div className='users'>
-          <UserList />
-        </div>
-      </div>
-    )
-  }
-}
-
-class Menu extends React.Component {
-  constructor() {
-    super()
-    this.setGoal = this.setGoal.bind(this)
-    this.logout = this.logout.bind(this)
-  }
-  setGoal() {
-    const goal = Math.abs(parseInt(prompt('Please enter your calorie goal', this.props.user.goal)))
-    if (goal) {
-      client.service('users').patch(this.props.user.id, {
-        goal: goal,
-        token: client.get('token'),
-      }).then((user) => {
-        this.props.updateUser(user)
-      })
-    }
-  }
-  logout() {
-    client.logout().then(() => {
-      window.location.reload()
-    })
-  }
-  render() {
-    const user = this.props.user
-    const items = []
-    items.push( <li key='hello'>Hello {user.email}</li> )
-    items.push( <li key='goal'><a href='#' onClick={this.setGoal}>Goal</a>: {user.goal}</li> )
-    items.push( <li key='logout'><a href='#' onClick={this.logout}>Logout</a></li> )
-
-    return (
-      <div>
-        <ul className='menu'>
-          {items}
-        </ul>
-        <ProfileModal user={user} visible={false} onClose={() => {}} />
-      </div>
-    )
-  }
-}
-
-class ProfileModal extends React.Component {
-  render() {
-    return (
-      <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
-      </ModalDialog>
-    )
-  }
-}
-
-class MealList extends React.Component {
-  constructor(props) {
-    super()
-
-    this.state = {
-      total: 0,
-      limit: 0,
-      skip: 0,
-      data: []
-    }
-
-    this.handleCreate = this.handleCreate.bind(this)
-    this.handleUpdate = this.handleUpdate.bind(this)
-    this.handleDelete = this.handleDelete.bind(this)
-    this.pickMeal = this.pickMeal.bind(this)
-
-    client.service('meals').find({
-      query: {
-        userid: props.user.id,
-        '$sort': { 'date': '-1' },
-        token: client.get('token'),
-      },
-    }).then((data) => {
-      this.setState(data)
-    }).catch((error) => {
-      console.error(error)
-    })
-  }
-  handleCreate(meal) {
-    const meals = this.state.data.slice()
-    meals.unshift( meal )
-    this.setState({
-      data: meals.sort(sortByDate)
-    })
-  }
-  handleUpdate(meal) {
-    const meals = this.state.data.map((data, i) => {
-      return (data.id === meal.id) ? meal : data
-    }).sort(sortByDate)
-    this.setState({
-      data: meals
-    })
-  }
-  handleDelete(mealid) {
-    const meals = this.state.data.filter((data, i) => {
-      return data.id !== mealid
-    }).sort(sortByDate)
-    this.setState({
-      data: meals
-    })
-  }
-  pickMeal(meal) {
-    this.mealForm.pick(meal)
-  }
-  render() {
-    const items = this.state.data.map((meal, i) => {
-      return (
-        <MealItem key={meal.id}
-          meal={meal}
-          onClick={this.pickMeal}
-          onDelete={this.handleDelete} />
-      )
-    })
-    return (
-      <div>
-        <MealForm user={this.props.user}
-          ref={(mealForm) => { this.mealForm = mealForm }}
-          onCreate={(meal) => { this.handleCreate(meal) }}
-          onUpdate={(meal) => { this.handleUpdate(meal) }}
-        />
-        <div>
-          {items}
-        </div>
-      </div>
-    )
-  }
-}
-
-class MealItem extends React.Component {
-  constructor() {
-    super()
-    this.remove = this.remove.bind(this)
-  }
-  remove(e) {
-    e.stopPropagation()
-    const mealid = this.props.meal.id
-    const mealsService = client.service('meals')
-    const params = { query: { token: client.get('token') } }
-    mealsService.remove(mealid, params).then(result => {
-      this.props.onDelete(mealid)
-    }).catch(error => {
-      console.error(error)
-    })
-  }
-  render() {
-    const meal = this.props.meal
-    // const canEdit = this.props.meal.userid === this.props.currentUser.id ? 'canEdit' : ''
-    const canEdit = 'canEdit'
-    const date = parseDate(meal.date)
-    const time = parseTime(meal.time)
-    return (
-      <div className={'meal ' + canEdit} onClick={() => this.props.onClick(meal)}>
-        <div className='name'>{meal.name}</div>
-        <div className='calories'>{meal.calories} cal</div>
-        <div className='date'>{date}</div>
-        <div className='time'>{time}</div>
-        <div className='remove' onClick={this.remove}>x</div>
-      </div>
-    )
-  }
-}
-
-class MealForm extends React.Component {
-  constructor(props) {
-    super()
-    this.state = {
-      id: '',
-      userid: props.user.id,
-      name: '',
-      calories: '',
-      date: new Date (),
-      time: new Date (),
-    }
-    this.updateState = this.updateState.bind(this)
-    this.handleSubmit = this.handleSubmit.bind(this)
-  }
-  reset() {
-    this.setState({
-      id: '',
-      name: '',
-      calories: '',
-      date: new Date (),
-      time: new Date (),
-    })
-  }
-  pick(meal){
-    this.setState(meal)
-  }
-  updateState(event){
-    const name = event.target.name
-    let value = event.target.value
-    if (name === 'date') {
-      value = new Date(value).toString()
-    } else if (name === 'time') {
-      value = new Date('1970-01-01T' + value).toString()
-    } else if (name === 'calories') {
-      value = parseInt(value)
-    }
-    this.setState({
-      [name]: value,
-      error: null,
-    })
-  }
-  handleSubmit(event) {
-    event.preventDefault()
-
-    const id = this.state.id
-
-    if (! id) {
-      this.create()
-    }
-    else {
-      this.update()
-    }
-  }
-  create() {
-    const mealsService = client.service('meals')
-    const params = { query: { token: client.get('token') } }
-    mealsService.create(this.state, params).then(result => {
-      this.props.onCreate(result)
-      this.reset()
-    }).catch(error => {
-      console.error(error)
-      this.setState({
-        error: error.toString()
-      })
-    })
-  }
-  update() {
-    const mealsService = client.service('meals')
-    const params = { query: { token: client.get('token') } }
-
-    mealsService.update(this.state.id, this.state, params).then(result => {
-      this.props.onUpdate(result)
-      this.reset()
-    }).catch(error => {
-      console.error(error)
-      this.setState({
-        error: error.toString()
-      })
-    })
-  }
-  render() {
-    const id = this.state.id
-    const action = id ? 'update' : 'create'
-
-    const date = parseDate(this.state.date)
-    const time = parseTime(this.state.time)
-    return (
-      <form onSubmit={this.handleSubmit} className={action}>
-        <input type='hidden' name='id' value={this.state.id} readOnly />
-        <input type='hidden' name='userid' value={this.state.userid} readOnly />
-        <input type='text' name='name' placeholder='Name' value={this.state.name} required onChange={this.updateState} />
-        <input type='number' name='calories' placeholder='Calories' value={this.state.calories} required onChange={this.updateState} min='0' max='10000' />
-        <input type='date' name='date' placeholder='Date' value={date} required onChange={this.updateState} />
-        <input type='time' name='time' placeholder='Time' value={time} required onChange={this.updateState} step='60' />
-        <input type='submit' value={capitalize(action)} />
-        <span className='clear' onClick={() => this.reset()}>clear</span>
-        <div className='error'>{this.state.error}</div>
-      </form>
-    )
-  }
-}
-
-function sortByDate(a,b){
-  return new Date(b.date) - new Date(a.date)
-}
-
-function parseDate(d){
-  return new Date(d).toISOString().substr(0, 10)
-}
-
-function parseTime(d){
-  return new Date(d).toISOString().substr(11, 5)
-}
-
-function capitalize(s){
-  s = s || '';
-  return (s[0] || '').toUpperCase() + s.substr(1)
-}
-
-class UserList extends React.Component {
-  render() {
-    const items = []
-    return (
-      <div>
-        {items}
-      </div>
-    )
-  }
-}
diff --git a/client/components/UserList.jsx b/client/components/UserList.jsx
new file mode 100644
index 0000000..fb93b9f
--- /dev/null
+++ b/client/components/UserList.jsx
@@ -0,0 +1,75 @@
+import React from 'react'
+
+import client from '../client'
+
+export default class UserList extends React.Component {
+  constructor(props){
+    super()
+    console.log("WHAT")
+    this.state = {
+      users: [],
+    }
+//     client.service('users').find({
+//       query: {
+//         '$sort': { 'date': '-1' },
+//         token: client.get('token'),
+//       },
+//     }).then((data) => {
+//       this.setState(data)
+//     }).catch((error) => {
+//       console.error(error)
+//     })
+    this.pick.bind(this)
+  }
+  pick(){
+  }
+  render() {
+    const items = this.state.users.map((item,i) => {
+      return (
+        <UserItem key={user.id}
+          user={user}
+          onClick={this.pick}
+          onDelete={this.handleDelete} />
+      )
+    })
+    return (
+      <div>
+        {items}
+      </div>
+    )
+  }
+}
+
+class UserItem extends React.Component {
+  constructor() {
+    super()
+    this.remove = this.remove.bind(this)
+  }
+  remove(e) {
+    e.stopPropagation()
+    const userid = this.props.user.id
+    const usersService = client.service('users')
+    const params = { query: { token: client.get('token') } }
+    usersService.remove(userid, params).then(result => {
+      this.props.onDelete(userid)
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+  render() {
+    const user = this.props.user
+    // const canEdit = this.props.user.userid === this.props.currentUser.id ? 'canEdit' : ''
+    const canEdit = 'canEdit'
+    const date = parseDate(meal.date)
+    const time = parseTime(meal.date)
+    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='date'>{date}</div>
+        <div className='time'>{time}</div>
+        <div className='remove' onClick={this.remove}>x</div>
+      </div>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2