Manchester | 25-SDC-Nov | Rahwa Haile | Sprint 1 | New Feature: Unfollow

backend/data/follows.py

@@ -21,6 +21,17 @@ def follow(follower: User, followee: User):
             pass
 
 
+def unfollow(follower: User, followee: User) -> None:
+    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,
+            ),
+        )
+
+
 def get_followed_usernames(follower: User) -> List[str]:
     """get_followed_usernames returns a list of usernames followee follows."""
     with db_cursor() as cur:

backend/endpoints.py

@@ -1,6 +1,11 @@
 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 +155,24 @@ def do_follow():
     )
 
 
+@jwt_required()
+def do_unfollow(follow_username):
+    current_user = get_current_user()
+
+    follow_user = get_user(follow_username)
+    if follow_user is None:
+        return make_response(
+            (f"Cannot unfollow {follow_username} - user does not exist", 404)
+        )
+
+    unfollow(current_user, follow_user)
+    return jsonify(
+        {
+            "success": True,
+        }
+    )
+
+
 @jwt_required()
 def send_bloom():
     type_check_error = verify_request_fields({"content": str})

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,7 +55,8 @@ 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("/suggested-follows/<limit_str>", view_func=suggested_follows)
+    app.add_url_rule("/unfollow/<follow_username>", methods=["POST"], view_func=do_unfollow)
+    app.add_url_rule("/suggested-follows/<limit_str>", methods=["GET"], view_func=suggested_follows)
 
     app.add_url_rule("/bloom", methods=["POST"], view_func=send_bloom)
     app.add_url_rule("/bloom/<id_str>", methods=["GET"], view_func=get_bloom)

front-end/components/profile.mjs

@@ -27,8 +27,13 @@ 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.setAttribute(
+    "data-following",
+    profileData.is_following ? "true" : "false"
+  );
+  followButtonEl.textContent = profileData.is_following ? "Unfollow" : "Follow";
+  followButtonEl.hidden = profileData.is_self;
+  followButtonEl.addEventListener("click", handleFollowToggle);
   if (!isLoggedIn) {
     followButtonEl.style.display = "none";
   }
@@ -66,4 +71,18 @@ async function handleFollow(event) {
   await apiService.getWhoToFollow();
 }
 
-export {createProfile, handleFollow};
+async function handleFollowToggle(event) {
+  const button = event.target;
+  const username = button.getAttribute("data-username");
+  if (!username) return;
+
+  const isFollowing = button.getAttribute("data-following") === "true";
+  if (isFollowing) {
+    await apiService.unfollowUser(username);
+  } else {
+    await apiService.followUser(username);
+  }
+  await apiService.getWhoToFollow();
+}
+
+export {createProfile, handleFollow, handleFollowToggle};

front-end/views/profile.mjs

@@ -9,7 +9,7 @@ import {
 } from "../index.mjs";
 import {createLogin, handleLogin} from "../components/login.mjs";
 import {createLogout, handleLogout} from "../components/logout.mjs";
-import {createProfile, handleFollow} from "../components/profile.mjs";
+import {createProfile} from "../components/profile.mjs";
 import {createBloom} from "../components/bloom.mjs";
 
 // Profile view - just this person's blooms and their profile