<commit_before>import { Components, registerComponent, withList } from 'meteor/vulcan:core';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Comments } from '../../lib/collections/comments';
import { withStyles } from '@material-ui/core/styles'
import { unflattenComments } from "../../lib/modules/utils/unflatten";
import withUser from '../common/withUser';
import classNames from 'classnames';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  commentsList: {
    marginLeft: -theme.spacing.unit*1.5,
    marginRight: -theme.spacing.unit*1.5,
  },
  noComments: {
    position: "relative",
    textAlign: "right",
    top:-theme.spacing.unit*8
  },
  noCommentAnswersList: {
    borderTop: 'transparent'
  },
  editor: {
    marginLeft: theme.spacing.unit*4,
    marginTop: theme.spacing.unit*2,
    paddingLeft: theme.spacing.unit*1.5,
    paddingBottom: theme.spacing.unit*1.5,
    borderTop: `solid 1px ${theme.palette.grey[300]}`
  },
  newComment: {
    padding: theme.spacing.unit*2.5,
    textAlign: 'right',
    color: theme.palette.grey[600]
  },
  loadMore: {
    color: theme.palette.primary.main,
    textAlign: 'right'
  },
  loadingMore: {
    opacity:.7
  },
  canLoadMore: {
    cursor: "pointer"
  }
})

export const ABRIDGE_COMMENT_COUNT = 500;

class AnswerCommentsList extends PureComponent {

  constructor(props) {
    super(props);

    const { lastEvent, post } = this.props;

    this.state = {
      commenting: false,
      loadedMore: false,
      highlightDate:
        (lastEvent && lastEvent.properties && lastEvent.properties.createdAt
          && new Date(lastEvent.properties.createdAt))
        || (post && post.lastVisitedAt
          && new Date(post.lastVisitedAt))
        || new Date(),
    }
  }

  closeCommentNewForm = () => {
    this.setState({commenting:false})
  }

  loadMoreComments = (event) => {
    event.stopPropagation()
    const { loadMore, totalCount } = this.props
    if (totalCount > ABRIDGE_COMMENT_COUNT) {
      this.setState({loadedMore: true})
      loadMore({limit: 10000})
    }
  }

  render() {
    const { currentUser, results, loading, loadingMore, classes, totalCount, post, parentAnswer } = this.props
    const { CommentsList, Loading, CommentsNewForm } = Components
    const { commenting, highlightDate, loadedMore } = this.state
    const noComments = (!results || !results.length) && !commenting

    // const loadingMore = networkStatus === 2;
    if (loading || !results) {
      return <Loading/>
    } else {
      const nestedComments = unflattenComments(results);
      return (
        <div>
          {!commenting && <Typography variant="body2" onClick={()=>this.setState({commenting: true})} className={classNames(classes.newComment)}>
              <a>Add Comment</a>
            </Typography>}
          { commenting &&
              <div className={classes.editor}>
                <CommentsNewForm
                  post={post}
                  parentComment={parentAnswer}
                  prefilledProps={{
                    parentAnswerId: parentAnswer._id,
                  }}
                  successCallback={this.closeCommentNewForm}
                  cancelCallback={this.closeCommentNewForm}
                  type="reply"
                />
              </div>
            }
          <div onClick={this.loadMoreComments}
            className={classNames(
              classes.commentsList, {
                [classes.noCommentAnswersList]: noComments,
                [classes.loadingMore]: loadingMore,
                [classes.canLoadMore]: !loadedMore && totalCount > ABRIDGE_COMMENT_COUNT
              }
          )}>
            { loadingMore && <Loading /> }
            <CommentsList
              currentUser={currentUser}
              totalComments={totalCount}
              comments={nestedComments}
              highlightDate={highlightDate}
              post={post}
              parentCommentId={parentAnswer._id}
              parentAnswerId={parentAnswer._id}
              defaultNestingLevel={2}
              postPage
              startThreadTruncated
            />
          </div>
          {(results && results.length && results.length < totalCount) ?
            <Typography variant="body2" onClick={this.loadMoreComments} className={classes.loadMore}>
              <a>Showing {results.length}/{totalCount} comments. Click to load All.</a>
            </Typography> : null}
        </div>
      );
    }
  }
}

