Sprint 3

README.md

@@ -10,6 +10,9 @@
 - Typescript 5.5.3
 - Реализован компонентный подход
 - Eslint & Stylelint
+- Поключён WebSocket
+- Внедрен роутинг
+- Добавлен HTTP API для чатов
 
 ---
 

package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1",

src/api/AuthApi.ts

@@ -0,0 +1,33 @@
+import HTTPTransport, { TOptionsData } from "../core/HTTPTransport";
+
+const auth = new HTTPTransport('/auth');
+
+class AuthApi {
+    public createUser(data: TOptionsData): Promise<any> {
+        return auth.post('/signup', {
+            data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public login(data: TOptionsData): Promise<any> {
+        return auth.post('/signin', {
+            data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public getUser(): Promise<any> {
+        return auth.get('/user');
+    }
+
+    public logout(): Promise<any> {
+        return auth.post('/logout');
+    }
+}
+
+export default new AuthApi();

src/api/ChatApi.ts

@@ -0,0 +1,65 @@
+import HTTPTransport from '../core/HTTPTransport';
+import { Chat, User } from '../utils/types';
+
+const chats = new HTTPTransport('/chats');
+
+class ChatAPI {
+    public async getChats(): Promise<Chat[]> {
+        return chats.get('/');
+    }
+
+    public async createChat(title: string): Promise<Chat> {
+        return chats.post('/', {data: { title }});
+    }
+
+    public async getUserToken(chatId: number): Promise<{ token: string }> {
+        const response = await chats.post(`/token/${chatId}`);
+        if (response instanceof XMLHttpRequest) {
+            return response.response;
+        }
+
+        return response;
+    }
+
+    public async getChatUsers(chatId: number | undefined): Promise<User[]> {
+        return chats.get(`/${chatId}/users`);
+    }
+
+    public async addUsers(data: any): Promise<Chat> {
+        return chats.put('/users', {
+            data: data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        });
+    }
+
+    public async removeUsers(data: any): Promise<void> {
+        return chats.delete('/users', {
+            data: data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public async deleteChat(chatId: any): Promise<void> {
+        return chats.delete('/', {
+            data: chatId,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public async uploadAvatar(data: any): Promise<unknown> {
+        return chats.put('/avatar', {
+            data: data,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+    }
+}
+
+export default new ChatAPI();

src/api/UserApi.ts

@@ -0,0 +1,38 @@
+import HTTPTransport, {TOptionsData} from "../core/HTTPTransport";
+
+const user = new HTTPTransport('/user');
+
+class UserApi {
+    public changeData(data: TOptionsData): Promise<unknown> {
+        return user.put('/profile', {
+            data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public changePassword(data: TOptionsData): Promise<unknown> {
+        return user.put('/password', {
+            data,
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+
+    public changeAvatar(data: FormData): Promise<unknown> {
+        return user.put('/profile/avatar', { data });
+    }
+
+    public searchUsers(login: string): Promise<any> {
+        return user.post('/search', {
+            data: { login },
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            }
+        });
+    }
+}
+
+export default new UserApi();

src/components/add-user-modal/user-modal.hbs

@@ -0,0 +1,16 @@
+{{#if isAddUserOpen }}
+    <form class="user-modal" method="dialog">
+    <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}}
+        {{#if usersList }}
+            {{#each currentChatUsers }}
+                <ul>
+                    <li class="user-item" data-user-id="{{id}}">{{login}}</li>
+                </ul>
+            {{/each}}
+        {{/if}}
+        {{{ Button class="cancel" type="button" label="Cancel" onClick=onClose }}}
+    </form>
+{{/if}}

src/components/add-user-modal/user-modal.less

@@ -0,0 +1,69 @@
+@import '../../utils.less';
+
+.user-modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 14px;
+  z-index: 1000;
+  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;
+      background: @secondary__background-color;
+      position: relative;
+      list-style: none;
+      width: auto;
+      max-height: 15rem;
+      overflow-y: scroll;
+      border-radius: 5px;
+      margin-top: 0;
+      padding-inline-start: 15px;
+      padding-inline-end: 15px;
+      padding-bottom: 0.75rem;
+
+      .user-item {
+        display: flex;
+        flex-direction: column;
+        border-bottom: 1px solid @main__background-color;
+        padding: 5px;
+      }
+    }
+  }
+
+  .cancel {
+    .button(
+      @margin: 3rem 0 0 0,
+      @width: auto,
+      @background: none,
+      @border: none,
+      @color: @secondary__button-background-color
+    );
+
+    &:hover {
+      .custom-button-hover(@color: @main__button-background-hover);
+    }
+  }
+}