ZA | SDC-July 2025 | Faith Muzondo | Sprint 1 | New Feature Unfollow

backend/data/follows.py

@@ -20,6 +20,13 @@ def follow(follower: User, followee: User):
             # Already following - treat as idempotent request.
             pass
 
+def unfollow(follower: User, followee: User):
+    """Remove a follow relationship between two users."""
+    with db_cursor() as cur:
+        cur.execute(
+            "DELETE FROM follows WHERE follower = %s AND followee = %s",
+            (follower.id, followee.id),
+        )
 
 def get_followed_usernames(follower: User) -> List[str]:
     """get_followed_usernames returns a list of usernames followee follows."""

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,
@@ -150,6 +150,23 @@ 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():
     type_check_error = verify_request_fields({"content": str})

backend/main.py

@@ -14,6 +14,7 @@
     send_bloom,
     suggested_follows,
     user_blooms,
+    do_unfollow,
 )
 
 from dotenv import load_dotenv
@@ -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,4 +1,4 @@
-import {apiService} from "../index.mjs";
+import { apiService } from "../index.mjs";
 
 /**
  * Create a profile component
@@ -27,8 +27,16 @@ function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
   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;
+
+  // 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";
   }
@@ -43,7 +51,13 @@ 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);
+      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 +80,13 @@ 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};

front-end/index.html

@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Purple Forest</title>
-    <link href="/index.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
   </head>
   <body id="app">
     <header>
       <a href="/"
         ><h1>
           <img
-            src="/logo.svg"
+            src="logo.svg"
             alt="Purple Forest "
             width="50"
             height="60"
@@ -256,6 +256,6 @@ <h2 id="bloom-form-title" class="bloom-form__title">Share a Bloom</h2>
       <p>Please enable JavaScript in your browser.</p>
     </noscript>
 
-    <script type="module" src="/index.mjs"></script>
+    <script type="module" src="index.mjs"></script>
   </body>
 </html>

front-end/lib/api.mjs

@@ -261,7 +261,7 @@ async function followUser(username) {
 
 async function unfollowUser(username) {
   try {
-    const data = await _apiRequest(`/unfollow/${username}`, {
+    const data = await _apiRequest("/unfollow", {
       method: "POST",
     });