destroy records

1 files changed, 31 insertions, 9 deletions

diff --git a/client/components/MealView.jsx b/client/components/MealView.jsx
index 920dca9..ab8cebf 100644
--- a/client/components/MealView.jsx
+++ b/client/components/MealView.jsx
@@ -94,6 +94,7 @@ class MealList extends React.Component {
 
     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({
@@ -103,7 +104,6 @@ class MealList extends React.Component {
         token: client.get('token'),
       },
     }).then((data) => {
-      console.log(data)
       this.setState(data)
     }).catch((error) => {
       console.error(error)
@@ -118,7 +118,15 @@ class MealList extends React.Component {
   }
   handleUpdate(meal) {
     const meals = this.state.data.map((data, i) => {
-      return (data.id == meal.id) ? meal : data
+      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
@@ -128,12 +136,12 @@ class MealList extends React.Component {
     this.mealForm.pick(meal)
   }
   render() {
-    console.log(this.state.data)
     const items = this.state.data.map((meal, i) => {
       return (
         <MealItem key={meal.id}
           meal={meal}
-          onClick={this.pickMeal} />
+          onClick={this.pickMeal}
+          onDelete={this.handleDelete} />
       )
     })
     return (
@@ -152,16 +160,34 @@ class MealList extends React.Component {
 }
 
 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' onClick={() => this.props.onClick(meal)}>
+      <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>
     )
   }
@@ -191,7 +217,6 @@ class MealForm extends React.Component {
     })
   }
   pick(meal){
-    console.log(meal)
     this.setState(meal)
   }
   updateState(event){
@@ -224,9 +249,7 @@ class MealForm extends React.Component {
   create() {
     const mealsService = client.service('meals')
     const params = { query: { token: client.get('token') } }
-
     mealsService.create(this.state, params).then(result => {
-      console.log(result)
       this.props.onCreate(result)
       this.reset()
     }).catch(error => {
@@ -241,7 +264,6 @@ class MealForm extends React.Component {
     const params = { query: { token: client.get('token') } }
 
     mealsService.update(this.state.id, this.state, params).then(result => {
-      console.log(result)
       this.props.onUpdate(result)
       this.reset()
     }).catch(error => {