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

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

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