Maintain moment state in datepicker

1 files changed, 37 insertions, 9 deletions

diff --git a/src/client/components/datepicker/datepicker.js b/src/client/components/datepicker/datepicker.js
index 422c1f7..109be08 100644
--- a/src/client/components/datepicker/datepicker.js
+++ b/src/client/components/datepicker/datepicker.js
@@ -1,21 +1,49 @@
-import React from 'react'
-import Calendar from './calendar/calendar'
+import React, { Component } from 'react'
+import autobind from 'autobind-decorator'
 
+import Calendar from './calendar/calendar'
 import { Round as RoundBtn } from '../buttons/buttons'
 
 import { monthContainer, container } from './datepicker.css'
 
 const Month = props =>
   <div className={monthContainer}>
-    <RoundBtn faName='arrow-left' onClick={() => { props.setMonth(props.moment.month() - 1) }} />
+    <RoundBtn faName='arrow-left' onClick={props.prevMonth} />
     <div>{`${props.moment.format('MMM')} ${props.moment.year()}`}</div>
-    <RoundBtn faName='arrow-right' onClick={() => { props.setMonth(props.moment.month() + 1) }} />
+    <RoundBtn faName='arrow-right' onClick={props.nextMonth} />
   </div>
 
-const DatePicker = props =>
-  <div className={container}>
-    <Month {...props} />
-    <Calendar {...props} />
-  </div>
+@autobind
+class DatePicker extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { moment: this.props.moment }
+  }
+  setDate (date) {
+    this.setState({ moment: this.state.moment.date(date) })
+    this.onChange()
+  }
+  setMonth (month) {
+    this.setState({ moment: this.state.moment.month(month) })
+    this.onChange()
+  }
+  nextMonth () {
+    this.setMonth(this.state.moment.month() + 1)
+  }
+  prevMonth () {
+    this.setMonth(this.state.moment.month() - 1)
+  }
+  onChange () {
+    this.props.onChange(this.state.moment)
+  }
+  render () {
+    return (
+      <div className={container}>
+        <Month moment={this.state.moment} prevMonth={this.prevMonth} nextMonth={this.nextMonth} />
+        <Calendar moment={this.state.moment} onClick={this.setDate} />
+      </div>
+    )
+  }
+}
 
 export default DatePicker