diff --git a/src/newsreader/js/components/Messages.js b/src/newsreader/js/components/Messages.js index e3d776e..3fed5de 100644 --- a/src/newsreader/js/components/Messages.js +++ b/src/newsreader/js/components/Messages.js @@ -3,7 +3,9 @@ import React from 'react'; class Messages extends React.Component { state = { messages: this.props.messages }; - close = (index) => { + close = ::this.close; + + close(index) { const newMessages = this.state.messages.filter((message, currentIndex) => { return currentIndex != index; }); diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js index 5dacdf8..4cdc78b 100644 --- a/src/newsreader/js/pages/homepage/components/PostModal.js +++ b/src/newsreader/js/pages/homepage/components/PostModal.js @@ -7,131 +7,132 @@ import { SAVED_TYPE } from '../constants.js'; import { formatDatetime } from '../../../utils.js'; class PostModal extends React.Component { - readTimer = null; + modalListener = ::this.modalListener; +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); - } - - window.addEventListener('click', this.modalListener); + if (this.props.autoMarking && this.props.selectedType != SAVED_TYPE && !post.read) { + this.readTimer = setTimeout(markPostRead, 3000, post, token); } - componentWillUnmount() { - if (this.readTimer) { - clearTimeout(this.readTimer); - } + window.addEventListener('click', this.modalListener); +} - this.readTimer = null; - - window.removeEventListener('click', this.modalListener); +componentWillUnmount() { + if (this.readTimer) { + clearTimeout(this.readTimer); } - modalListener = (e) => { - const targetClassName = e.target.className; + this.readTimer = null; - if (this.props.post && targetClassName == 'modal post-modal') { - this.props.unSelectPost(); - } + 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; } - 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'; + return ( +
+
+
+
+
+ + +
+
+

{`${post.title} `}

+
+
+ {publicationDate} + {post.author && {post.author}} +
- let ruleUrl = ''; - - switch (this.props.rule.type) { - default: - ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`; - break; - } - - return ( -
-
-
-
-
- - -
-
-

{`${post.title} `}

-
-
- {publicationDate} - {post.author && {post.author}} -
- -
- {this.props.category && ( - + {this.props.category && ( + + - - {this.props.category.name} - - - )} - - - {this.props.rule.name} + {this.props.category.name} - - + )} + + + {this.props.rule.name} - this.props.toggleSaved(post, token)} - /> -
+ + + + + this.props.toggleSaved(post, token)} + />
- - {/* HTML is sanitized by the collectors */} -
+ + {/* HTML is sanitized by the collectors */} +
- ); - } +
+ ); +} } const mapDispatchToProps = dispatch => ({