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 {
>
+ this.props.toggleSaved(post, token)}
+ />
@@ -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;
+}