<commit_before>import React, {Component, PropTypes} from 'react'
import moment from 'moment'
import gravatar from 'gravatar'
import { Panel, Row, Col, Glyphicon, FormControl, Button, ButtonToolbar, Media } from 'react-bootstrap'

// import WatchButton from '../../common/containers/WatchButton'
import { getComponentMessages, getMessage } from '../../common/util/config'
import { getProfileLink } from '../../common/util/util'

export default class NotesViewer extends Component {
  static propTypes = {
    feedSource: PropTypes.object,
    newNotePosted: PropTypes.func,
    notes: PropTypes.array,
    notesRequested: PropTypes.func,
    stacked: PropTypes.bool,
    type: PropTypes.string,
    user: PropTypes.object,
    version: PropTypes.object
  }

  state = {
    value: ''
  }

  componentWillMount () {
    this.props.notesRequested(this.props.feedSource)
  }

  _onChangeBody = (evt) => this.setState({value: evt.target.value})

  _onClickPublish = () => {
    this.props.newNotePosted({body: this.state.value})
    this.setState({value: ''})
  }

  _getUserUrl = (email) => gravatar.url(email, {protocol: 'https', s: '100'})

  render () {
    const {
      notes,
      notesRequested,
      stacked,
      user
    } = this.props
    const messages = getComponentMessages('NotesViewer')
    const userLink = user
      ? <a href={getProfileLink(user.profile.email)}>{user.profile.email}</a>
      : 'Unknown user'
    // const isWatchingComments = feedSource
    //   ? user.subscriptions.hasFeedSubscription(
    //     feedSource.projectId,
    //     feedSource.id,
    //     'feed-commented-on'
    //   )
    //   : false
    const {Body, Heading, Left} = Media
    return (
      <Row>
        <Col
          xs={12}
          sm={stacked ? 12 : 8}
          md={stacked ? 12 : 6}>
          <h3>
            <ButtonToolbar className='pull-right'>
              {/* We are deprecating separate subscriptions from comments and rolling
                  that into 'feed-updated' subscriptions. TODO: completely remove this
              <WatchButton
                isWatching={isWatchingComments}
                user={user}
                target={version ? version.id : feedSource.id}
                subscriptionType={version ? 'feedversion-commented-on' : 'feed-commented-on'} />
              */}
              <Button
                title={getMessage(messages, 'refresh')}
                onClick={notesRequested}>
                <Glyphicon glyph='refresh' />
                <span className='hidden-xs'>
                  {' '}{getMessage(messages, 'refresh')}
                </span>
              </Button>
            </ButtonToolbar>
            {getMessage(messages, 'all')}
          </h3>
          {/* List of notes */}
          {notes && notes.length > 0
            ? notes.map(note => {
              const noteDate = moment(note.date)
              return (
                <Media key={note.id}>
                  <Left>
                    <img
                      width={64}
                      height={64}
                      src={`${this._getUserUrl(note.userEmail)}`}
                      alt={note.userEmail} />
                  </Left>
                  <Body>
                    <Panel
                      className='comment-panel'
                      header={
                        <Heading>
                          <a href={getProfileLink(user.profile.email)}>
                            {user.profile.email}
                          </a>
                          {' '}
                          <small title={noteDate.format('h:MMa, MMM. DD YYYY')}>
                            commented {noteDate.fromNow()}
                          </small>
                        </Heading>
                      }>
                      <p>{note.body || '(no content)'}</p>
                    </Panel>
                  </Body>
                </Media>
              )
            })
            : <p><i>{getMessage(messages, 'none')}</i></p>
          }
        </Col>
        {/* Post note form */}
        <Col xs={12} sm={stacked ? 12 : 4} md={stacked ? 12 : 6}>
          <h3>{getMessage(messages, 'postComment')}</h3>
          <Media>
            <Left>
              <img
                alt={user.email}
                width={64}
                height={64}
                src={user ? user.profile.picture : ''} />
            </Left><commit_msg>fix(notes): use note creator's email in note item<commit_after>import React, {Component, PropTypes} from 'react'
import moment from 'moment'
import gravatar from 'gravatar'
import { Panel, Row, Col, Glyphicon, FormControl, Button, ButtonToolbar, Media } from 'react-bootstrap'

// import WatchButton from '../../common/containers/WatchButton'
import { getComponentMessages, getMessage } from '../../common/util/config'
import { getProfileLink } from '../../common/util/util'

export default class NotesViewer extends Component {
  static propTypes = {
    feedSource: PropTypes.object,
    newNotePosted: PropTypes.func,
    notes: PropTypes.array,
    notesRequested: PropTypes.func,
    stacked: PropTypes.bool,
    type: PropTypes.string,
    user: PropTypes.object,
    version: PropTypes.object
  }

  state = {
    value: ''
  }

  componentWillMount () {
    this.props.notesRequested(this.props.feedSource)
  }

  _onChangeBody = (evt) => this.setState({value: evt.target.value})

  _onClickPublish = () => {
    this.props.newNotePosted({body: this.state.value})
    this.setState({value: ''})
  }

  _getUserUrl = (email) => gravatar.url(email, {protocol: 'https', s: '100'})

  render () {
    const {
      notes,
      notesRequested,
      stacked,
      user
    } = this.props
    const messages = getComponentMessages('NotesViewer')
    const userLink = user
      ? <a href={getProfileLink(user.profile.email)}>{user.profile.email}</a>
      : 'Unknown user'
    // const isWatchingComments = feedSource
    //   ? user.subscriptions.hasFeedSubscription(
    //     feedSource.projectId,
    //     feedSource.id,
    //     'feed-commented-on'
    //   )
    //   : false
    const {Body, Heading, Left} = Media
    return (
      <Row>
        <Col
          xs={12}
          sm={stacked ? 12 : 8}
          md={stacked ? 12 : 6}>
          <h3>
            <ButtonToolbar className='pull-right'>
              {/* We are deprecating separate subscriptions from comments and rolling
                  that into 'feed-updated' subscriptions. TODO: completely remove this
              <WatchButton
                isWatching={isWatchingComments}
                user={user}
                target={version ? version.id : feedSource.id}
                subscriptionType={version ? 'feedversion-commented-on' : 'feed-commented-on'} />
              */}
              <Button
                title={getMessage(messages, 'refresh')}
                onClick={notesRequested}>
                <Glyphicon glyph='refresh' />
                <span className='hidden-xs'>
                  {' '}{getMessage(messages, 'refresh')}
                </span>
              </Button>
            </ButtonToolbar>
            {getMessage(messages, 'all')}
          </h3>
          {/* List of notes */}
          {notes && notes.length > 0
            ? notes.map(note => {
              const noteDate = moment(note.date)
              return (
                <Media key={note.id}>
                  <Left>
                    <img
                      width={64}
                      height={64}
                      src={`${this._getUserUrl(note.userEmail)}`}
                      alt={note.userEmail} />
                  </Left>
                  <Body>
                    <Panel
                      className='comment-panel'
                      header={
                        <Heading>
                          <a href={getProfileLink(note.userEmail)}>
                            {note.userEmail}
                          </a>
                          {' '}
                          <small title={noteDate.format('h:MMa, MMM. DD YYYY')}>
                            commented {noteDate.fromNow()}
                          </small>
                        </Heading>
                      }>
                      <p>{note.body || '(no content)'}</p>
                    </Panel>
                  </Body>
                </Media>
              )
            })
            : <p><i>{getMessage(messages, 'none')}</i></p>
          }
        </Col>
        {/* Post note form */}
        <Col xs={12} sm={stacked ? 12 : 4} md={stacked ? 12 : 6}>
          <h3>{getMessage(messages, 'postComment')}</h3>
          <Media>
            <Left>
              <img
                alt={user.email}
                width={64}
                height={64}
                src={user ? user.profile.picture : ''} />
            </Left>
{'fraction_non_alphanumeric': 0.13010146561443067, 'fraction_numerical': 0.007215332581736189, 'mean_word_length': 1.437087912087912, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 99, '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': '7470897', 'n_tokens_mistral': 2466, 'n_tokens_neox': 2386, 'n_words': 476}