1 files changed, 113 insertions, 0 deletions
diff --git a/client/components/MealFilter.jsx b/client/components/MealFilter.jsx
new file mode 100644
index 0000000..cd78f89
--- /dev/null
+++ b/client/components/MealFilter.jsx
@@ -0,0 +1,113 @@
+import React from 'react'
+
+import client from '../client'
+
+import moment from 'moment'
+
+import { DateRange } from 'react-date-range';
+
+export default class MealFilter extends React.Component {
+  constructor(){
+    super()
+    const start = new Date ()
+    const end = new Date ()
+    end.setDate(end.getDate()-6)
+    this.state = {
+      startDate: moment(start),
+      endDate: moment(end),
+      startTime: 0,
+      endTime: 23,
+    }
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+  handleSelect(range){
+    console.log(range)
+    // range.startDate; // Momentjs object
+    // range.endDate
+    this.setState(range)
+  }
+  pickTimeRange(event,start,end){
+    this.setState({startTime: start, endTime: end})
+  }
+
+  render(){
+    var times = [
+      [0, 11, 'Breakfast'],
+      [12, 15, 'Lunch'],
+      [15, 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>
+    )
+  }
+}
+
+
+// class MealFilter extends React.Component {
+//   constructor(props){
+//     super()
+//     this.state = {
+//       fromDate: new Date (),
+//       toDate: new Date (),
+//       fromTime: new Date (),
+//       toTime: new Date (),
+//     }
+//     this.updateState = this.updateState.bind(this)
+//   }
+//   updateState(e){
+//     const name = event.target.name
+//     let value = event.target.value
+//     if (name === 'date') {
+//       value = new Date(value + 'T' + this.state.date.split("T")[1] ).toString()
+//     } else if (name === 'time') {
+//       value = new Date(this.state.date.split("T")[0] + value).toString()
+//     }
+//     this.setState({
+//       [name]: value,
+//       error: null,
+//     })
+//   }
+//   render () {
+//     const fromDate = parseDate(this.state.fromDate)
+//     const toDate = parseDate(this.state.toDate)
+//     const fromTime = parseTime(this.state.fromTime)
+//     const toTime = parseTime(this.state.toTime)
+//     return (
+//       <div>
+//         Filter by date:
+//         <input type='date' name='fromDate' placeholder='From date' value={fromDate} required onChange={this.updateState} />
+//         to
+//         <input type='date' name='toDate' placeholder='To date' value={toDate} required onChange={this.updateState} />
+//         and from time
+//         <input type='time' name='fromTime' placeholder='From iime' value={fromTime} required onChange={this.updateState} step='3600' />
+//         to
+//         <input type='time' name='toTime' placeholder='To time' value={toTime} required onChange={this.updateState} step='3600' />
+//       </div>
+//     )
+//   }
+// }