<commit_before>import React from 'react'
import qs from 'querystring'
import { prefetch } from 'react-fetcher'
import { connect } from 'react-redux'
import { fetchProject, joinProject, updateProject } from '../../actions/project'
import { navigate } from '../../actions'
import { markdown } from '../../util/text'
import { contains, find } from 'lodash'
import truncate from 'html-truncate'
import Avatar from '../../components/Avatar'
import Video from '../../components/Video'
import { A, IndexA } from '../../components/A'
import { assetUrl } from '../../util/assets'
import { ProjectVisibility } from '../../constants'
const { bool, func, object } = React.PropTypes

@prefetch(({ dispatch, params: { id } }) => dispatch(fetchProject(id)))
@connect(({ projects, people, peopleByQuery }, { params: { id } }) => {
  let project = projects[id]
  let currentUser = people.current
  let key = qs.stringify({subject: 'project-moderators', id})
  let canModerate = currentUser && (contains(peopleByQuery[key], currentUser.id) ||
    project.user.id === currentUser.id)

  return {project, currentUser, canModerate}
})
export default class ProjectProfile extends React.Component {
  static propTypes = {
    project: object,
    children: object,
    currentUser: object,
    dispatch: func,
    location: object,
    canModerate: bool
  }

  constructor (props) {
    super(props)
    this.state = {}
  }

  publish = () => {
    let { project, dispatch } = this.props
    dispatch(updateProject(project.id, {publish: true}))
  }

  componentDidMount () {
    let { location: { query }, dispatch, currentUser } = this.props
    if (query.action === 'join-project') {
      this.join()
      if (currentUser) {
        dispatch(navigate(window.location.pathname))
      }
    }
  }

  join = () => {
    let { project, currentUser, dispatch } = this.props
    if (currentUser) {
      dispatch(joinProject(project, currentUser))
    } else {
      let params = {
        next: window.location.pathname,
        action: 'join-project',
        id: project.id
      }
      dispatch(navigate(`/login?${qs.stringify(params)}`))
    }
  }

