Fixes after review. Fix multiple request

VladToby · Aug 24, 2024 · 5f51257 · 5f51257
1 parent 703d106
commit 5f51257
Show file tree

Hide file tree

Showing 42 changed files with 868 additions and 529 deletions.
diff --git a/src/api/ChatApi.ts b/src/api/ChatApi.ts
@@ -9,12 +9,7 @@ class ChatAPI {
     }
 
     public async createChat(title: string): Promise<Chat> {
-        return chats.post('/', {
-            data: { title },
-            headers: {
-                'Content-type': 'application/json; charset=UTF-8',
-            },
-        });
+        return chats.post('/', {data: { title }});
     }
 
     public async getUserToken(chatId: number): Promise<{ token: string }> {
@@ -26,22 +21,22 @@ class ChatAPI {
         return response;
     }
 
-    public async getChatUsers(chatId: number): Promise<User[]> {
+    public async getChatUsers(chatId: number | undefined): Promise<User[]> {
         return chats.get(`/${chatId}/users`);
     }
 
-    public async addUsers(chatId: number, users: any): Promise<Chat> {
+    public async addUsers(data: any): Promise<Chat> {
         return chats.put('/users', {
-            data: { chatId, users },
+            data: data,
             headers: {
                 'Content-type': 'application/json; charset=UTF-8',
             },
         });
     }
 
-    public async removeUsers(chatId: number, users: any): Promise<void> {
+    public async removeUsers(data: any): Promise<void> {
         return chats.delete('/users', {
-            data: { chatId, users },
+            data: data,
             headers: {
                 'Content-type': 'application/json; charset=UTF-8',
             }
@@ -56,6 +51,15 @@ class ChatAPI {
             }
         });
     }
+
+    public async uploadAvatar(data: any): Promise<unknown> {
+        return chats.put('/avatar', {
+            data: data,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+    }
 }
 
 export default new ChatAPI();
diff --git a/src/components/add-user-modal/user-modal.hbs b/src/components/add-user-modal/user-modal.hbs
@@ -1,6 +1,6 @@
 {{#if isAddUserOpen }}
     <form class="user-modal" method="dialog">
-        <h3 class="title">Добавить пользователя в чат</h3>
+    <h3 class="title">{{#if isUserSearchEnabled}}Add user to chat{{else}}Delete user from chat{{/if}}</h3>
         {{#if isUserSearchEnabled}}
             {{{ Search users=users class="search" placeholder="Search users" }}}
         {{/if}}

diff --git a/src/components/add-user-modal/user-modal.less b/src/components/add-user-modal/user-modal.less
@@ -10,13 +10,25 @@
   background: @main__background-color;
   padding: 3rem 2rem 1rem 2rem;
   display: flex;
+  width: 30%;
   flex-direction: column;
   justify-content: space-between;
 
   .title {
+    text-align: center;
     margin: 0 0 1rem 0;
   }
 
+  .user-item {
+    list-style: none;
+    border-bottom: 1px solid @secondary__background-color;
+    cursor: pointer;
+
+    &:hover {
+      color: @main__background-hover-color;
+    }
+  }
+
   .search {
     .search-results {
       display: block;
@@ -30,6 +42,7 @@
       margin-top: 0;
       padding-inline-start: 15px;
       padding-inline-end: 15px;
+      padding-bottom: 0.75rem;
 
       .user-item {
         display: flex;

diff --git a/src/components/add-user-modal/user-modal.ts b/src/components/add-user-modal/user-modal.ts
@@ -12,8 +12,7 @@ export class UserModalBase extends Block {
         super({
             ...props,
             onClose: () => {
-                Store.set('isAddUserOpen', false);
-                Store.set('selectedUser', null);
+                Store.set({isAddUserOpen: false});
             },
             events: {
                 click: (event: Event) => {
@@ -27,34 +26,6 @@ export class UserModalBase extends Block {
         this.children.Search = new Search({} as any);
     }
 
-    protected componentDidUpdate(oldProps: any, newProps: any) {
-        if (oldProps.selectedUser !== newProps.selectedUser && newProps.selectedUser) {
-            if (this.props.isUserSearchEnabled) {
-                this.addUserToChat(newProps.selectedUser);
-            } else {
-                this.removeUserFromChat(newProps.selectedUser);
-            }
-            Store.set('selectedUser', null);
-        }
-
-        return true;
-    }
-
-    private async addUserToChat(user: any) {
-        const chatId = Store.getState().selectedChat?.id;
-        if (chatId) {
-            try {
-                await ChatController.addUsers({ id: chatId, user: user.id });
-                await ChatController.getChatUsers(chatId);
-                Store.set('isAddUserOpen', false);
-            } catch (error) {
-                console.error('Error adding user to chat:', error);
-            }
-        } else {
-            console.error('No selected chat found');
-        }
-    }
-
     private async handleUserClick(e: Event) {
         const target = e.target as HTMLElement;
         const userItem = target.closest('.user-item');
@@ -64,28 +35,14 @@ export class UserModalBase extends Block {
                 let user;
                 if (this.props.isUserSearchEnabled) {
                     user = this.props.users.find((u: User) => u.id.toString() === userId);
+                    await ChatController.addUsers(user);
+                    Store.set({isAddUserOpen: false});
                 } else {
                     user = this.props.currentChatUsers.find((u: User) => u.id.toString() === userId);
+                    await ChatController.removeUsers(user);
+                    Store.set({isAddUserOpen: false});
                 }
-                if (user) {
-                    Store.setSelectedUser(user);
-                }
-            }
-        }
-    }
-
-    private async removeUserFromChat(user: any) {
-        const chatId = Store.getState().selectedChat?.id;
-        if (chatId) {
-            try {
-                await ChatController.removeUsers({ id: chatId, users: [user.id] });
-                await ChatController.getChatUsers(chatId);
-                Store.set('isAddUserOpen', false);
-            } catch (error) {
-                console.error('Error removing user from chat:', error);
             }
-        } else {
-            console.error('No selected chat found');
         }
     }
 
@@ -98,9 +55,10 @@ export const UserModal = connect((state) => {
     return {
         isAddUserOpen: state?.isAddUserOpen || false,
         isUserSearchEnabled: state?.isUserSearchEnabled || false,
-        usersList: state?.usersList || false,
         selectedUser: state.selectedUser,
         selectedChatId: state.selectedChat?.id,
-        currentChatUsers: state?.currentChatUsers || []
+        currentChatUsers: state?.currentChatUsers || [],
+        users: state?.users || [],
+        usersList: state.usersList
     }
 })(UserModalBase);
diff --git a/src/components/avatar/avatar.hbs b/src/components/avatar/avatar.hbs
@@ -1,4 +1,4 @@
-<div class="image {{#if avatar }}uploaded{{/if}}">
+<div class="image {{#if avatar }}uploaded{{/if}} {{class}}">
     <img
         src="https://ya-praktikum.tech/api/v2/resources{{avatar}}"
         {{#if avatar}}style=""{{else}}style="display: none"{{/if}}

diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs
@@ -1 +1 @@
-<button class="button {{ class }}" type="{{ type }}" id="{{ id }}" page="{{page}}">{{ label }}</button>
+<button class="button {{ class }}" type="{{ type }}" id="{{ id }}" page="{{page}}" >{{ label }}</button>
diff --git a/src/components/chat-body/chat-body.hbs b/src/components/chat-body/chat-body.hbs
@@ -1,17 +1,30 @@
 {{#if selectedChat}}
     <div class="chat-body">
         <div class="chat-header">
-            <h2>{{selectedChat.title}}</h2>
-            {{#if websocketError}}
-                <div class="error-message">{{websocketError}}</div>
-            {{/if}}
+            <div class="left-section">
+                <div class="chat avatar">
+                    {{#if selectedChat.avatar}}
+                        {{{ Avatar avatar=selectedChat.avatar name=selectedChat.login  }}}
+                    {{else}}
+                        <div class="default-avatar">
+                            <span class="title">{{firstLetter selectedChat.title}}</span>
+                        </div>
+                    {{/if}}
+                </div>
+                <h2 class="chat-title">{{selectedChat.title}}</h2>
+                {{#if isSettingsModalOpen }}
+                    {{{ ChatSettingsModal selectedChat=selectedChat currentChatUsers=currentChatUsers }}}
+                    <div class="modals-overlay"></div>
+                {{/if}}
+            </div>
             <div class="chat-menu">
                 {{{ MenuButton isOpenChatMenu=isOpenChatMenu class="chat-menu-button" onClick=toggleMenu }}}
                 {{#if isOpenChatMenu}}
                     {{{ ChatMenu }}}
                 {{/if}}
                 {{#if isAddUserOpen }}
                     {{{ UserModal }}}
+                    <div class="modals-overlay"></div>
                 {{/if}}
             </div>
         </div>

diff --git a/src/components/chat-body/chat-body.less b/src/components/chat-body/chat-body.less
@@ -27,8 +27,80 @@
           background-color: @main__background-color;
           border-bottom: 1px solid @secondary__background-color;
 
-          h2 {
+          .left-section {
+            display: flex;
+            flex-direction: row;
             padding-inline-start: 2rem;
+            justify-content: space-between;
+            align-items: center;
+            width: auto;
+            border-right: 1px solid @secondary__background-color;
+
+            .avatar {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 1.375rem !important;
+              height: 1.375rem !important;
+              z-index: 100;
+
+              .default-avatar {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 1.375rem !important;
+                height: 1.375rem !important;
+                z-index: 100;
+
+                .title {
+                  position: absolute;
+                }
+
+                &:after {
+                  content: '';
+                  border: 30px solid #343A4F;
+                  border-radius: 100%;
+                }
+              }
+
+              .image {
+                position: absolute;
+
+                &.uploaded {
+                  width: 3.675rem !important;
+                  height: 3.675rem !important;
+
+                  img {
+                    width: 3.675rem !important;
+                    height: 3.675rem !important;
+                    border-radius: 50%;
+                  }
+                }
+              }
+            }
+
+            .chat-title {
+              padding-right: 0.5rem;
+              cursor: pointer;
+              margin-left: 3rem;
+
+              &:hover {
+                color: @main__button-background-hover;
+
+                &:after {
+                  color: @main__button-background-hover;
+                }
+              }
+
+              &:after {
+                font-family: @icon-font;
+                content: @icon__angle-right;
+                color: @main__font-color;
+                vertical-align: middle;
+                font-size: 12px;
+                margin-left: 0.25rem;
+              }
+            }
           }
         }
 
@@ -78,6 +150,7 @@
           border-left: 1px solid @secondary__background-color;
           display: flex;
           position: relative;
+          align-items: center;
 
           .sender {
             .input(@border-radius: 0, @width: 100%, @padding: 0, @color: @main__font-color);
@@ -107,20 +180,21 @@
 
             position: absolute;
             right: 0;
-            border: 10px solid @main__button-background-color;
+            border: 20px solid @main__button-background-color;
             border-radius: 100%;
 
             &:before {
               font-family: @icon-font;
               content: '\e901';
               color: @main__icon-color;
-              font-size: 20px;
+              font-size: 30px;
               position: absolute;
               transform: translate(-50%, -50%);
             }
 
             &:hover {
               .custom-button-hover();
+              border-color: @main__button-background-hover;
             }
           }
         }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<button class="button {{ class }}" type="{{ type }}" id="{{ id }}" page="{{page}}">{{ label }}</button>
		<button class="button {{ class }}" type="{{ type }}" id="{{ id }}" page="{{page}}" >{{ label }}</button>