<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose, lifecycle, branch, renderNothing, mapProps } from 'recompose'
import * as routes from 'data/page/actions'
import { fetchEvent, deleteEventDetail } from 'data/event/actions'
import { getEditingId, getEditingEvent, getEditingEventDetails } from 'data/event/selectors'
import EditableEvent from 'components/EditableEvent'
import EventDetails from 'components/EventDetails'
import EventDetailPlaceholder from './EventDetailPlaceholder'

const EventEdit = ({ event, details, goEdit, deleteEventDetail }) => (
  <div>
    <section className="section">
      <div className="container">
        <EditableEvent
          organization={event.organization}
          amountPeople={event.amountPeople}
          date={event.date}
          description={event.description}
        />
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div className="columns">
          <div className="column is-two-thirds">
            <EventDetails
              details={details}
              onEdit={goEdit}
              onDelete={deleteEventDetail}
            />
          </div>
          <div className="column is-one-third">
            <EventDetailPlaceholder />
          </div>
        </div>
      </div>
    </section>
  </div>
)

EventEdit.propTypes = {
  event: PropTypes.object.isRequired,
  details: PropTypes.arrayOf(PropTypes.object).isRequired,
  goEdit: PropTypes.func.isRequired,
  deleteEventDetail: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => ({
  editingId: getEditingId(state),
  event: getEditingEvent(state),
  details: getEditingEventDetails(state),
})

const mapDispatchToProps = (dispatch) => ({
  fetchEvent: (id) => dispatch(fetchEvent(id)),
  goEdit: (eventId, id) => dispatch(routes.goTo(routes.EVENT_DETAIL_EDIT, { eventId, id })),
  deleteEventDetail: (eventId, id) => dispatch(deleteEventDetail(eventId, id)),
})

const enhancer = compose(
  connect(mapStateToProps, mapDispatchToProps),
  lifecycle({
    componentDidMount() {
      this.props.fetchEvent(this.props.editingId)
    },
  }),
  branch(
    ({ event }) => event == null,
    renderNothing,
  ),
  mapProps(({ goEdit, deleteEventDetail, editingId, ...props }) => ({
    ...props,
    goEdit: (id) => goEdit(editingId, id),
    deleteEventDetail: (id) => deleteEventDetail(editingId, id),
  })),
)

export default enhancer(EventEdit)
<commit_msg>event edit: indicate the selected detail to the component<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose, lifecycle, branch, renderNothing, mapProps } from 'recompose'
import * as routes from 'data/page/actions'
import { fetchEvent, deleteEventDetail } from 'data/event/actions'
import {
  getEditingId, getEditingEvent, getEditingEventDetails, getEditingEventDetailId,
} from 'data/event/selectors'
import EditableEvent from 'components/EditableEvent'
import EventDetails from 'components/EventDetails'
import EventDetailPlaceholder from './EventDetailPlaceholder'

const EventEdit = ({ event, details, editingEventDetailId, goEdit, deleteEventDetail }) => (
  <div>
    <section className="section">
      <div className="container">
        <EditableEvent
          organization={event.organization}
          amountPeople={event.amountPeople}
          date={event.date}
          description={event.description}
        />
      </div>
    </section>
    <section className="section">
      <div className="container">
        <div className="columns">
          <div className="column is-two-thirds">
            <EventDetails
              details={details}
              selectedDetail={editingEventDetailId}
              onEdit={goEdit}
              onDelete={deleteEventDetail}
            />
          </div>
          <div className="column is-one-third">
            <EventDetailPlaceholder />
          </div>
        </div>
      </div>
    </section>
  </div>
)

EventEdit.propTypes = {
  event: PropTypes.object.isRequired,
  details: PropTypes.arrayOf(PropTypes.object).isRequired,
  editingEventDetailId: PropTypes.string,
  goEdit: PropTypes.func.isRequired,
  deleteEventDetail: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => ({
  editingId: getEditingId(state),
  event: getEditingEvent(state),
  details: getEditingEventDetails(state),
  editingEventDetailId: getEditingEventDetailId(state),
})

const mapDispatchToProps = (dispatch) => ({
  fetchEvent: (id) => dispatch(fetchEvent(id)),
  goEdit: (eventId, id) => dispatch(routes.goTo(routes.EVENT_DETAIL_EDIT, { eventId, id })),
  deleteEventDetail: (eventId, id) => dispatch(deleteEventDetail(eventId, id)),
})

const enhancer = compose(
  connect(mapStateToProps, mapDispatchToProps),
  lifecycle({
    componentDidMount() {
      this.props.fetchEvent(this.props.editingId)
    },
  }),
  branch(
    ({ event }) => event == null,
    renderNothing,
  ),
  mapProps(({ goEdit, deleteEventDetail, editingId, ...props }) => ({
    ...props,
    goEdit: (id) => goEdit(editingId, id),
    deleteEventDetail: (id) => deleteEventDetail(editingId, id),
  })),
)

export default enhancer(EventEdit)

{'fraction_non_alphanumeric': 0.12830188679245283, 'fraction_numerical': 0.0, 'mean_word_length': 3.5424164524421595, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 61, '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': '1995256', 'n_tokens_mistral': 1538, 'n_tokens_neox': 1542, 'n_words': 323}