  render () {
    let { project, currentUser, canModerate } = this.props
    if (!project) return <div>Loading...</div>
    let { contributors } = project
    let { user, community, media, id, slug } = project
    let video = find(media, m => m.type === 'video')
    let image = find(media, m => m.type === 'image')
    let isPublic = project.visibility === ProjectVisibility.PUBLIC
    let isPublished = !!project.published_at
    let canPost = canModerate || (currentUser && contains(contributors.map(c => c.id), currentUser.id))
    let details = project.details ? markdown(project.details) : ''
    let expandable
    if (!this.state.expanded) {
      let truncated = truncate(details, 300)
      expandable = truncated.length < details.length
      if (expandable) details = truncated
    }

    return <div id='project'>
      {!isPublished && canModerate && <div className='draft-header'>
        <button onClick={this.publish}>Publish</button>
        <strong>Draft Project</strong> &mdash; You can edit project details, add posts, and invite contributors until you are happy with how your project looks. Only you and other contributors will be able to see this project until it is published.
      </div>}
      <div className='project-header'>
        <div className='col-sm-12 title-row'>
          <div className='right'>
            {canModerate && <A className='button' to={`/project/${project.id}/edit`}>Edit project</A>}
            {!canPost && <a className='button' onClick={this.join}>Join project</a>}
          </div>
          <h2>{project.title}</h2>
        </div>

        <div className='col-sm-8'>
          <h4 className='intention'>Core Intention: {project.intention}</h4>
          {video
            ? <div className='video-wrapper'><Video url={video.url}/></div>
          : image && <img src={image.url} className='full-image'/>}
          <div dangerouslySetInnerHTML={{__html: details}}/>
          {expandable && <a className='expand' onClick={() => this.setState({expanded: true})}>
            See More
          </a>}
        </div>

        <div className='meta col-sm-4'>
          <ul><commit_msg>add social sharing to projects<commit_after>import React from 'react'
import qs from 'querystring'
import { prefetch } from 'react-fetcher'
import { connect } from 'react-redux'
import { fetchProject, joinProject, updateProject } from '../../actions/project'
import { navigate } from '../../actions'
import { markdown } from '../../util/text'
import { contains, find } from 'lodash'
import truncate from 'html-truncate'
import Avatar from '../../components/Avatar'
import Video from '../../components/Video'
import { A, IndexA } from '../../components/A'
import SocialSharing from '../../components/SocialSharing'
import { assetUrl } from '../../util/assets'
import { ProjectVisibility } from '../../constants'
const { bool, func, object } = React.PropTypes

@prefetch(({ dispatch, params: { id } }) => dispatch(fetchProject(id)))
@connect(({ projects, people, peopleByQuery }, { params: { id } }) => {
  let project = projects[id]
  let currentUser = people.current
  let key = qs.stringify({subject: 'project-moderators', id})
  let canModerate = currentUser && (contains(peopleByQuery[key], currentUser.id) ||
    project.user.id === currentUser.id)

  return {project, currentUser, canModerate}
})
export default class ProjectProfile extends React.Component {
  static propTypes = {
    project: object,
    children: object,
    currentUser: object,
    dispatch: func,
    location: object,
    canModerate: bool
  }

  constructor (props) {
    super(props)
    this.state = {}
  }

  publish = () => {
    let { project, dispatch } = this.props
    dispatch(updateProject(project.id, {publish: true}))
  }

  componentDidMount () {
    let { location: { query }, dispatch, currentUser } = this.props
    if (query.action === 'join-project') {
      this.join()
      if (currentUser) {
        dispatch(navigate(window.location.pathname))
      }
    }
  }

  join = () => {
    let { project, currentUser, dispatch } = this.props
    if (currentUser) {
      dispatch(joinProject(project, currentUser))
    } else {
      let params = {
        next: window.location.pathname,
        action: 'join-project',
        id: project.id
      }
      dispatch(navigate(`/login?${qs.stringify(params)}`))
    }
  }

  render () {
    let { project, currentUser, canModerate } = this.props
    if (!project) return <div>Loading...</div>
    let { contributors } = project
    let { user, community, media, id, slug } = project
    let video = find(media, m => m.type === 'video')
    let image = find(media, m => m.type === 'image')
    let isPublic = project.visibility === ProjectVisibility.PUBLIC
    let isPublished = !!project.published_at
    let canPost = canModerate || (currentUser && contains(contributors.map(c => c.id), currentUser.id))
    let details = project.details ? markdown(project.details) : ''
    let expandable
    if (!this.state.expanded) {
      let truncated = truncate(details, 300)
      expandable = truncated.length < details.length
      if (expandable) details = truncated
    }

    return <div id='project'>
      {!isPublished && canModerate && <div className='draft-header'>
        <button onClick={this.publish}>Publish</button>
        <strong>Draft Project</strong> &mdash; You can edit project details, add posts, and invite contributors until you are happy with how your project looks. Only you and other contributors will be able to see this project until it is published.
      </div>}
      <div className='project-header'>
        <div className='col-sm-12 title-row'>
          <div className='right'>
            {isPublic && <SocialSharing toggleChildren={<a className='button'>Share</a>} url={`/project/${project.id}/${project.slug}`} text={project.title} />}
            {canModerate && <A className='button' to={`/project/${project.id}/edit`}>Edit project</A>}
            {!canPost && <a className='button' onClick={this.join}>Join project</a>}
          </div>
          <h2>{project.title}</h2>
        </div>

        <div className='col-sm-8'>
          <h4 className='intention'>Core Intention: {project.intention}</h4>
          {video
            ? <div className='video-wrapper'><Video url={video.url}/></div>
          : image && <img src={image.url} className='full-image'/>}
          <div dangerouslySetInnerHTML={{__html: details}}/>
          {expandable && <a className='expand' onClick={() => this.setState({expanded: true})}>
            See More
          </a>}
        </div>

        <div className='meta col-sm-4'>
          <ul>
{'fraction_non_alphanumeric': 0.15301355816338155, 'fraction_numerical': 0.0025065512133986556, 'mean_word_length': 2.99, 'pattern_counts': {'":': 0, '<': 74, '<?xml version=': 0, '>': 88, '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': '1998194', 'n_tokens_mistral': 2573, 'n_tokens_neox': 2536, 'n_words': 669}