Implement Friends Page

[zohaibshahzadkhan]

Description: As a user, I should be able to view my friends and handle friendship requests on the Friends page so that I can manage my social connections effectively. (Epic: https://github.com/zohaibshahzadkhan/SocialVibe-React-App/issues/22)

Acceptance Criteria:

Friends Page Layout:

• The Friends page should be divided into two main sections:
• User Information Card: A card displaying the user’s avatar, name, friends count, and posts count.
• Friends and Requests List: A section displaying the user's friends and pending friendship requests.

User Information Card:

• Display the user's avatar, name, number of friends, and posts count.
• Use the postUser object to populate this information.
• The avatar should be a rounded image and default to a placeholder if no avatar is available.

Friendship Requests:

• Display a list of pending friendship requests if any exist.
• Each request should include the requestor's avatar, name, friends count, and posts count.
• Include Accept and Reject buttons for each request.
• Clicking Accept should accept the friend request, increment the friend count, remove the request from the list, and show a success toast.
• Clicking Reject should remove the request from the list and show a rejection toast.
• The requests section should be clearly labeled and separated from the friends list.

Friends List:

• Display a grid of the user's friends.
• Each friend should be displayed with their avatar, name, friends count, and posts count.
• Ensure the friends are displayed in a card format similar to the requests.

Loading State:

• Display a loading text while the friends and feed data are being fetched.