From 7e160cb220909302f20f62697a2336b48419cb72 Mon Sep 17 00:00:00 2001
From: Michael Szczepanski <m.szczepanski90@gmail.com>
Date: Fri, 9 Jun 2023 12:13:36 +0100
Subject: [PATCH] like button and user_id retrieval complete

---
 .gitignore                           |  3 +++
 frontend/package-lock.json           | 11 +++++++++++
 frontend/package.json                |  1 +
 frontend/src/components/feed/Feed.js |  5 ++++-
 frontend/src/components/post/Post.js | 12 ++++++++++--
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3dc633e98..813958114 100644
--- a/.gitignore
+++ b/.gitignore
@@ -63,3 +63,6 @@ typings/
 # cypress.io
 cypress/screenshots
 cypress/videos
+
+# .DS_Store
+.DS_Store
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7bec630dd..a6a07aa11 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "cypress": "^10.7.0",
         "eslint": "^8.23.0",
+        "jwt-decode": "^3.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.3.0",
@@ -10078,6 +10079,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -22915,6 +22921,11 @@
         "object.assign": "^4.1.3"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 04bf86188..dd03f9a43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "cypress": "^10.7.0",
     "eslint": "^8.23.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
diff --git a/frontend/src/components/feed/Feed.js b/frontend/src/components/feed/Feed.js
index 20fbcbaf3..b767c7631 100644
--- a/frontend/src/components/feed/Feed.js
+++ b/frontend/src/components/feed/Feed.js
@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import Post from '../post/Post';
 import PostCreateForm from '../post/PostCreateForm';
+import jwt_decode from "jwt-decode";
 
 const Feed = ({ navigate }) => {
   const [posts, setPosts] = useState([]);
   const [token, setToken] = useState(window.localStorage.getItem("token")); // Retrieves a token from the browser storage
+  const [userId, setUserId] = useState("");
 
   useEffect(() => {
     // Will send a fetch request if a valid token is found
@@ -19,6 +21,7 @@ const Feed = ({ navigate }) => {
         .then(async data => {
           window.localStorage.setItem("token", data.token)
           setToken(window.localStorage.getItem("token"))
+          setUserId(jwt_decode(token).user_id)
           setPosts(data.posts);
         })
     }
@@ -40,7 +43,7 @@ const Feed = ({ navigate }) => {
           <PostCreateForm />
           <div id='feed' role="feed">
             {posts.map(
-              (post) => ( <Post post={ post } key={ post._id } /> )
+              (post) => ( <Post post={ post } key={ post._id } userId={ userId }/> )
             )}
           </div>
         </>
diff --git a/frontend/src/components/post/Post.js b/frontend/src/components/post/Post.js
index 87a77c109..3315b712e 100644
--- a/frontend/src/components/post/Post.js
+++ b/frontend/src/components/post/Post.js
@@ -1,8 +1,16 @@
 import React from 'react';
 
-const Post = ({post}) => {
+const Post = ({post, userId}) => {
+
+  const postLiked = (event) => {
+    console.log("You like this: " + post.message + "\nUserId: + " + userId);
+  }
+
   return(
-    <article data-cy="post" key={ post._id }>{ post.message }</article>
+    <article data-cy="post" key={ post._id }>
+      <p>{ post.message }</p>
+      <button onClick={postLiked}>Like</button>
+    </article>
   )
 }