<commit_before>import React from 'react';
import { Link } from 'react-router';
import { FormattedMessage, FormattedDate, intlShape, injectIntl } from 'react-intl';
import ProfileNameContainer from '../containers/ProfileNameContainer.jsx';

class EventTeaser extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { event, displayOrg } = this.props;
    const { formatMessage, locale } = this.props.intl;

    // Can not defineMessages here because countries are coming from the database
    const locationLine = [
      event.locality,
      event.administrativeArea,
      formatMessage({
        'id': `country.${event.country}`,
        'defaultMessage': event.country,
        'description': `Country options: ${event.country}`
      })
    ].filter(function (val) {return val;}).join(', ');

    return (
      <article className="event-teaser">
        <div className="event-main-info">
          { (displayOrg && event.organizations) ?
            <div className="event-organizations">
              <ProfileNameContainer
                profileId={event.organizations._id}
                defaultName={event.organizations.name}
              />
            </div>: ''}
          {typeof locationLine !== 'undefined' ?
            <div className="event-location">{locationLine}</div> : ''}
          <div className="event-metadata">
            <div className="event-type">
              {
                formatMessage({
                  'id': `eventType.${event.eventType}`,
                  'defaultMessage': event.eventType,
                  'description': `Interests option: ${event.eventType}`
                })
              }
              <span className="event-type-seperator">:</span>
            </div>
            {event.startDate && event.endDate ?
              <div className="event-date-range date">
                <FormattedDate
                  value={event.startDate}
                  year='numeric'
                  month='short'
                  day='numeric'
                />
                <span> – </span>
                <FormattedDate
                  value={event.endDate}
                  year='numeric'
                  month='short'
                  day='numeric'
                />
              </div> : ''}
          </div>
          <Link
            to={`/${locale}/events/${ event._id }`}
            className="event-view-link"
            key={event._id}
          >
            <FormattedMessage
              id="eventTeaser.viewEventLink"
              description="Link directly to event from teaser"
              defaultMessage="View Event"
            />
          </Link>
        </div>
      </article>
    );
  }
}
<commit_msg>Reformat EventTeaser.jsx as a pure function.<commit_after>import React from 'react';
import { Link } from 'react-router';
import { FormattedMessage, FormattedDate, intlShape, injectIntl } from 'react-intl';
import ProfileNameContainer from '../containers/ProfileNameContainer.jsx';

const EventTeaser = (props) => {
  const { event, displayOrg } = props;
  const { formatMessage, locale } = props.intl;

  // Can not defineMessages here because countries are coming from the database
  const locationLine = [
    event.locality,
    event.administrativeArea,
    formatMessage({
      id: `country.${event.country}`,
      defaultMessage: event.country,
      description: `Country options: ${event.country}`,
    }),
  ].filter(val => (val)).join(', ');

  return (
    <article className="event-teaser">
      <div className="event-main-info">
        {(displayOrg && event.organizations) ?
          <div className="event-organizations">
            <ProfileNameContainer
              profileId={event.organizations._id}
              defaultName={event.organizations.name}
            />
          </div> : ''}
        {typeof locationLine !== 'undefined' ?
          <div className="event-location">{locationLine}</div> : ''}
        <div className="event-metadata">
          <div className="event-type">
            {
              formatMessage({
                id: `eventType.${event.eventType}`,
                defaultMessage: event.eventType,
              })
            }
            <span className="event-type-seperator">:</span>
          </div>
          {event.startDate && event.endDate ?
            <div className="event-date-range date">
              <FormattedDate
                value={event.startDate}
                year="numeric"
                month="short"
                day="numeric"
              />
              <span> – </span>
              <FormattedDate
                value={event.endDate}
                year="numeric"
                month="short"
                day="numeric"
              />
            </div> : ''}
        </div>
        <Link
          to={`/${locale}/events/${event._id}`}
          className="event-view-link"
          key={event._id}
        >
          <FormattedMessage
            id="eventTeaser.viewEventLink"
            description="Link directly to event from teaser"
            defaultMessage="View Event"
          />
        </Link>
      </div>
    </article>
  );
};

{'fraction_non_alphanumeric': 0.1290881108118507, 'fraction_numerical': 0.0, 'mean_word_length': 1.6965767634854771, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 53, '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': '4538275', 'n_tokens_mistral': 1358, 'n_tokens_neox': 1328, 'n_words': 262}