filter by date

4 files changed, 129 insertions, 81 deletions

diff --git a/client/components/LoggedInView.jsx b/client/components/LoggedInView.jsx
index 5c7a690..3fa3e8b 100644
--- a/client/components/LoggedInView.jsx
+++ b/client/components/LoggedInView.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import ModalDialog from './ModalDialog.jsx'
+import Menu from './Menu.jsx'
 import UserList from './UserList.jsx'
 import MealList from './MealList.jsx'
 
@@ -45,66 +46,3 @@ export default class LoggedInView extends React.Component {
 }
 
 
-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/MealFilter.jsx b/client/components/MealFilter.jsx
index cd78f89..e9dfbd8 100644
--- a/client/components/MealFilter.jsx
+++ b/client/components/MealFilter.jsx
@@ -9,25 +9,87 @@ import { DateRange } from 'react-date-range';
 export default class MealFilter extends React.Component {
   constructor(){
     super()
+
     const start = new Date ()
+    start.setHours(0)
+    start.setMinutes(0)
+    start.setSeconds(0)
+    start.setDate(start.getDate()-6)
+
     const end = new Date ()
-    end.setDate(end.getDate()-6)
+    end.setHours(23)
+    end.setMinutes(59)
+    end.setSeconds(59)
+
     this.state = {
       startDate: moment(start),
       endDate: moment(end),
       startTime: 0,
       endTime: 23,
+      meals: [],
     }
     this.handleSelect = this.handleSelect.bind(this)
+    this.fetch = this.fetch.bind(this)
+    this.filter = this.filter.bind(this)
+  }
+  fetch (state){
+    state = state || this.state
+    let start = state.startDate
+    let end = state.endDate
+    console.log(start.toDate(), end.toDate())
+
+    client.service('meals').find({
+      query: {
+        userid: this.props.user.id,
+        date: { $gte: start.toDate(), $lte: end.toDate() },
+        $sort: { 'date': '-1' },
+        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) {
+    meals = meals || this.state.meals
+    const start = this.state.startTime
+    const end = this.state.endTime
+    const filteredMeals = this.state.meals.filter((meal) => {
+      const hours = new Date(meal.date).getHours()
+      return (start <= hours && hours <= end)
+    })
+    this.props.onChange(filteredMeals)
   }
   handleSelect(range){
-    console.log(range)
-    // range.startDate; // Momentjs object
-    // range.endDate
-    this.setState(range)
+    const start = range.startDate
+    start.hours(0)
+    start.minutes(0)
+    start.seconds(0)
+
+    let end = range.endDate
+    if (start.isSame(end)) {
+      end = start.clone()
+    }
+
+    end.hours(23)
+    end.minutes(59)
+    end.seconds(59)
+
+    this.setState({
+      startDate: start,
+      endDate: end,
+    })
+    this.fetch({
+      startDate: start,
+      endDate: end,
+    })
   }
   pickTimeRange(event,start,end){
     this.setState({startTime: start, endTime: end})
+    this.filter()
   }
 
   render(){
diff --git a/client/components/MealList.jsx b/client/components/MealList.jsx
index 53c8289..5b0bc1b 100644
--- a/client/components/MealList.jsx
+++ b/client/components/MealList.jsx
@@ -19,18 +19,6 @@ 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)
-
-    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()
@@ -79,7 +67,10 @@ export default class MealList extends React.Component {
           onCreate={(meal) => { this.handleCreate(meal) }}
           onUpdate={(meal) => { this.handleUpdate(meal) }}
         />
-        <MealFilter />
+        <MealFilter user={this.props.user}
+          ref={(mealFilter) => { this.mealFilter = mealFilter }}
+          onChange={(meals) => { this.setState({ data: meals }) }}
+        />
         <div>
           {items}
         </div>
diff --git a/client/components/Menu.jsx b/client/components/Menu.jsx
new file mode 100644
index 0000000..d53803d
--- /dev/null
+++ b/client/components/Menu.jsx
@@ -0,0 +1,57 @@
+
+import React from 'react'
+
+import client from '../client'
+
+export default 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' onClick={this.setGoal}><a href='#'>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='meallist'><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='meallist'><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>
+    )
+  }
+}