newsreader/src/newsreader/js/pages/homepage/components/PostModal.js

import React from 'react';
import { connect } from 'react-redux';
import Cookies from 'js-cookie';

import { unSelectPost, markPostRead } from '../actions/posts.js';
import { CATEGORY_TYPE, RULE_TYPE, FEED, SUBREDDIT } from '../constants.js';
import { formatDatetime } from '../../../utils.js';

class PostModal extends React.Component {
  modalListener = ::this.modalListener;
  readTimer = null;

  componentDidMount() {
    const post = { ...this.props.post };
    const markPostRead = this.props.markPostRead;
    const token = Cookies.get('csrftoken');

    if (!post.read) {
      this.readTimer = setTimeout(markPostRead, 3000, post, token);
    }

    window.addEventListener('click', this.modalListener);
  }

  componentWillUnmount() {
    if (this.readTimer) {
      clearTimeout(this.readTimer);
    }

    this.readTimer = null;

    window.removeEventListener('click', this.modalListener);
  }

  modalListener(e) {
    const targetClassName = e.target.className;

    if (this.props.post && targetClassName == 'modal post-modal') {
      this.props.unSelectPost();
    }
  }

  render() {
    const post = this.props.post;
    const publicationDate = formatDatetime(post.publicationDate);
    const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
    const ruleUrl =
      this.props.rule.type === FEED
        ? `/collection/rules/${this.props.rule.id}/`
        : `/collection/rules/subreddits/${this.props.rule.id}/`;

    return (
      <div className="modal post-modal">
        <div className="post">
          <span
            className="button post__close-button"
            onClick={() => this.props.unSelectPost()}
          >
            Close <i className="gg-close"></i>
          </span>
          <div className="post__header">
            <h2 className={titleClassName}>{`${post.title} `}</h2>
            <div className="post__meta-info">
              <span className="post__date">{publicationDate}</span>
              {post.author && <span className="post__author">{post.author}</span>}
              {this.props.category && (
                <span className="badge post__category" title={this.props.category.name}>
                  <a
                    href={`/core/categories/${this.props.category.id}/`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {this.props.category.name}
                  </a>
                </span>
              )}
              <span className="badge post__rule" title={this.props.rule.name}>
                <a href={ruleUrl} target="_blank" rel="noopener noreferrer">
                  {this.props.rule.name}
                </a>
              </span>
              <a
                className="post__link"
                href={post.url}
                target="_blank"
                rel="noopener noreferrer"
              >
                <i className="gg-link" />
              </a>
            </div>
          </div>

          {/* HTML is sanitized by the collectors */}
          <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  unSelectPost: () => dispatch(unSelectPost()),
  markPostRead: (post, token) => dispatch(markPostRead(post, token)),
});

export default connect(null, mapDispatchToProps)(PostModal);