From 14d96bf932002c30468ef41cce7efb033272d47b Mon Sep 17 00:00:00 2001
From: whilstsomebody <vishwakarmarambhawan572@gmail.com>
Date: Wed, 22 Jan 2025 09:34:09 +0530
Subject: [PATCH] user_profile: Fix incorrect rendering of groups and channels
 list.

It was found that adding or removing an item from a group
or channel list updated the list correctly initially.
However, when revisiting the group or channel list tab, the
removed item was still present. The item was only removed
after closing and reopening the user profile menu popover.

This commit fixes the bug by correctly fetching the data
and live-updating the list.
Also, we used to re-render the groups and channels list
everytime we opened the groups or channels tab. Now, we
render the list only once when the corresponding tab is
opened for the first time.

Fixes: #33071
---
 web/src/user_profile.ts | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/src/user_profile.ts b/web/src/user_profile.ts
index 2d306647ab..79ef9b71f2 100644
--- a/web/src/user_profile.ts
+++ b/web/src/user_profile.ts
@@ -537,7 +537,6 @@ export function show_user_profile(user: User, default_tab_key = "profile-tab"):
     original_values = {
         user_id: user.user_id.toString(),
     };
-    const user_streams = stream_data.get_streams_for_user(user.user_id).subscribed;
     // We only show the subscribe widget if the user is an admin, the user has opened their own profile,
     // or if the user profile belongs to a bot whose owner has opened the user profile. However, we don't
     // want to show the subscribe widget for generic bots since they are system bots and for deactivated users.
@@ -546,7 +545,6 @@ export function show_user_profile(user: User, default_tab_key = "profile-tab"):
         (people.can_admin_user(user) || settings_data.user_can_subscribe_other_users()) &&
         !user.is_system_bot &&
         people.is_person_active(user.user_id);
-    const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
     // We currently have the main UI for editing your own profile in
     // settings, so can_manage_profile is artificially false for those.
     const can_manage_profile =
@@ -601,6 +599,7 @@ export function show_user_profile(user: User, default_tab_key = "profile-tab"):
         default_tab = 3;
     }
 
+    let has_initialized_user_type_fields = false;
     const opts = {
         selected: default_tab,
         child_wants_focus: true,
@@ -619,17 +618,30 @@ export function show_user_profile(user: User, default_tab_key = "profile-tab"):
             );
             switch (key) {
                 case "profile-tab":
-                    initialize_user_type_fields(user);
-                    break;
-                case "user-profile-groups-tab":
-                    render_user_group_list(groups_of_user, user);
-                    break;
-                case "user-profile-streams-tab":
-                    if (show_user_subscribe_widget) {
-                        render_user_profile_subscribe_widget();
+                    if (!has_initialized_user_type_fields) {
+                        initialize_user_type_fields(user);
+                        has_initialized_user_type_fields = true;
                     }
-                    render_user_stream_list(user_streams, user);
                     break;
+                case "user-profile-groups-tab": {
+                    if (!user_groups_list_widget) {
+                        const groups_of_user = user_groups.get_user_groups_of_user(user.user_id);
+                        render_user_group_list(groups_of_user, user);
+                    }
+                    break;
+                }
+                case "user-profile-streams-tab": {
+                    if (!user_streams_list_widget) {
+                        const user_streams = stream_data.get_streams_for_user(
+                            user.user_id,
+                        ).subscribed;
+                        if (show_user_subscribe_widget) {
+                            render_user_profile_subscribe_widget();
+                        }
+                        render_user_stream_list(user_streams, user);
+                    }
+                    break;
+                }
                 case "manage-profile-tab":
                     $("#user-profile-modal .modal__footer").show();
                     render_manage_profile_content(user);