Like posts - functionality

[fatimaahmed14]

Requirements

• any user can like or (remove a like) from a post

• a user can only like a post they haven't liked previously

• a user can only dislike a post they have liked previously

• Like button turns blue when post is liked and is empty when post is not liked button is white (using toggle)

• Button lights up when hovering over it

UI Approach

Code structure

• The code for the component regarding the logic of liking a post will live in the PostLikes.js file in the folder: /src/components
• Likes are stored in an array of user id's inside the post object
• The amount of likes will equate to the total length of the array + new likes will be pushed into this array in {{ _.base_url }}/posts

  "postLikes": [
                  {
                      "id": 1,
                      "createdAt": "2022-11-25T14:43:47.721Z",
                      "updatedAt": "2022-11-25T14:43:47.722Z",
                      "userId": 2,
                      "postId": 6,
                      "active": false
                  }
  ]

• There will be a second component which will be in charge of the HTML + JSX to display the correct amount of likes and show whether the like button has previously been pressed by the user or not
• This component will call the handleClick and the component above that tracks the length of the likes array

  function LikeButton({likeCount, userHasLikedThis, handleClick}) {
  // jsx returns a button with a like icon and the number of likes
  // button has different styling whether userHasLikedThis or not
  // on button click, call handleClick so that parent component can decide whether to send a create like or remove like
  }

Wireframe

UI Functionality

• Getting all post likes: fetch a GET request to {{ _.base_url }}/posts/postLike using client.js
• Liking a post: fetch a POST request to {{ _.base_url }}/posts/1/postLike using client.js
• Unliking a post: fetch a POST request to {{ _.base_url }}/posts/1/postLike with the following:

{
    "active": false,
    "postLikeId": 7
}

[dogezen]

Missing:

1) more details about how to CREATE that array of likes that you mention 2) are you going to change how the like icon / text looks like if I can Like or Unlike? 3) how could this code be re-used for the LIKES on a comment?

[fatimaahmed14]

I am not currently sure how to re-use this code for liking a comment, maybe it would be a case of using the same function but sending a GET request to commentLike and sending a POST request to commentLike.

[dogezen]

You could split this into 2 components.

The first one just has the HTML jsx and some props to choose what to display (the like button, number of likes and whether user has liked or not, and then also a function to handleClick

The parent component can then be a PostLike which has logic to fetch the post likes, count them and check if user has liked or note

Then a second parent component can be the CommentLike which has similar logic for post likes but for comments.

Example

function LikeButton({likeCount, userHasLikedThis, handleClick}) {
   // jsx returns a button with a like icon and the number of likes
   // button has different styling whether userHasLikedThis or not
   // on button click, call handleClick so that parent component can decide whether to send a create like or remove like
}