From 79aa36582a55343d4f2511f7df3bd5ed899b54c0 Mon Sep 17 00:00:00 2001
From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:58:27 +0300
Subject: [PATCH] refactor: rename classes according to correct BEM

---
 src/components/ChatWindow/ChatWindow.hbs  |  23 ++-
 src/components/ChatWindow/ChatWindow.scss | 186 +++++++++++-----------
 src/components/ChatWindow/ChatWindow.ts   |   8 +-
 3 files changed, 105 insertions(+), 112 deletions(-)

diff --git a/src/components/ChatWindow/ChatWindow.hbs b/src/components/ChatWindow/ChatWindow.hbs
index a177cf3e..9d54dd7d 100644
--- a/src/components/ChatWindow/ChatWindow.hbs
+++ b/src/components/ChatWindow/ChatWindow.hbs
@@ -1,34 +1,29 @@
 <template id='js-chat-message-template'>
-    <div class='chat-window__chat-window__message'>
-        <span class='chat-window__chat-window__message__text js-message-text'>
+    <div class='message'>
+        <span class='message__text js-message-text'>
             Тут текст сообщения
         </span>
-        <div class='chat-window__chat-window__message__time-wrapper'>
-            <span
-                class='chat-window__chat-window__message__time js-message-time'
-            >
+        <div class='message__time-wrapper'>
+            <span class='message__time js-message-time'>
                 00:00
             </span>
         </div>
     </div>
 </template>
 
-<div class='chat-window__chat-window' id='{{id}}'>
-    <div class='chat-window__chat-window__messages' id='js-messages'>
+<div class='chat-window' id='{{id}}'>
+    <div class='chat-window__messages' id='js-messages'>
         <!-- Messages will be here -->
     </div>
 
-    <div class='chat-window__chat-window__bottom-part'>
+    <div class='chat-window__bottom-part'>
         <textarea
             placeholder='Написать сообщение'
-            class='chat-window__chat-window__input js-message-input'
+            class='chat-window__input js-message-input'
             rows='1'
             maxlength='300'
         ></textarea>
-        <button
-            class='chat-window__chat-window__send-button'
-            id='js-send-message-button'
-        >
+        <button class='chat-window__send-button' id='js-send-message-button'>
             <svg
                 aria-hidden='true'
                 width='16'
