Fix: Re-rendering issue

Real-Dev-Squad · Jan 10, 2025 · 5fe4047 · 5fe4047
1 parent e3a3688
commit 5fe4047
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git 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
@@ -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(