fathom/assets/js/components/DatePicker.js

'use strict';

import { h, render, Component } from 'preact';
import { bind } from 'decko';

const availablePeriods = [
  {
    id: 'day',
    label: 'Today'
  },
  {
    id: 'week',
    label: 'This week'
  },
  {
    id: 'month',
    label: 'This month'
  },
  {
    id: 'year',
    label: 'This year'
  }
]

class DatePicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      period: this.props.value,
      before: 0,
      after: 0,
    }
  }

  componentDidMount() {
    this.setTimeRange(this.state.period)
  }

  @bind
  setTimeRange(period) {
    let beforeDate = new Date();
    let afterDate = new Date();
    afterDate.setHours(0, 0, 0, 0);
    switch(period) {
      case "week":
        afterDate.setDate(afterDate.getDate() - (afterDate.getDay() + 6) % 7);
      break;
      case "month":
        afterDate.setDate(1);
      break;
      case "year":
        afterDate.setDate(1);
        afterDate.setMonth(0);
      break;
    }

    let before, after;
    before = Math.round((+beforeDate ) / 1000);
    after = Math.round((+afterDate) / 1000);
    this.setState({
      before: before, 
      after: after,
    });
    this.props.onChange(this.state);
  }

  @bind
  setPeriod(e) {
    e.preventDefault();

    let period = e.target.dataset.value;
    if( period !== this.state.period) {
      this.setState({ 
        period: period, 
      });
      this.setTimeRange(this.state.period);
    }
  }

  render(props, state) {
    const links = availablePeriods.map((p) => {
      let className = ( p.id == state.period ) ? 'active' : '';
      return <li class={className} ><a href="#" data-value={p.id} onClick={this.setPeriod}>{p.label}</a></li>
    });

    return (

      <ul>
        {links}
      </ul>
    )
  }
}

export default DatePicker