schedule form loop / onUpdate issue

schedule-form-component.js

// USAGE:
//   |
//   /-> rrule (text)
//   ^  \-> displays sentance
//   ^   \-> change settings
//   ^    \-> change rrule -
//   ^                     |
//   \--<--<--<--<--<--<---/

class ScheduledInvoiceForm extends React.Component {
  constructor() {
    super();

    this.state = {
      now: moment(),
      starting: moment().add(1, 'day'),
      count: null,
      until: null,
      freq: RRule.MONTHLY,
      currentlyChoosing: null,
      untilModal: false,
    };
  }

  componentWillMount() {
    const {
      onUpdate,
      next = null,
      rrule = null,
      editable = true,
    } = this.props;

    this.setState({
      editable,
    });

    if (rrule) {
      // convert from rrule to the individual parts that
      // this.state needs
      const rruleInstance = RRule.fromString(rrule);
      const starting = rruleInstance.options.dtstart;
      const until = rruleInstance.options.until;

      const chunks = {
        starting: next ?
          moment.utc(next).local() :
            (starting ?
              moment.utc(starting).local()
              : null
            ),
        until: until ? moment.utc(until).local() : null,
        count: rruleInstance.options.count,
        freq: rruleInstance.options.freq,
      };

      const newState = {
        ...chunks,
        editable,
      };

      this.setState(newState);
      this.dispatchRruleString(newState);
    } else if (onUpdate) {
      this.dispatchRruleString(this.state);
    }
  }

  // if there is an onUpdate supplied then calculate
  // the new RRULE string and pass it to the onUpdate
  componentWillUpdate(nextProps, nextState) {
    const { onUpdate } = this.props;
    const { freq, until, starting, count } = this.state;

    if (!onUpdate) {
      return;
    }

    if (
      freq !== nextState.freq ||
      count !== nextState.count ||
      until !== nextState.until ||
      starting !== nextState.starting
    ) {
      console.log('dispatchRruleString', nextState);
      this.dispatchRruleString(nextState);
    }
  }

  dispatchRruleString(state) {
    const { onUpdate } = this.props;

    const ruleSpec = {
      freq: state.freq,
      dtstart: state.starting ? moment(state.starting).utc().toDate() : null,
      until: state.until ? moment(state.until).utc().toDate() : null,
      count: state.count,
    };

    onUpdate(new RRule(omitBy(ruleSpec, isNil)).toString());
  }
    
...

// not connected

using-it.js

  <ScheduledInvoiceForm
    rrule={payment.rule}
    next={get(payment, 'next_run_at')}
    editable
    onUpdate={(rrule) => dispatch(actions.change('payment.rule', rrule))}
  />