{"size": 922, "ext": "js", "max_stars_repo_path": "src/components/Posts/Post.js", "max_stars_repo_name": "SylvieCanongia/REACT-JS-blog-du-tac-au-techs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Posts/Post.js", "max_issues_repo_name": "SylvieCanongia/REACT-JS-blog-du-tac-au-techs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Posts/Post.js", "max_forks_repo_name": "SylvieCanongia/REACT-JS-blog-du-tac-au-techs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.2631578947, "max_line_length": 94, "alphanum_fraction": 0.7039045553}
/* eslint-disable react/no-danger */
import React from 'react';
import PropTypes from 'prop-types';
import DOMPurify from 'dompurify';
import { Link } from 'react-router-dom';

function createMarkup(htmlContent) {
  return {
    __html: DOMPurify.sanitize(htmlContent),
  };
}

const Post = ({
  category,
  title,
  excerpt,
  slug,
}) => (

  // update of the url into a link for displaying single articles
  <Link to={`/post/${slug}`}>
    <article className="posts__single">
      <h2 className="posts_single__title">{title}</h2>
      <div className="posts__single__category">{category}</div>
      <p className="posts__single__excerpt" dangerouslySetInnerHTML={createMarkup(excerpt)} />
    </article>
  </Link>
);

Post.propTypes = {
  category: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  excerpt: PropTypes.string.isRequired,
  slug: PropTypes.string.isRequired,
};

export default Post;
