Compare commits
7 commits
f3803e95f6
...
c288cfef94
| Author | SHA1 | Date | |
|---|---|---|---|
| c288cfef94 | |||
| 8a68557799 | |||
| fb65725e92 | |||
| 39ede59a56 | |||
| f25c1eb04e | |||
| 91a0459186 | |||
| b465d0bb8d |
2 changed files with 105 additions and 108 deletions
|
|
@ -3,9 +3,7 @@ import React from 'react';
|
|||
class Messages extends React.Component {
|
||||
state = { messages: this.props.messages };
|
||||
|
||||
close = ::this.close;
|
||||
|
||||
close(index) {
|
||||
close = (index) => {
|
||||
const newMessages = this.state.messages.filter((message, currentIndex) => {
|
||||
return currentIndex != index;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,132 +7,131 @@ import { SAVED_TYPE } from '../constants.js';
|
|||
import { formatDatetime } from '../../../utils.js';
|
||||
|
||||
class PostModal extends React.Component {
|
||||
modalListener = ::this.modalListener;
|
||||
readTimer = null;
|
||||
readTimer = null;
|
||||
|
||||
componentDidMount() {
|
||||
const post = { ...this.props.post };
|
||||
const markPostRead = this.props.markPostRead;
|
||||
const token = Cookies.get('csrftoken');
|
||||
componentDidMount() {
|
||||
const post = { ...this.props.post };
|
||||
const markPostRead = this.props.markPostRead;
|
||||
const token = Cookies.get('csrftoken');
|
||||
|
||||
if (this.props.autoMarking && this.props.selectedType != SAVED_TYPE && !post.read) {
|
||||
this.readTimer = setTimeout(markPostRead, 3000, post, token);
|
||||
if (this.props.autoMarking && this.props.selectedType != SAVED_TYPE && !post.read) {
|
||||
this.readTimer = setTimeout(markPostRead, 3000, post, token);
|
||||
}
|
||||
|
||||
window.addEventListener('click', this.modalListener);
|
||||
}
|
||||
|
||||
window.addEventListener('click', this.modalListener);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.readTimer) {
|
||||
clearTimeout(this.readTimer);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.readTimer) {
|
||||
clearTimeout(this.readTimer);
|
||||
this.readTimer = null;
|
||||
|
||||
window.removeEventListener('click', this.modalListener);
|
||||
}
|
||||
|
||||
this.readTimer = null;
|
||||
modalListener = (e) => {
|
||||
const targetClassName = e.target.className;
|
||||
|
||||
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 token = Cookies.get('csrftoken');
|
||||
const publicationDate = formatDatetime(post.publicationDate);
|
||||
const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
|
||||
const readButtonDisabled =
|
||||
post.read || this.props.isUpdating || this.props.selectedType === SAVED_TYPE;
|
||||
const savedIconClass = post.saved
|
||||
? 'post__save post__save--saved saved-icon saved-icon--saved'
|
||||
: 'post__save saved-icon';
|
||||
|
||||
let ruleUrl = '';
|
||||
|
||||
switch (this.props.rule.type) {
|
||||
default:
|
||||
ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
|
||||
break;
|
||||
if (this.props.post && targetClassName == 'modal post-modal') {
|
||||
this.props.unSelectPost();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal post-modal">
|
||||
<div className="post">
|
||||
<div className="post__container">
|
||||
<div className="post__header">
|
||||
<div className="post__actions">
|
||||
<button
|
||||
className={`button read-button ${readButtonDisabled &&
|
||||
'button--disabled'}`}
|
||||
onClick={() =>
|
||||
!readButtonDisabled && this.props.markPostRead(post, token)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-check" /> Mark as read
|
||||
</button>
|
||||
<button
|
||||
className="button post__close-button"
|
||||
onClick={() => this.props.unSelectPost()}
|
||||
>
|
||||
<i className="fas fa-times"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
<div className="post__heading">
|
||||
<h2 className={titleClassName}>{`${post.title} `}</h2>
|
||||
<div className="post__meta">
|
||||
<div className="post__text">
|
||||
<span className="post__date">{publicationDate}</span>
|
||||
{post.author && <span className="post__author">{post.author}</span>}
|
||||
</div>
|
||||
render() {
|
||||
const post = this.props.post;
|
||||
const token = Cookies.get('csrftoken');
|
||||
const publicationDate = formatDatetime(post.publicationDate);
|
||||
const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
|
||||
const readButtonDisabled =
|
||||
post.read || this.props.isUpdating || this.props.selectedType === SAVED_TYPE;
|
||||
const savedIconClass = post.saved
|
||||
? 'post__save post__save--saved saved-icon saved-icon--saved'
|
||||
: 'post__save saved-icon';
|
||||
|
||||
<div className="post__buttons">
|
||||
{this.props.category && (
|
||||
<span
|
||||
className="badge post__category"
|
||||
title={this.props.category.name}
|
||||
>
|
||||
<a
|
||||
href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
let ruleUrl = '';
|
||||
|
||||
switch (this.props.rule.type) {
|
||||
default:
|
||||
ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal post-modal">
|
||||
<div className="post">
|
||||
<div className="post__container">
|
||||
<div className="post__header">
|
||||
<div className="post__actions">
|
||||
<button
|
||||
className={`button read-button ${readButtonDisabled &&
|
||||
'button--disabled'}`}
|
||||
onClick={() =>
|
||||
!readButtonDisabled && this.props.markPostRead(post, token)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-check" /> Mark as read
|
||||
</button>
|
||||
<button
|
||||
className="button post__close-button"
|
||||
onClick={() => this.props.unSelectPost()}
|
||||
>
|
||||
<i className="fas fa-times"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
<div className="post__heading">
|
||||
<h2 className={titleClassName}>{`${post.title} `}</h2>
|
||||
<div className="post__meta">
|
||||
<div className="post__text">
|
||||
<span className="post__date">{publicationDate}</span>
|
||||
{post.author && <span className="post__author">{post.author}</span>}
|
||||
</div>
|
||||
|
||||
<div className="post__buttons">
|
||||
{this.props.category && (
|
||||
<span
|
||||
className="badge post__category"
|
||||
title={this.props.category.name}
|
||||
>
|
||||
{this.props.category.name}
|
||||
<a
|
||||
href={`${this.props.categoriesUrl}/${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>
|
||||
)}
|
||||
<span className="badge post__rule" title={this.props.rule.name}>
|
||||
<a href={ruleUrl} target="_blank" rel="noopener noreferrer">
|
||||
{this.props.rule.name}
|
||||
<a
|
||||
className="post__link"
|
||||
href={post.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i className="fas fa-external-link-alt" />
|
||||
</a>
|
||||
</span>
|
||||
<a
|
||||
className="post__link"
|
||||
href={post.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i className="fas fa-external-link-alt" />
|
||||
</a>
|
||||
<span
|
||||
className={savedIconClass}
|
||||
onClick={() => this.props.toggleSaved(post, token)}
|
||||
/>
|
||||
<span
|
||||
className={savedIconClass}
|
||||
onClick={() => this.props.toggleSaved(post, token)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HTML is sanitized by the collectors */}
|
||||
<div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />
|
||||
{/* HTML is sanitized by the collectors */}
|
||||
<div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue