Add saved icon

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);

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:

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;
   }
 }

src/newsreader/scss/elements/index.scss

@@ -12,3 +12,4 @@
 @import './small/index';
 @import './select/index';
 @import './checkbox/index';
+@import './saved-icon/index';

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);
+  }
+}

src/newsreader/scss/elements/saved-icon/index.scss

@@ -0,0 +1 @@
+@import './saved-icon';

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;
+}