Presson view profile Page and Side Bar

[Presson-coder]

Pull Request Title: Add Detailed User Profile Page and Sidebar Information

Description:

This pull request introduces a new view profile page that provides detailed information about a specific user profile. The page includes sections for followers, following, posts, and likes. Additionally, similar information is displayed on the sidebar of the home page.

Changes Made:

1. View Profile Page:

   • Added a new profile page that displays detailed information about a user.
   • Sections included:
     • Followers: List of users following the profile.
     • Following: List of users the profile is following.
     • Posts: User's posts with details.
     • Likes: Posts liked by the user.

2. Home Page Sidebar:

   • Updated the sidebar to display similar profile information.
   • Sidebar sections included:
     • Followers: Summary of followers.
     • Following: Summary of following.
     • Username: Username of the user.

Testing:

• Verified the profile page displays correct information for different users.
• Tested responsiveness and UI on various devices and screen sizes.

Additional Notes:

• The sidebar is currently displaying information for a hardcoded user ID. This will be updated to dynamically display the details of the logged-in user once authentication is implemented.

---

Let me know if you need any further adjustments!

[terrameijar]

@Presson-coder Can we fetch the profile details without hardcoding the credentials? The code should use the current user's credentials to make API requests instead of a hard-coded credential.

Can we save the credentials in a secure storage, retrieve them and pass them to the hook whenever it is called?

[Presson-coder]

Oww on that one I needed the endpoint for login which I assume its not there yet. So when its there ,we will make that data dynamic and we will display the data of the currently logged in user and subsequently make requests using their respective credentials.

So on that one I was just doing it that way so that I make requests with the user you created

[terrameijar]

We have a login endpoint here: http://chitchat-api.vndprojects.com/api-auth/login/

I don't have a problem with testing auth using this user account. However, to test more securely, I suggest passing the credentials of whatever user we're using without hard-coding them.

@Presson-coder is this possible?

[Presson-coder]

Ok sure thanks, I didn't know that the endpoint was there. Let me work on that and update you.

[terrameijar]

@Presson-coder, is this for testing purposes?

[Presson-coder]

ohh that file! I was just using it to be seeing the nature of the endpoints and responses locally but otherwise is of no use ,could have deleted it after I was done.

[terrameijar]

@Presson-coder No problem, I understand. If you're using it for local testing, let's remove it from git while keeping it in your filesystem so you can continue to test against it. Do:

git rm --cached frontend/utils/data.ts

[Presson-coder]

Ok sure thank you

[terrameijar]

@Presson-coder Excellent work on this PR! I'm not fluent in React but this code looks good. I left some comments about how we're handling credentials and I'd like to hear your thoughts on identifying users.

I can't view any profile information when I view the UI locally. dev tools show an error when fetching the profile details at this URL:

http://localhost:5173/profile/undefined/profiles/6

I could be missing a configuration step here.

[Presson-coder]

Then I don't know @terrameijar could the profiles endpoint return more data in the in the following and followers object e.g profile picture and bio or some data because currently we only have url and username. Except its fine like that

"follows": [
{
"username": "chitchat-test1",
"url": "http://chitchat-api.vndprojects.com/api/profiles/12/"
}
],
"followers": [
{
"username": "chitchat-test1",
"url": "http://chitchat-api.vndprojects.com/api/profiles/12/"
}