{"size": 1647, "ext": "js", "max_stars_repo_path": "client/components/content/post-viewer/ContentViewContent.js", "max_stars_repo_name": "3jin/blog.sejin", "max_stars_repo_stars_event_min_datetime": "2017-12-05T02:08:55.000Z", "max_stars_repo_stars_event_max_datetime": "2018-05-13T13:57:03.000Z", "max_issues_repo_path": "client/components/content/post-viewer/ContentViewContent.js", "max_issues_repo_name": "3jins/blog.sejin", "max_issues_repo_issues_event_min_datetime": "2019-03-22T09:17:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-10T06:36:08.000Z", "max_forks_repo_path": "client/components/content/post-viewer/ContentViewContent.js", "max_forks_repo_name": "3jin/blog.sejin", "max_forks_repo_forks_event_min_datetime": "2020-07-20T07:58:02.000Z", "max_forks_repo_forks_event_max_datetime": "2020-07-20T07:58:02.000Z"}
{"max_stars_count": 6, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 28.3965517241, "max_line_length": 100, "alphanum_fraction": 0.6363084396}
import React from 'react';
import PropTypes from 'prop-types';
import { highlightCode, mdConverter } from '../../../../utils/mdModifier';
import { decapitalizeFirstLetter } from '../../../../utils/stringModifier';

const ContentViewContent = (props) => {
  const renderTags = tags => tags.map(tag => <span>{` #${tag}`}</span>);
  const {
    post,
    belongToMajor,
  } = props;
  const {
    title,
    content,
    tags,
    dateCreated,
  } = post;
  const convertedContent = mdConverter(content);
  const dateRaw = new Date(dateCreated);
  const dateInFormat = `${dateRaw.getFullYear()}년 ${dateRaw.getMonth() + 1}월 ${dateRaw.getDate()}일`;

  return (
    <div className={['content-view', decapitalizeFirstLetter(belongToMajor)].join(' ')}>
      <div ref={element => highlightCode(element)}>
        <div className="post-title-wrapper">
          <h1>{title}</h1>
          <div className="post-meta-info">
            <i className="far fa-calendar-alt"><span>{` ${dateInFormat}`}</span></i>
            <i className="fas fa-tags">{renderTags(tags)}</i>
          </div>
        </div>
        {convertedContent}
      </div>
    </div>
  );
};

ContentViewContent.propTypes = {
  post: PropTypes.objectOf({
    postNo: PropTypes.number,
    title: PropTypes.string,
    dateCreated: PropTypes.instanceOf(Date),
    dateUpdated: PropTypes.instanceOf(Date),
    content: PropTypes.string,
    tags: PropTypes.array,
    belongToMajor: PropTypes.string,
    belongToMinor: PropTypes.string,
  }),
  belongToMajor: PropTypes.string,
};

ContentViewContent.defaultProps = {
  post: {},
  belongToMajor: '',
};

export default ContentViewContent;
