Fix: Scrollablity issue for discord users

Author: shantanu-02

users/discord/App.js

@@ -40,12 +40,11 @@ const handleTabNavigation = async (e) => {
 const handleUserSelected = (userId) => {
   if (userId) {
     const selectedUserIndex = usersData[activeTab]?.findIndex(
-      (user) => user.id === userId,
+      (user) => user.id === userId
     );
 
     if (selectedUserIndex !== -1) {
       showUser = selectedUserIndex;
-      rerender(App(), window['root']);
     }
   }
 };

users/discord/components/UsersSection.js

@@ -1,23 +1,67 @@
 const { createElement } = react;
 
 export const UsersSection = ({ users, showUser, handleUserSelected }) => {
+  let selectedUserId = users[showUser]?.id;
+  
+  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 selectedUser = users.find(user => user.id === userId);
+    
+    const detailsSection = document.querySelector('.user_details_section');
+    if (detailsSection && selectedUser) {
+      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');
+        
+        switch(label) {
+          case 'Name: ':
+            if (valueSpan) valueSpan.textContent = selectedUser.first_name;
+            break;
+          case 'Username: ':
+            if (valueSpan) valueSpan.textContent = selectedUser.username;
+            break;
+          case 'Discord ID: ':
+            if (valueSpan) valueSpan.textContent = selectedUser.discordId;
+            break;
+          case 'Joined RDS server on: ':
+            if (valueSpan) valueSpan.textContent = new Date(selectedUser.discordJoinedAt).toUTCString();
+            break;
+          case 'User Management: ':
+            if (link) {
+              link.href = `${USER_MANAGEMENT_URL}${selectedUser.username}`;
+              link.textContent = `${USER_MANAGEMENT_URL}${selectedUser.username}`;
+            }
+            break;
+        }
+      });
+    }
+    
+    handleUserSelected(userId);
+  };
+
   return createElement(
     'aside',
     {
       class: 'users_section',
-
       'data-testid': 'users-section',
     },
     users?.map((user) => {
       return createElement(
         'div',
         {
-          class: `user_card ${
-            users[showUser].id === user.id ? 'active_tab' : ''
-          }`,
+          class: `user_card ${selectedUserId === user.id ? 'active_tab' : ''}`,
           'data-testid': `user-card-${user.id}`,
           'data-key': user.id,
-          onclick: () => handleUserSelected(user.id),
+          onclick: () => handleClick(user.id),
         },
         [
           createElement('img', {
@@ -29,4 +73,4 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => {
       );
     }),
   );
-};
+};

users/discord/style.css

@@ -20,8 +20,10 @@ main {
 
 .users_section {
   grid-area: aside;
-  overflow: scroll;
+  height: calc(100vh - 16rem);
+  overflow-y: auto;
   padding-inline: 1rem;
+  border: none;
 }
 
 .tabs_section {