1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import React from 'react'
import { DateRange } from 'react-date-range';
import moment from 'moment'
import client from '../client'
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.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
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) => {
this.setState({meals: data.data})
this.filter(data.data)
}).catch((error) => {
console.error(error)
})
}
filter(meals, state) {
meals = meals || this.state.meals
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)
})
this.props.onChange(filteredMeals)
}
handleSelect(range){
const start = range.startDate
start.hours(0)
start.minutes(0)
start.seconds(0)
const end = start.isSame(range.endDate) ? start.clone() : range.endDate
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(this.state.meals, {startTime: start, endTime: end})
}
render(){
var times = [
[0, 11, 'Breakfast'],
[12, 15, 'Lunch'],
[16, 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>
)
}
}
|
