<commit_before>/**
 * @providesModule CreditsList
 * @flow
 */

import * as React from 'react'

import { FormattedMessage } from 'react-intl'

import { acceptKeyboardClick } from 'shared/keyboard'
import CreditsListForm from './CreditsListForm'

import type { PodcastCreditList } from 'redux/state'
import type { CreditsListFormState } from './CreditsListForm'

class CreditsList extends React.Component<
  {
    canEdit: boolean,
    credits: PodcastCreditList,
    onChange: PodcastCreditList => any,
  },
  { editing: boolean }
> {
  state = { editing: false }

  handleStartEditing = () => {
    if (this.props.canEdit) this.setState({ editing: true })
  }

  handleFinishEditing = (formState: ?CreditsListFormState) => {
    this.setState({ editing: false })
    if (formState != null) {
      this.props.onChange({
        ...formState,
        hosts_string: formState.hosts.join(' • '),
      })
    }
  }

  render () {
    const { canEdit, credits } = this.props
    let { guests, hosts, hosts_string: hostsString } = credits

    return (
      <div
        tabIndex="0"
        role="button"
        style={{ cursor: canEdit ? 'pointer' : 'auto' }}
        onKeyPress={acceptKeyboardClick}
        onClick={this.handleStartEditing}
      >
        <dl>
          {guests.map(guest => {
            return [
              <dt key={`name:${guest.name}`}>{guest.name}</dt>,
              <dd key={`title:${guest.title}`}>{guest.title}</dd>,
            ]
          })}
        </dl>
        <em>
          <FormattedMessage
            id="podcasts.show.withHost.js"
            values={{ count: hosts.length }}
          />{' '}
          {hostsString}
        </em>
        <CreditsListForm
          credits={credits}
          editing={this.state.editing}
          onFinishEditing={this.handleFinishEditing}
        />
      </div>
    )
  }
}

export default CreditsList
<commit_msg>fix: use FormattedList to display podcast hosts<commit_after>/**
 * @providesModule CreditsList
 * @flow
 */

import * as React from 'react'

import { FormattedMessage } from 'react-intl'
import { FormattedList } from 'shared/react-intl'

import { acceptKeyboardClick } from 'shared/keyboard'
import CreditsListForm from './CreditsListForm'

import type { PodcastCreditList } from 'redux/state'
import type { CreditsListFormState } from './CreditsListForm'

class CreditsList extends React.Component<
  {
    canEdit: boolean,
    credits: PodcastCreditList,
    onChange: PodcastCreditList => any,
  },
  { editing: boolean }
> {
  state = { editing: false }

  handleStartEditing = () => {
    if (this.props.canEdit) this.setState({ editing: true })
  }

  handleFinishEditing = (formState: ?CreditsListFormState) => {
    this.setState({ editing: false })
    if (formState != null) {
      this.props.onChange({
        ...formState,
        hosts_string: formState.hosts.join(' • '),
      })
    }
  }

  render () {
    const { canEdit, credits } = this.props
    let { guests, hosts } = credits

    return (
      <div
        tabIndex="0"
        role="button"
        style={{ cursor: canEdit ? 'pointer' : 'auto' }}
        onKeyPress={acceptKeyboardClick}
        onClick={this.handleStartEditing}
      >
        <dl>
          {guests.map(guest => {
            return [
              <dt key={`name:${guest.name}`}>{guest.name}</dt>,
              <dd key={`title:${guest.title}`}>{guest.title}</dd>,
            ]
          })}
        </dl>
        <em>
          <FormattedMessage
            id="podcasts.show.withHost.js"
            values={{ count: hosts.length }}
          />{' '}
          <FormattedList list={hosts.map(h => <span key={h}>{h}</span>)} />
        </em>
        <CreditsListForm
          credits={credits}
          editing={this.state.editing}
          onFinishEditing={this.handleFinishEditing}
        />
      </div>
    )
  }
}

export default CreditsList

{'fraction_non_alphanumeric': 0.14091724314629772, 'fraction_numerical': 0.0005124263387138099, 'mean_word_length': 2.27791771620487, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 41, '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': '7542573', 'n_tokens_mistral': 1234, 'n_tokens_neox': 1221, 'n_words': 237}