WestMidlands | 26-SDC-Mar | Chioma Okeke | Sprint 1 | Add Unfollow feature

backend/data/follows.py

@@ -41,3 +41,13 @@ def get_inverse_followed_usernames(followee: User) -> List[str]:
         )
         rows = cur.fetchall()
         return [row[0] for row in rows]
+
+def unfollow(follower: User, followee: User):
+    with db_cursor() as cur:
+        cur.execute(
+            "DELETE FROM follows WHERE follower = %(follower_id)s AND followee = %(followee_id)s",
+            dict(
+                follower_id=follower.id,
+                followee_id=followee.id,
+            ),
+        )

backend/endpoints.py

@@ -1,6 +1,6 @@
 from typing import Dict, Union
 from data import blooms
-from data.follows import follow, get_followed_usernames, get_inverse_followed_usernames
+from data.follows import follow,unfollow, get_followed_usernames, get_inverse_followed_usernames
 from data.users import (
     UserRegistrationError,
     get_suggested_follows,
@@ -149,6 +149,19 @@ def do_follow():
         }
     )
 
+@jwt_required()
+def do_unfollow(unfollow_username):
+    current_user = get_current_user()
+
+    unfollow_user = get_user(unfollow_username)
+    if unfollow_user is None:
+        return make_response(
+            (f"Cannot unfollow {unfollow_username} - user does not exist", 404)
+        )
+
+    unfollow(current_user, unfollow_user)
+    return jsonify({"success": True})
+
 
 @jwt_required()
 def send_bloom():

backend/main.py

@@ -4,6 +4,7 @@
 from data.users import lookup_user
 from endpoints import (
     do_follow,
+    do_unfollow,
     get_bloom,
     hashtag,
     home_timeline,
@@ -54,6 +55,7 @@ def main():
     app.add_url_rule("/profile", view_func=self_profile)
     app.add_url_rule("/profile/<profile_username>", view_func=other_profile)
     app.add_url_rule("/follow", methods=["POST"], view_func=do_follow)
+    app.add_url_rule("/unfollow/<unfollow_username>", methods=["POST"], view_func=do_unfollow)
     app.add_url_rule("/suggested-follows/<limit_str>", view_func=suggested_follows)
 
     app.add_url_rule("/bloom", methods=["POST"], view_func=send_bloom)

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)
@@ -15,26 +15,36 @@ function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
   const usernameEl = profileElement.querySelector("[data-username]");
   const bloomCountEl = profileElement.querySelector("[data-bloom-count]");
   const followingCountEl = profileElement.querySelector(
-    "[data-following-count]"
+    "[data-following-count]",
   );
   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.setAttribute(
+    "data-following",
+    String(Boolean(profileData.is_following)),
+  );
+  followButtonEl.textContent = profileData.is_following ? "Unfollow" : "Follow";
+  followButtonEl.hidden = profileData.is_self;
+  followButtonEl.addEventListener("click", handleFollow);
   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);
@@ -62,8 +72,21 @@ async function handleFollow(event) {
   const username = button.getAttribute("data-username");
   if (!username) return;
 
-  await apiService.followUser(username);
+  const isFollowing = button.getAttribute("data-following") === "true";
+  button.disabled = true;
+
+  if (isFollowing) {
+    await apiService.unfollowUser(username);
+    button.setAttribute("data-following", "false");
+    button.textContent = "Follow";
+  } else {
+    await apiService.followUser(username);
+    button.setAttribute("data-following", "true");
+    button.textContent = "Unfollow";
+  }
+
   await apiService.getWhoToFollow();
+  button.disabled = false;
 }
 
-export {createProfile, handleFollow};
+export { createProfile, handleFollow };