From 5fe40471d285ace6b5f099eb44edfbf5c067e9f1 Mon Sep 17 00:00:00 2001
From: shantanu pawar <shantanupawar101@gmail.com>
Date: Sat, 11 Jan 2025 01:40:55 +0530
Subject: [PATCH] Fix: Re-rendering issue

---
 users/discord/App.js                     | 10 ++++++++
 users/discord/components/UsersSection.js | 31 ++++++++++++++----------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/users/discord/App.js b/users/discord/App.js
index bb38d08b..df6f299a 100644
--- a/users/discord/App.js
+++ b/users/discord/App.js
@@ -44,7 +44,17 @@ const handleUserSelected = (userId) => {
     );
 
     if (selectedUserIndex !== -1) {
+      const usersSection = document.querySelector('.users_section');
+      const scrollPosition = usersSection?.scrollTop;
+
       showUser = selectedUserIndex;
+
+      rerender(App(), window['root']);
+
+      const restoredUsersSection = document.querySelector('.users_section');
+      if (restoredUsersSection) {
+        restoredUsersSection.scrollTop = scrollPosition;
+      }
     }
   }
 };
diff --git a/users/discord/components/UsersSection.js b/users/discord/components/UsersSection.js
index 4e7fed71..cfa1f584 100644
--- a/users/discord/components/UsersSection.js
+++ b/users/discord/components/UsersSection.js
@@ -5,13 +5,17 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
 
   const handleClick = (userId) => {
     selectedUserId = userId;
-    document.querySelectorAll('.user_card').forEach((card) => {
-      if (card.dataset.key === userId) {
-        card.classList.add('active_tab');
-      } else {
-        card.classList.remove('active_tab');
-      }
-    });
+    const activeCard = document.querySelector('.user_card.active_tab');
+    if (activeCard) {
+      activeCard.classList.remove('active_tab');
+    }
+
+    const newActiveCard = document.querySelector(
+      `.user_card[data-key="${userId}"]`,
+    );
+    if (newActiveCard) {
+      newActiveCard.classList.add('active_tab');
+    }
 
     const selectedUser = users.find((user) => user.id === userId);
 
@@ -20,9 +24,9 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
       detailsSection
         .querySelectorAll('.user_details_field')
         .forEach((field) => {
-          const label = field.querySelector('span:first-child')?.textContent;
-          const valueSpan = field.querySelector('span:last-child');
-          const link = field.querySelector('a');
+          const label = field.querySelector('#user-label')?.textContent;
+          const valueSpan = field.querySelector('#user-value');
+          const link = field.querySelector('#user-management-link');
 
           switch (label) {
             case 'Name: ':
@@ -35,10 +39,11 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
               if (valueSpan) valueSpan.textContent = selectedUser.discordId;
               break;
             case 'Joined RDS server on: ':
-              if (valueSpan)
+              if (valueSpan) {
                 valueSpan.textContent = new Date(
                   selectedUser.discordJoinedAt,
                 ).toUTCString();
+              }
               break;
             case 'User Management: ':
               if (link) {
@@ -48,9 +53,9 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
               break;
           }
         });
-    }
 
-    handleUserSelected(userId);
+      handleUserSelected(userId);
+    }
   };
 
   return createElement(