import React, { Component } from 'react';
import moment from 'moment';
import renderHTML from 'react-render-html';
import insertCss from 'insert-css';
import style from './style';

const customStyle = `
  .comment-content p {
    margin: 0;
    padding: 0;
  }

  .comment-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 5px 8px;
    color: #000;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.94em;
    border-radius: 3px;
    background-color: #F8F8F8;
    border: 1px solid #f1f1f1;
  }

  .comment-content pre code {
    border: 0px !important;
    background: transparent !important;
    line-height: 1.3em;
  }

  .comment-content code {
    padding: 0 3px 0 3px;
    color: #000;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.94em;
    border-radius: 3px;
    background-color: #F8F8F8;
    border: 1px solid #f1f1f1;
  }

  .comment-content blockquote {
    color: #666666;
    margin: 3px 0;
    padding-left: 12px;
    border-left: 0.5em #EEE solid;
  }

  .comment-content ul, .comment-content ol {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }

  .comment-content a {
    color: #0645ad;
    text-decoration: none;
  }
`;

insertCss(customStyle);

export default class CommentList extends Component {
  componentDidMount() {
    const wrapper = this.refs.wrapper;
    wrapper.scrollTop = wrapper.scrollHeight;
  }

  componentDidUpdate(prev) {
    if (this.props.comments.length !== prev.comments.length) {
      const wrapper = this.refs.wrapper;
      wrapper.scrollTop = wrapper.scrollHeight;
    }
  }

  formatTime(ts) {
    return moment(new Date(ts), "YYYYMMDD").fromNow();
  }

  renderComment(comment, key) {
    if (!comment.user) return null;

    let commentStyle = style.commentItem;
    if (comment.loading) {
      commentStyle = style.commentItemloading;
    }

    return (
      <div style={commentStyle} key={key}>
        <div style={style.commentAside}>
          <img style={style.commentAvatar} src={comment.user.avatar} />
        </div>
        <div className="comment-content" style={style.commentContent}>
          <div style={style.commentHead}>
            <span style={style.commentUser}>{comment.user.name}</span>
            <span style={style.commentTime}>{this.formatTime(comment.time)}</span>
          </div>
          <span style={style.commentText}>{ renderHTML(`<span>${comment.text}</span>`) }</span>
        </div>
      </div>
    );
  }

  render() {
    const { comments } = this.props;

    if (comments.length === 0) {
      return (
        <div ref="wrapper" style={style.wrapper}>
          <div style={style.noComments}>No Comments Yet!</div>
        </div>
      );
    }

    return (
      <div ref="wrapper" style={style.wrapper}>
        {comments.map((c, idx) => this.renderComment(c, idx))}
      </div>
    );
  }
}

@@ -177,1105 +177,98 @@
 e';%0A
-%0Aconst customStyle = %60%0A  .comment-content p %7B%0A    margin: 0;%0A    padding: 0;%0A  %7D%0A%0A  .comment-content pre %7B%0A    white-space: pre-wrap;%0A    word-wrap: break-word;%0A    padding: 5px 8px;%0A    color: #000;%0A    font-family: Consolas, %22Liberation Mono%22, Menlo, Courier, monospace;%0A    font-size: 0.94em;%0A    border-radius: 3px;%0A    background-color: #F8F8F8;%0A    border: 1px solid #f1f1f1;%0A  %7D%0A%0A  .
+import 
 comment
--c
+C
 ontent
- pre code %7B%0A    border: 0px !important;%0A    background: transparent !important;%0A    line-height: 1.3em;%0A  %7D%0A%0A  .
+CSS from './
 comment
--
+_
 content
- code %7B%0A    padding: 0 3px 0 3px;%0A    color: #000;%0A    font-family: Consolas, %22Liberation Mono%22, Menlo, Courier, monospace;%0A    font-size: 0.94em;%0A    border-radius: 3px;%0A    background-color: #F8F8F8;%0A    border: 1px solid #f1f1f1;%0A  %7D%0A%0A  .comment-content blockquote %7B%0A    color: #666666;%0A    margin: 3px 0;%0A    padding-left: 12px;%0A    border-left: 0.5em #EEE solid;%0A  %7D%0A%0A  .comment-content ul, .comment-content ol %7B%0A    margin: 1em 0;%0A    padding: 0 0 0 2em;%0A  %7D%0A%0A  .
+_styles.css';%0A%0AinsertCss(
 comment
--c
+C
 ontent
- a %7B%0A    color: #0645ad;%0A    text-decoration: none;%0A  %7D%0A%60;%0A%0AinsertCss(customStyle
+CSS
 );%0A%0A

Move comment content CSS into a new file.