From 2b76c560c28c9dfe2436838a22da635534f01a9f Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Thu, 29 Oct 2020 22:42:46 +0100
Subject: [PATCH] Make mark read button functional

---
 .../js/pages/homepage/components/PostModal.js | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js
index ee1c983..09867c9 100644
--- a/src/newsreader/js/pages/homepage/components/PostModal.js
+++ b/src/newsreader/js/pages/homepage/components/PostModal.js
@@ -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);