From 20ef9b06a58e7ca8ac57e72ed214c372c07c43cd Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Sat, 20 Feb 2021 23:23:18 +0100
Subject: [PATCH] Add saved icon

---
 .../js/pages/homepage/components/PostModal.js     | 15 ++++++++++++---
 .../js/pages/homepage/reducers/posts.js           |  1 -
 src/newsreader/scss/components/post/_post.scss    |  8 +-------
 src/newsreader/scss/elements/index.scss           |  1 +
 .../scss/elements/saved-icon/_saved-icon.scss     | 15 +++++++++++++++
 .../scss/elements/saved-icon/index.scss           |  1 +
 src/newsreader/scss/lib/_mixins.scss              |  5 +++++
 7 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 src/newsreader/scss/elements/saved-icon/_saved-icon.scss
 create mode 100644 src/newsreader/scss/elements/saved-icon/index.scss

diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js
index f9b7b5e..7ee5261 100644
--- a/src/newsreader/js/pages/homepage/components/PostModal.js
+++ b/src/newsreader/js/pages/homepage/components/PostModal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Cookies from 'js-cookie';
 
-import { unSelectPost, markPostRead } from '../actions/posts.js';
+import { unSelectPost, markPostRead, toggleSaved } from '../actions/posts.js';
 import {
   CATEGORY_TYPE,
   RULE_TYPE,
@@ -51,9 +51,11 @@ class PostModal extends React.Component {
     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.isMarkingPost;
+    const readButtonDisabled = post.read || this.props.isUpdating;
+    const savedIconClass = post.saved ? 'saved-icon saved-icon--saved' : 'saved-icon';
 
     let ruleUrl = '';
+
     switch (this.props.rule.type) {
       case SUBREDDIT:
         ruleUrl = `${this.props.subredditUrl}/${this.props.rule.id}/`;
@@ -114,6 +116,10 @@ class PostModal extends React.Component {
               >
                 <i className="fas fa-external-link-alt" />
               </a>
+              <span
+                className={savedIconClass}
+                onClick={() => this.props.toggleSaved(post, token)}
+              />
             </div>
           </div>
 
@@ -128,8 +134,11 @@ class PostModal extends React.Component {
 const mapDispatchToProps = dispatch => ({
   unSelectPost: () => dispatch(unSelectPost()),
   markPostRead: (post, token) => dispatch(markPostRead(post, token)),
+  toggleSaved: (post, token) => dispatch(toggleSaved(post, token)),
 });
 
-const mapStateToProps = state => ({ isMarkingPost: state.posts.isMarking });
+const mapStateToProps = state => ({
+  isUpdating: state.posts.isUpdating,
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(PostModal);
diff --git a/src/newsreader/js/pages/homepage/reducers/posts.js b/src/newsreader/js/pages/homepage/reducers/posts.js
index 3f9067c..bb06f3d 100644
--- a/src/newsreader/js/pages/homepage/reducers/posts.js
+++ b/src/newsreader/js/pages/homepage/reducers/posts.js
@@ -19,7 +19,6 @@ import { MARK_SECTION_READ } from '../actions/selected.js';
 
 const defaultState = { items: {}, isFetching: false, isUpdating: false };
 
-// TODO isMarking -> isUpdating
 export const posts = (state = { ...defaultState }, action) => {
   switch (action.type) {
     case REQUEST_POSTS:
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 5254363..dc5f829 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -39,12 +39,6 @@
     }
   }
 
-  &__link {
-    & i {
-      padding: 0 0 0 7px;
-    }
-  }
-
   &__date {
     font-size: small;
   }
@@ -103,6 +97,6 @@
     align-items: center;
 
     margin: 15px 0;
-    gap: 5px;
+    gap: 10px;
   }
 }
diff --git a/src/newsreader/scss/elements/index.scss b/src/newsreader/scss/elements/index.scss
index 0c30aff..718b562 100644
--- a/src/newsreader/scss/elements/index.scss
+++ b/src/newsreader/scss/elements/index.scss
@@ -12,3 +12,4 @@
 @import './small/index';
 @import './select/index';
 @import './checkbox/index';
+@import './saved-icon/index';
diff --git a/src/newsreader/scss/elements/saved-icon/_saved-icon.scss b/src/newsreader/scss/elements/saved-icon/_saved-icon.scss
new file mode 100644
index 0000000..21fea31
--- /dev/null
+++ b/src/newsreader/scss/elements/saved-icon/_saved-icon.scss
@@ -0,0 +1,15 @@
+.saved-icon {
+  @include font-awesome;
+
+  &:before {
+    content: "\f0c7";
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--saved {
+    color: var(--confirm-color);
+  }
+}
diff --git a/src/newsreader/scss/elements/saved-icon/index.scss b/src/newsreader/scss/elements/saved-icon/index.scss
new file mode 100644
index 0000000..db05603
--- /dev/null
+++ b/src/newsreader/scss/elements/saved-icon/index.scss
@@ -0,0 +1 @@
+@import './saved-icon';
diff --git a/src/newsreader/scss/lib/_mixins.scss b/src/newsreader/scss/lib/_mixins.scss
index d7b8b8e..4667660 100644
--- a/src/newsreader/scss/lib/_mixins.scss
+++ b/src/newsreader/scss/lib/_mixins.scss
@@ -9,3 +9,8 @@
 @mixin button-padding {
   padding: 5px 20px;
 }
+
+@mixin font-awesome {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+}