2 files changed, 43 insertions, 17 deletions

diff --git a/client/components/MealFilter.jsx b/client/components/MealFilter.jsx
index e9dfbd8..e326b4b 100644
--- a/client/components/MealFilter.jsx
+++ b/client/components/MealFilter.jsx
@@ -36,7 +36,6 @@ export default class MealFilter extends React.Component {
     state = state || this.state
     let start = state.startDate
     let end = state.endDate
-    console.log(start.toDate(), end.toDate())
 
     client.service('meals').find({
       query: {
@@ -46,17 +45,17 @@ export default class MealFilter extends React.Component {
         token: client.get('token'),
       },
     }).then((data) => {
-      console.log(data)
       this.setState({meals: data.data})
       this.filter(data.data)
     }).catch((error) => {
       console.error(error)
     })
   }
-  filter(meals) {
+  filter(meals, state) {
     meals = meals || this.state.meals
-    const start = this.state.startTime
-    const end = this.state.endTime
+    state = state || this.state
+    const start = state.startTime
+    const end = state.endTime
     const filteredMeals = this.state.meals.filter((meal) => {
       const hours = new Date(meal.date).getHours()
       return (start <= hours && hours <= end)
@@ -69,11 +68,7 @@ export default class MealFilter extends React.Component {
     start.minutes(0)
     start.seconds(0)
 
-    let end = range.endDate
-    if (start.isSame(end)) {
-      end = start.clone()
-    }
-
+    const end = start.isSame(range.endDate) ? start.clone() : range.endDate
     end.hours(23)
     end.minutes(59)
     end.seconds(59)
@@ -89,7 +84,7 @@ export default class MealFilter extends React.Component {
   }
   pickTimeRange(event,start,end){
     this.setState({startTime: start, endTime: end})
-    this.filter()
+    this.filter(this.state.meals, {startTime: start, endTime: end})
   }
 
   render(){
diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
index 5b0bc1b..7a46c6d 100644
--- a/client/components/MealList.jsx
+++ b/client/components/MealList.jsx
@@ -19,6 +19,7 @@ export default class MealList extends React.Component {
     this.handleUpdate = this.handleUpdate.bind(this)
     this.handleDelete = this.handleDelete.bind(this)
     this.pickMeal = this.pickMeal.bind(this)
+    this.loadMeals = this.loadMeals.bind(this)
   }
   handleCreate(meal) {
     const meals = this.state.data.slice()
@@ -46,15 +47,35 @@ export default class MealList extends React.Component {
   pickMeal(meal) {
     this.mealForm.pick(meal)
   }
+  loadMeals(meals) {
+    console.log(meals)
+    this.setState({ data: meals })
+  }
   render() {
-    const items = this.state.data.map((meal) => {
+    var groups = groupByDate(this.state.data)
+    const items = Object.keys(groups).sort().reverse().map((date) => {
+      const group = groups[date]
+      const mealitems = group.meals.map((meal) => {
+        return (
+          <MealItem
+            key={meal.id}
+            meal={meal}
+            onClick={this.pickMeal}
+            onDelete={this.handleDelete} />
+        )
+      })
+      console.log(this.props.user.goal, group.calories)
+      const isOverLimit = group.calories > this.props.user.goal ? 'isOverLimit' : 'isUnderLimit'
       return (
-        <MealItem key={meal.id}
-          meal={meal}
-          onClick={this.pickMeal}
-          onDelete={this.handleDelete} />
+        <div key={group.date} className='group'>
+          <span className='groupDate'>{group.date}</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>
@@ -69,7 +90,7 @@ export default class MealList extends React.Component {
         />
         <MealFilter user={this.props.user}
           ref={(mealFilter) => { this.mealFilter = mealFilter }}
-          onChange={(meals) => { this.setState({ data: meals }) }}
+          onChange={ this.loadMeals }
         />
         <div>
           {items}
@@ -214,6 +235,16 @@ class MealForm extends React.Component {
   }
 }
 
+function groupByDate(a) {
+  return a.reduce(function(rv, x) {
+    var date = parseDate(x.date)
+    var ab = rv[date] = rv[date] || { date: date, calories: 0, meals: [] }
+    ab.meals.push(x)
+    ab.calories += x.calories
+    return rv
+  }, {})
+}
+
 function sortByDate(a,b){
   return new Date(b.date) - new Date(a.date)
 }