AnswerCommentsList.propTypes = {<commit_msg>Func-ify AnswerCommentsList<commit_after>import { Components, registerComponent, withList } from 'meteor/vulcan:core';
import React from 'react';
import PropTypes from 'prop-types';
import { Comments } from '../../lib/collections/comments';
import { withStyles } from '@material-ui/core/styles'
import { unflattenComments } from "../../lib/modules/utils/unflatten";
import withUser from '../common/withUser';
import classNames from 'classnames';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  commentsList: {
    marginLeft: -theme.spacing.unit*1.5,
    marginRight: -theme.spacing.unit*1.5,
  },
  noComments: {
    position: "relative",
    textAlign: "right",
    top:-theme.spacing.unit*8
  },
  noCommentAnswersList: {
    borderTop: 'transparent'
  },
  editor: {
    marginLeft: theme.spacing.unit*4,
    marginTop: theme.spacing.unit*2,
    paddingLeft: theme.spacing.unit*1.5,
    paddingBottom: theme.spacing.unit*1.5,
    borderTop: `solid 1px ${theme.palette.grey[300]}`
  },
  newComment: {
    padding: theme.spacing.unit*2.5,
    textAlign: 'right',
    color: theme.palette.grey[600]
  },
  loadMore: {
    color: theme.palette.primary.main,
    textAlign: 'right'
  },
  loadingMore: {
    opacity:.7
  },
  canLoadMore: {
    cursor: "pointer"
  }
})

export const ABRIDGE_COMMENT_COUNT = 500;

const AnswerCommentsList = ({lastEvent, loadMore, currentUser, results, loading, loadingMore, classes, totalCount, post, parentAnswer}) => {
  const [commenting, setCommenting] = React.useState(false);
  const [loadedMore, setLoadedMore] = React.useState(false);
  const highlightDate =
    (lastEvent && lastEvent.properties && lastEvent.properties.createdAt
      && new Date(lastEvent.properties.createdAt))
    || (post && post.lastVisitedAt
      && new Date(post.lastVisitedAt))
    || new Date();

  const closeCommentNewForm = React.useCallback(
    () => setCommenting(false),
    [setCommenting]
  );

  const loadMoreComments = React.useCallback(
    (event) => {
      event.stopPropagation()
      if (totalCount > ABRIDGE_COMMENT_COUNT) {
        setLoadedMore(true);
        loadMore({limit: 10000})
      }
    },
    [totalCount, setLoadedMore, loadMore]
  );

  const { CommentsList, Loading, CommentsNewForm } = Components
  const noComments = (!results || !results.length) && !commenting

  if (loading || !results)
    return <Loading/>
  
  const nestedComments = unflattenComments(results);
  return (
    <div>
      {!commenting && <Typography variant="body2" onClick={()=>setCommenting(true)} className={classNames(classes.newComment)}>
          <a>Add Comment</a>
        </Typography>}
      { commenting &&
          <div className={classes.editor}>
            <CommentsNewForm
              post={post}
              parentComment={parentAnswer}
              prefilledProps={{
                parentAnswerId: parentAnswer._id,
              }}
              successCallback={closeCommentNewForm}
              cancelCallback={closeCommentNewForm}
              type="reply"
            />
          </div>
        }
      <div onClick={loadMoreComments}
        className={classNames(
          classes.commentsList, {
            [classes.noCommentAnswersList]: noComments,
            [classes.loadingMore]: loadingMore,
            [classes.canLoadMore]: !loadedMore && totalCount > ABRIDGE_COMMENT_COUNT
          }
      )}>
        { loadingMore && <Loading /> }
        <CommentsList
          currentUser={currentUser}
          totalComments={totalCount}
          comments={nestedComments}
          highlightDate={highlightDate}
          post={post}
          parentCommentId={parentAnswer._id}
          parentAnswerId={parentAnswer._id}
          defaultNestingLevel={2}
          postPage
          startThreadTruncated
        />
      </div>
      {(results && results.length && results.length < totalCount) ?
        <Typography variant="body2" onClick={loadMoreComments} className={classes.loadMore}>
          <a>Showing {results.length}/{totalCount} comments. Click to load All.</a>
        </Typography> : null}
    </div>
  );
}

AnswerCommentsList.propTypes = {
{'fraction_non_alphanumeric': 0.12634347130116624, 'fraction_numerical': 0.007431968900068603, 'mean_word_length': 2.5470397404703973, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 52, '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': '3108035', 'n_tokens_mistral': 2602, 'n_tokens_neox': 2478, 'n_words': 469}