<commit_before>import _ from 'lodash';

(function() {
  window.shared || (window.shared = {});
  const merge = window.shared.ReactHelpers.merge;

  const serviceColor = window.shared.serviceColor;
  const moment = window.moment;

  const styles = {
    noItems: {
      margin: 10
    },
    service: {
      border: '1px solid #eee',
      padding: 15,
      marginTop: 10,
      marginBottom: 10
    },
    userText: {
      whiteSpace: 'pre-wrap'
    },
    daysAgo: {
      opacity: 0.25,
      paddingLeft: '0.5em'
    },
    discontinue: {
      background: 'white',
      opacity: 0.5,
      border: '1px solid #ccc',
      color: '#666'
    },
    cancel: {
      background: 'white',
      color: 'black'
    },
    discontinueConfirm: {
      background: '#E2664A'
    }
  };


  /*
  Renders the list of services.
  */
  window.shared.ServicesList = React.createClass({
    displayName: 'ServicesList',

    propTypes: {
      servicesFeed: React.PropTypes.object.isRequired,
      serviceTypesIndex: React.PropTypes.object.isRequired,
      educatorsIndex: React.PropTypes.object.isRequired,
      discontinueServiceRequests: React.PropTypes.object.isRequired,
      onClickDiscontinueService: React.PropTypes.func.isRequired
    },

    getInitialState: function() {
      return {
        hoveringDiscontinueServiceId: null,
        hoveringCancelServiceId: null,
        discontinuingServiceId: null
      };
    },

    wasDiscontinued: function(service) {
      return (service.discontinued_by_educator_id !== null);
    },

    // Active services before inactive, then sorted by time
    sortedMergedServices: function(servicesFeed) {
      return _.flatten([
        _.sortBy(servicesFeed.active, 'date_started').reverse(),
        _.sortBy(servicesFeed.discontinued, 'date_started').reverse()
      ]);
    },

    // Confirmation step
    onClickDiscontinueService: function(serviceId) {
      if (this.state.discontinuingServiceId !== serviceId) {
        this.setState(merge(this.getInitialState(), {
          discontinuingServiceId: serviceId,
        }));
        return;
      }

      this.props.onClickDiscontinueService(serviceId);
      this.setState(this.getInitialState());
    },

    onClickCancelDiscontinue: function(serviceId) {
      this.setState(this.getInitialState());
    },

    onMouseEnterDiscontinue: function(serviceId) {
      this.setState({ hoveringDiscontinueServiceId: serviceId });
    },

    onMouseLeaveDiscontinue: function() {
      this.setState({ hoveringDiscontinueServiceId: null });
    },

    onMouseEnterCancel: function(serviceId) {
      this.setState({ hoveringCancelServiceId: serviceId });
    },

    onMouseLeaveCancel: function() {
      this.setState({ hoveringCancelServiceId: null });
    },

    render: function() {
      const elements = (this.props.servicesFeed.active.length === 0 && this.props.servicesFeed.discontinued.length === 0)
        ? <div style={styles.noItems}>
        No services
      </div>
        : this.sortedMergedServices(this.props.servicesFeed).map(this.renderService);
      return (
        <div className="ServicesList">
          {elements}
        </div>
      );
    },

    renderService: function(service) {
      const wasDiscontinued = this.wasDiscontinued(service);
      const serviceText = this.props.serviceTypesIndex[service.service_type_id].name;
      const providedByEducatorName = service.provided_by_educator_name;

      return (
        <div
          key={service.id}
          style={merge(styles.service, {
            background: serviceColor(service.service_type_id),
            opacity: (wasDiscontinued) ? 0.8 : 1
          })}>
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 'bold' }}>
                {serviceText}
              </div>
              {this.renderEducatorName(providedByEducatorName)}
              {// When did the service start?
              this.renderDateStarted(service)}
              {// When will the service end?
              this.renderDateEnded(service)}
              {// How long has it been going?
              this.renderTimeSinceStarted(service)}
            </div>
            {this.renderDiscontinuedInformation(service)}
          </div>
          <div style={merge(styles.userText, { paddingTop: 15 })}>
            {service.comment}
          </div>
        </div>
      );
    },

    renderDateStarted: function (service) {
      const momentStarted = moment.utc(service.date_started);
      const startedToday = moment().utc().subtract(1, 'day') < momentStarted;

      // For services added today, return "Started today" instead of the date:
      if (startedToday) return (
        <div>
          Started today
        </div>
      );

      // For services started earlier than today, show the date started:
      return (
        <div>
          {'Started '}
          {momentStarted.format('MMMM D, YYYY')}
        </div>
      );
    },

    renderDateEnded: function (service) {
      const momentEnded = moment.utc(service.date_ended);
      const endedToday = moment().utc().subtract(1, 'day');

      // For services ended today, return "Ended today" instead of the date:
      if (endedToday) return (
        <div>
          Ended today
        </div>
      );

      // For services that will end in the future, show the future ended date:
      return (
        <div>
          {'Scheduled to End '}
          {momentEnded.format('MMMM D, YYYY')}
        </div>
      );
    },

    renderTimeSinceStarted: function (service) {
      const wasDiscontinued = this.wasDiscontinued(service);
      const momentStarted = moment.utc(service.date_started);

      if (wasDiscontinued) {
        // For discontinued services, display the length of time between start and discontinue dates
        return (
          <div><commit_msg>bug fix to ended today<commit_after>import _ from 'lodash';

(function() {
  window.shared || (window.shared = {});
  const merge = window.shared.ReactHelpers.merge;

  const serviceColor = window.shared.serviceColor;
  const moment = window.moment;

  const styles = {
    noItems: {
      margin: 10
    },
    service: {
      border: '1px solid #eee',
      padding: 15,
      marginTop: 10,
      marginBottom: 10
    },
    userText: {
      whiteSpace: 'pre-wrap'
    },
    daysAgo: {
      opacity: 0.25,
      paddingLeft: '0.5em'
    },
    discontinue: {
      background: 'white',
      opacity: 0.5,
      border: '1px solid #ccc',
      color: '#666'
    },
    cancel: {
      background: 'white',
      color: 'black'
    },
    discontinueConfirm: {
      background: '#E2664A'
    }
  };


  /*
  Renders the list of services.
  */
  window.shared.ServicesList = React.createClass({
    displayName: 'ServicesList',

    propTypes: {
      servicesFeed: React.PropTypes.object.isRequired,
      serviceTypesIndex: React.PropTypes.object.isRequired,
      educatorsIndex: React.PropTypes.object.isRequired,
      discontinueServiceRequests: React.PropTypes.object.isRequired,
      onClickDiscontinueService: React.PropTypes.func.isRequired
    },

    getInitialState: function() {
      return {
        hoveringDiscontinueServiceId: null,
        hoveringCancelServiceId: null,
        discontinuingServiceId: null
      };
    },

    wasDiscontinued: function(service) {
      return (service.discontinued_by_educator_id !== null);
    },

    // Active services before inactive, then sorted by time
    sortedMergedServices: function(servicesFeed) {
      return _.flatten([
        _.sortBy(servicesFeed.active, 'date_started').reverse(),
        _.sortBy(servicesFeed.discontinued, 'date_started').reverse()
      ]);
    },

    // Confirmation step
    onClickDiscontinueService: function(serviceId) {
      if (this.state.discontinuingServiceId !== serviceId) {
        this.setState(merge(this.getInitialState(), {
          discontinuingServiceId: serviceId,
        }));
        return;
      }

      this.props.onClickDiscontinueService(serviceId);
      this.setState(this.getInitialState());
    },

    onClickCancelDiscontinue: function(serviceId) {
      this.setState(this.getInitialState());
    },

    onMouseEnterDiscontinue: function(serviceId) {
      this.setState({ hoveringDiscontinueServiceId: serviceId });
    },

    onMouseLeaveDiscontinue: function() {
      this.setState({ hoveringDiscontinueServiceId: null });
    },

    onMouseEnterCancel: function(serviceId) {
      this.setState({ hoveringCancelServiceId: serviceId });
    },

    onMouseLeaveCancel: function() {
      this.setState({ hoveringCancelServiceId: null });
    },

    render: function() {
      const elements = (this.props.servicesFeed.active.length === 0 && this.props.servicesFeed.discontinued.length === 0)
        ? <div style={styles.noItems}>
        No services
      </div>
        : this.sortedMergedServices(this.props.servicesFeed).map(this.renderService);
      return (
        <div className="ServicesList">
          {elements}
        </div>
      );
    },

    renderService: function(service) {
      const wasDiscontinued = this.wasDiscontinued(service);
      const serviceText = this.props.serviceTypesIndex[service.service_type_id].name;
      const providedByEducatorName = service.provided_by_educator_name;

      return (
        <div
          key={service.id}
          style={merge(styles.service, {
            background: serviceColor(service.service_type_id),
            opacity: (wasDiscontinued) ? 0.8 : 1
          })}>
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 'bold' }}>
                {serviceText}
              </div>
              {this.renderEducatorName(providedByEducatorName)}
              {// When did the service start?
              this.renderDateStarted(service)}
              {// When will the service end?
              this.renderDateEnded(service)}
              {// How long has it been going?
              this.renderTimeSinceStarted(service)}
            </div>
            {this.renderDiscontinuedInformation(service)}
          </div>
          <div style={merge(styles.userText, { paddingTop: 15 })}>
            {service.comment}
          </div>
        </div>
      );
    },

    renderDateStarted: function (service) {
      const momentStarted = moment.utc(service.date_started);
      const startedToday = moment().utc().subtract(1, 'day') < momentStarted;

      // For services added today, return "Started today" instead of the date:
      if (startedToday) return (
        <div>
          Started today
        </div>
      );

      // For services started earlier than today, show the date started:
      return (
        <div>
          {'Started '}
          {momentStarted.format('MMMM D, YYYY')}
        </div>
      );
    },

    renderDateEnded: function (service) {
      const momentEnded = moment.utc(service.date_ended);
      const endedToday = moment().utc().subtract(1, 'day');

      // For services ended today, return "Ended today" instead of the date:
      if (endedToday == momentEnded ) return (
        <div>
          Ended today
        </div>
      );

      // For services that will end in the future, show the future ended date:
      return (
        <div>
          {'Scheduled to End '}
          {momentEnded.format('MMMM D, YYYY')}
        </div>
      );
    },

    renderTimeSinceStarted: function (service) {
      const wasDiscontinued = this.wasDiscontinued(service);
      const momentStarted = moment.utc(service.date_started);

      if (wasDiscontinued) {
        // For discontinued services, display the length of time between start and discontinue dates
        return (
          <div>
{'fraction_non_alphanumeric': 0.1162534901429901, 'fraction_numerical': 0.005753447838226585, 'mean_word_length': 2.318360471645143, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2138723', 'n_tokens_mistral': 3448, 'n_tokens_neox': 3323, 'n_words': 704}