class StepThree extends Component {
  static getDerivedStateFromProps = (nextProps) => {
    const {
      stepThree: { dates }
    } = nextProps;
    const shouldUpdate = dates.length !== 0;
    if (shouldUpdate) {
      const newDates = dates.map(date => new Date(date));
      return {
        dates: newDates
      };
    }
    return null;
  };

  state = {
    dates: []
  };

  handleDayClick = (day, { selected }) => {
    const { dates } = this.state;
    if (selected) {
      const selectedIndex = dates.findIndex(selectedDay => DateUtils.isSameDay(selectedDay, day));
      dates.splice(selectedIndex, 1);
    } else {
      dates.push(day);
    }
    this.setState({ dates });
  };

  handleNext = (e) => {
    e.preventDefault();
    this.props.setStepThree(this.state.dates);
  };

  render() {
    return (
      <Col>
        <Col style={{ textAlign: 'center' }}>
          <DayPicker selectedDays={this.state.dates} onDayClick={this.handleDayClick} />
        </Col>
        <div
          style={{
            width: '100%',
            position: 'fixed',
            bottom: '0px',
            zIndex: '100',
            textAlign: 'center',
            padding: '10px',
            left: '0px'
          }}
        >
          <PreviousButton handleClick={this.props.handlePrevious} />
          <NextButton handleClick={this.handleNext} />
        </div>
      </Col>
    );
  }
}

case ACTIONS.SET_STEP_THREE: {
        const newDates = action.dates.map(d => new Date(d));
        return {
          ...state,
          stepThree: {
            ...state.stepThree,
            dates: newDates
        }
     };
   }

handleDayClick = (day, { selected }) => {
   const { dates } = this.state;
   if (selected) {
     const selectedIndex = dates.findIndex(selectedDay =>
        DateUtils.isSameDay(selectedDay, day));
     dates.splice(selectedIndex, 1);
   } else {
    dates.push(day);
   }
   let newDatesRf = [...dates];//copy dates array to a new array
   this.setState({ dates:newDatesRf });
};