Glasgow | 26- SDC-Mar | Mohammed Abdoon | Sprint 1 | Unfollow Feature

backend/data/follows.py

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

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/<profile_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

@@ -27,11 +27,10 @@ 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.dataset.isFollowing = profileData.is_following ? "true" : "false";
+  followButtonEl.textContent = profileData.is_following ? "Unfollow" : "Follow";
+  followButtonEl.hidden = profileData.is_self || !isLoggedIn;
   followButtonEl.addEventListener("click", handleFollow);
-  if (!isLoggedIn) {
-    followButtonEl.style.display = "none";
-  }
 
   if (whoToFollow.length > 0) {
     const whoToFollowList = whoToFollowContainer.querySelector("[data-who-to-follow]");
@@ -62,8 +61,14 @@ async function handleFollow(event) {
   const username = button.getAttribute("data-username");
   if (!username) return;
 
-  await apiService.followUser(username);
-  await apiService.getWhoToFollow();
+  const isFollowing = button.dataset.isFollowing === "true";
+
+  if (isFollowing) {
+    await apiService.unfollowUser(username);
+  } else {
+    await apiService.followUser(username);
+    await apiService.getWhoToFollow();
+  }
 }
 
 export {createProfile, handleFollow};

front-end/tests/profile.spec.mjs

@@ -43,4 +43,19 @@ test.describe("Profile View", () => {
     // And bloom form is not attached
     await expect(page.locator("#bloom-form-container form")).not.toBeAttached();
   });
+
+  test("allows a user to unfollow a profile after following it", async ({page}) => {
+    await loginAsJustSomeGuy(page);
+    await page.goto("/#/profile/sample");
+
+    const followButton = page.locator("#profile-container [data-action='follow']");
+    await expect(followButton).toBeVisible();
+    await expect(followButton).toHaveText("Follow");
+
+    await followButton.click();
+    await expect(followButton).toHaveText("Unfollow");
+
+    await followButton.click();
+    await expect(followButton).toHaveText("Follow");
+  });
 });