<commit_before>import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchPost, fetchComments, votePost, createComment, voteComment, deleteAPost } from '../Actions'
import Moment from 'react-moment';
import { Field, reduxForm } from 'redux-form'
import { Link } from 'react-router-dom'

class Post extends Component {

  componentDidMount() {
    const POST_ID = this.props.match.params.post_id
    this.props.loadPost(POST_ID)
    this.props.loadComments(POST_ID)
  }

  upVotePost = () => {
    const POST_ID = this.props.match.params.post_id
    const value = {
      option: "upVote"
    }
    this.props.votePost(POST_ID, value)
  }

  downVotePost = () => {
    const POST_ID = this.props.match.params.post_id
    const value = {
      option: "downVote"
    }
    this.props.votePost(POST_ID, value)
  }

  upVoteComment = (comment) => {
    const COMMENT_ID = comment.id
    const value = {
      option: "upVote"
    }
    this.props.voteComment(COMMENT_ID, value)
  }

  downVoteComment = (comment) => {
    const COMMENT_ID = comment.id
    const value = {
      option: "downVote"
    }
    this.props.voteComment(COMMENT_ID, value)
  }

  renderField = (field) => {
    const { meta: { touched, error } } = field
    const className = `form-group ${touched && error ? 'has-danger' : ''}`

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    )
  }

  onSubmit = (values) => {
    values['id'] = Math.random().toString(36).substr(-8)
    values['timestamp'] = Date.now()
    values['parentId'] = this.props.posts[0].id
    this.props.createComment(values)
  }

  removePost = () => {
    const POST_ID = this.props.match.params.post_id
    this.props.deletePost(POST_ID, () => {
      this.props.history.goBack()
    })
  }

  render() {
    const post = this.props.posts[0]
    const { comments, history } = this.props
    const { handleSubmit } = this.props
    console.log(this.props)

    return(
        <div style={{ paddingTop: "20px" }} className="container">
          <div className="blog-post">
            <h2 className="blog-post-title">{post.title}</h2>
            <p className="blog-post-meta"><Moment format="YYYY/MM/DD">{post.timestamp}</Moment> by {post.author}</p>
          <hr />
            <div className="card-body">
              <p>{post.body}</p>
            </div>
            <hr />
            <p className="blog-post-meta">
              <span style={{ marginRight: "5px" }} onClick={this.upVotePost}><i className="fa fa-level-up" aria-hidden="true"></i></span>
                {post.voteScore}
              <span style={{ marginLeft: "5px" }} onClick={this.downVotePost}><i className="fa fa-level-down" aria-hidden="true"></i></span>
              <i style={{ marginLeft: "30px" }} className="fa fa-comments" aria-hidden="true"></i> {comments.length}
            </p>
            <Link className="card-link" to = {{
              pathname: `${history.location.pathname}/edit`
            }}>Edit Comment</Link>
            <span className="card-link" onClick={this.removePost}><a>Delete Post</a></span>
          </div>
          <div className="container">
            <div className="comments">
              <h3 className="mb-2">Comments</h3>
              <form style={{ paddingBottom: "20px" }} onSubmit={handleSubmit(this.onSubmit)}>
                <Field
                  label="Author"
                  name="author"
                  component={this.renderField}
                />
                <Field
                  label="Body"
                  name="body"
                  component={this.renderField}
                />
                <button type="submit" className="btn btn-primary">Submit</button>
              </form>
              {comments.map((comment) => (
                <div key={comment.id} className="comment">
                  <div className="comment-content">
                    <h6 className="small comment-meta">
                      {comment.author}
                      <Moment format="YYYY/MM/DD">{comment.timestamp}</Moment>
                      <span style={{ marginRight: "5px", marginLeft: "10px" }} onClick={this.upVoteComment.bind(this, comment)}><i className="fa fa-level-up" aria-hidden="true"></i></span>
                        {comment.voteScore}
                      <span style={{ marginLeft: "5px" }} onClick={this.downVoteComment.bind(this, comment)}><i className="fa fa-level-down" aria-hidden="true"></i></span>
                    </h6>
                    <div className="comment-body">
                      <p>{comment.body}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
    )
  }
}

function validate(values) {
  const errors = {}

  if(!values.author) {
    errors.author = "Please enter your username!"
  }

  if(!values.body) {
    errors.body = "Please enter some content!"
  }

  return errors
}

function mapStateToProps({ posts, comments }) {
  return {
    posts,
    comments
  }
}

function mapDispatchToProps(dispatch) {
  return {
    loadPost: (postId) => dispatch(fetchPost(postId)),
    loadComments: (postId) => dispatch(fetchComments(postId)),
    votePost: (postId, type) => dispatch(votePost(postId, type)),
    createComment: (comment) => dispatch(createComment(comment)),
    voteComment: (commentId, type) => dispatch(voteComment(commentId, type)),
    deletePost: (postId, callback) => dispatch(deleteAPost(postId, callback))
  }
}

export default reduxForm({
  validate,
  form: 'CommentsNewForm'
})(
  connect(mapStateToProps, mapDispatchToProps)(Post)
)
<commit_msg>chore: Spelling refactor<commit_after>import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchPost, fetchComments, votePost, createComment, voteComment, deleteAPost } from '../Actions'
import Moment from 'react-moment';
import { Field, reduxForm } from 'redux-form'
import { Link } from 'react-router-dom'

class Post extends Component {

  componentDidMount() {
    const POST_ID = this.props.match.params.post_id
    this.props.loadPost(POST_ID)
    this.props.loadComments(POST_ID)
  }

  upVotePost = () => {
    const POST_ID = this.props.match.params.post_id
    const value = {
      option: "upVote"
    }
    this.props.votePost(POST_ID, value)
  }

  downVotePost = () => {
    const POST_ID = this.props.match.params.post_id
    const value = {
      option: "downVote"
    }
    this.props.votePost(POST_ID, value)
  }

  upVoteComment = (comment) => {
    const COMMENT_ID = comment.id
    const value = {
      option: "upVote"
    }
    this.props.voteComment(COMMENT_ID, value)
  }

  downVoteComment = (comment) => {
    const COMMENT_ID = comment.id
    const value = {
      option: "downVote"
    }
    this.props.voteComment(COMMENT_ID, value)
  }

  renderField = (field) => {
    const { meta: { touched, error } } = field
    const className = `form-group ${touched && error ? 'has-danger' : ''}`

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    )
  }

  onSubmit = (values) => {
    values['id'] = Math.random().toString(36).substr(-8)
    values['timestamp'] = Date.now()
    values['parentId'] = this.props.posts[0].id
    this.props.createComment(values)
  }

  removePost = () => {
    const POST_ID = this.props.match.params.post_id
    this.props.deletePost(POST_ID, () => {
      this.props.history.goBack()
    })
  }

  render() {
    const post = this.props.posts[0]
    const { comments, history } = this.props
    const { handleSubmit } = this.props
    console.log(this.props)

    return(
        <div style={{ paddingTop: "20px" }} className="container">
          <div className="blog-post">
            <h2 className="blog-post-title">{post.title}</h2>
            <p className="blog-post-meta"><Moment format="YYYY/MM/DD">{post.timestamp}</Moment> by {post.author}</p>
          <hr />
            <div className="card-body">
              <p>{post.body}</p>
            </div>
            <hr />
            <p className="blog-post-meta">
              <span style={{ marginRight: "5px" }} onClick={this.upVotePost}><i className="fa fa-level-up" aria-hidden="true"></i></span>
                {post.voteScore}
              <span style={{ marginLeft: "5px" }} onClick={this.downVotePost}><i className="fa fa-level-down" aria-hidden="true"></i></span>
              <i style={{ marginLeft: "30px" }} className="fa fa-comments" aria-hidden="true"></i> {comments.length}
            </p>
            <Link className="card-link" to = {{
              pathname: `${history.location.pathname}/edit`
            }}>Edit Post</Link>
            <span className="card-link" onClick={this.removePost}><a>Delete Post</a></span>
          </div>
          <div className="container">
            <div className="comments">
              <h3 className="mb-2">Comments</h3>
              <form style={{ paddingBottom: "20px" }} onSubmit={handleSubmit(this.onSubmit)}>
                <Field
                  label="Author"
                  name="author"
                  component={this.renderField}
                />
                <Field
                  label="Body"
                  name="body"
                  component={this.renderField}
                />
                <button type="submit" className="btn btn-primary">Submit</button>
              </form>
              {comments.map((comment) => (
                <div key={comment.id} className="comment">
                  <div className="comment-content">
                    <h6 className="small comment-meta">
                      {comment.author}
                      <Moment format="YYYY/MM/DD">{comment.timestamp}</Moment>
                      <span style={{ marginRight: "5px", marginLeft: "10px" }} onClick={this.upVoteComment.bind(this, comment)}><i className="fa fa-level-up" aria-hidden="true"></i></span>
                        {comment.voteScore}
                      <span style={{ marginLeft: "5px" }} onClick={this.downVoteComment.bind(this, comment)}><i className="fa fa-level-down" aria-hidden="true"></i></span>
                    </h6>
                    <div className="comment-body">
                      <p>{comment.body}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
    )
  }
}

function validate(values) {
  const errors = {}

  if(!values.author) {
    errors.author = "Please enter your username!"
  }

  if(!values.body) {
    errors.body = "Please enter some content!"
  }

  return errors
}

function mapStateToProps({ posts, comments }) {
  return {
    posts,
    comments
  }
}

function mapDispatchToProps(dispatch) {
  return {
    loadPost: (postId) => dispatch(fetchPost(postId)),
    loadComments: (postId) => dispatch(fetchComments(postId)),
    votePost: (postId, type) => dispatch(votePost(postId, type)),
    createComment: (comment) => dispatch(createComment(comment)),
    voteComment: (commentId, type) => dispatch(voteComment(commentId, type)),
    deletePost: (postId, callback) => dispatch(deleteAPost(postId, callback))
  }
}

export default reduxForm({
  validate,
  form: 'CommentsNewForm'
})(
  connect(mapStateToProps, mapDispatchToProps)(Post)
)

{'fraction_non_alphanumeric': 0.15380047505938244, 'fraction_numerical': 0.0040719375636240245, 'mean_word_length': 2.1733512786002693, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 179, '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': '4001273', 'n_tokens_mistral': 3605, 'n_tokens_neox': 3502, 'n_words': 652}