<commit_before>// @flow

import React from 'react';
import type Moment from 'moment';
import datetime, {DateFormat} from "../../utils/datetime.js";
import Button from 'react-bootstrap/Button';
import CurrentUser from "../../utils/CurrentUser.js";
import {EventData} from "../../utils/EventAPIUtils.js";
import urlHelper from "../../utils/url.js";
import Section from "../../enums/Section";
import ProjectCardsContainer from "../FindProjects/ProjectCardsContainer.jsx";
import ProjectSearchDispatcher from "../../stores/ProjectSearchDispatcher.js";
import _ from "lodash";


type Props = {|
  event: ?EventData,
  viewOnly: boolean
|};

type State = {|
  event: ?EventData
|};

class AboutEventDisplay extends React.PureComponent<Props, State> {
  constructor(props: Props): void{
    super();
    this.state = {
      event: props.event
    };

    if(this.state.event) {
      this.filterProjectsByOrgTag();
    }
 }

  componentWillReceiveProps(nextProps: Props): void {
    if(nextProps.event !== this.props.event) {
      this.setState({
        event: nextProps.event
      }, this.filterProjectsByOrgTag);
    }
  }

  render(): ?$React$Node {
    const event:EventData = this.state.event;
    return !event ? null : (
      <div className="AboutEvent-root container">

        <div className="AboutEvent-title row">
          <div className="col-12 AboutEvent-header">
          {
            !this.props.viewOnly
            && (CurrentUser.userID() === this.state.event.event_creator || CurrentUser.isStaff())
            && this._renderEditButton()
          }
            <div className="AboutEvent-title-date">
              {datetime.parse(event.event_date_start).format(DateFormat.MONTH_DATE_YEAR)}
            </div>
            <h1>{event.event_name}</h1>
            <p>{event.event_short_description}</p>
          </div>
        </div>

        <div className="AboutEvent-EventBanner row">
          <div className="AboutEvent-info col-xs-12 col-lg-4">
            <div className="AboutEvent-info-inner">
              <h3>Info</h3>
              {/*TODO: Handle multi-day events*/}
              <h5 className="AboutEvent-info-header">Date</h5>
              <p>{datetime.parse(event.event_date_start).format(DateFormat.DAY_MONTH_DATE_YEAR)}</p>
              {this.state.event.event_organizers_text && (
                  <React.Fragment>
                    <h5 className="AboutEvent-info-header">Organizers</h5>
                    <div className="AboutEvent-location">
                      <p>{this.state.event.event_organizers_text}</p>
                    </div>
                  </React.Fragment>
                )
              }

              <h5 className="AboutEvent-info-header">Time</h5>
              <p>{this._renderTimeRange()}</p><commit_msg>Event Profile: Move organizers section above event date<commit_after>// @flow

import React from 'react';
import type Moment from 'moment';
import datetime, {DateFormat} from "../../utils/datetime.js";
import Button from 'react-bootstrap/Button';
import CurrentUser from "../../utils/CurrentUser.js";
import {EventData} from "../../utils/EventAPIUtils.js";
import urlHelper from "../../utils/url.js";
import Section from "../../enums/Section";
import ProjectCardsContainer from "../FindProjects/ProjectCardsContainer.jsx";
import ProjectSearchDispatcher from "../../stores/ProjectSearchDispatcher.js";
import _ from "lodash";


type Props = {|
  event: ?EventData,
  viewOnly: boolean
|};

type State = {|
  event: ?EventData
|};

class AboutEventDisplay extends React.PureComponent<Props, State> {
  constructor(props: Props): void{
    super();
    this.state = {
      event: props.event
    };

    if(this.state.event) {
      this.filterProjectsByOrgTag();
    }
 }

  componentWillReceiveProps(nextProps: Props): void {
    if(nextProps.event !== this.props.event) {
      this.setState({
        event: nextProps.event
      }, this.filterProjectsByOrgTag);
    }
  }

  render(): ?$React$Node {
    const event:EventData = this.state.event;
    return !event ? null : (
      <div className="AboutEvent-root container">

        <div className="AboutEvent-title row">
          <div className="col-12 AboutEvent-header">
          {
            !this.props.viewOnly
            && (CurrentUser.userID() === this.state.event.event_creator || CurrentUser.isStaff())
            && this._renderEditButton()
          }
            <div className="AboutEvent-title-date">
              {datetime.parse(event.event_date_start).format(DateFormat.MONTH_DATE_YEAR)}
            </div>
            <h1>{event.event_name}</h1>
            <p>{event.event_short_description}</p>
          </div>
        </div>

        <div className="AboutEvent-EventBanner row">
          <div className="AboutEvent-info col-xs-12 col-lg-4">
            <div className="AboutEvent-info-inner">
              <h3>Info</h3>
              {this.state.event.event_organizers_text && (
                <React.Fragment>
                  <h5 className="AboutEvent-info-header">Organizers</h5>
                  <div className="AboutEvent-location">
                    <p>{this.state.event.event_organizers_text}</p>
                  </div>
                </React.Fragment>
              )
              }
  
              {/*TODO: Handle multi-day events*/}
              <h5 className="AboutEvent-info-header">Date</h5>
              <p>{datetime.parse(event.event_date_start).format(DateFormat.DAY_MONTH_DATE_YEAR)}</p>

              <h5 className="AboutEvent-info-header">Time</h5>
              <p>{this._renderTimeRange()}</p>
{'fraction_non_alphanumeric': 0.1445933869526363, 'fraction_numerical': 0.005361930294906166, 'mean_word_length': 2.3448894202032275, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, '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': '680291', 'n_tokens_mistral': 1644, 'n_tokens_neox': 1615, 'n_words': 284}