Add saved button to post list view

src/newsreader/js/pages/homepage/components/postlist/PostItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import Cookies from 'js-cookie';
 
 import {
   CATEGORY_TYPE,
@@ -9,19 +10,22 @@ import {
   SUBREDDIT,
   TWITTER_TIMELINE,
 } from '../../constants.js';
-import { selectPost } from '../../actions/posts.js';
+import { selectPost, toggleSaved } from '../../actions/posts.js';
 import { formatDatetime } from '../../../../utils.js';
 
 class PostItem extends React.Component {
   render() {
     const rule = { ...this.props.post.rule };
     const post = { ...this.props.post, rule: rule.id };
+    const token = Cookies.get('csrftoken');
     const publicationDate = formatDatetime(post.publicationDate);
+
     const titleClassName = post.read
       ? 'posts__header posts__header--read'
       : 'posts__header';
-    let ruleUrl = '';
+    const savedIconClass = post.saved ? 'saved-icon saved-icon--saved' : 'saved-icon';
 
+    let ruleUrl = '';
     if (rule.type === SUBREDDIT) {
       ruleUrl = `${this.props.subredditUrl}/${rule.id}/`;
     } else if (rule.type === TWITTER_TIMELINE) {
@@ -59,6 +63,10 @@ class PostItem extends React.Component {
           >
             <i className="fas fa-external-link-alt"></i>
           </a>
+          <span
+            className={savedIconClass}
+            onClick={() => this.props.toggleSaved(post, token)}
+          />
         </div>
       </li>
     );
@@ -67,6 +75,7 @@ class PostItem extends React.Component {
 
 const mapDispatchToProps = dispatch => ({
   selectPost: post => dispatch(selectPost(post)),
+  toggleSaved: (post, token) => dispatch(toggleSaved(post, token)),
 });
 
 export default connect(null, mapDispatchToProps)(PostItem);