) {
+ return HTTPTransport.put(`${this.userURL}/profile`, {
+ body: data,
+ })
+ }
+
+ editAvatar(data: FormData) {
+ return HTTPTransport.put(`${this.userURL}/profile/avatar`, {
+ body: data,
+ })
+ }
+
+ editPassword(data: EditPasswordData) {
+ return HTTPTransport.put(`${this.userURL}/password`, {
+ body: data,
+ })
+ }
+
+ searchUser(login: string) {
+ return HTTPTransport.post(`${this.userURL}/search`, {
+ body: { login },
+ })
+ }
+}
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 000000000..c1c5e02ae
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,3 @@
+@import url('https://meyerweb.com/eric/tools/css/reset/reset.css');
+@import url('styles/variables.css');
+@import url('styles/base.css');
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 000000000..cc36b9e85
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,85 @@
+* {
+ font-family: var(--font-family);
+ color: var(--color-text);
+}
+
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+}
+
+main {
+ height: 100%;
+}
+
+h1 {
+ padding-bottom: 20px;
+ font-size: 40px;
+ font-weight: 500;
+}
+
+h2 {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+h4 {
+ font-size: 20px;
+ font-weight: 400;
+}
+
+#app {
+ height: 100%;
+}
+
+.dialog {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+.dialog-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-width: 320px;
+ padding: 50px 30px 30px;
+ box-shadow: var(--box-shadow);
+ border-radius: var(--border-radius);
+}
+
+.dialog-form {
+ width: 100%;
+ padding-bottom: 16px;
+}
+
+.modal-content {
+ .users {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .user {
+ display: flex;
+ align-items: center;
+
+ &__login {
+ flex-grow: 1;
+ }
+
+ &__delete-btn {
+ margin: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ font-size: 20px;
+ line-height: 1;
+ }
+ }
+ }
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 000000000..13c952476
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+:root {
+ --color1: #efefef;
+ --color2: #e4edfd;
+ --color-gray: #999;
+ --color-blue: #3369f3;
+ --color-red: #ff2f2f;
+ --color-white: #fff;
+ --color-text: #1e1e1e;
+ --sidebar-bg: #fbfbfb;
+ --message-bg: #f8f8f8;
+ --blue-bg: #e4edfd;
+ --hover-bg: #ccc8;
+ --border: #eaeaea;
+ --box-shadow: 0 0 3px 3px var(--hover-bg);
+ --border-radius: 8px;
+ --font-family: 'Inter', sans-serif;
+}
diff --git a/src/utils/connect.ts b/src/utils/connect.ts
new file mode 100644
index 000000000..3cbdafb1b
--- /dev/null
+++ b/src/utils/connect.ts
@@ -0,0 +1,27 @@
+import Block, { PropsAndChildren } from '@/core/Block.ts'
+import store, { StateType, StoreEvents } from '@/core/Store.ts'
+import { isEqual } from '@/utils/index.ts'
+
+export default function connect(
+ mapStateToProps: (state: StateType) => P
+) {
+ return function (Component: T): T {
+ // @ts-expect-error mixin
+ return class extends Component {
+ constructor(args: PropsAndChildren) {
+ let state = mapStateToProps(store.getState())
+ super(args)
+
+ store.on(StoreEvents.UPDATED, () => {
+ const newState = mapStateToProps(store.getState())
+
+ if (!isEqual(state, newState)) {
+ this.setProps({ ...newState })
+ }
+
+ state = newState
+ })
+ }
+ }
+ }
+}
diff --git a/src/utils/connectToMessageSocket.ts b/src/utils/connectToMessageSocket.ts
new file mode 100644
index 000000000..c471688ab
--- /dev/null
+++ b/src/utils/connectToMessageSocket.ts
@@ -0,0 +1,66 @@
+import { MessageItemProps } from '@/components/message/message.ts'
+import { ChatController } from '@/controllers/ChatController.ts'
+import store from '@/core/Store.ts'
+
+const chatController = new ChatController()
+
+export default async (userId: number, chatId: number) => {
+ let token = ''
+
+ await chatController.getToken(chatId).then((resp) => {
+ token = resp.token
+ })
+
+ const socket = new WebSocket(
+ `wss://ya-praktikum.tech/ws/chats/${userId}/${chatId}/${token}`
+ )
+
+ socket.addEventListener('open', () => {
+ console.log(`Соединение установлено c чатом ${chatId}`)
+
+ if (socket) {
+ socket.send(
+ JSON.stringify({
+ content: '0',
+ type: 'get old',
+ })
+ )
+ }
+ })
+
+ const ping = setInterval(() => {
+ socket?.send(JSON.stringify({ type: 'ping' }))
+ }, 10000)
+
+ socket.addEventListener('message', (event) => {
+ try {
+ const data: MessageItemProps = JSON.parse(event.data)
+
+ if (Array.isArray(data)) {
+ store.set('messages', data)
+ }
+ if (data.type === 'message') {
+ const messages = store.getState().messages
+
+ data.time = new Date().toISOString()
+
+ store.set('messages', [data, ...messages])
+ } else if (data.type === 'user connected') {
+ const messages = store.getState().messages
+
+ data.time = new Date().toISOString()
+ data.content = `Юзер с id: ${data.content} присоединился к чату`
+
+ store.set('messages', [data, ...messages])
+ }
+ } catch (error) {
+ throw new Error('Невалидные данные сообщений')
+ }
+ })
+
+ socket.addEventListener('close', () => {
+ clearInterval(ping)
+ })
+
+ return socket
+}
diff --git a/src/utils/formatMessageDate.ts b/src/utils/formatMessageDate.ts
new file mode 100644
index 000000000..5e0a34ab3
--- /dev/null
+++ b/src/utils/formatMessageDate.ts
@@ -0,0 +1,26 @@
+export default (date: string) => {
+ const millisecondsInHour = 3600000
+ const now = Math.floor(new Date().getTime() / millisecondsInHour)
+ const messageDate = Math.floor(new Date(date).getTime() / millisecondsInHour)
+ const offset = now - messageDate
+
+ let options: Intl.DateTimeFormatOptions
+
+ if (offset < 24) {
+ options = {
+ hour: 'numeric',
+ minute: 'numeric',
+ }
+ } else if (offset < 168) {
+ options = {
+ weekday: 'short',
+ }
+ } else {
+ options = {
+ month: 'short',
+ day: 'numeric',
+ }
+ }
+
+ return new Intl.DateTimeFormat('ru-RU', options).format(new Date(date))
+}
diff --git a/src/utils/getResourceURL.ts b/src/utils/getResourceURL.ts
new file mode 100644
index 000000000..e66686ba8
--- /dev/null
+++ b/src/utils/getResourceURL.ts
@@ -0,0 +1,4 @@
+export default (resourceURL: string) => {
+ const url = resourceURL.replaceAll('/', '%2F')
+ return `https://ya-praktikum.tech/api/v2/resources/${url}`
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 000000000..971ad8660
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export { default as renderDOM } from './renderDOM'
+export { default as isEqual } from './isEqual'
diff --git a/src/utils/isEqual.ts b/src/utils/isEqual.ts
new file mode 100644
index 000000000..74f7fb3ee
--- /dev/null
+++ b/src/utils/isEqual.ts
@@ -0,0 +1,35 @@
+export default function isEqual(obj1: object, obj2: object): boolean {
+ if (obj1 === obj2) {
+ return true
+ }
+
+ if (obj1 === null || obj2 === null) {
+ return obj1 === obj2
+ }
+
+ const keys1 = Object.keys(obj1)
+ const keys2 = Object.keys(obj2)
+
+ if (keys1.length !== keys2.length) {
+ return false
+ }
+
+ for (const key of keys1) {
+ if (!keys2.includes(key)) {
+ return false
+ }
+
+ const value1 = obj1[key as keyof typeof obj1]
+ const value2 = obj2[key as keyof typeof obj2]
+
+ if (typeof value1 === 'object' && typeof value2 === 'object') {
+ if (!isEqual(value1, value2)) {
+ return false
+ }
+ } else if (value1 !== value2) {
+ return false
+ }
+ }
+
+ return true
+}
diff --git a/src/utils/renderDOM.ts b/src/utils/renderDOM.ts
new file mode 100644
index 000000000..0f16697a6
--- /dev/null
+++ b/src/utils/renderDOM.ts
@@ -0,0 +1,13 @@
+import Block from '../core/Block'
+
+export default function render(query: string, block: Block) {
+ const root = document.querySelector(query)
+
+ if (!root) {
+ throw new Error('Нет рут элемента')
+ }
+
+ root.innerHTML = ''
+
+ root.appendChild(block.element)
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..9452e9bbf
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ },
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ESNext", "DOM", "es6"],
+ "moduleResolution": "Node",
+ "strict": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "noEmit": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitAny": true,
+ "noImplicitReturns": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strictNullChecks": true,
+ "allowImportingTsExtensions": true
+ },
+ "include": ["src", "types/pug.d.ts"],
+ "exclude": ["node_modules", "build", "static"]
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 000000000..6de0d954f
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,22 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import eslint from 'vite-plugin-eslint'
+import stylelint from 'vite-plugin-stylelint'
+
+export default defineConfig({
+ root: './src',
+ build: {
+ outDir: '../dist',
+ },
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src'),
+ },
+ },
+ server: {
+ host: true,
+ port: 3000,
+ open: true,
+ },
+ plugins: [eslint(), stylelint()],
+})