Merge pull request #3150 from fettuccinae/LB-1726

LB-1726: Fixed following status glitching when followed from similar pane
metabrainz · Jan 28, 2025 · 46374f7 · 46374f7
2 parents 4e25412 + ac106f1
commit 46374f7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/frontend/js/src/user/components/follow/UserSocialNetwork.tsx b/frontend/js/src/user/components/follow/UserSocialNetwork.tsx
@@ -254,22 +254,36 @@ export default class UserSocialNetwork extends React.Component<
   ) => {
     const { currentUser } = this.context;
     const { user: profileUser } = this.props;
-    const { followingList } = this.state;
-    const newFollowingList = [...followingList];
-    const index = newFollowingList.findIndex(
-      (following) => following === user.name
-    );
-    if (action === "follow" && index === -1) {
-      newFollowingList.push(user.name);
+    const { followingList, currentUserFollowingList } = this.state;
+
+    if (!currentUser) return;
+
+    // update the logged-in user's following list (for similar users pane)
+    const newCurrentUserFollowingList = [...currentUserFollowingList];
+    const currentUserIndex = newCurrentUserFollowingList.indexOf(user.name);
+
+    if (action === "follow" && currentUserIndex === -1) {
+      newCurrentUserFollowingList.push(user.name);
+    } else if (action === "unfollow" && currentUserIndex !== -1) {
+      newCurrentUserFollowingList.splice(currentUserIndex, 1);
     }
-    if (
-      action === "unfollow" &&
-      index !== -1 &&
-      profileUser.name === currentUser?.name
-    ) {
-      newFollowingList.splice(index, 1);
+
+    // update the users following list (for followers/following pane)
+    const newFollowingList = [...followingList];
+    if (profileUser.name === currentUser.name) {
+      const profileUserIndex = newFollowingList.indexOf(user.name);
+      if (action === "follow" && profileUserIndex === -1) {
+        newFollowingList.push(user.name);
+      } else if (action === "unfollow" && profileUserIndex !== -1) {
+        newFollowingList.splice(profileUserIndex, 1);
+      }
     }
-    this.setState({ followingList: newFollowingList });
+
+    // Update both lists in state
+    this.setState({
+      followingList: newFollowingList,
+      currentUserFollowingList: newCurrentUserFollowingList,
+    });
   };
 
   render() {

diff --git a/frontend/js/tests/user/follow/UserSocialNetwork.test.tsx b/frontend/js/tests/user/follow/UserSocialNetwork.test.tsx
@@ -166,11 +166,11 @@ describe("<UserSocialNetwork />", () => {
       });
 
       // initial state after first fetch
-      expect(instance.state.followingList).toEqual(["jack", "fnord"]);
+      expect(instance.state.currentUserFollowingList).toEqual(["jack", "fnord"]);
       await act(async () => {
         instance.updateFollowingList({ name: "Baldur" }, "follow");
       });
-      expect(instance.state.followingList).toEqual(["jack", "fnord", "Baldur"]);
+      expect(instance.state.currentUserFollowingList).toEqual(["jack", "fnord", "Baldur"]);
     });
 
     it("updates the state when called with action unfollow", async () => {
@@ -249,13 +249,13 @@ describe("<UserSocialNetwork />", () => {
       await act(async () => {
         instance.updateFollowingList({ name: "Baldur" }, "follow");
       });
-      expect(instance.state.followingList).toEqual(["jack", "fnord", "Baldur"]);
+      expect(instance.state.currentUserFollowingList).toEqual(["jack", "fnord", "Baldur"]);
 
       // Ensure we can't add a user twice
       await act(async () => {
         instance.updateFollowingList({ name: "Baldur" }, "follow");
       });
-      expect(instance.state.followingList).toEqual(["jack", "fnord", "Baldur"]);
+      expect(instance.state.currentUserFollowingList).toEqual(["jack", "fnord", "Baldur"]);
     });
 
     it("does nothing when trying to unfollow a user that is not followed", async () => {