Implement unfollow funtionality

Author: AliQassab

front-end/components/profile.mjs

@@ -1,12 +1,12 @@
-import {apiService} from "../index.mjs";
+import { apiService } from "../index.mjs";
 
 /**
  * Create a profile component
  * @param {string} template - The ID of the template to clone
  * @param {Object} profileData - The profile data to display
  * @returns {DocumentFragment} - The profile UI
  */
-function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
+function createProfile(template, { profileData, whoToFollow, isLoggedIn }) {
   if (!template || !profileData) return;
   const profileElement = document
     .getElementById(template)
@@ -19,22 +19,36 @@ function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
   );
   const followerCountEl = profileElement.querySelector("[data-follower-count]");
   const followButtonEl = profileElement.querySelector("[data-action='follow']");
-  const whoToFollowContainer = profileElement.querySelector(".profile__who-to-follow");
+  const whoToFollowContainer = profileElement.querySelector(
+    ".profile__who-to-follow"
+  );
   // Populate with data
   usernameEl.querySelector("h2").textContent = profileData.username || "";
   usernameEl.setAttribute("href", `/profile/${profileData.username}`);
   bloomCountEl.textContent = profileData.total_blooms || 0;
   followerCountEl.textContent = profileData.followers?.length || 0;
   followingCountEl.textContent = profileData.follows?.length || 0;
   followButtonEl.setAttribute("data-username", profileData.username || "");
-  followButtonEl.hidden = profileData.is_self || profileData.is_following;
-  followButtonEl.addEventListener("click", handleFollow);
+  // followButtonEl.hidden = profileData.is_self || profileData.is_following;
+  // followButtonEl.addEventListener("click", handleFollow);
+  followButtonEl.hidden = profileData.is_self;
+
+  // Set button text and action based on follow status
+  if (profileData.is_following) {
+    followButtonEl.textContent = "Unfollow";
+    followButtonEl.addEventListener("click", handleUnfollow);
+  } else {
+    followButtonEl.textContent = "Follow";
+    followButtonEl.addEventListener("click", handleFollow);
+  }
   if (!isLoggedIn) {
     followButtonEl.style.display = "none";
   }
 
   if (whoToFollow.length > 0) {
-    const whoToFollowList = whoToFollowContainer.querySelector("[data-who-to-follow]");
+    const whoToFollowList = whoToFollowContainer.querySelector(
+      "[data-who-to-follow]"
+    );
     const whoToFollowTemplate = document.querySelector("#who-to-follow-chip");
     for (const userToFollow of whoToFollow) {
       const wtfElement = whoToFollowTemplate.content.cloneNode(true);
@@ -43,7 +57,15 @@ function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
       usernameLink.setAttribute("href", `/profile/${userToFollow.username}`);
       const followButton = wtfElement.querySelector("button");
       followButton.setAttribute("data-username", userToFollow.username);
-      followButton.addEventListener("click", handleFollow);
+      // followButton.addEventListener("click", handleFollow);
+
+      if (userToFollow.is_following) {
+        followButton.textContent = "Unfollow";
+        followButton.addEventListener("click", handleUnfollow);
+      } else {
+        followButton.textContent = "Follow";
+        followButton.addEventListener("click", handleFollow);
+      }
       if (!isLoggedIn) {
         followButton.style.display = "none";
       }
@@ -66,4 +88,12 @@ async function handleFollow(event) {
   await apiService.getWhoToFollow();
 }
 
-export {createProfile, handleFollow};
+async function handleUnfollow(event) {
+  const button = event.target;
+  const username = button.getAttribute("data-username");
+  if (!username) return;
+
+  await apiService.unfollowUser(username);
+  await apiService.getWhoToFollow();
+}
+export { createProfile, handleFollow, handleUnfollow };