From 2630d67b76d274e3ce55bef75dfc2f473738e37c Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Sat, 27 Feb 2021 15:24:35 +0100
Subject: [PATCH] Add saved button to post list view

---
 .../pages/homepage/components/postlist/PostItem.js  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/newsreader/js/pages/homepage/components/postlist/PostItem.js b/src/newsreader/js/pages/homepage/components/postlist/PostItem.js
index fe63a68..83833f5 100644
--- a/src/newsreader/js/pages/homepage/components/postlist/PostItem.js
+++ b/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);