like button and user_id retrieval complete

.gitignore

@@ -63,3 +63,6 @@ typings/
 # cypress.io
 cypress/screenshots
 cypress/videos
+
+# .DS_Store
+.DS_Store

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",

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>
         </>

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