diff --git a/src/components/ChatWindow/ChatWindow.scss b/src/components/ChatWindow/ChatWindow.scss
index 53d81ce5..6e06daf0 100644
--- a/src/components/ChatWindow/ChatWindow.scss
+++ b/src/components/ChatWindow/ChatWindow.scss
@@ -1,113 +1,111 @@
 .chat-window {
-    &__chat-window {
-        flex: 1 1;
-        background: url('/chat-background.png');
-        box-sizing: border-box;
-        margin: 0 auto;
+    flex: 1 1;
+    background: url('/chat-background.png');
+    box-sizing: border-box;
+    margin: 0 auto;
+
+    display: flex;
+    flex-direction: column;
 
+    &__messages {
+        overflow-y: auto;
+        flex: 1 1 0;
         display: flex;
         flex-direction: column;
+        row-gap: 10px;
+        padding: 10px 20px 10px;
+    }
 
-        &__messages {
-            overflow-y: auto;
-            flex: 1 1 0;
-            display: flex;
-            flex-direction: column;
-            row-gap: 10px;
-            padding: 10px 20px 10px;
-        }
-
-        &__message {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            flex: 0 0 auto;
-            gap: 15px;
+    &__bottom-part {
+        padding: 0 20px;
+        box-sizing: border-box;
+        border-top: 1px solid #e4e4e4;
+        background-color: #fff;
+        width: 100%;
+    }
 
-            width: fit-content;
-            height: min-content;
-            min-width: 70px;
-            min-height: 30px;
-            background-color: #ffffff;
-            border-radius: 20px;
-            align-items: flex-start;
-            box-sizing: border-box;
-            padding: 10px 10px;
-            align-items: end;
+    &__input {
+        display: block;
+        padding: 4px 12px;
+        width: 100%;
+        height: 31px;
+        line-height: 20px;
+        overflow: hidden;
+        outline: none;
+        border: 1px solid #ced1d7;
+        font-family: Inter;
+        font-size: 16px;
+        box-sizing: border-box;
+        border-radius: 16px;
+        resize: none;
+    }
 
-            max-width: 60%;
-            overflow-wrap: anywhere;
+    &__bottom-part {
+        padding: 5px 10px;
+        display: flex;
+        gap: 10px;
+        align-items: flex-end;
+    }
 
-            &__text {
-                font-size: 17px;
-                line-height: 24px;
-            }
+    &__send-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        background-color: #0468ff;
+        width: 32px;
+        height: 32px;
+        color: #fff;
+        rotate: 90deg;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+}
 
-            &__time-wrapper {
-                display: flex;
-                align-items: end;
-                flex: 1 0 auto;
-            }
+.message {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex: 0 0 auto;
+    gap: 15px;
 
-            &__time {
-                font-size: 12px;
-                color: #15224266;
-                flex: 1 0 auto;
-            }
+    width: fit-content;
+    height: min-content;
+    min-width: 70px;
+    min-height: 30px;
+    background-color: #ffffff;
+    border-radius: 20px;
+    align-items: flex-start;
+    box-sizing: border-box;
+    padding: 10px 10px;
+    align-items: end;
 
-            &--mine {
-                margin-left: auto;
-                color: #fff;
-                background-color: #0468ff;
-                .chat-window__chat-window__message__time {
-                    color: #fff;
-                }
-            }
-        }
+    max-width: 60%;
+    overflow-wrap: anywhere;
 
-        &__bottom-part {
-            padding: 0 20px;
-            box-sizing: border-box;
-            border-top: 1px solid #e4e4e4;
-            background-color: #fff;
-            width: 100%;
-        }
+    &__text {
+        font-size: 17px;
+        line-height: 24px;
+    }
 
-        &__input {
-            display: block;
-            padding: 4px 12px;
-            width: 100%;
-            height: 31px;
-            line-height: 20px;
-            overflow: hidden;
-            outline: none;
-            border: 1px solid #ced1d7;
-            font-family: Inter;
-            font-size: 16px;
-            box-sizing: border-box;
-            border-radius: 16px;
-            resize: none;
-        }
+    &__time-wrapper {
+        display: flex;
+        align-items: end;
+        flex: 1 0 auto;
+    }
 
-        &__bottom-part {
-            padding: 5px 10px;
-            display: flex;
-            gap: 10px;
-            align-items: flex-end;
-        }
+    &__time {
+        font-size: 12px;
+        color: #15224266;
+        flex: 1 0 auto;
+    }
 
-        &__send-button {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: none;
-            background-color: #0468ff;
-            width: 32px;
-            height: 32px;
+    &--mine {
+        margin-left: auto;
+        color: #fff;
+        background-color: #0468ff;
+        .message__time {
             color: #fff;
-            rotate: 90deg;
-            border-radius: 50%;
-            cursor: pointer;
         }
     }
 }
diff --git a/src/components/ChatWindow/ChatWindow.ts b/src/components/ChatWindow/ChatWindow.ts
index 30bdd13b..d18abb00 100644
--- a/src/components/ChatWindow/ChatWindow.ts
+++ b/src/components/ChatWindow/ChatWindow.ts
@@ -25,7 +25,9 @@ export default class ChatWindow extends BaseComponent {
         this.messages = messages;
 
         requestAnimationFrame(() => {
-            this.messagesContainer = document.getElementById('js-messages');
+            this.messagesContainer = document.getElementById(
+                'js-messages'
+            ) as HTMLElement;
 
             this.displayMessageHistory();
 
@@ -176,9 +178,7 @@ export default class ChatWindow extends BaseComponent {
         ).textContent = convertTimeToMinutesAndSeconds(message.createdAt);
 
         if (message.senderId == globalStore.auth.userId) {
-            newMessage.children[0]!.classList!.add(
-                'chat-window__chat-window__message--mine'
-            );
+            newMessage.children[0]!.classList!.add('message--mine');
         }
 
         this.messagesContainer.appendChild(newMessage);