London | Elhadj Abdoul Diallo | Module-Legacy-Code | WEEK1 - Feature/unfollow

backend/data/follows.py

@@ -20,6 +20,16 @@ def follow(follower: User, followee: User):
             # Already following - treat as idempotent request.
             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."""

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,28 @@ def do_follow():
     )
 
 
+@jwt_required()
+def do_unfollow():
+    type_check_error = verify_request_fields({"unfollow_username": str})
+    if type_check_error is not None:
+        return type_check_error
+
+    current_user = get_current_user()
+
+    unfollow_username = request.json["unfollow_username"]
+    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

@@ -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", 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)
@@ -18,34 +18,64 @@ function createProfile(template, {profileData, whoToFollow, isLoggedIn}) {
     "[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 unfollowButtonEl = profileElement.querySelector(
+    "[data-action='unfollow']"
+  );
+
+  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 || "");
+  unfollowButtonEl.setAttribute("data-username", profileData.username || "");
+
   followButtonEl.hidden = profileData.is_self || profileData.is_following;
+  unfollowButtonEl.hidden = profileData.is_self || !profileData.is_following;
+
   followButtonEl.addEventListener("click", handleFollow);
+  unfollowButtonEl.addEventListener("click", handleUnfollow);
+
   if (!isLoggedIn) {
     followButtonEl.style.display = "none";
+    unfollowButtonEl.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);
       const usernameLink = wtfElement.querySelector("a[data-username]");
       usernameLink.innerText = userToFollow.username;
       usernameLink.setAttribute("href", `/profile/${userToFollow.username}`);
-      const followButton = wtfElement.querySelector("button");
+
+      const followButton = wtfElement.querySelector("[data-action='follow']");
+      const unfollowButton = wtfElement.querySelector(
+        "[data-action='unfollow']"
+      );
+
       followButton.setAttribute("data-username", userToFollow.username);
+      unfollowButton.setAttribute("data-username", userToFollow.username);
+
+      followButton.hidden = userToFollow.is_following;
+      unfollowButton.hidden = !userToFollow.is_following;
+
       followButton.addEventListener("click", handleFollow);
+      unfollowButton.addEventListener("click", handleUnfollow);
+
       if (!isLoggedIn) {
         followButton.style.display = "none";
+        unfollowButton.style.display = "none";
       }
 
       whoToFollowList.appendChild(wtfElement);
@@ -63,7 +93,32 @@ async function handleFollow(event) {
   if (!username) return;
 
   await apiService.followUser(username);
+  // Hide follow button and show unfollow button
+  button.hidden = true;
+  const unfollowButton = button.parentElement.querySelector(
+    "[data-action='unfollow']"
+  );
+  if (unfollowButton) {
+    unfollowButton.hidden = false;
+  }
+  await apiService.getWhoToFollow();
+}
+
+async function handleUnfollow(event) {
+  const button = event.target;
+  const username = button.getAttribute("data-username");
+  if (!username) return;
+
+  await apiService.unfollowUser(username);
+  // Hide unfollow button and show follow button
+  button.hidden = true;
+  const unfollowButton = button.parentElement.querySelector(
+    "[data-action='unfollow']"
+  );
+  if (unfollowButton) {
+    unfollowButton.hidden = false;
+  }
   await apiService.getWhoToFollow();
 }
 
-export {createProfile, handleFollow};
+export { createProfile, handleFollow, handleUnfollow };

front-end/index.html

@@ -4,18 +4,13 @@
     <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"
-            alt="Purple Forest "
-            width="50"
-            height="60"
-          />
+          <img src="./logo.svg" alt="Purple Forest " width="50" height="60" />
           PurpleForest
         </h1></a
       >
@@ -186,11 +181,11 @@ <h1 id="signup-heading" class="signup__title">Create your account</h1>
         </dl>
         <div class="profile__actions">
           <button type="button" data-action="follow">Follow</button>
+          <button type="button" data-action="unfollow">Unfollow</button>
         </div>
         <div class="profile__who-to-follow">
           <h4>Who to follow</h4>
-          <ul data-who-to-follow>
-          </ul>
+          <ul data-who-to-follow></ul>
         </div>
       </section>
     </template>
@@ -199,6 +194,7 @@ <h4>Who to follow</h4>
         <div><a data-username></a></div>
         <div class="profile__actions">
           <button type="button" data-action="follow">Follow</button>
+          <button type="button" data-action="unfollow">Unfollow</button>
         </div>
       </li>
     </template>
@@ -236,7 +232,9 @@ <h2 id="bloom-form-title" class="bloom-form__title">Share a Bloom</h2>
       <article class="bloom box" data-bloom data-bloom-id="">
         <div class="bloom__header flex">
           <a href="#" class="bloom__username" data-username>Username</a>
-          <a href="#" class="bloom__time"><time class="bloom__time" data-time>2m</time></a>
+          <a href="#" class="bloom__time"
+            ><time class="bloom__time" data-time>2m</time></a
+          >
         </div>
         <div class="bloom__content" data-content></div>
       </article>
@@ -256,6 +254,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>