{"size": 1231, "ext": "js", "max_stars_repo_path": "src/components/EventProfile/EventComments/CommentsList.js", "max_stars_repo_name": "jeremiahtenbrink/volunteer-platform-fe", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/EventProfile/EventComments/CommentsList.js", "max_issues_repo_name": "jeremiahtenbrink/volunteer-platform-fe", "max_issues_repo_issues_event_min_datetime": "2019-09-17T19:20:26.000Z", "max_issues_repo_issues_event_max_datetime": "2019-10-14T16:33:58.000Z", "max_forks_repo_path": "src/components/EventProfile/EventComments/CommentsList.js", "max_forks_repo_name": "jeremiahtenbrink/volunteer-platform-fe", "max_forks_repo_forks_event_min_datetime": "2019-09-18T16:03:34.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-21T20:42:43.000Z"}
{"max_stars_count": null, "max_issues_count": 41, "max_forks_count": 4, "avg_line_length": 23.6730769231, "max_line_length": 59, "alphanum_fraction": 0.5865150284}
import { List } from 'antd';
import CommentItem from './CommentItem';
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

export const CommentList = ({
  comments,
  addCommentToComment,
  isLoading,
  event,
}) => {
  return (
    <StyledCommentList>
      <h3>Event Comments</h3>
      {comments && comments.length > 0 ? (
        <List
          dataSource={comments}
          header={`${comments.length} ${
            comments.length > 1 ? 'comments' : 'comment'
          }`}
          itemLayout="horizontal"
          renderItem={props => (
            <CommentItem
              {...props}
              event={event}
              allowReply={true}
              addCommentToComment={addCommentToComment}
              isLoading={isLoading}
            />
          )}
        />
      ) : (
        <h5>There are no comments at this time.</h5>
      )}
    </StyledCommentList>
  );
};

const StyledCommentList = styled.div`
  width: 80%;
  margin: 0 auto;
`;

CommentList.propTypes = {
  comments: PropTypes.arrayOf(PropTypes.object).isRequired,
  addCommentToComment: PropTypes.func.isRequired,
  event: PropTypes.object.isRequired,
};

export default CommentList;
