Sprint 3

package.json

@@ -7,7 +7,7 @@
     "build": "eslint . &&tsc && vite build",
     "preview": "vite preview",
     "start": "tsc && vite build &&  node ./server.js",
-    "stylelint": "stylelint src/**/*.pcss",
+    "stylelint": "stylelint src/**/*.pcss ",
     "eslint": "eslint . "
   },
   "devDependencies": {

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

server.js

@@ -1,6 +1,7 @@
 // server.js
 const express = require('express');
-const PORT = 3000;
+const path = require('path');
+const PORT = process.env.PORT || 3000;
 
 const app = express();
 
@@ -11,4 +12,5 @@ app.listen(PORT, function () {
     console.log(`⚡️[server]: Server is running at http://localhost:${PORT} ${__dirname}`);
 });
 
-
+app.use('/', express.static(path.join(__dirname, 'dist')));
+app.use('*', express.static(path.join(__dirname, 'dist/index.html')));

src/api/auth.ts

@@ -0,0 +1,27 @@
+import HTTPTransport from "../core/http.ts";
+import {IAuthData, IUser} from "../models/IUser.ts";
+
+export class AuthApi {
+    private httpTransport = new HTTPTransport();
+    private readonly baseUrl: string | null = null;
+
+    constructor(baseUrl?: string) {
+        if (baseUrl) this.baseUrl = baseUrl;
+    }
+
+    public signUp(userData: IUser) {
+      return this.httpTransport.post(this.baseUrl + '/signup', {data: userData});
+    }
+
+    public  signIn(userData: IAuthData) {
+        return  this.httpTransport.post(this.baseUrl + '/signin', {data: userData});
+    }
+    public getAuthUser() {
+        return  this.httpTransport.get(this.baseUrl + '/user');
+    }
+    public logOut() {
+        return  this.httpTransport.post(this.baseUrl + '/logout');
+    }
+}
+
+export default AuthApi

src/api/chat.ts

@@ -0,0 +1,42 @@
+import HTTPTransport from "../core/http.ts";
+import {IChatUsersData} from "../models/IChat.ts";
+
+export class ChatApi {
+    private httpTransport = new HTTPTransport();
+    private readonly baseUrl: string = '/chats';
+
+    constructor(baseUrl?: string) {
+        if (baseUrl) this.baseUrl = baseUrl;
+    }
+
+    public getChats() {
+        return this.httpTransport.get(this.baseUrl);
+    }
+
+    public createChat(title: string) {
+        return this.httpTransport.post(this.baseUrl, {data: {title: title}});
+    }
+
+    public addChatUsers(userData: IChatUsersData) {
+        return this.httpTransport.put(this.baseUrl + '/users', {data: userData});
+    }
+
+    public deleteChatUsers(userData: IChatUsersData) {
+        return this.httpTransport.delete(this.baseUrl + '/users', {data: userData});
+    }
+
+    public getChatUsers(id: string) {
+        return this.httpTransport.get(this.baseUrl + `/${id}/users`);
+    }
+
+    public getChatToken(id: string) {
+        return this.httpTransport.post(this.baseUrl + `/token/${id}`);
+    }
+
+    public updateChatAvatar(file: FormData, chatId: number) {
+        file.append('chatId', String(chatId));
+        return this.httpTransport.put(this.baseUrl + '/avatar', {data: file});
+    }
+}
+
+export default ChatApi

src/api/resources.ts

@@ -0,0 +1,16 @@
+import HTTPTransport from "../core/http.ts";
+
+export class ResourcesApi {
+    private httpTransport = new HTTPTransport();
+    private readonly baseUrl: string = '/resources';
+
+    constructor(baseUrl?: string) {
+        if (baseUrl) this.baseUrl = baseUrl;
+    }
+
+   public uploadResource(file: FormData) {
+        return this.httpTransport.post(this.baseUrl, {data: file});
+    }
+}
+
+export default ResourcesApi

src/api/socket.ts

@@ -0,0 +1,79 @@
+//'wss://ya-praktikum.tech/ws/chats/<USER_ID>/<CHAT_ID>/<TOKEN_VALUE>'
+class SocketIO {
+    private STATES = ['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'];
+    private readonly socket: WebSocket | null = null;
+
+    constructor(url: string, user_id?: string, chat_id?: string, token?: string) {
+        let _url = url;
+        if (user_id) _url = _url + '/' + user_id;
+        if (chat_id) _url = _url + '/' + chat_id;
+        if (token) _url = _url + '/' + token;
+        this.socket = this.init(_url)
+    }
+
+    private init = (url: string) => {
+        return new WebSocket(url);
+    }
+
+    public getState = () => {
+        if (!this.socket) return this.STATES[3];
+        return this.STATES[this.socket.readyState];
+    }
+    public open = (callBack: () => void) => {
+        this.socket?.addEventListener('open', callBack);
+    }
+
+    public close = (callBack: (event: CloseEvent) => void) => {
+        const funk = (event: CloseEvent) => {
+            callBack(event);
+
+        }
+        this.socket?.addEventListener('close', funk);
+    }
+
+    public message = (callBack: (event: MessageEvent) => void) => {
+        const funk = (event: MessageEvent) => {
+            callBack(event);
+        }
+        this.socket?.addEventListener('message', funk);
+    }
+
+    public error(callBack: (event: Event) => void) {
+        this.socket?.addEventListener('error', callBack);
+    }
+
+    public sendMessage = (message: string) => {
+        const _message = JSON.stringify(
+            {
+                content: message,
+                type: "message"
+            })
+        this.socket?.send(_message);
+    }
+    public sendFile = (idResource: string) => {
+        const _message = JSON.stringify(
+            {
+                content: idResource,
+                type: "file"
+            })
+        this.socket?.send(_message);
+    }
+    public sendRequestForgetMessage = (limit: number = 0) => {
+        const _message = JSON.stringify(
+            {
+                content: String(limit),
+                type: "get old"
+            })
+        this.socket?.send(_message);
+    }
+
+    public ping = () => {
+        this.socket?.send(JSON.stringify({
+            type: "ping"
+        }));
+    }
+
+
+}
+
+export default SocketIO;

src/api/user-settings.ts

@@ -0,0 +1,29 @@
+import HTTPTransport from "../core/http.ts";
+import {IPasswords, IUser} from "../models/IUser.ts";
+
+export class UserSettingsApi {
+    private httpTransport = new HTTPTransport();
+    private readonly baseUrl: string | null = null;
+
+    constructor(baseUrl?: string) {
+        if (baseUrl) this.baseUrl = baseUrl;
+    }
+
+    public changeUserProfile(userData: IUser) {
+        return this.httpTransport.put(this.baseUrl + '/profile', {data: userData});
+    }
+
+    public changeUserAvatar(file: FormData) {
+        return this.httpTransport.put(this.baseUrl + '/profile/avatar', {data: file});
+    }
+
+    public changeUserPassword(data: IPasswords) {
+        return this.httpTransport.put(this.baseUrl + '/password', {data: data});
+    }
+
+    public searchUser(login: string) {
+        return this.httpTransport.post(this.baseUrl + '/search', {data:{login: login}});
+    }
+}
+
+export default UserSettingsApi

src/components/alert/alert.pcss

@@ -0,0 +1,27 @@
+.alert {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    min-height: 100px;
+    z-index:1000;
+
+    .alert__message {
+        text-align: center;
+        font-size: 1.2em;
+    }
+
+    .alert__close {
+        position: absolute;
+        right: 0;
+        top:0;
+    }
+}
+
+.dialog-alert {
+    border: none;
+    width: 340px;
+    inset: 0;
+    position: fixed;
+    margin: auto;
+}

src/components/alert/alert.ts

@@ -0,0 +1,36 @@
+import {IProps, Block} from "../../core/block.ts";
+import alertController from "../../core/alert-controller.ts";
+
+interface IModalProps extends IProps {
+    message: string,
+    okClick?: (event: Event) => void,
+}
+
+export class Alert extends Block {
+    constructor(props: IModalProps) {
+       props.okClick=()=>{
+           alertController.closeModal();
+       }
+
+        super({
+            ...props
+        })
+    }
+
+    public get props() {
+        return this._props as IModalProps;
+    }
+
+    protected render(): string {
+        const {message = ''} = this.props;
+        return (`
+                <div class="alert">
+                    <p class="alert__message">
+                        ${message}
+                    </p>                   
+                    <div class="alert__close">
+                     {{{ Button onClick=okClick type='close'}}}</div>
+                </div>
+        `)
+    }
+}

src/components/alert/index.ts

@@ -0,0 +1,2 @@
+import './alert.pcss';
+export { Alert as default  } from './alert.ts';

src/components/avatar/avatar.pcss

@@ -1,7 +1,6 @@
 .avatar {
     border-radius: 100px;
     border: 1px var(--red) solid;
-    cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -31,6 +30,7 @@
     }
 
     .avatar__hover {
+        cursor: pointer;
         transition: .5s ease;
         opacity: 0;
         position: absolute;