1 files changed, 37 insertions, 6 deletions
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)
 }