Изменен шаблон ChatList, кнопки создаются в зависимости от условия (ч…

…аты или каналы?)
frontend-park-mail-ru · May 3, 2024 · d705dcc · d705dcc
1 parent 71e8891
commit d705dcc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/src/Components/ChatList/ChatList.hbs b/src/Components/ChatList/ChatList.hbs
@@ -2,10 +2,13 @@
     <div class='chat_list_header'>
         <h2> {{header}} </h2>
         <div class='chat_list_header_buttons'>
-            <button id='create_group_btn' class='chat-list-button inline_button' style="display: none;">Создать группу</button>
-            <button id='page_channel_btn' class='chat-list-button inline_button' style="display: none;">Каналы</button>
-            <button id='create_channel_btn' class='chat-list-button inline_button' style="display: none;">Создать канал</button>
-            <button id='page_chats_btn' class='chat-list-button inline_button' style="display: none;">Чаты</button>
+            {{#if chatTypeFlag}}
+                <button id='create_group_btn' class='chat-list-button inline_button'>Создать группу</button>
+                <button id='page_channel_btn' class='chat-list-button inline_button'>Каналы</button>
+            {{else}}
+                <button id='create_channel_btn' class='chat-list-button inline_button'>Создать канал</button>
+                <button id='page_chats_btn' class='chat-list-button inline_button'>Чаты</button>
+            {{/if}}
         </div>
     </div>
     <div class='search_container'>

diff --git a/src/Components/ChatList/ChatList.js b/src/Components/ChatList/ChatList.js
@@ -18,39 +18,36 @@ export default class ChatList extends BaseComponent {
         if (this.getConfig().type === '/channel') {
             this.getConfig().header = 'Каналы';
         }
+        this.getConfig().chatTypeFlag = this.getConfig().type === '/chat';
         super.render();
-        if (this.getConfig().type === '/channel') {
-            const createChannelBtn =
-                this.getParent().querySelector(`#create_channel_btn`);
-            createChannelBtn.style.display = 'block';
-            createChannelBtn.addEventListener('click', () => {
-                this.getSearcher().getSocket().close();
-                goToPage('/create_channel', true);
-            });
-
-            const pageChatsBtn =
-                this.getParent().querySelector(`#page_chats_btn`);
-            pageChatsBtn.style.display = 'block';
-            pageChatsBtn.addEventListener('click', () => {
-                this.getSearcher().getSocket().close();
-                goToPage('/chat', true);
-            });
-        } else {
+        if (this.getConfig().chatTypeFlag) {
             const createGroupBtn =
                 this.getParent().querySelector(`#create_group_btn`);
-            createGroupBtn.style.display = 'block';
             createGroupBtn.addEventListener('click', () => {
                 this.getSearcher().getSocket().close();
                 goToPage('/create_group', true);
             });
 
             const pageChannelsBtn =
                 this.getParent().querySelector(`#page_channel_btn`);
-            pageChannelsBtn.style.display = 'block';
             pageChannelsBtn.addEventListener('click', () => {
                 this.getSearcher().getSocket().close();
                 goToPage('/channel', true);
             });
+        } else {
+            const createChannelBtn =
+                this.getParent().querySelector(`#create_channel_btn`);
+            createChannelBtn.addEventListener('click', () => {
+                this.getSearcher().getSocket().close();
+                goToPage('/create_channel', true);
+            });
+
+            const pageChatsBtn =
+                this.getParent().querySelector(`#page_chats_btn`);
+            pageChatsBtn.addEventListener('click', () => {
+                this.getSearcher().getSocket().close();
+                goToPage('/chat', true);
+            });
         }
 
         this.getParent()