sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Make mark read button functional

Browse source
This commit is contained in:
Sonny Bakker 2020-10-29 22:42:46 +01:00
parent 67e06ee50e
commit 2b76c560c2
1 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/newsreader/js/pages/homepage/components/PostModal.js
View file

@ -49,30 +49,40 @@ class PostModal extends React.Component {
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';
let ruleUrl = '';
const readButtonDisabled = post.read || this.props.isMarkingPost;
if (this.props.rule.type === SUBREDDIT) {
ruleUrl = `${this.props.subredditUrl}/${this.props.rule.id}/`;
} else if (this.props.rule.type === TWITTER_TIMELINE) {
ruleUrl = `${this.props.timelineUrl}/${this.props.rule.id}/`;
} else {
ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
let ruleUrl = '';
switch (this.props.rule.type) {
case SUBREDDIT:
ruleUrl = `${this.props.subredditUrl}/${this.props.rule.id}/`;
break;
case TWITTER_TIMELINE:
ruleUrl = `${this.props.timelineUrl}/${this.props.rule.id}/`;
break;
default:
ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
break;
}
return (
<div className="modal post-modal">
<div className="post">
<div className="post__actions">
{/* TODO: make button functional */}
<span className="button read-button">Mark as read</span>
<span
<button
className={`button read-button ${readButtonDisabled && 'button--disabled'}`}
onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)}
>
Mark as read
</button>
<button
className="button post__close-button"
onClick={() => this.props.unSelectPost()}
>
Close <i className="gg-close"></i>
</span>
</button>
</div>
<div className="post__header">
<h2 className={titleClassName}>{`${post.title} `}</h2>
@ -121,4 +131,7 @@ const mapDispatchToProps = dispatch => ({
markPostRead: (post, token) => dispatch(markPostRead(post, token)),
});
export default connect(null, mapDispatchToProps)(PostModal);
// TODO use different boolean for saving mark post as read state
const mapStateToProps = state => ({ isMarkingPost: state.posts.isFetching });
export default connect(mapStateToProps, mapDispatchToProps)(PostModal);