feat: highlight selected chat

frontend-park-mail-ru · Dec 17, 2024 · 0e1063e · 0e1063e
1 parent 9659cca
commit 0e1063e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/pages/ChatPage/ChatPage.scss b/src/pages/ChatPage/ChatPage.scss
@@ -50,4 +50,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    &--active {
+        background-color: #f3f6ff;
+    }
 }
diff --git a/src/pages/ChatPage/ChatPage.ts b/src/pages/ChatPage/ChatPage.ts
@@ -49,13 +49,17 @@ export default class ChatPage extends BaseComponent {
     }
 
     private async handleCardClick(e: Event, el: HTMLElement) {
-        if (!el.dataset.id) {
-            throw new Error('recipient id is not defined');
-        }
+        // Remove active class from already selected chat list item
+        document
+            .querySelector('.recipient-card--active')
+            ?.classList.remove('recipient-card--active');
+        el.classList.add('recipient-card--active');
 
+        // Remove old Chat Window if present
         document.getElementById('ChatWindow-0')?.remove();
-        const data = await ChatRepository.get(el.dataset.id);
 
+        // Create new Chat Window
+        const data = await ChatRepository.get(el.dataset.id!);
         const chatWindow = new ChatWindow(
             this.thisElement,
             el.dataset.id!,