From 25b22786c171567827b1751ecd8cc26048ada7d5 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Mon, 2 Oct 2023 20:49:15 +0400 Subject: [PATCH 01/43] added utils --- src/utils/Http.ts | 14 ++--- src/utils/object.utils.ts | 106 ++++++++++++++++++++++++++++++++++++-- src/utils/string.utils.ts | 65 +++++++++++++++++++++++ 3 files changed, 171 insertions(+), 14 deletions(-) create mode 100644 src/utils/string.utils.ts diff --git a/src/utils/Http.ts b/src/utils/Http.ts index bbfddeaa3..59a9fa20e 100644 --- a/src/utils/Http.ts +++ b/src/utils/Http.ts @@ -1,3 +1,5 @@ +import {queryStringify} from "./string.utils.ts"; + enum METHODS { GET = 'GET', POST = 'POST', @@ -15,17 +17,7 @@ type IOptionsRequest = { type HTTPMethod = (url: string, options?: IOptionsRequest) => Promise -/** - * Get string of query params from object params - * @param data - */ -function queryStringify(data: object) { - let result = '?'; - result = result + Object.entries(data).map(([key, value]) => { - return `${key}=${Array.isArray(value) ? value.join(',') : String(value)}` - }).join("&") - return result; -} + class HTTPTransport { get: HTTPMethod = (url, options = {}) => { diff --git a/src/utils/object.utils.ts b/src/utils/object.utils.ts index 85aee1765..0c5521eb7 100644 --- a/src/utils/object.utils.ts +++ b/src/utils/object.utils.ts @@ -1,4 +1,7 @@ -export const isDeepEqual=(object1:{[index: string]:T}, object2:{[index: string]:T}) => { +export type Indexed = { + [key in string]: T; +}; +export const isDeepEqual = (object1: { [index: string]: T }, object2: { [index: string]: T }) => { const objKeys1 = Object.keys(object1); const objKeys2 = Object.keys(object2); @@ -11,7 +14,7 @@ export const isDeepEqual=(object1:{[index: string]:T}, object2 const isObjects = isObject(value1) && isObject(value2); - if ((isObjects && !isDeepEqual(value1 as { [index: string]: T } , value2 as { [index: string]: T })) || + if ((isObjects && !isDeepEqual(value1 as { [index: string]: T }, value2 as { [index: string]: T })) || (!isObjects && value1 !== value2) ) { return false; @@ -20,6 +23,103 @@ export const isDeepEqual=(object1:{[index: string]:T}, object2 return true; }; -const isObject = (object:object) => { +export function cloneDeep(obj: any): any { + if (!isObject(obj)) { + return obj; + } + + const clonedObj = Array.isArray(obj) ? [] : {}; + + for (let key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + // @ts-ignore + clonedObj[key] = cloneDeep(obj[key]); + } + } + + return clonedObj; +} + +export const isObject = (object: object | unknown) => { return object != null && typeof object === "object"; }; + +/** + * Напишите функцию, которая объединит два объекта с сохранением их уникальных ключей. Порядок ключей важен. + * merge({a: {b: {a: 2}}, d: 5}, {a: {b: {c: 1}}}); + * /* + * { + * a: { + * b: { + * a: 2, + * c: 1, + * } + * }, + * d: 5, + * } + * + */ + +export const merge = (lhs: Indexed, rhs: Indexed): Indexed => { + let result = lhs; + const objKeys1 = Object.keys(lhs); + const objKeys2 = Object.keys(rhs); + for (const key of objKeys1) { + if (objKeys2.indexOf(key) === -1) result[key] = lhs[key]; + else { + if (typeof lhs[key] === 'object' && typeof rhs[key] === 'object') { + // @ts-ignore + result[key] = merge(lhs[key], rhs[key]); + } else { + result[key] = lhs[key]; + } + } + } + + for (const key of objKeys2) { + if (objKeys1.indexOf(key) === -1) result[key] = rhs[key]; + } + return result; + /* + for (let p in rhs) { + if (!rhs.hasOwnProperty(p)) { + continue; + } + + try { + if (rhs[p].constructor === Object) { + rhs[p] = merge(lhs[p] as Indexed, rhs[p] as Indexed); + } else { + lhs[p] = rhs[p]; + } + } catch(e) { + lhs[p] = rhs[p]; + } + } + + return lhs; + */ + +} + +/** + * set, которая получает путь к вложенному свойству объекта и устанавливает значение в это свойство. + * Если поля не существует, его нужно создать по указанному пути. + * Проверьте, что path — строка, иначе нужно выбросить ошибку 'path must be string' + * @param object + * @param path + * @param value + */ +export function set(object: Indexed | unknown, path: string, value: unknown): Indexed | unknown { + + if (!isObject(object)) return object; + if (typeof path !== 'string') throw Error('path must be string'); + let _object = createObjectFromString(path, value) + return merge(object as Indexed, _object) +} + +function createObjectFromString(string: string, value: any) { + return string.split('.').reduceRight((acc, key) => ({ + [key]: acc, + }), value as any); +} diff --git a/src/utils/string.utils.ts b/src/utils/string.utils.ts new file mode 100644 index 000000000..3538bdae0 --- /dev/null +++ b/src/utils/string.utils.ts @@ -0,0 +1,65 @@ +import {isObject} from "./object.utils.ts"; + + +export type StringIndexed = Record; + +/** + * Напишите функцию, которая умеет удалять из начала и конца строки пробельные или отдельно заданные пользовательские символы. Удаление пробелов из начала и конца строк — поведение по умолчанию. Пробел необязательно должен быть передан в качестве аргумента. + * @param str -строка для анализа + * @param deleted -удаляемые символы + */ +export const trim = (str: string, deleted?: string): string => { + if (str && !deleted) return str.trim(); + const chars = deleted?.split("").map(item => "\\" + item).join(''); + const regexp = new RegExp(`[${chars}]`, 'g'); + const array = str.split(''); + let startWord = 0; + for (let i = 0; i < array.length; i++) { + if (!array[i].match(regexp)) { + startWord = i; + break; + } + } + let endWord = 0; + for (let i = array.length - 1; i > startWord; i--) { + if (!array[i].match(regexp)) { + endWord = i + 1; + break; + } + } + + return str.substring(startWord, endWord); +} + +/** + * Get string of query params from object params + * @param data + */ +export function queryStringify(data: StringIndexed) { + if(!isObject(data)){ + throw Error('Input must be an object') + } + let result:string[] = []; + Object.entries(data).map(([key, value]) => { + valueToString(key,value,result) + }) + return '?'+result.join("&"); +} + +export const objToString=(keyItog:string,value:object,resultArray:string[])=>{ + Object.entries(value).map(([key, value]) => { + valueToString(`${keyItog}[${key}]`,value,resultArray) + }) +} + +export const arrayToString=(key:string,value:Array,resultArray:string[])=>{ + value.map((item,index)=>{ + valueToString(`${key}[${String(index)}]`,item,resultArray) + }) +} + +export const valueToString=(key:string,value:unknown,result:string[])=>{ + if(Array.isArray(value))return arrayToString(key,value,result); + if(isObject(value))return objToString(key,value as Object,result); + result.push (`${key}=${String(value)}`); +} From c587c0a1a65e4c63e583f4863d1d5621e699c1ed Mon Sep 17 00:00:00 2001 From: ellevanova Date: Wed, 4 Oct 2023 18:48:56 +0400 Subject: [PATCH 02/43] added router --- src/utils/Block.ts | 7 ++++ src/utils/Route.ts | 55 +++++++++++++++++++++++++++ src/utils/Router.ts | 90 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 src/utils/Route.ts create mode 100644 src/utils/Router.ts diff --git a/src/utils/Block.ts b/src/utils/Block.ts index 29fef2cff..379ef3100 100644 --- a/src/utils/Block.ts +++ b/src/utils/Block.ts @@ -203,6 +203,13 @@ export class Block { }); } + public hide(){ + console.log('hide') + } + public show(){ + console.log('show') + } + } diff --git a/src/utils/Route.ts b/src/utils/Route.ts new file mode 100644 index 000000000..6901878b7 --- /dev/null +++ b/src/utils/Route.ts @@ -0,0 +1,55 @@ +import Block, {IProps} from "./Block.ts"; + +class Route { + private _pathname: string; + private _blockClass: Block; + private _block:Block|null=null; + private _props: IProps; + + constructor(pathname:string, view:Block, props:IProps) { + this._pathname = pathname; + this._blockClass = view; + this._block = null; + this._props = props; + } + + /** + * navigate — метод для отображения вьюшки, если переданный URL совпадает с URL текущего Route; + * @param pathname + */ + navigate(pathname:string) { + if (this.match(pathname)) { + this._pathname = pathname; + this.render(); + } + } + + /** + * leave — вызывает hide у элемента; + */ + leave() { + if (this._block) { + this._block.hide(); + } + } + + match(pathname:string) { + return pathname===this._pathname; + } + +/** + * render — создаёт блок, если тот ещё не был создан (нужно создавать блок только после первого + * перехода на страницу), иначе вызывает у блока метод show. + * */ + render() { + if (!this._block) { + console.log(this._props,this._blockClass); + //this._block = new this._blockClass(this._props); + //render(this._props.rootQuery, this._block); + return; + } + + this._block.show(); + } +} +export default Route diff --git a/src/utils/Router.ts b/src/utils/Router.ts new file mode 100644 index 000000000..09e03b934 --- /dev/null +++ b/src/utils/Router.ts @@ -0,0 +1,90 @@ +import Block, {IProps} from "./Block.ts"; +import Route from "./Route.ts"; + +class Router { + private static __instance: any; + private routes: any[] | undefined; + private history: History | undefined; + private _currentRoute: null | undefined; + private _rootQuery: IProps | undefined; + constructor(rootQuery:IProps) { + if (Router.__instance) { + return Router.__instance; + } + + this.routes = []; + this.history = window.history; + this._currentRoute = null; + this._rootQuery = rootQuery; + + Router.__instance = this; + } + + /** + * use — регистрирует блок по пути в роут и возвращает себя — чтобы можно было выстроить в цепочку; + * @param pathname + * @param block + */ + use(pathname:string, block:Block) { + const route = new Route(pathname, block, {rootQuery: this._rootQuery}); + this.routes?.push(route); + return this; + } + + /** + * start — по событию onpopstate запускает приложение. + */ + start() { + // Реагируем на изменения в адресной строке и вызываем перерисовку + window.onpopstate = event => { + // @ts-ignore + this._onRoute(event?.currentTarget?.location?.pathname); + }; + + this._onRoute(window.location.pathname); + } + + _onRoute(pathname:string) { + const route = this.getRoute(pathname); + if (!route) { + return; + } + + if (this._currentRoute && this._currentRoute !== route) { + // @ts-ignore + this._currentRoute.leave(); + } + + this._currentRoute = route; + route.render(route, pathname); + } + + /** + * go — переходит на нужный роут и отображает нужный блок; + * @param pathname + */ + go(pathname:string) { + this.history?.pushState({}, "", pathname); + this._onRoute(pathname); + } + + /** + * back — возвращает в прошлое состояние и показывает блок, соответствующий тому состоянию; + */ + back() { + this.history?.back(); + + } + + /** + * forward — переходит в следующие состояние и показывает соответствующий блок; + */ + forward() { + this.history?.forward(); + + } + + getRoute(pathname:string) { + return this.routes?.find(route => route.match(pathname)); + } +} From eeffb5823c43e9db87037c7e9eb76776b11d643e Mon Sep 17 00:00:00 2001 From: ellevanova Date: Wed, 4 Oct 2023 20:15:49 +0400 Subject: [PATCH 03/43] added routing --- src/components/chat-list/chat-list.ts | 2 +- src/components/form-profile/form-profile.ts | 6 +-- src/index.html | 1 - src/main.ts | 55 +++++++-------------- src/pages/login/login.ts | 3 ++ src/utils/Block.ts | 6 ++- src/utils/Route.ts | 12 ++--- src/utils/Router.ts | 19 ++++--- 8 files changed, 48 insertions(+), 56 deletions(-) diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index dce9d767f..697d91d61 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -27,7 +27,7 @@ export class ChatList extends Block { return (`
{{{ InputSearch }}} diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index cef0cea9b..e72c4ce67 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -42,9 +42,9 @@ export class FormProfile extends Block { {{{ Button caption="${buttonText}" onClick=onClickOkButton }}}
`: `
- {{{Link caption="Change IUser Data" page="pageProfileEdit" type='success' linkLine=true }}} - {{{Link caption="Change Password" page="pagePasswordEdit" type='success' linkLine=true }}} - {{{Link caption="Cancel" page=button-page type='danger' }}} + {{{Link caption="Change IUser Data" href='/profile-edit' type='success' linkLine=true }}} + {{{Link caption="Change Password" href='/password-edit' type='success' linkLine=true }}} + {{{Link caption="Cancel" href='/chat' type='danger' }}}
`}
diff --git a/src/index.html b/src/index.html index ed81248b3..bc931504c 100644 --- a/src/index.html +++ b/src/index.html @@ -11,4 +11,3 @@
- diff --git a/src/main.ts b/src/main.ts index b341476d2..a8c547fa1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,9 @@ import './styles/main.pcss'; import * as Components from './components'; import * as Pages from './pages'; import {registerComponent} from "./utils/registerComponents"; -import {Block} from "./utils/Block.ts"; +import Router from "./utils/Router.ts"; +import Block from "./utils/Block.ts"; + const allComponents = { @@ -24,43 +26,22 @@ const allComponents = { 'FormAuth': Components.FormAuth, 'FormProfile': Components.FormProfile, } -const pages:{[index: string]:{component:unknown}} = { - "allComponents": { - component: Pages.AllComponentsPage - }, - "allPages": {component: Pages.AllPages}, - "loginPage": {component: Pages.LoginPage}, - "pageRegistration": {component: Pages.PageRegistration}, - "pageProfile": {component: Pages.PageProfile}, - "pageProfileEdit": {component: Pages.PageProfileEdit}, - "pagePasswordEdit": {component: Pages.PagePasswordEdit}, - "page500": {component: Pages.Page500}, - "page404": {component: Pages.Page500}, - "pageChat": {component: Pages.PageChat}, -}; - Object.entries(allComponents).forEach(([name, component]) => { registerComponent(name, component); }); -const navigate = (page: string) => { - const app = document.getElementById('app'); - const Component = pages[page].component as unknown as typeof Block; - //const props = pages[page].props || {}; - const component = new Component({events:{}}); - const htmlElement = component.getContent(); - if (!app?.firstElementChild) app?.append(document.createElement('div')); - if(htmlElement) - app?.firstElementChild?.replaceWith(htmlElement); -} -document.addEventListener('DOMContentLoaded', () => navigate('allPages')); -document.addEventListener('click', (e: Event) => { - if (!e) return; - if(!e.target)return; - const page =( e.target).getAttribute('page'); - if (page) { - navigate(page); - e.preventDefault(); - e.stopImmediatePropagation(); - } -}); + +const router = new Router(".app"); + +// Можно обновиться на /user и получить сразу пользователя +router.use("/", Pages.PageChat as unknown as Block) + .use("/all", Pages.AllComponentsPage as unknown as Block) + .use("/login", Pages.LoginPage as unknown as Block) + .use("/registration", Pages.PageRegistration as unknown as Block) + .use("/profile", Pages.PageProfile as unknown as Block) + .use("/profile-edit", Pages.PageProfileEdit as unknown as Block) + .use("/password-edit", Pages.PagePasswordEdit as unknown as Block) + .use("/404", Pages.Page404 as unknown as Block) + .use("/500", Pages.Page500 as unknown as Block) + .use("/chat", Pages.PageChat as unknown as Block) + .start(); diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 3c5941caa..0818376bc 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,4 +1,6 @@ import {IProps,Block} from "../../utils/Block"; +import Router from "../../utils/Router.ts"; + export interface ILoginPageProps extends IProps { onLogin:(event:Event)=>void @@ -16,6 +18,7 @@ export class LoginPage extends Block { login, password }) + if(login&&password)Router.getRouter().go('/chat'); } } diff --git a/src/utils/Block.ts b/src/utils/Block.ts index 379ef3100..eb37a38f9 100644 --- a/src/utils/Block.ts +++ b/src/utils/Block.ts @@ -207,7 +207,11 @@ export class Block { console.log('hide') } public show(){ - console.log('show') + const app = document.getElementById('app'); + const htmlElement = this.getContent(); + if (!app?.firstElementChild) app?.append(document.createElement('div')); + if(htmlElement) + app?.firstElementChild?.replaceWith(htmlElement); } diff --git a/src/utils/Route.ts b/src/utils/Route.ts index 6901878b7..a3b6f0768 100644 --- a/src/utils/Route.ts +++ b/src/utils/Route.ts @@ -2,11 +2,11 @@ import Block, {IProps} from "./Block.ts"; class Route { private _pathname: string; - private _blockClass: Block; + private readonly _blockClass: Block; private _block:Block|null=null; - private _props: IProps; + private readonly _props: IProps; - constructor(pathname:string, view:Block, props:IProps) { + constructor(pathname:string, view:Block, props:object) { this._pathname = pathname; this._blockClass = view; this._block = null; @@ -43,9 +43,9 @@ class Route { * */ render() { if (!this._block) { - console.log(this._props,this._blockClass); - //this._block = new this._blockClass(this._props); - //render(this._props.rootQuery, this._block); + // @ts-ignore + this._block = new this._blockClass(this._props); + this.render(); return; } diff --git a/src/utils/Router.ts b/src/utils/Router.ts index 09e03b934..47b2d3bff 100644 --- a/src/utils/Router.ts +++ b/src/utils/Router.ts @@ -1,13 +1,13 @@ -import Block, {IProps} from "./Block.ts"; +import Block from "./Block.ts"; import Route from "./Route.ts"; class Router { - private static __instance: any; - private routes: any[] | undefined; + private static __instance: Router; + private routes: Route[] | undefined; private history: History | undefined; - private _currentRoute: null | undefined; - private _rootQuery: IProps | undefined; - constructor(rootQuery:IProps) { + private _currentRoute: null | Route=null; + private _rootQuery: string | undefined; + constructor(rootQuery:string) { if (Router.__instance) { return Router.__instance; } @@ -20,6 +20,9 @@ class Router { Router.__instance = this; } + public static getRouter(){ + return this.__instance; + } /** * use — регистрирует блок по пути в роут и возвращает себя — чтобы можно было выстроить в цепочку; * @param pathname @@ -56,7 +59,7 @@ class Router { } this._currentRoute = route; - route.render(route, pathname); + route.render(); } /** @@ -88,3 +91,5 @@ class Router { return this.routes?.find(route => route.match(pathname)); } } + +export default Router; From ed5486ce2bef3bd3277c697d6251d1e47f86e42b Mon Sep 17 00:00:00 2001 From: ellevanova Date: Wed, 4 Oct 2023 20:23:25 +0400 Subject: [PATCH 04/43] added routing --- src/components/chat-list/chat-list.ts | 2 +- src/components/form-profile/form-profile.ts | 4 ++-- src/main.ts | 10 +++++----- src/pages/chat-page/page-chat.ts | 1 - src/pages/login/login.ts | 2 +- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 697d91d61..23a34af67 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -27,7 +27,7 @@ export class ChatList extends Block { return (`
{{{ InputSearch }}} diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index e72c4ce67..89e3adbbf 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -42,9 +42,9 @@ export class FormProfile extends Block { {{{ Button caption="${buttonText}" onClick=onClickOkButton }}}
`: `
- {{{Link caption="Change IUser Data" href='/profile-edit' type='success' linkLine=true }}} + {{{Link caption="Change IUser Data" href='/settings-edit' type='success' linkLine=true }}} {{{Link caption="Change Password" href='/password-edit' type='success' linkLine=true }}} - {{{Link caption="Cancel" href='/chat' type='danger' }}} + {{{Link caption="Cancel" href='/messenger' type='danger' }}}
`}
diff --git a/src/main.ts b/src/main.ts index a8c547fa1..8ed8e8c3d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -34,14 +34,14 @@ Object.entries(allComponents).forEach(([name, component]) => { const router = new Router(".app"); // Можно обновиться на /user и получить сразу пользователя -router.use("/", Pages.PageChat as unknown as Block) +router.use("/", Pages.LoginPage as unknown as Block) .use("/all", Pages.AllComponentsPage as unknown as Block) .use("/login", Pages.LoginPage as unknown as Block) - .use("/registration", Pages.PageRegistration as unknown as Block) - .use("/profile", Pages.PageProfile as unknown as Block) - .use("/profile-edit", Pages.PageProfileEdit as unknown as Block) + .use("/sign-up", Pages.PageRegistration as unknown as Block) + .use("/settings", Pages.PageProfile as unknown as Block) + .use("/settings-edit", Pages.PageProfileEdit as unknown as Block) .use("/password-edit", Pages.PagePasswordEdit as unknown as Block) .use("/404", Pages.Page404 as unknown as Block) .use("/500", Pages.Page500 as unknown as Block) - .use("/chat", Pages.PageChat as unknown as Block) + .use("/messenger", Pages.PageChat as unknown as Block) .start(); diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 2fa57cdb2..880cb1ed3 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -19,7 +19,6 @@ export class PageChat extends Block { messageList:mockListMessages, events:{} } - super(props); } diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 0818376bc..545de57d2 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -18,7 +18,7 @@ export class LoginPage extends Block { login, password }) - if(login&&password)Router.getRouter().go('/chat'); + if(login&&password)Router.getRouter().go('/messenger'); } } From 7186ddcc717b78c40907450e807750981c9ce603 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Wed, 4 Oct 2023 21:52:21 +0400 Subject: [PATCH 05/43] added api auth --- src/api/auth.ts | 31 ++++++++++++++++++++++++++ src/config.ts | 2 +- src/models/IUser.ts | 5 ++++- src/pages/registration/registration.ts | 15 +++++++++++++ src/services/auth.ts | 13 +++++++++++ src/utils/Http.ts | 20 ++++++++++------- 6 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 src/api/auth.ts create mode 100644 src/services/auth.ts diff --git a/src/api/auth.ts b/src/api/auth.ts new file mode 100644 index 000000000..39419e192 --- /dev/null +++ b/src/api/auth.ts @@ -0,0 +1,31 @@ +import HTTPTransport from "../utils/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 async signUp(userData: IUser) { + const result = await this.httpTransport.post(this.baseUrl + '/signup', {data: userData}); + console.log(result); + } + + public async signIn(userData: IAuthData) { + const result = await this.httpTransport.post(this.baseUrl + '/signin', {data: userData}); + console.log(result); + } + public async getAuthUser() { + const result = await this.httpTransport.get(this.baseUrl + '/user'); + console.log(result); + } + public async logOut() { + const result = await this.httpTransport.post(this.baseUrl + '/logout'); + console.log(result); + } +} + +export default AuthApi diff --git a/src/config.ts b/src/config.ts index 47a370984..6d6590997 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,2 +1,2 @@ export const urlImages = '/'; - +export const BASE_API_URL='https://ya-praktikum.tech/api/v2'; diff --git a/src/models/IUser.ts b/src/models/IUser.ts index 5f9f546a0..1fe9034f3 100644 --- a/src/models/IUser.ts +++ b/src/models/IUser.ts @@ -9,4 +9,7 @@ export interface IUser { avatar?: string; } - +export interface IAuthData { + login: string; + password: string; +} diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index 067fdf58a..5ab04af75 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -1,4 +1,6 @@ import {IProps,Block} from "../../utils/Block.ts"; +import {signup} from "../../services/auth.ts"; +import {IUser} from "../../models/IUser.ts"; export interface IPageRegistrationProps extends IProps { onLogin:(event:Event)=>void, @@ -26,6 +28,19 @@ export class PageRegistration extends Block { phone, email }) + + if(password===password2){ + const data={ + first_name, + second_name, + login, + email, + password, + phone + } as IUser; + signup(data) + } + } } diff --git a/src/services/auth.ts b/src/services/auth.ts new file mode 100644 index 000000000..bee6d3d46 --- /dev/null +++ b/src/services/auth.ts @@ -0,0 +1,13 @@ +import {IUser} from "../models/IUser.ts"; +import AuthApi from "../api/auth.ts"; + +const authApi=new AuthApi('/auth'); +const signup = async (data: IUser) => { + await authApi.signUp(data); + + +} + +export { + signup, +} diff --git a/src/utils/Http.ts b/src/utils/Http.ts index 59a9fa20e..6c0406d15 100644 --- a/src/utils/Http.ts +++ b/src/utils/Http.ts @@ -1,4 +1,5 @@ import {queryStringify} from "./string.utils.ts"; +import {BASE_API_URL} from "../config.ts"; enum METHODS { GET = 'GET', @@ -8,7 +9,7 @@ enum METHODS { } type IOptionsRequest = { - data?: string; + data?: object; method?: METHODS.GET | METHODS.POST | METHODS.PUT | METHODS.DELETE; timeout?: number; headers?: Record; @@ -20,25 +21,28 @@ type HTTPMethod = (url: string, options?: IOptionsRequest) => Promise class HTTPTransport { + private readonly baseUrl:string='' + constructor(base_url?:string) { + this.baseUrl=base_url||BASE_API_URL; + } get: HTTPMethod = (url, options = {}) => { - return this.request(url, { + return this.request(this.baseUrl+url+queryStringify(options.params || {}) || '', { ...options, - data: queryStringify(options.params || {}) || '', method: METHODS.GET }, options.timeout); }; put: HTTPMethod = (url, options = {}) => { - return this.request(url, {...options, method: METHODS.PUT}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.PUT,headers:{'Content-Type': 'application/json'}}, options.timeout); }; post: HTTPMethod = (url, options = {}) => { - return this.request(url, {...options, method: METHODS.POST}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.POST,headers:{'Content-Type': 'application/json'}}, options.timeout); }; delete: HTTPMethod = (url, options = {}) => { - return this.request(url, {...options, method: METHODS.DELETE}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.DELETE}, options.timeout); }; request = (url: string, options: IOptionsRequest = {method: METHODS.GET}, timeout = 5000) => { @@ -48,8 +52,8 @@ class HTTPTransport { const xhr = new XMLHttpRequest(); xhr.timeout = timeout; - const isGet = method === METHODS.GET; - xhr.open(method || METHODS.GET, isGet ? `${url}${data}` : url,); + //const isGet = method === METHODS.GET; + xhr.open(method || METHODS.GET, url); if (headers) { From ad2820baef5707e36119d73286ef0c62d05c225a Mon Sep 17 00:00:00 2001 From: ellevanova Date: Thu, 5 Oct 2023 21:23:49 +0400 Subject: [PATCH 06/43] added auth users with page --- src/api/auth.ts | 20 ++++------ src/components/button/button.pcss | 12 +++++- src/components/form-auth/form-auth.ts | 8 ++-- src/components/form-profile/form-profile.ts | 13 +++++-- src/config.ts | 12 ++++++ src/main.ts | 22 +++++------ src/pages/login/login.ts | 41 +++++++++++++++------ src/pages/profile/profile.ts | 2 +- src/pages/registration/registration.ts | 17 +++++++-- src/services/auth.ts | 39 +++++++++++++++++--- src/utils/Http.ts | 3 +- src/utils/api.utils.ts | 16 ++++++++ 12 files changed, 149 insertions(+), 56 deletions(-) create mode 100644 src/utils/api.utils.ts diff --git a/src/api/auth.ts b/src/api/auth.ts index 39419e192..1d7411277 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -9,22 +9,18 @@ export class AuthApi { if (baseUrl) this.baseUrl = baseUrl; } - public async signUp(userData: IUser) { - const result = await this.httpTransport.post(this.baseUrl + '/signup', {data: userData}); - console.log(result); + public signUp(userData: IUser) { + return this.httpTransport.post(this.baseUrl + '/signup', {data: userData}); } - public async signIn(userData: IAuthData) { - const result = await this.httpTransport.post(this.baseUrl + '/signin', {data: userData}); - console.log(result); + public signIn(userData: IAuthData) { + return this.httpTransport.post(this.baseUrl + '/signin', {data: userData}); } - public async getAuthUser() { - const result = await this.httpTransport.get(this.baseUrl + '/user'); - console.log(result); + public getAuthUser() { + return this.httpTransport.get(this.baseUrl + '/user'); } - public async logOut() { - const result = await this.httpTransport.post(this.baseUrl + '/logout'); - console.log(result); + public logOut() { + return this.httpTransport.post(this.baseUrl + '/logout'); } } diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss index 08dd1c206..5611d4438 100644 --- a/src/components/button/button.pcss +++ b/src/components/button/button.pcss @@ -69,5 +69,13 @@ height: 25px; } - - +.button-link { + padding: 5px; + background-color: transparent; + color: var(--red); + text-transform: none; + width: auto; + &:hover { + text-decoration: underline; + } +} diff --git a/src/components/form-auth/form-auth.ts b/src/components/form-auth/form-auth.ts index 0616c071a..74ab6cc3f 100644 --- a/src/components/form-auth/form-auth.ts +++ b/src/components/form-auth/form-auth.ts @@ -8,10 +8,8 @@ interface IFormAuthProps extends IProps { onClickCancelButton: (event:Event) => void, captionOk: string, captionCancel: string, - pageOk:string, - pageCancel:string, validate:IValidateType, - onClickOk:(event:Event) => void, + cancelLink:string } export class FormAuth extends Block { constructor(props:IFormAuthProps) { @@ -24,7 +22,7 @@ export class FormAuth extends Block { } protected render(): string { - const {caption='Login',children='',onClickCancelButton,captionOk,captionCancel,pageCancel}=this._props as IFormAuthProps; + const {caption='Login',children='',captionOk,captionCancel,cancelLink}=this._props as IFormAuthProps; return(`

@@ -35,7 +33,7 @@ export class FormAuth extends Block {

{{{ Button caption="${captionOk}" onClick=onClickOkButton }}} - {{{ Link caption="${captionCancel}" page="${pageCancel}" onClick=${onClickCancelButton} }}} + {{{ Link caption="${captionCancel}" href="${cancelLink}" }}}
`) diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 89e3adbbf..588c536a2 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -1,6 +1,7 @@ import {IProps,Block} from "../../utils/Block"; import {IUser} from "../../models/IUser.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; +import {logOut} from "../../services/auth.ts"; interface IFormProfileProps extends IProps{ user:IUser, @@ -10,19 +11,23 @@ interface IFormProfileProps extends IProps{ buttonPage:string, buttonCancelPage:string, onClickOkButton: (event:Event) => void, + onLogOut: (event:Event) => void, validate:IValidateType, } export class FormProfile extends Block { constructor(props:IFormProfileProps) { props.validate= ALL_VALIDATE_FIELDS; + props.onLogOut=(event: Event) => { + event.preventDefault(); + logOut().catch((error)=>console.log(error)) + } super(props); } protected render(): string { - const {user,withButton=false,children='',buttonText='', - buttonCancelPage=''}=this._props as IFormProfileProps; + const {user,withButton=false,children='',buttonText=''}=this._props as IFormProfileProps; const {avatar,first_name,second_name}=user; return(` @@ -44,11 +49,11 @@ export class FormProfile extends Block { `
{{{Link caption="Change IUser Data" href='/settings-edit' type='success' linkLine=true }}} {{{Link caption="Change Password" href='/password-edit' type='success' linkLine=true }}} - {{{Link caption="Cancel" href='/messenger' type='danger' }}} + {{{Button caption="Logout" onClick=onLogOut type='link' }}}
`}
- {{{ Button type="cancel" page="${buttonCancelPage}" }}} + {{{ Button type="cancel" }}}
`) } diff --git a/src/config.ts b/src/config.ts index 6d6590997..176239da8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,2 +1,14 @@ export const urlImages = '/'; export const BASE_API_URL='https://ya-praktikum.tech/api/v2'; +export const BASE_URLS={ + 'page-login':"/login", + 'page-sign-up':"/sign-up", + 'page-profile':"/settings", + 'page-profile-edit':"/settings-edit", + 'page-password-edit':"/password-edit", + 'page-404':"/404", + 'page-500':"/500", + 'page-chat':"/messenger", + 'page-default':"/", + 'page-all-components':"/story-book", +} diff --git a/src/main.ts b/src/main.ts index 8ed8e8c3d..fa8ceabaa 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import * as Pages from './pages'; import {registerComponent} from "./utils/registerComponents"; import Router from "./utils/Router.ts"; import Block from "./utils/Block.ts"; +import {BASE_URLS} from "./config.ts"; @@ -33,15 +34,14 @@ Object.entries(allComponents).forEach(([name, component]) => { const router = new Router(".app"); -// Можно обновиться на /user и получить сразу пользователя -router.use("/", Pages.LoginPage as unknown as Block) - .use("/all", Pages.AllComponentsPage as unknown as Block) - .use("/login", Pages.LoginPage as unknown as Block) - .use("/sign-up", Pages.PageRegistration as unknown as Block) - .use("/settings", Pages.PageProfile as unknown as Block) - .use("/settings-edit", Pages.PageProfileEdit as unknown as Block) - .use("/password-edit", Pages.PagePasswordEdit as unknown as Block) - .use("/404", Pages.Page404 as unknown as Block) - .use("/500", Pages.Page500 as unknown as Block) - .use("/messenger", Pages.PageChat as unknown as Block) +router.use(BASE_URLS['page-default'], Pages.LoginPage as unknown as Block) + .use(BASE_URLS['page-all-components'], Pages.AllComponentsPage as unknown as Block) + .use(BASE_URLS['page-login'], Pages.LoginPage as unknown as Block) + .use(BASE_URLS['page-sign-up'], Pages.PageRegistration as unknown as Block) + .use(BASE_URLS['page-profile'], Pages.PageProfile as unknown as Block) + .use(BASE_URLS['page-profile-edit'], Pages.PageProfileEdit as unknown as Block) + .use(BASE_URLS['page-password-edit'], Pages.PagePasswordEdit as unknown as Block) + .use(BASE_URLS['page-404'], Pages.Page404 as unknown as Block) + .use(BASE_URLS['page-500'], Pages.Page500 as unknown as Block) + .use(BASE_URLS['page-chat'], Pages.PageChat as unknown as Block) .start(); diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 545de57d2..78ec8aa63 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,37 +1,54 @@ -import {IProps,Block} from "../../utils/Block"; -import Router from "../../utils/Router.ts"; +import {IProps, Block} from "../../utils/Block"; +import {BASE_URLS} from "../../config.ts"; +import {getUser, signIn} from "../../services/auth.ts"; export interface ILoginPageProps extends IProps { - onLogin:(event:Event)=>void + onLogin: (event: Event) => void; } + export class LoginPage extends Block { constructor() { - const props:ILoginPageProps={ - events:{}, - onLogin: (event:Event) => { + const props: ILoginPageProps = { + events: {}, + onLogin: (event: Event) => { event.preventDefault(); - const login = this.refs.formLogin.getRefs()?.login.value(); - const password = this.refs.formLogin.getRefs()?.password.value(); + const login = this.refs.formLogin.getRefs()?.login.value(); + const password = this.refs.formLogin.getRefs()?.password.value(); console.log({ login, password }) - if(login&&password)Router.getRouter().go('/messenger'); + if (!login) { + return; + } + if (!password) { + return; + } + signIn({login, password}).catch((error)=>console.log(error)) } } super(props); + getUser().catch((error)=>console.log(error)) } protected render(): string { - const children:string=` + const children: string = ` {{{ InputShort label='Login' type='text' name='login' validate=validate.login ref='login' }}} {{{ InputShort label='Password' type='password' name='password' validate=validate.password ref='password' }}}` - return(` + return (`
- {{{ FormAuth caption="Login" captionOk="Login" captionCancel="Cancel" pageOk="allPages" pageCancel="loginPage" onClickOkButton=onLogin children="${children}" ref="formLogin" }}} + {{{ FormAuth + caption="Login" + captionOk="Login" + captionCancel="Sign up" + onClickOkButton=onLogin + children="${children}" + ref="formLogin" + cancelLink="${BASE_URLS['page-sign-up']}" + }}}
`) } } diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index de9640148..b146dfd2c 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -31,7 +31,7 @@ export class PageProfile extends Block { protected render(): string { return (`
- {{{ FormProfile user=user withButton=false children="${this.getChildren()}" ref="form" buttonPage='pageChat' }}} + {{{ FormProfile user=user withButton=false children="${this.getChildren()}" ref="form" }}}
`) } } diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index 5ab04af75..e21180b3c 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -1,6 +1,7 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {signup} from "../../services/auth.ts"; +import {signUp} from "../../services/auth.ts"; import {IUser} from "../../models/IUser.ts"; +import {BASE_URLS} from "../../config.ts"; export interface IPageRegistrationProps extends IProps { onLogin:(event:Event)=>void, @@ -38,7 +39,7 @@ export class PageRegistration extends Block { password, phone } as IUser; - signup(data) + signUp(data) } } @@ -64,7 +65,17 @@ export class PageRegistration extends Block { return (`
- {{{ FormAuth caption="Registration" captionOk="sign up" captionCancel="Cancel" pageOk="allPages" pageCancel="loginPage" onClickOkButton=onLogin children="${this.getChildren()}" ref="form" }}} + {{{ FormAuth + caption="Registration" + captionOk="sign up" + captionCancel="Cancel" + pageOk="allPages" + pageCancel="loginPage" + onClickOkButton=onLogin + children="${this.getChildren()}" + ref="form" + cancelLink="${BASE_URLS['page-login']}" + }}}
`) } } diff --git a/src/services/auth.ts b/src/services/auth.ts index bee6d3d46..3fed5793b 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -1,13 +1,42 @@ -import {IUser} from "../models/IUser.ts"; +import {IAuthData, IUser} from "../models/IUser.ts"; import AuthApi from "../api/auth.ts"; +import {responseHasError} from "../utils/api.utils.ts"; +import Router from "../utils/Router.ts"; +import {BASE_URLS} from "../config.ts"; -const authApi=new AuthApi('/auth'); -const signup = async (data: IUser) => { - await authApi.signUp(data); +const authApi=new AuthApi('/auth'); +const signUp = async (data: IUser) => { + const result= await authApi.signUp(data); + console.log(result) +} +const signIn= async (data: IAuthData) => { + const result=await authApi.signIn(data); + const error=responseHasError(result as XMLHttpRequest); + if(error) throw Error(error); + await getUser(); +} +const getUser= async () => { + const result=await authApi.getAuthUser() as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + // @ts-ignore + window.user=JSON.parse( result.responseText); + Router.getRouter().go(BASE_URLS['page-chat']); +} +const logOut= async () => { + const result=await authApi.logOut() as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + // @ts-ignore + window.user=null; + Router.getRouter().go(BASE_URLS['page-login']); } export { - signup, + signUp, + signIn, + getUser, + logOut } diff --git a/src/utils/Http.ts b/src/utils/Http.ts index 6c0406d15..7764cfa96 100644 --- a/src/utils/Http.ts +++ b/src/utils/Http.ts @@ -45,12 +45,13 @@ class HTTPTransport { return this.request(this.baseUrl+url, {...options, method: METHODS.DELETE}, options.timeout); }; - request = (url: string, options: IOptionsRequest = {method: METHODS.GET}, timeout = 5000) => { + request = (url: string, options: IOptionsRequest = {method: METHODS.GET,}, timeout = 5000) => { const {method, headers, data} = options; return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); + xhr.withCredentials = true; xhr.timeout = timeout; //const isGet = method === METHODS.GET; xhr.open(method || METHODS.GET, url); diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts new file mode 100644 index 000000000..d459f570e --- /dev/null +++ b/src/utils/api.utils.ts @@ -0,0 +1,16 @@ +import {BASE_URLS} from "../config.ts"; +import Router from "./Router.ts"; + + + +export const responseHasError=(response:XMLHttpRequest)=>{ + switch (response.status) { + case 200:return false; + case 500: + Router.getRouter().go(BASE_URLS['page-500']); + break; + default: + return JSON.parse( response.responseText).reason; + + } +} From 75dc9a7cd97789b74a3a85df0a74aee00280a2d7 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 6 Oct 2023 16:18:37 +0400 Subject: [PATCH 07/43] added store user?fixed errors --- src/components/form-profile/form-profile.ts | 18 +++++++++----- src/components/link/link.ts | 14 ++++++++--- src/main.ts | 14 ++++++++++- src/pages/chat-page/page-chat.ts | 5 ++++ src/pages/login/login.ts | 4 ++-- src/pages/password-edit/password-edit.ts | 5 ++-- src/pages/profile-edit/profile-edit.ts | 14 ++++++----- src/pages/profile/profile.ts | 26 ++++++++++++++------- src/services/app.ts | 25 ++++++++++++++++++++ src/services/auth.ts | 9 ++++--- tsconfig.json | 4 +++- 11 files changed, 102 insertions(+), 36 deletions(-) create mode 100644 src/services/app.ts diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 588c536a2..c50a8f2f8 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -4,7 +4,7 @@ import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts" import {logOut} from "../../services/auth.ts"; interface IFormProfileProps extends IProps{ - user:IUser, + user:IUser|null, withButton:boolean, children: string, buttonText:string, @@ -16,25 +16,31 @@ interface IFormProfileProps extends IProps{ } export class FormProfile extends Block { + constructor(props:IFormProfileProps) { + props.validate= ALL_VALIDATE_FIELDS; props.onLogOut=(event: Event) => { event.preventDefault(); logOut().catch((error)=>console.log(error)) } + props.user=window.user; + console.log(props) super(props); } - + public get props(){ + return this._props as IFormProfileProps; + } protected render(): string { - const {user,withButton=false,children='',buttonText=''}=this._props as IFormProfileProps; - const {avatar,first_name,second_name}=user; - + const {user,withButton=false,children='',buttonText=''}=this.props; + if(!user)return ''; + const {avatar='',first_name,second_name}=user; return(`
- {{{ Avatar image=${avatar} isLoadAvatar=true }}} + {{{ Avatar imageUrl=${avatar} isLoadAvatar=true }}}

${first_name} ${second_name}

${user ? diff --git a/src/components/link/link.ts b/src/components/link/link.ts index 198384f4c..0dbfe8981 100644 --- a/src/components/link/link.ts +++ b/src/components/link/link.ts @@ -1,4 +1,5 @@ import {IProps,Block} from "../../utils/Block"; +import Router from "../../utils/Router.ts"; interface ILinkProps extends IProps{ caption: string, @@ -11,16 +12,23 @@ interface ILinkProps extends IProps{ export class Link extends Block { constructor(props: ILinkProps) { - super(props); + super({ + ...props, + events: { + click: ()=>{ + Router.getRouter().go(props.href||'/'); + } + } + }) } public get props(){ return this._props as ILinkProps; } protected render(): string { - const { href='#', caption='', page='' ,linkIcon=false,linkLine=false,type=''} = this.props; + const { caption='', page='' ,linkIcon=false,linkLine=false,type=''} = this.props; const classLink=`link ${type?`link-${type}`:''} ${linkLine?'link-line':''}` return (` - ${caption} diff --git a/src/main.ts b/src/main.ts index fa8ceabaa..c674467c8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,9 @@ import {registerComponent} from "./utils/registerComponents"; import Router from "./utils/Router.ts"; import Block from "./utils/Block.ts"; import {BASE_URLS} from "./config.ts"; +import {IUser} from "./models/IUser.ts"; +import {initialStateApp} from "./services/app.ts"; + @@ -31,10 +34,19 @@ Object.entries(allComponents).forEach(([name, component]) => { registerComponent(name, component); }); +declare global { + interface Window { + user: IUser|null; + } + + type Nullable = T | null; + +} +await initialStateApp(); const router = new Router(".app"); -router.use(BASE_URLS['page-default'], Pages.LoginPage as unknown as Block) +router.use(BASE_URLS['page-default'], Pages.PageChat as unknown as Block) .use(BASE_URLS['page-all-components'], Pages.AllComponentsPage as unknown as Block) .use(BASE_URLS['page-login'], Pages.LoginPage as unknown as Block) .use(BASE_URLS['page-sign-up'], Pages.PageRegistration as unknown as Block) diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 880cb1ed3..f24b90fb9 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -5,6 +5,8 @@ import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; +import Router from "../../utils/Router.ts"; +import {BASE_URLS} from "../../config.ts"; export interface IPageChatProps extends IProps { currentUser:IUser, @@ -12,7 +14,9 @@ export interface IPageChatProps extends IProps { messageList:IChatMessage[], } export class PageChat extends Block { + constructor() { + console.log('window.user', window.user) const props:IPageChatProps={ currentUser:mockUser, chatList:mockListChats, @@ -20,6 +24,7 @@ export class PageChat extends Block { events:{} } super(props); + if(!window.user) Router.getRouter().go(BASE_URLS['page-login']); } protected render(): string { diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 78ec8aa63..7896a92d5 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -29,9 +29,9 @@ export class LoginPage extends Block { signIn({login, password}).catch((error)=>console.log(error)) } } - + getUser().catch(error=>console.log(error)) super(props); - getUser().catch((error)=>console.log(error)) + console.log('window.user', window.user) } protected render(): string { diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index 2c3a38e3b..4ee8141ea 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -1,17 +1,16 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {mockUser} from "../../mocks/user-profile.mocks.ts"; import {IUser} from "../../models/IUser.ts"; export interface ILoginPageProps extends IProps { onChange:(event:Event)=>void, - user:IUser + user:IUser|null } export class PagePasswordEdit extends Block { constructor() { const props:ILoginPageProps={ events:{}, - user:mockUser, + user:window.user, onChange: (event: Event) => { event.preventDefault(); diff --git a/src/pages/profile-edit/profile-edit.ts b/src/pages/profile-edit/profile-edit.ts index 24a41f922..ab241e44d 100644 --- a/src/pages/profile-edit/profile-edit.ts +++ b/src/pages/profile-edit/profile-edit.ts @@ -1,17 +1,16 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {mockUser} from "../../mocks/user-profile.mocks.ts"; import {IUser} from "../../models/IUser.ts"; import {IPageProfileProps} from "../profile/profile.ts"; export interface IPageProfileEditProps extends IProps { onChange:(event:Event)=>void, - user:IUser + user:IUser|null } export class PageProfileEdit extends Block { constructor() { const props:IPageProfileEditProps={ events:{}, - user:mockUser, + user:window.user, onChange: (event: Event) => { event.preventDefault(); const login = this.refs.form.getRefs()?.login.value(); @@ -33,15 +32,18 @@ export class PageProfileEdit extends Block { } super(props); } - + public get props(){ + return this._props as IPageProfileProps; + } getChildren() { - const {email,login,first_name,second_name,display_name,phone}=(this._props as IPageProfileProps).user; + if(!this.props.user) return ''; + const {email,login,first_name,second_name,display_name,phone}=this.props.user; return ( `{{{ InputWide label='Email' type='email' name='email' validate=validate.email ref='email' readOnly=false value='${email}' }}} {{{ InputWide label='Login' type='text' name='login' validate=validate.login ref='login' readOnly=false value='${login}' }}} {{{ InputWide label='First Name' type='first_name' name='first_name' validate=validate.name ref='first_name' readOnly=false value='${first_name}' }}} {{{ InputWide label='Second Name' name='second_name' validate=validate.name ref='second_name' readOnly=false value='${second_name}' }}} - {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=false value='${display_name}' }}} + {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=false value='${display_name||''}' }}} {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=false value='${phone}' }}} ` diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index b146dfd2c..15eceed28 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,37 +1,45 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {mockUser} from "../../mocks/user-profile.mocks.ts"; import {IUser} from "../../models/IUser.ts"; export interface IPageProfileProps extends IProps { - user:IUser + user:IUser|null } export class PageProfile extends Block { + constructor() { + console.log('window.user', window.user) const props:IPageProfileProps= { - events: {}, - user: mockUser, + user: window.user, + events: {} } + super(props); } getChildren() { - const {email,login,first_name,second_name,display_name,phone}=(this._props as IPageProfileProps).user; + const user=(this._props as IPageProfileProps).user; + if(!user )return '' + const {email,login,first_name,second_name,display_name,phone}=user; return ( `{{{ InputWide label='Email' type='email' name='email' validate=validate.email ref='email' readOnly=true value='${email}' }}} {{{ InputWide label='Login' type='text' name='login' validate=validate.login ref='login' readOnly=true value='${login}' }}} {{{ InputWide label='First Name' type='first_name' name='first_name' validate=validate.name ref='first_name' readOnly=true value='${first_name}' }}} {{{ InputWide label='Second Name' name='second_name' validate=validate.name ref='second_name' readOnly=true value='${second_name}' }}} - {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=true value='${display_name}' }}} - {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=true value='${phone}' }}} - + {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=true value='${display_name||''}' }}} + {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=true value='${phone}' }}} ` ) + } protected render(): string { - return (` + if((this._props as IPageProfileProps).user){ + return (`
{{{ FormProfile user=user withButton=false children="${this.getChildren()}" ref="form" }}}
`) + } + else return '' + } } diff --git a/src/services/app.ts b/src/services/app.ts new file mode 100644 index 000000000..e381d4fa8 --- /dev/null +++ b/src/services/app.ts @@ -0,0 +1,25 @@ +import {getUser} from "./auth.ts"; +import Router from "../utils/Router.ts"; +import {BASE_URLS} from "../config.ts"; + +const initialStateApp = async () => { + + let result = null; + try { + result = await getUser(); + } catch (error) { + Router.getRouter().go(BASE_URLS['page-login']); + return; + } + window.user=result; + console.log('window.user_initial', window.user,Router.getRouter()) + /*const chats = await getChats(); + window.store.set({user: me, chats}); + navigate('emails')*/ + +} + + +export{ + initialStateApp +} diff --git a/src/services/auth.ts b/src/services/auth.ts index 3fed5793b..768ccea48 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -3,6 +3,7 @@ import AuthApi from "../api/auth.ts"; import {responseHasError} from "../utils/api.utils.ts"; import Router from "../utils/Router.ts"; import {BASE_URLS} from "../config.ts"; +import {initialStateApp} from "./app.ts"; const authApi=new AuthApi('/auth'); @@ -14,22 +15,20 @@ const signIn= async (data: IAuthData) => { const result=await authApi.signIn(data); const error=responseHasError(result as XMLHttpRequest); if(error) throw Error(error); - await getUser(); + await initialStateApp(); } const getUser= async () => { const result=await authApi.getAuthUser() as XMLHttpRequest; const error=responseHasError(result); if(error) throw Error(error); - // @ts-ignore - window.user=JSON.parse( result.responseText); - Router.getRouter().go(BASE_URLS['page-chat']); + return JSON.parse( result.responseText); + } const logOut= async () => { const result=await authApi.logOut() as XMLHttpRequest; const error=responseHasError(result); if(error) throw Error(error); - // @ts-ignore window.user=null; Router.getRouter().go(BASE_URLS['page-login']); } diff --git a/tsconfig.json b/tsconfig.json index 0c9fccf83..c083587e9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,9 @@ "noUnusedLocals": true, "noUnusedParameters": true, "sourceMap": true, - "strictNullChecks": true + "strictNullChecks": true, + + "typeRoots": ["node_modules/@types", "models"] }, "include": ["src"] } From b8f21ad533d0a4c1998b00a1c44ec1f5bd45a0e3 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 6 Oct 2023 17:30:33 +0400 Subject: [PATCH 08/43] added user settings api --- src/api/user-settings.ts | 26 +++++++++++++++++++++ src/models/IUser.ts | 5 ++++ src/pages/password-edit/password-edit.ts | 9 ++++---- src/pages/profile-edit/profile-edit.ts | 8 ++++--- src/pages/profile/profile.ts | 1 - src/services/app.ts | 9 ++++++-- src/services/user-settings.ts | 29 ++++++++++++++++++++++++ src/utils/Http.ts | 14 ++++++------ 8 files changed, 83 insertions(+), 18 deletions(-) create mode 100644 src/api/user-settings.ts create mode 100644 src/services/user-settings.ts diff --git a/src/api/user-settings.ts b/src/api/user-settings.ts new file mode 100644 index 000000000..875bdb542 --- /dev/null +++ b/src/api/user-settings.ts @@ -0,0 +1,26 @@ +import HTTPTransport from "../utils/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}); + } + +} + +export default UserSettingsApi diff --git a/src/models/IUser.ts b/src/models/IUser.ts index 1fe9034f3..132d6a722 100644 --- a/src/models/IUser.ts +++ b/src/models/IUser.ts @@ -13,3 +13,8 @@ export interface IAuthData { login: string; password: string; } + +export interface IPasswords { + oldPassword: string, + newPassword: string +} diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index 4ee8141ea..801e355b7 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -1,5 +1,6 @@ import {IProps,Block} from "../../utils/Block.ts"; import {IUser} from "../../models/IUser.ts"; +import {updateUserPassword} from "../../services/user-settings.ts"; export interface ILoginPageProps extends IProps { onChange:(event:Event)=>void, @@ -11,17 +12,15 @@ export class PagePasswordEdit extends Block { const props:ILoginPageProps={ events:{}, user:window.user, - onChange: (event: Event) => { - + onChange: async (event: Event) => { event.preventDefault(); const oldPassword = this.refs.form.getRefs()?.oldPassword.value(); const newPassword = this.refs.form.getRefs()?.newPassword.value(); const repeatPassword = this.refs.form.getRefs()?.repeatPassword.value(); - console.log({ + if (oldPassword && newPassword && newPassword === repeatPassword) await updateUserPassword({ oldPassword, - newPassword, - repeatPassword, + newPassword }) } } diff --git a/src/pages/profile-edit/profile-edit.ts b/src/pages/profile-edit/profile-edit.ts index ab241e44d..d651173f9 100644 --- a/src/pages/profile-edit/profile-edit.ts +++ b/src/pages/profile-edit/profile-edit.ts @@ -1,6 +1,7 @@ import {IProps,Block} from "../../utils/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {IPageProfileProps} from "../profile/profile.ts"; +import {updateUserProfile} from "../../services/user-settings.ts"; export interface IPageProfileEditProps extends IProps { onChange:(event:Event)=>void, @@ -11,7 +12,7 @@ export class PageProfileEdit extends Block { const props:IPageProfileEditProps={ events:{}, user:window.user, - onChange: (event: Event) => { + onChange: async (event: Event) => { event.preventDefault(); const login = this.refs.form.getRefs()?.login.value(); const email = this.refs.form.getRefs()?.email.value(); @@ -20,14 +21,15 @@ export class PageProfileEdit extends Block { const second_name = this.refs.form.getRefs()?.second_name.value(); const display_name = this.refs.form.getRefs()?.display_name.value(); - console.log({ + const userData: IUser = { login, second_name, first_name, display_name, phone, email - }) + } + if (login && first_name && second_name && phone && email) await updateUserProfile(userData); } } super(props); diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index 15eceed28..b23c9d65e 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -7,7 +7,6 @@ export interface IPageProfileProps extends IProps { export class PageProfile extends Block { constructor() { - console.log('window.user', window.user) const props:IPageProfileProps= { user: window.user, events: {} diff --git a/src/services/app.ts b/src/services/app.ts index e381d4fa8..306a44699 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -1,6 +1,7 @@ import {getUser} from "./auth.ts"; import Router from "../utils/Router.ts"; import {BASE_URLS} from "../config.ts"; +import {IUser} from "../models/IUser.ts"; const initialStateApp = async () => { @@ -11,7 +12,7 @@ const initialStateApp = async () => { Router.getRouter().go(BASE_URLS['page-login']); return; } - window.user=result; + setStateUser(result); console.log('window.user_initial', window.user,Router.getRouter()) /*const chats = await getChats(); window.store.set({user: me, chats}); @@ -19,7 +20,11 @@ const initialStateApp = async () => { } +const setStateUser=(user:IUser)=>{ + window.user=user; +} export{ - initialStateApp + initialStateApp, + setStateUser } diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts new file mode 100644 index 000000000..1311d7d63 --- /dev/null +++ b/src/services/user-settings.ts @@ -0,0 +1,29 @@ +import UserSettingsApi from "../api/user-settings.ts"; +import {IPasswords, IUser} from "../models/IUser.ts"; +import {responseHasError} from "../utils/api.utils.ts"; +import {setStateUser} from "./app.ts"; +import Router from "../utils/Router.ts"; + + +const userApi=new UserSettingsApi('/user'); + +const updateUserProfile=async (newUserData: IUser) => { + const result= await userApi.changeUserProfile(newUserData); + const error=responseHasError(result); + if(error) throw Error(error); + setStateUser(JSON.parse(result.responseText)); + Router.getRouter().back(); +} +const updateUserPassword=async (newUserPasswords: IPasswords) => { + const result= await userApi.changeUserPassword(newUserPasswords); + const error=responseHasError(result); + if(error) throw Error(error); + Router.getRouter().back(); +} + + + +export { + updateUserProfile, + updateUserPassword +} diff --git a/src/utils/Http.ts b/src/utils/Http.ts index 7764cfa96..5f2c7a666 100644 --- a/src/utils/Http.ts +++ b/src/utils/Http.ts @@ -16,7 +16,7 @@ type IOptionsRequest = { params?: object; } -type HTTPMethod = (url: string, options?: IOptionsRequest) => Promise +type HTTPMethod = (url: string, options?: IOptionsRequest) => Promise @@ -25,24 +25,24 @@ class HTTPTransport { constructor(base_url?:string) { this.baseUrl=base_url||BASE_API_URL; } - get: HTTPMethod = (url, options = {}) => { + get: HTTPMethod = (url, options = {}):Promise => { return this.request(this.baseUrl+url+queryStringify(options.params || {}) || '', { ...options, method: METHODS.GET - }, options.timeout); + }, options.timeout)as Promise ; }; put: HTTPMethod = (url, options = {}) => { - return this.request(this.baseUrl+url, {...options, method: METHODS.PUT,headers:{'Content-Type': 'application/json'}}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.PUT,headers:{'Content-Type': 'application/json'}}, options.timeout) as Promise; }; - post: HTTPMethod = (url, options = {}) => { + post: HTTPMethod = (url, options = {})=> { - return this.request(this.baseUrl+url, {...options, method: METHODS.POST,headers:{'Content-Type': 'application/json'}}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.POST,headers:{'Content-Type': 'application/json'}}, options.timeout) as Promise; }; delete: HTTPMethod = (url, options = {}) => { - return this.request(this.baseUrl+url, {...options, method: METHODS.DELETE}, options.timeout); + return this.request(this.baseUrl+url, {...options, method: METHODS.DELETE}, options.timeout) as Promise; }; request = (url: string, options: IOptionsRequest = {method: METHODS.GET,}, timeout = 5000) => { From 5fb87dea0b3934ee1f58d433920837caf9fe763f Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 6 Oct 2023 23:20:41 +0400 Subject: [PATCH 09/43] added modal controller --- src/components/avatar/avatar.ts | 35 ++++++++++++++------ src/components/button/button.ts | 2 +- src/components/form-profile/form-profile.ts | 1 - src/components/modal/modal.pcss | 15 +++++++-- src/components/modal/modal.ts | 24 ++++++++------ src/index.html | 2 ++ src/utils/modal-controller.ts | 36 +++++++++++++++++++++ 7 files changed, 92 insertions(+), 23 deletions(-) create mode 100644 src/utils/modal-controller.ts diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 77e9f8786..2c1eb9b54 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,6 +1,8 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps, Block} from "../../utils/Block"; +import modalController from "../../utils/modal-controller.ts"; +import {Modal} from "../index.ts"; -interface IAvatarProps extends IProps{ +interface IAvatarProps extends IProps { size: 'sm' | 'md', isLoadAvatar: boolean, onClickLoadAvatar: () => void, @@ -9,11 +11,25 @@ interface IAvatarProps extends IProps{ export class Avatar extends Block { constructor(props: IAvatarProps) { - super(props); - this._props.events = { - click: props.onClickLoadAvatar || (() => { - }) - } + super({ + ...props, + events: { + click: () => { + console.log('cancel') + modalController.openModal(); + } + } + }) + modalController.addModal((new Modal({ + okText: "Save", + cancelClick: () => { + console.log('cancel') + //modalController.closeModal() + }, + okClick: () => console.log('ok'), + cancelText: 'Cancel', + caption: 'Add Avatar' + })) as unknown as Block); } protected render(): string { @@ -24,8 +40,9 @@ export class Avatar extends Block { image avatar` : ``} ${isLoadAvatar ? `
-
Load New Avatar
+
Load New Avatar
` : ""} -
`) + + `) } } diff --git a/src/components/button/button.ts b/src/components/button/button.ts index f5114571d..a657d76a3 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -20,7 +20,7 @@ export class Button extends Block { protected render(): string { const { type='', caption='', page='' } = this._props as IButtonProps; return (` - diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index c50a8f2f8..0b7903072 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -26,7 +26,6 @@ export class FormProfile extends Block { } props.user=window.user; - console.log(props) super(props); } public get props(){ diff --git a/src/components/modal/modal.pcss b/src/components/modal/modal.pcss index 6792b0ba2..bc1c8bd0a 100644 --- a/src/components/modal/modal.pcss +++ b/src/components/modal/modal.pcss @@ -5,7 +5,6 @@ gap: 10px; padding: 30px; min-height: 300px; - width: 340px; z-index: 100; .modal__header { @@ -24,6 +23,19 @@ align-self: end; } } +.dialog::backdrop { + background-color: rgb(0 0 0 / 20%); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); +} +.dialog { + border: none; + + width: 340px; + inset: 0; + position: fixed; + margin: auto; +} .modal-background { position: absolute; @@ -38,4 +50,3 @@ align-items: center; justify-content: center; } - diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 6f95a366a..290553b2d 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps, Block} from "../../utils/Block"; interface IModalProps extends IProps { caption: string, @@ -10,17 +10,22 @@ interface IModalProps extends IProps { export class Modal extends Block { constructor(props: IModalProps) { - super(props); + super({ + ...props + }) + this.props.okClick=() => { + console.log('cancel') + //modalController.closeModal() + } } - } - public get props(){ + public get props() { return this._props as IModalProps; } + protected render(): string { - const { caption='',okText='',cancelText=''} = this.props; + const {caption = '', okText = '', cancelText = ''} = this.props; return (` -
-
+

${caption}

@@ -28,11 +33,10 @@ export class Modal extends Block {
- {{{ Button caption="${okText}" onClick=okClick }}} + {{{ Button caption="${okText}" onClick=okClick }}} {{{ Button caption="${cancelText}" onClick=cancelClick }}}
- -
+ `) } } diff --git a/src/index.html b/src/index.html index bc931504c..36841769a 100644 --- a/src/index.html +++ b/src/index.html @@ -9,5 +9,7 @@
+ + diff --git a/src/utils/modal-controller.ts b/src/utils/modal-controller.ts new file mode 100644 index 000000000..402209b58 --- /dev/null +++ b/src/utils/modal-controller.ts @@ -0,0 +1,36 @@ +import Block from "./Block.ts"; + +class ModalController { + private static __instance: ModalController; + private dialog: HTMLDialogElement | null=null; + + constructor() { + if (ModalController.__instance) { + return ModalController.__instance; + } + ModalController.__instance = this; + this.dialog= document.getElementById('dialog') as HTMLDialogElement; + } + + public static getInstance() { + return this.__instance; + } + + public addModal(modal: Block) { + const htmlElement = modal.getContent(); + if (!this.dialog?.firstElementChild) this.dialog?.append(document.createElement('div')); + if(htmlElement)this.dialog?.firstElementChild?.replaceWith(htmlElement); + } + + public openModal(){ + console.log('OPEN!') + this.dialog?.showModal() + } + + public closeModal(){ + this.dialog?.close() + } + +} +const modalController=new ModalController(); +export default modalController; From eb466a250cc803d47412136d24233fda75c37b3f Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sat, 7 Oct 2023 16:50:03 +0400 Subject: [PATCH 10/43] added change avatar modal --- src/components/avatar/avatar.ts | 16 +-- src/components/form-profile/form-profile.pcss | 1 - src/components/form-profile/form-profile.ts | 30 +++-- src/components/index.ts | 1 + src/components/modal-avatar/index.ts | 2 + src/components/modal-avatar/modal-avatar.pcss | 51 +++++++++ src/components/modal-avatar/modal-avatar.ts | 104 ++++++++++++++++++ src/components/modal/modal.ts | 14 +-- src/config.ts | 1 + src/main.ts | 1 + src/models/IUser.ts | 1 + src/services/user-settings.ts | 11 +- src/utils/Http.ts | 13 ++- src/utils/load-file.utils.ts | 32 ++++++ 14 files changed, 241 insertions(+), 37 deletions(-) create mode 100644 src/components/modal-avatar/index.ts create mode 100644 src/components/modal-avatar/modal-avatar.pcss create mode 100644 src/components/modal-avatar/modal-avatar.ts create mode 100644 src/utils/load-file.utils.ts diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 2c1eb9b54..47af6a53a 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,6 +1,7 @@ import {IProps, Block} from "../../utils/Block"; import modalController from "../../utils/modal-controller.ts"; -import {Modal} from "../index.ts"; +import { ModalAvatar} from "../index.ts"; +import {BASE_RESOURCES_URL} from "../../config.ts"; interface IAvatarProps extends IProps { size: 'sm' | 'md', @@ -20,15 +21,8 @@ export class Avatar extends Block { } } }) - modalController.addModal((new Modal({ - okText: "Save", - cancelClick: () => { - console.log('cancel') - //modalController.closeModal() - }, - okClick: () => console.log('ok'), - cancelText: 'Cancel', - caption: 'Add Avatar' + modalController.addModal((new ModalAvatar({ + oldAvatar:window.user?.avatar||'' })) as unknown as Block); } @@ -37,7 +31,7 @@ export class Avatar extends Block { return (`
${imageUrl ? ` - image avatar` : ``} + image avatar` : ``} ${isLoadAvatar ? `
Load New Avatar
diff --git a/src/components/form-profile/form-profile.pcss b/src/components/form-profile/form-profile.pcss index 502f007f8..0be66a355 100644 --- a/src/components/form-profile/form-profile.pcss +++ b/src/components/form-profile/form-profile.pcss @@ -47,4 +47,3 @@ opacity: 0.8; } } - diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 0b7903072..8b06aae0f 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -2,16 +2,16 @@ import {IProps,Block} from "../../utils/Block"; import {IUser} from "../../models/IUser.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; import {logOut} from "../../services/auth.ts"; +import Router from "../../utils/Router.ts"; interface IFormProfileProps extends IProps{ user:IUser|null, withButton:boolean, children: string, buttonText:string, - buttonPage:string, - buttonCancelPage:string, onClickOkButton: (event:Event) => void, onLogOut: (event:Event) => void, + onCancel: (event:Event) => void, validate:IValidateType, } @@ -24,6 +24,10 @@ export class FormProfile extends Block { event.preventDefault(); logOut().catch((error)=>console.log(error)) } + props.onCancel=(event: Event) => { + event.preventDefault(); + Router.getRouter().back(); + } props.user=window.user; super(props); @@ -39,27 +43,29 @@ export class FormProfile extends Block {
- {{{ Avatar imageUrl=${avatar} isLoadAvatar=true }}} + {{{ Avatar imageUrl="${avatar}" isLoadAvatar=true }}}

${first_name} ${second_name}

${user ? `
${children} -
`:'' - } +
` : '' + } ${withButton ? - `
+ `
{{{ Button caption="${buttonText}" onClick=onClickOkButton }}} -
`: - `
+
` : + `
{{{Link caption="Change IUser Data" href='/settings-edit' type='success' linkLine=true }}} {{{Link caption="Change Password" href='/password-edit' type='success' linkLine=true }}} {{{Button caption="Logout" onClick=onLogOut type='link' }}} -
`} -
-
- {{{ Button type="cancel" }}} +
` + } +
+ {{{ Button type="cancel" onClick=onCancel}}}
+
+ `) } } diff --git a/src/components/index.ts b/src/components/index.ts index cb1712f80..627905dc2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,6 +7,7 @@ export {default as InputWide } from './input-wide'; export { default as FormAuth } from './form-auth'; export {default as FormProfile } from './form-profile'; export {default as Modal } from './modal'; +export {default as ModalAvatar } from './modal-avatar'; export {default as Input } from './input'; export { default as ChatItem } from './chat-item'; export { default as InputSearch } from './input-search'; diff --git a/src/components/modal-avatar/index.ts b/src/components/modal-avatar/index.ts new file mode 100644 index 000000000..d4dc16e93 --- /dev/null +++ b/src/components/modal-avatar/index.ts @@ -0,0 +1,2 @@ +import './modal-avatar.pcss'; +export { ModalAvatar as default } from './modal-avatar'; diff --git a/src/components/modal-avatar/modal-avatar.pcss b/src/components/modal-avatar/modal-avatar.pcss new file mode 100644 index 000000000..3d48a61d2 --- /dev/null +++ b/src/components/modal-avatar/modal-avatar.pcss @@ -0,0 +1,51 @@ +.modal-avatar{ + display: flex; + flex-direction: column; + align-items: center; + position: relative; + z-index: 10; + border: 1px var(--white) solid; + border-radius: 20px; + padding: 20px 15px; + + &.highlight{ + border-color: var(--red-light); + } + + .modal-avatar__image{ + border-radius: 100px; + border: 1px var(--red) solid; + width: 100%; + height: 100%; + transition: .5s ease; + backface-visibility: hidden; + opacity: 1; + display: block; + height: 130px; + width: 130px; + + } + .modal-avatar__empty{ + background: url("../../assets/icons/image.svg") no-repeat center; + position: relative; + height: 130px; + width: 130px; + border-radius: 100px; + border: 1px var(--red) solid; + } + .modal-avatar__label { + margin-top:20px; + font-weight: bold; + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + .modal-avatar__input{ + width: 0.1px; + height: 0.1px; + opacity: 0; + position: absolute; + z-index: -10; + } +} diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts new file mode 100644 index 000000000..ce3516c3f --- /dev/null +++ b/src/components/modal-avatar/modal-avatar.ts @@ -0,0 +1,104 @@ +import {IProps, Block} from "../../utils/Block"; +import {updateUserAvatar, updateUserProfile} from "../../services/user-settings.ts"; +import {BASE_RESOURCES_URL} from "../../config.ts"; +import modalController from "../../utils/modal-controller.ts"; +import {addActive, deleteActive, loadNewFileFromDrag} from "../../utils/load-file.utils.ts"; + +interface IModalAvatarProps extends IProps { + oldAvatar?: string, + newAvatar?: string, + okClick?: () => void, + cancelClick?: () => void, + onAddFile?: (e: InputEvent) => void, + file?: unknown; +} + +export class ModalAvatar extends Block { + constructor(props: IModalAvatarProps) { + props.file = null; + props.newAvatar = ''; + props.okClick = () => { + modalController.closeModal(); + } + props.cancelClick = () => { + const user = window.user; + if (user && this.props.newAvatar) { + updateUserProfile({...user, avatar: this.props.oldAvatar}).then(() => { + modalController.closeModal(); + }); + } else modalController.closeModal(); + + } + + const _onAddFile = (e: TEvent) => { + deleteActive(e as Event); + const formData = loadNewFileFromDrag(e); + console.log('added file',e); + console.log('formData',formData) + if (formData) { + updateUserAvatar(formData).then(user => { + this.props.newAvatar = user.avatar; + modalController.addModal((new ModalAvatar({ + oldAvatar: window.user?.avatar || '' + })) as unknown as Block); + }); + } + } + super({ + ...props, + events: { + dragenter: (e: Event) => { + addActive(e); + }, + dragover: (e: Event) => { + addActive(e); + }, + dragleave: (e: Event) => { + deleteActive(e); + }, + drop: _onAddFile, + change:_onAddFile, + + } + }) + } + + + public get props() { + return this._props as IModalAvatarProps; + } + + getChildren() { + const {oldAvatar = '', newAvatar = ''} = this.props; + let result = ''; + if (newAvatar) { + result = `image avatar` + } else { + result = oldAvatar ? `image avatar` : `
` + } + return ( + ` + ` + ) + } + + protected render(): string { + return (` + {{{ Modal + caption="Change Avatar" + okText='Save' + cancelText='Cancel' + okClick=okClick + cancelClick=cancelClick + children="${this.getChildren()}" + }}} + `) + } +} diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 290553b2d..c04f237bf 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -6,6 +6,7 @@ interface IModalProps extends IProps { okClick: () => void, cancelText: string, cancelClick: () => void, + children?: string, } export class Modal extends Block { @@ -13,28 +14,25 @@ export class Modal extends Block { super({ ...props }) - this.props.okClick=() => { - console.log('cancel') - //modalController.closeModal() - } } + } public get props() { return this._props as IModalProps; } protected render(): string { - const {caption = '', okText = '', cancelText = ''} = this.props; + const {caption = '', okText = '', cancelText = '',children=''} = this.props; return (`

${caption}

-
- +
+ ${children}
{{{ Button caption="${okText}" onClick=okClick }}} - {{{ Button caption="${cancelText}" onClick=cancelClick }}} + {{{ Button caption="${cancelText}" onClick=cancelClick type='link'}}}
`) diff --git a/src/config.ts b/src/config.ts index 176239da8..fcbe531a1 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,6 @@ export const urlImages = '/'; export const BASE_API_URL='https://ya-praktikum.tech/api/v2'; +export const BASE_RESOURCES_URL='https://ya-praktikum.tech/api/v2/resources'; export const BASE_URLS={ 'page-login':"/login", 'page-sign-up':"/sign-up", diff --git a/src/main.ts b/src/main.ts index c674467c8..0c32ab025 100644 --- a/src/main.ts +++ b/src/main.ts @@ -27,6 +27,7 @@ const allComponents = { 'MessageList': Components.MessageList, 'Loader': Components.Loader, 'Modal': Components.Modal, + 'ModalAvatar': Components.ModalAvatar, 'FormAuth': Components.FormAuth, 'FormProfile': Components.FormProfile, } diff --git a/src/models/IUser.ts b/src/models/IUser.ts index 132d6a722..6c3ee86a8 100644 --- a/src/models/IUser.ts +++ b/src/models/IUser.ts @@ -7,6 +7,7 @@ export interface IUser { phone: string; email: string; avatar?: string; + id?:string } export interface IAuthData { diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts index 1311d7d63..cc01b35fb 100644 --- a/src/services/user-settings.ts +++ b/src/services/user-settings.ts @@ -21,9 +21,18 @@ const updateUserPassword=async (newUserPasswords: IPasswords) => { Router.getRouter().back(); } +const updateUserAvatar=async (newAvatar:FormData) => { + const result= await userApi.changeUserAvatar(newAvatar); + const error=responseHasError(result); + if(error) throw Error(error); + setStateUser(JSON.parse(result.responseText)); + return JSON.parse(result.responseText); +} + export { updateUserProfile, - updateUserPassword + updateUserPassword, + updateUserAvatar } diff --git a/src/utils/Http.ts b/src/utils/Http.ts index 5f2c7a666..ef923289e 100644 --- a/src/utils/Http.ts +++ b/src/utils/Http.ts @@ -34,11 +34,11 @@ class HTTPTransport { put: HTTPMethod = (url, options = {}) => { - return this.request(this.baseUrl+url, {...options, method: METHODS.PUT,headers:{'Content-Type': 'application/json'}}, options.timeout) as Promise; + return this.request(this.baseUrl+url, {...options, method: METHODS.PUT}, options.timeout) as Promise; }; post: HTTPMethod = (url, options = {})=> { - return this.request(this.baseUrl+url, {...options, method: METHODS.POST,headers:{'Content-Type': 'application/json'}}, options.timeout) as Promise; + return this.request(this.baseUrl+url, {...options, method: METHODS.POST},options.timeout) as Promise; }; delete: HTTPMethod = (url, options = {}) => { @@ -46,7 +46,7 @@ class HTTPTransport { }; request = (url: string, options: IOptionsRequest = {method: METHODS.GET,}, timeout = 5000) => { - const {method, headers, data} = options; + const {method, data,headers} = options; return new Promise((resolve, reject) => { @@ -76,7 +76,12 @@ class HTTPTransport { if (method === METHODS.GET || !data) { xhr.send(); - } else { + } + else if( data instanceof FormData){ + xhr.send(data); + } + else { + xhr.setRequestHeader('Content-Type','application/json'); xhr.send(JSON.stringify(data)); } }); diff --git a/src/utils/load-file.utils.ts b/src/utils/load-file.utils.ts new file mode 100644 index 000000000..1de1ef2e1 --- /dev/null +++ b/src/utils/load-file.utils.ts @@ -0,0 +1,32 @@ + +export const loadNewFileFromDrag=(e:TEvent):FormData|null=>{ + let file=null; + if(e instanceof DragEvent){ + let dt = e.dataTransfer; + if (dt) { + file = dt.files[0]; + } + } + if(e instanceof Event){ + const files = (e.target as unknown as HTMLInputElement)?.files; + if(files)file=files[0]; + } + if(file){ + const formData = new FormData(); + formData.append('avatar', file); + return formData; + } + + return null; +} +export const deleteActive=(e:Event)=>{ + e.preventDefault(); + e.stopPropagation(); + (e.target as HTMLElement)?.classList.remove('highlight'); +} + +export const addActive=(e:Event)=>{ + e.preventDefault(); + e.stopPropagation(); + (e.target as HTMLElement)?.classList.add('highlight'); +} From 7dcce83778daa2e42a7f6a0ae74f63de873e15fe Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sat, 7 Oct 2023 16:50:47 +0400 Subject: [PATCH 11/43] fixed error --- src/components/modal-avatar/modal-avatar.pcss | 2 -- src/components/modal-avatar/modal-avatar.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/modal-avatar/modal-avatar.pcss b/src/components/modal-avatar/modal-avatar.pcss index 3d48a61d2..4ad4943a4 100644 --- a/src/components/modal-avatar/modal-avatar.pcss +++ b/src/components/modal-avatar/modal-avatar.pcss @@ -15,8 +15,6 @@ .modal-avatar__image{ border-radius: 100px; border: 1px var(--red) solid; - width: 100%; - height: 100%; transition: .5s ease; backface-visibility: hidden; opacity: 1; diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index ce3516c3f..f3c1e7790 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -70,7 +70,7 @@ export class ModalAvatar extends Block { getChildren() { const {oldAvatar = '', newAvatar = ''} = this.props; - let result = ''; + let result: string; if (newAvatar) { result = `image avatar` } else { From 84eb9a7c5cb302dfd983e77aefc744dc4035144f Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 8 Oct 2023 00:38:17 +0400 Subject: [PATCH 12/43] added modal-prompt, api chats, service chats --- src/api/chat.ts | 31 ++++++++++ src/components/chat-item/chat-item.ts | 16 +++-- src/components/chat-list/chat-list.pcss | 5 +- src/components/chat-list/chat-list.ts | 45 +++++++++++--- src/components/index.ts | 1 + src/components/message-list/message-list.ts | 3 +- src/components/modal-prompt/index.ts | 2 + src/components/modal-prompt/modal-prompt.pcss | 49 +++++++++++++++ src/components/modal-prompt/modal-prompt.ts | 62 +++++++++++++++++++ src/components/modal/modal.ts | 5 +- src/main.ts | 6 +- src/models/IChat.ts | 8 +-- src/pages/chat-page/page-chat.ts | 24 +++---- src/services/app.ts | 14 ++++- src/services/chat.ts | 22 +++++++ src/utils/Router.ts | 4 ++ 16 files changed, 257 insertions(+), 40 deletions(-) create mode 100644 src/api/chat.ts create mode 100644 src/components/modal-prompt/index.ts create mode 100644 src/components/modal-prompt/modal-prompt.pcss create mode 100644 src/components/modal-prompt/modal-prompt.ts create mode 100644 src/services/chat.ts diff --git a/src/api/chat.ts b/src/api/chat.ts new file mode 100644 index 000000000..bd2f404e1 --- /dev/null +++ b/src/api/chat.ts @@ -0,0 +1,31 @@ +import HTTPTransport from "../utils/Http.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 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 logOut() { + return this.httpTransport.post(this.baseUrl + '/logout'); + }*/ +} + +export default ChatApi diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index df30ecdd1..16e9c1940 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -22,16 +22,20 @@ export class ChatItem extends Block {
${chat.title}
-
- ${chat.last_message.time} -
+ ${chat.last_message?`
+ ${chat.last_message?.time} +
`:``} +
-
+ ${chat.last_message?`
-

${chat.last_message.content}

+

${chat.last_message?.content}

{{{ Button type="number" caption=${chat.unread_count}}}} -
+
`:`
+

no messages

+
`} + `) } diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss index 84e7743a8..674220f07 100644 --- a/src/components/chat-list/chat-list.pcss +++ b/src/components/chat-list/chat-list.pcss @@ -8,7 +8,9 @@ .chat-list__header { display: flex; - justify-content: flex-end; + justify-content: space-between; + align-items: center; + margin:10px 0; } .chat-list__search { @@ -22,4 +24,3 @@ list-style-type: none; } } - diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 23a34af67..504fcd724 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -1,33 +1,60 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps, Block} from "../../utils/Block"; import {IChat} from "../../models/IChat.ts"; import {ChatItem} from "../index.ts"; import {IChatItemProps} from "../chat-item/chat-item.ts"; +import {IUser} from "../../models/IUser.ts"; +import modalController from "../../utils/modal-controller.ts"; +import ModalPrompt from "../modal-prompt"; +import {createChat} from "../../services/chat.ts"; +import {initChatPage} from "../../services/app.ts"; interface IChatListProps extends IProps { - list:IChat[] + list: IChat[], + currentUser: IUser | null, + showModalAddChat:()=>void } export class ChatList extends Block { constructor(props: IChatListProps) { + props.currentUser = window.user; + props.list=window.chats||[]; + props.showModalAddChat = ()=>{ + modalController.addModal((new ModalPrompt({ + caption: 'Add Chat', + labelText: 'Title Chat', + okText: 'Add Chat', + ref:"modal", + okClick: (result:string) => { + console.log(result); + createChat(result).then(()=>initChatPage()) + }, + })) as unknown as Block); + modalController.openModal(); + } + super(props); + console.log(props.list) } - getChats(list:IChat[]):string{ - if(!list||list.length===0)return ''; - return list.map(chat=>{ - const chatBlock=new ChatItem({chat:chat} as IChatItemProps) - return(` + getChats(list: IChat[]): string { + if (!list || list.length === 0) return ''; + return list.map(chat => { + const chatBlock = new ChatItem({chat: chat} as IChatItemProps) + return (` ${chatBlock.renderForList()} `) }).join('') } + protected render(): string { - const {list } = this._props as IChatListProps; + const {list,currentUser} = this._props as IChatListProps; return (`
{{{ InputSearch }}} diff --git a/src/components/index.ts b/src/components/index.ts index 627905dc2..4b568059f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -8,6 +8,7 @@ export { default as FormAuth } from './form-auth'; export {default as FormProfile } from './form-profile'; export {default as Modal } from './modal'; export {default as ModalAvatar } from './modal-avatar'; +export {default as ModalPrompt } from './modal-prompt'; export {default as Input } from './input'; export { default as ChatItem } from './chat-item'; export { default as InputSearch } from './input-search'; diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index ec9ab93d3..62187606b 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -58,11 +58,12 @@ export class MessageList extends Block { protected render(): string { const { messageList,currentUser,message='' } = this.props; const {avatar,display_name}=currentUser; + console.log(currentUser) return (`
- {{{ Avatar image=${avatar} size='sm'}}} + {{{ Avatar imageUrl='${avatar}' size='sm' }}} ${display_name}
{{{ Button type="dots"}}} diff --git a/src/components/modal-prompt/index.ts b/src/components/modal-prompt/index.ts new file mode 100644 index 000000000..2c15b2039 --- /dev/null +++ b/src/components/modal-prompt/index.ts @@ -0,0 +1,2 @@ +import './modal-prompt.pcss'; +export { ModalPrompt as default } from './modal-prompt.ts'; diff --git a/src/components/modal-prompt/modal-prompt.pcss b/src/components/modal-prompt/modal-prompt.pcss new file mode 100644 index 000000000..4ad4943a4 --- /dev/null +++ b/src/components/modal-prompt/modal-prompt.pcss @@ -0,0 +1,49 @@ +.modal-avatar{ + display: flex; + flex-direction: column; + align-items: center; + position: relative; + z-index: 10; + border: 1px var(--white) solid; + border-radius: 20px; + padding: 20px 15px; + + &.highlight{ + border-color: var(--red-light); + } + + .modal-avatar__image{ + border-radius: 100px; + border: 1px var(--red) solid; + transition: .5s ease; + backface-visibility: hidden; + opacity: 1; + display: block; + height: 130px; + width: 130px; + + } + .modal-avatar__empty{ + background: url("../../assets/icons/image.svg") no-repeat center; + position: relative; + height: 130px; + width: 130px; + border-radius: 100px; + border: 1px var(--red) solid; + } + .modal-avatar__label { + margin-top:20px; + font-weight: bold; + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + .modal-avatar__input{ + width: 0.1px; + height: 0.1px; + opacity: 0; + position: absolute; + z-index: -10; + } +} diff --git a/src/components/modal-prompt/modal-prompt.ts b/src/components/modal-prompt/modal-prompt.ts new file mode 100644 index 000000000..2a3296268 --- /dev/null +++ b/src/components/modal-prompt/modal-prompt.ts @@ -0,0 +1,62 @@ +import {IProps, Block} from "../../utils/Block"; +import modalController from "../../utils/modal-controller.ts"; + +interface IModalPromptProps extends IProps { + caption: string, + labelText: string, + okText: string, + okClick?: (result:string) => void, + okInputClick?: (event:Event) => void, + cancelClick?: () => void, + ref?:string +} + +export class ModalPrompt extends Block { + constructor(props: IModalPromptProps) { + props.okInputClick = (event:Event) => { + event.preventDefault(); + const input = this.refs.modal.getRefs().input.value(); + if (!input) { + return; + } + this.props.okClick&&this.props.okClick(input); + modalController.closeModal(); + } + props.cancelClick = () => { + modalController.closeModal(); + } + + + super({ + ...props + }) + } + + + public get props() { + return this._props as IModalPromptProps; + } + + getChildren() { + const {labelText = ''} = this.props; + return ( + ` + {{{ InputShort label='${labelText}' type='text' name='input' validate=validate.login ref='input' }}} + ` + ) + } + + protected render(): string { + return (` + {{{ Modal + caption='${this.props.caption}' + okText='${this.props.okText}' + cancelText='Cancel' + okClick=okInputClick + cancelClick=cancelClick + children="${this.getChildren()}" + ref='modal' + }}} + `) + } +} diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index c04f237bf..69a380f9a 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,16 +1,19 @@ import {IProps, Block} from "../../utils/Block"; +import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; interface IModalProps extends IProps { caption: string, okText: string, - okClick: () => void, + okClick: (event: Event) => void, cancelText: string, cancelClick: () => void, children?: string, + validate?: IValidateType, } export class Modal extends Block { constructor(props: IModalProps) { + props.validate= ALL_VALIDATE_FIELDS; super({ ...props }) diff --git a/src/main.ts b/src/main.ts index 0c32ab025..9a28d029b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,7 +6,8 @@ import Router from "./utils/Router.ts"; import Block from "./utils/Block.ts"; import {BASE_URLS} from "./config.ts"; import {IUser} from "./models/IUser.ts"; -import {initialStateApp} from "./services/app.ts"; +import { initialStateApp} from "./services/app.ts"; +import {IChat} from "./models/IChat.ts"; @@ -28,6 +29,7 @@ const allComponents = { 'Loader': Components.Loader, 'Modal': Components.Modal, 'ModalAvatar': Components.ModalAvatar, + 'ModalPrompt': Components.ModalPrompt, 'FormAuth': Components.FormAuth, 'FormProfile': Components.FormProfile, } @@ -38,6 +40,7 @@ Object.entries(allComponents).forEach(([name, component]) => { declare global { interface Window { user: IUser|null; + chats:IChat[]|null; } type Nullable = T | null; @@ -45,6 +48,7 @@ declare global { } await initialStateApp(); + const router = new Router(".app"); router.use(BASE_URLS['page-default'], Pages.PageChat as unknown as Block) diff --git a/src/models/IChat.ts b/src/models/IChat.ts index ba6a28887..9281696d6 100644 --- a/src/models/IChat.ts +++ b/src/models/IChat.ts @@ -3,10 +3,10 @@ import {IUser} from "./IUser.ts"; export interface IChat { id: number; title: string; - avatar: string; + avatar?: string; unread_count: number; created_by: number; - last_message: ILastMessage; + last_message?: ILastMessage; } export interface ILastMessage { @@ -14,7 +14,3 @@ export interface ILastMessage { time: string; content: string; } - - - - diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index f24b90fb9..7b741c91a 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -1,32 +1,34 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {mockUser} from "../../mocks/user-profile.mocks.ts"; -import {mockListChats} from "../../mocks/chat.mocks.ts"; import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import Router from "../../utils/Router.ts"; import {BASE_URLS} from "../../config.ts"; +import {initChatPage} from "../../services/app.ts"; export interface IPageChatProps extends IProps { - currentUser:IUser, + currentUser:IUser|null, chatList:IChat[], messageList:IChatMessage[], } export class PageChat extends Block { constructor() { - console.log('window.user', window.user) - const props:IPageChatProps={ - currentUser:mockUser, - chatList:mockListChats, - messageList:mockListMessages, - events:{} + const props: IPageChatProps = { + currentUser: window.user||null, + chatList: [], + messageList: mockListMessages, + events: {} } super(props); - if(!window.user) Router.getRouter().go(BASE_URLS['page-login']); + if (!window.user) Router.getRouter().go(BASE_URLS['page-login']); + initChatPage(); + console.log(window.chats) + } + public get props(){ + return this._props as IPageChatProps; } - protected render(): string { return (`
diff --git a/src/services/app.ts b/src/services/app.ts index 306a44699..3c169af66 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -2,6 +2,7 @@ import {getUser} from "./auth.ts"; import Router from "../utils/Router.ts"; import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; +import {getChats} from "./chat.ts"; const initialStateApp = async () => { @@ -13,18 +14,25 @@ const initialStateApp = async () => { return; } setStateUser(result); - console.log('window.user_initial', window.user,Router.getRouter()) + console.log('window.user_initial', window.user,Router.getRouter()); + await initChatPage(); /*const chats = await getChats(); window.store.set({user: me, chats}); navigate('emails')*/ } - +const initChatPage = async () => { + const result=await getChats(); + console.log('window.chat_initial', result) + window.chats=result; +} const setStateUser=(user:IUser)=>{ window.user=user; } export{ initialStateApp, - setStateUser + setStateUser, + initChatPage, + } diff --git a/src/services/chat.ts b/src/services/chat.ts new file mode 100644 index 000000000..52adb5162 --- /dev/null +++ b/src/services/chat.ts @@ -0,0 +1,22 @@ +import {responseHasError} from "../utils/api.utils.ts"; +import ChatApi from "../api/chat.ts"; +import {IChat} from "../models/IChat.ts"; + + +const chatApi=new ChatApi('/chats'); +const getChats= async ():Promise => { + const result=await chatApi.getChats() as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + return JSON.parse( result.responseText); +} +const createChat= async (title:string):Promise => { + const result=await chatApi.createChat(title) as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + return JSON.parse( result.responseText); +} +export { + getChats, + createChat +} diff --git a/src/utils/Router.ts b/src/utils/Router.ts index 47b2d3bff..9e3d18d20 100644 --- a/src/utils/Router.ts +++ b/src/utils/Router.ts @@ -85,6 +85,10 @@ class Router { forward() { this.history?.forward(); + } + update() { + this.history?.go(0); + } getRoute(pathname:string) { From 0897b32f00b92af2520eaa0f6b38ba1c158a441a Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 8 Oct 2023 15:35:39 +0400 Subject: [PATCH 13/43] added menu-message, menu-item --- src/assets/icons/chat-avatar.svg | 15 +++++ src/assets/icons/circle-plus.svg | 7 +++ src/assets/icons/circle-x.svg | 1 + src/assets/icons/file.svg | 12 ++++ src/assets/icons/image.svg | 2 +- src/assets/icons/location.svg | 1 + src/components/avatar/avatar.pcss | 2 +- src/components/avatar/avatar.ts | 9 +-- src/components/chat-item/chat-item.pcss | 5 +- src/components/chat-item/chat-item.ts | 2 +- src/components/chat-list/chat-list.ts | 10 +++- src/components/index.ts | 2 + src/components/menu-item/index.ts | 3 + src/components/menu-item/menu-item.pcss | 41 +++++++++++++ src/components/menu-item/menu-item.ts | 35 +++++++++++ src/components/menu-message/index.ts | 2 + src/components/menu-message/menu-message.pcss | 18 ++++++ src/components/menu-message/menu-message.ts | 51 ++++++++++++++++ src/components/message-list/message-list.pcss | 2 +- src/components/message-list/message-list.ts | 59 +++++++++++-------- src/main.ts | 3 + src/styles/fonts.pcss | 3 +- src/styles/reset.pcss | 4 +- 23 files changed, 252 insertions(+), 37 deletions(-) create mode 100644 src/assets/icons/chat-avatar.svg create mode 100644 src/assets/icons/circle-plus.svg create mode 100644 src/assets/icons/circle-x.svg create mode 100644 src/assets/icons/file.svg create mode 100644 src/assets/icons/location.svg create mode 100644 src/components/menu-item/index.ts create mode 100644 src/components/menu-item/menu-item.pcss create mode 100644 src/components/menu-item/menu-item.ts create mode 100644 src/components/menu-message/index.ts create mode 100644 src/components/menu-message/menu-message.pcss create mode 100644 src/components/menu-message/menu-message.ts diff --git a/src/assets/icons/chat-avatar.svg b/src/assets/icons/chat-avatar.svg new file mode 100644 index 000000000..9ca46517d --- /dev/null +++ b/src/assets/icons/chat-avatar.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/src/assets/icons/circle-plus.svg b/src/assets/icons/circle-plus.svg new file mode 100644 index 000000000..aa341935b --- /dev/null +++ b/src/assets/icons/circle-plus.svg @@ -0,0 +1,7 @@ + + + + diff --git a/src/assets/icons/circle-x.svg b/src/assets/icons/circle-x.svg new file mode 100644 index 000000000..78d34da37 --- /dev/null +++ b/src/assets/icons/circle-x.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg new file mode 100644 index 000000000..bae57ea4b --- /dev/null +++ b/src/assets/icons/file.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg index 3f124e92f..b4b47986e 100644 --- a/src/assets/icons/image.svg +++ b/src/assets/icons/image.svg @@ -1,4 +1,4 @@ - diff --git a/src/assets/icons/location.svg b/src/assets/icons/location.svg new file mode 100644 index 000000000..9b13481e1 --- /dev/null +++ b/src/assets/icons/location.svg @@ -0,0 +1 @@ + diff --git a/src/components/avatar/avatar.pcss b/src/components/avatar/avatar.pcss index 9f18ccde6..d5590db1a 100644 --- a/src/components/avatar/avatar.pcss +++ b/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; diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 47af6a53a..fdc8436af 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -16,14 +16,15 @@ export class Avatar extends Block { ...props, events: { click: () => { - console.log('cancel') + if(!props.isLoadAvatar)return; + modalController.addModal((new ModalAvatar({ + oldAvatar:window.user?.avatar||'' + })) as unknown as Block); modalController.openModal(); } } }) - modalController.addModal((new ModalAvatar({ - oldAvatar:window.user?.avatar||'' - })) as unknown as Block); + } protected render(): string { diff --git a/src/components/chat-item/chat-item.pcss b/src/components/chat-item/chat-item.pcss index 914f78c0d..c0f391fd0 100644 --- a/src/components/chat-item/chat-item.pcss +++ b/src/components/chat-item/chat-item.pcss @@ -26,6 +26,10 @@ .chat-item__caption__name { font-weight: bold; + cursor:pointer; + &:hover{ + opacity: 70%; + } } } @@ -46,4 +50,3 @@ text-overflow: ellipsis; } } - diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index 16e9c1940..e7f6b0e95 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -7,7 +7,7 @@ export interface IChatItemProps extends IProps { export class ChatItem extends Block { constructor(props: IChatItemProps) { - super(props); + super(props) } public renderForList=this.render; diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 504fcd724..c358a6e81 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -32,7 +32,15 @@ export class ChatList extends Block { modalController.openModal(); } - super(props); + super({ + ...props, + events: { + click: (e:Event) => { + if(!(e.target as HTMLElement).className.includes('chat-item__caption__name')) return; + console.log('load chat') + } + } + }) console.log(props.list) } diff --git a/src/components/index.ts b/src/components/index.ts index 4b568059f..3e66f5f0e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -17,3 +17,5 @@ export {default as MessageList } from './message-list'; export {default as Message } from './message'; export {default as Badge } from './badge'; export { default as Error } from './error'; +export { default as MenuItem } from './menu-item'; +export { default as MenuMessage } from './menu-message'; diff --git a/src/components/menu-item/index.ts b/src/components/menu-item/index.ts new file mode 100644 index 000000000..a3c2a085c --- /dev/null +++ b/src/components/menu-item/index.ts @@ -0,0 +1,3 @@ +import './menu-item.pcss'; + +export {MenuItem as default} from './menu-item.ts'; diff --git a/src/components/menu-item/menu-item.pcss b/src/components/menu-item/menu-item.pcss new file mode 100644 index 000000000..515ba8169 --- /dev/null +++ b/src/components/menu-item/menu-item.pcss @@ -0,0 +1,41 @@ +.menu-item { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 5px 5px 5px 5px; + cursor: pointer; + + + &:hover{ + opacity: 80%; + } + + .menu-item__icon { + margin-right: 5px; + width: 22px; + height: 22px; + background-size: contain; + background-repeat: no-repeat; + padding: 1px; + + &.menu-item__icon_media { + background-image: url("../../assets/icons/image.svg") ; + } + &.menu-item__icon_file { + background-image: url("../../assets/icons/file.svg"); + } + &.menu-item__icon_location { + background-image: url("../../assets/icons/location.svg"); + } + &.menu-item__icon_plus{ + background-image: url("../../assets/icons/circle-plus.svg"); + } + &.menu-item__icon_delete{ + background-image: url("../../assets/icons/circle-x.svg") ; + } + } + .menu-item__caption{ + font-size: 12px; + font-weight: 500; + } +} diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts new file mode 100644 index 000000000..1fcffaa3e --- /dev/null +++ b/src/components/menu-item/menu-item.ts @@ -0,0 +1,35 @@ +import {IProps,Block} from "../../utils/Block"; + + +export interface IMenuItemProps extends IProps { + caption:string, + icon:'media'|'file'|'location'|'plus'|'delete'; + onClick:()=>void; +} + +export class MenuItem extends Block { + constructor(props: IMenuItemProps) { + super({ + ...props, + events: { + click: () => { + this.props.onClick(); + } + } + }) + } + + public renderForList=this.render; + public get props(){ + return this._props as IMenuItemProps; + } + protected render(): string { + const { caption='',icon} = this.props; + return (` +
  • +
    +

    ${caption}

    +
    • + `) + } +} diff --git a/src/components/menu-message/index.ts b/src/components/menu-message/index.ts new file mode 100644 index 000000000..c4fea886a --- /dev/null +++ b/src/components/menu-message/index.ts @@ -0,0 +1,2 @@ +import './menu-message.pcss'; +export { MenuMessage as default } from './menu-message.ts'; diff --git a/src/components/menu-message/menu-message.pcss b/src/components/menu-message/menu-message.pcss new file mode 100644 index 000000000..ea1c55dab --- /dev/null +++ b/src/components/menu-message/menu-message.pcss @@ -0,0 +1,18 @@ +.menu-message { + position: absolute; + top:-150%; + left:0; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 10px; + + &.opened{ + display: flex; + } + &.hide{ + display: none; + } + +} diff --git a/src/components/menu-message/menu-message.ts b/src/components/menu-message/menu-message.ts new file mode 100644 index 000000000..b62bef6a1 --- /dev/null +++ b/src/components/menu-message/menu-message.ts @@ -0,0 +1,51 @@ +import {IProps, Block} from "../../utils/Block"; +import {IChat} from "../../models/IChat.ts"; + + +interface IMenuMessageProps extends IProps { + currentChat: IChat | null, + isOpenedMenu: boolean, + addMedia: () => void, + addFile: () => void, + addLocation: () => void, + closeMenu: () => void, +} + +export class MenuMessage extends Block { + constructor(props: IMenuMessageProps) { + props.currentChat = window.currentChat; + props.addMedia = () => { + console.log('add media!'); + this.props.closeMenu(); + } + props.addFile = () => { + console.log('add file!'); + this.props.closeMenu(); + } + props.addLocation = () => { + console.log('add location!'); + this.props.closeMenu(); + } + + super({ + ...props + }) + } + + public get props() { + return this._props as IMenuMessageProps; + } + + protected render(): string { + const {isOpenedMenu = false} = this.props; + return (` + + `) + } +} diff --git a/src/components/message-list/message-list.pcss b/src/components/message-list/message-list.pcss index efea3fb08..303aff59e 100644 --- a/src/components/message-list/message-list.pcss +++ b/src/components/message-list/message-list.pcss @@ -40,6 +40,7 @@ } .message-list__footer { + position: relative; width: 100%; max-height: 200px; padding: 10px; @@ -59,4 +60,3 @@ } } - diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index 62187606b..26b01b41b 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -1,41 +1,52 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps, Block} from "../../utils/Block"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; -import { Message} from "../index.ts"; +import {Message} from "../index.ts"; import {IMessageProps} from "../message/message.ts"; import {validateMessage} from "../../utils/validates.utils.ts"; -interface IMessageListProps extends IProps{ - messageList:IChatMessage[]; - currentUser:IUser; - onBlurMessage?:()=>void; - message?:string; - onClickSend?:()=>void; +interface IMessageListProps extends IProps { + messageList: IChatMessage[]; + currentUser: IUser; + onBlurMessage?: () => void; + message?: string; + onClickSend?: () => void; + openMenuMessage?: () => void; + isOpenedMenuMessage: boolean; } export class MessageList extends Block { constructor(props: IMessageListProps) { - props.onBlurMessage= () => this.validate(); - props.onClickSend= () => { - if(!validateMessage(this.valueMessage()))console.log('Send Message:'+this.valueMessage()); + props.isOpenedMenuMessage = false; + props.onBlurMessage = () => this.validate(); + props.onClickSend = () => { + if (!validateMessage(this.valueMessage())) console.log('Send Message:' + this.valueMessage()); else console.log('Error! Can not send!') } + props.openMenuMessage = () => { + this.props.isOpenedMenuMessage = !this.props.isOpenedMenuMessage; + this.setProps(this.props); + } + super(props); } - public get props(){ + + public get props() { return this._props as IMessageListProps; } + public valueMessage() { if (!this.validate()) { return ''; } return this.refs?.message.value() } + private validate() { - const value =this.refs?.message.value(); + const value = this.refs?.message.value(); const error = validateMessage(value); - this.props.message=value; + this.props.message = value; if (error) { console.log('Message can not be blank') this.setProps(this.props); @@ -44,21 +55,22 @@ export class MessageList extends Block { this.setProps(this.props); return true; } - getListMessages(list:IChatMessage[]):string{ - if(!list||list.length===0)return ''; - return list.map(message=>{ - const messageBlock=new Message({message:message,myMessage:message.main||false} as IMessageProps) - return(` + + getListMessages(list: IChatMessage[]): string { + if (!list || list.length === 0) return ''; + return list.map(message => { + const messageBlock = new Message({message: message, myMessage: message.main || false} as IMessageProps) + return (`
    ${messageBlock.renderForList()}
    `) }).join('') } + protected render(): string { - const { messageList,currentUser,message='' } = this.props; - const {avatar,display_name}=currentUser; - console.log(currentUser) + const {messageList, currentUser, message = '',isOpenedMenuMessage} = this.props; + const {avatar, display_name} = currentUser; return (`
    @@ -72,7 +84,8 @@ export class MessageList extends Block { ${this.getListMessages(messageList)}
    - {{{ Button type="paperclip"}}} + {{{ MenuMessage isOpenedMenu=${isOpenedMenuMessage } closeMenu=openMenuMessage}}} + {{{ Button type="paperclip" onClick=openMenuMessage}}} {{{ Input ref="message" type="text" diff --git a/src/main.ts b/src/main.ts index 9a28d029b..bf46bd174 100644 --- a/src/main.ts +++ b/src/main.ts @@ -32,6 +32,8 @@ const allComponents = { 'ModalPrompt': Components.ModalPrompt, 'FormAuth': Components.FormAuth, 'FormProfile': Components.FormProfile, + 'MenuItem': Components.MenuItem, + 'MenuMessage': Components.MenuMessage, } Object.entries(allComponents).forEach(([name, component]) => { registerComponent(name, component); @@ -41,6 +43,7 @@ declare global { interface Window { user: IUser|null; chats:IChat[]|null; + currentChat:IChat|null; } type Nullable = T | null; diff --git a/src/styles/fonts.pcss b/src/styles/fonts.pcss index 5fb50e506..3d0023111 100644 --- a/src/styles/fonts.pcss +++ b/src/styles/fonts.pcss @@ -5,5 +5,6 @@ text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + color: var(--gray-dark); + font-size: 14px; } - diff --git a/src/styles/reset.pcss b/src/styles/reset.pcss index 530af4f40..144d0f0ce 100644 --- a/src/styles/reset.pcss +++ b/src/styles/reset.pcss @@ -1,8 +1,6 @@ * { box-sizing: border-box!important; - color: var(--gray-dark); - font-size: 14px; - font-family: Arial, serif; + margin: 0; padding: 0; } From 3cdd611a1d9a6ce138129e939b128505be203907 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 8 Oct 2023 15:49:24 +0400 Subject: [PATCH 14/43] added menu-chat --- src/components/index.ts | 1 + src/components/menu-chat/index.ts | 2 + src/components/menu-chat/menu-chat.pcss | 18 +++++++ src/components/menu-chat/menu-chat.ts | 51 +++++++++++++++++++ src/components/menu-item/menu-item.pcss | 3 ++ src/components/menu-item/menu-item.ts | 2 +- src/components/menu-message/menu-message.pcss | 14 +++-- src/components/menu-message/menu-message.ts | 2 +- src/components/message-list/message-list.pcss | 1 + src/components/message-list/message-list.ts | 12 ++++- src/main.ts | 1 + 11 files changed, 100 insertions(+), 7 deletions(-) create mode 100644 src/components/menu-chat/index.ts create mode 100644 src/components/menu-chat/menu-chat.pcss create mode 100644 src/components/menu-chat/menu-chat.ts diff --git a/src/components/index.ts b/src/components/index.ts index 3e66f5f0e..a62539eda 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -19,3 +19,4 @@ export {default as Badge } from './badge'; export { default as Error } from './error'; export { default as MenuItem } from './menu-item'; export { default as MenuMessage } from './menu-message'; +export { default as MenuChat } from './menu-chat'; diff --git a/src/components/menu-chat/index.ts b/src/components/menu-chat/index.ts new file mode 100644 index 000000000..103aeedaa --- /dev/null +++ b/src/components/menu-chat/index.ts @@ -0,0 +1,2 @@ +import './menu-chat.pcss'; +export { MenuChat as default } from './menu-chat.ts'; diff --git a/src/components/menu-chat/menu-chat.pcss b/src/components/menu-chat/menu-chat.pcss new file mode 100644 index 000000000..ea1c55dab --- /dev/null +++ b/src/components/menu-chat/menu-chat.pcss @@ -0,0 +1,18 @@ +.menu-message { + position: absolute; + top:-150%; + left:0; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 10px; + + &.opened{ + display: flex; + } + &.hide{ + display: none; + } + +} diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts new file mode 100644 index 000000000..1282bed0e --- /dev/null +++ b/src/components/menu-chat/menu-chat.ts @@ -0,0 +1,51 @@ +import {IProps, Block} from "../../utils/Block"; +import {IChat} from "../../models/IChat.ts"; + + +interface IMenuChatProps extends IProps { + currentChat: IChat | null, + isOpenedMenu: boolean, + addUser: () => void, + deleteUser: () => void, + changeAvatarChat: () => void, + closeMenu: () => void, +} + +export class MenuChat extends Block { + constructor(props: IMenuChatProps) { + props.currentChat = window.currentChat; + props.addUser = () => { + console.log('add user!'); + this.props.closeMenu(); + } + props.deleteUser = () => { + console.log('delete User!'); + this.props.closeMenu(); + } + props.changeAvatarChat = () => { + console.log(' add Avatar Chat!'); + this.props.closeMenu(); + } + + super({ + ...props + }) + } + + public get props() { + return this._props as IMenuChatProps; + } + + protected render(): string { + const {isOpenedMenu = false} = this.props; + return (` + + `) + } +} diff --git a/src/components/menu-item/menu-item.pcss b/src/components/menu-item/menu-item.pcss index 515ba8169..8a659e931 100644 --- a/src/components/menu-item/menu-item.pcss +++ b/src/components/menu-item/menu-item.pcss @@ -33,6 +33,9 @@ &.menu-item__icon_delete{ background-image: url("../../assets/icons/circle-x.svg") ; } + &.menu-item__icon_avatar{ + background-image: url("../../assets/icons/chat-avatar.svg") ; + } } .menu-item__caption{ font-size: 12px; diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 1fcffaa3e..3c74d2163 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -3,7 +3,7 @@ import {IProps,Block} from "../../utils/Block"; export interface IMenuItemProps extends IProps { caption:string, - icon:'media'|'file'|'location'|'plus'|'delete'; + icon:'media'|'file'|'location'|'plus'|'delete'|'avatar'; onClick:()=>void; } diff --git a/src/components/menu-message/menu-message.pcss b/src/components/menu-message/menu-message.pcss index ea1c55dab..cf71d7382 100644 --- a/src/components/menu-message/menu-message.pcss +++ b/src/components/menu-message/menu-message.pcss @@ -1,13 +1,21 @@ -.menu-message { +.menu{ position: absolute; - top:-150%; - left:0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px; + &.menu-message{ + top:-150%; + left:0; + } + + &.menu-chat{ + bottom:-150%; + right:0; + } + &.opened{ display: flex; } diff --git a/src/components/menu-message/menu-message.ts b/src/components/menu-message/menu-message.ts index b62bef6a1..41030e873 100644 --- a/src/components/menu-message/menu-message.ts +++ b/src/components/menu-message/menu-message.ts @@ -39,7 +39,7 @@ export class MenuMessage extends Block { protected render(): string { const {isOpenedMenu = false} = this.props; return (` -
      ${this.getListMessages(messageList)} diff --git a/src/main.ts b/src/main.ts index bf46bd174..bd0a27050 100644 --- a/src/main.ts +++ b/src/main.ts @@ -34,6 +34,7 @@ const allComponents = { 'FormProfile': Components.FormProfile, 'MenuItem': Components.MenuItem, 'MenuMessage': Components.MenuMessage, + 'MenuChat': Components.MenuChat, } Object.entries(allComponents).forEach(([name, component]) => { registerComponent(name, component); From 095fbe97b247cf9ff46cf1509b92ba005573be99 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 8 Oct 2023 18:44:51 +0400 Subject: [PATCH 15/43] added deleting and adding user --- src/api/chat.ts | 25 +++-- src/api/user-settings.ts | 3 + src/components/chat-item/chat-item.ts | 7 +- src/components/chat-list/chat-list.ts | 39 ++++--- src/components/index.ts | 2 + src/components/menu-chat/menu-chat.ts | 24 ++++- src/components/message-list/message-list.pcss | 13 +++ src/components/message-list/message-list.ts | 16 ++- src/components/modal-chat-users/index.ts | 2 + .../modal-chat-users/modal-chat-users.pcss | 5 + .../modal-chat-users/modal-chat-users.ts | 102 ++++++++++++++++++ src/components/user-item/index.ts | 3 + src/components/user-item/user-item.pcss | 37 +++++++ src/components/user-item/user-item.ts | 32 ++++++ src/main.ts | 5 +- src/models/IChat.ts | 6 ++ src/pages/chat-page/page-chat.ts | 18 ++-- src/services/app.ts | 29 +++-- src/services/chat.ts | 29 ++++- src/services/user-settings.ts | 10 +- src/utils/user.utils.ts | 7 ++ 21 files changed, 363 insertions(+), 51 deletions(-) create mode 100644 src/components/modal-chat-users/index.ts create mode 100644 src/components/modal-chat-users/modal-chat-users.pcss create mode 100644 src/components/modal-chat-users/modal-chat-users.ts create mode 100644 src/components/user-item/index.ts create mode 100644 src/components/user-item/user-item.pcss create mode 100644 src/components/user-item/user-item.ts create mode 100644 src/utils/user.utils.ts diff --git a/src/api/chat.ts b/src/api/chat.ts index bd2f404e1..899bdcea0 100644 --- a/src/api/chat.ts +++ b/src/api/chat.ts @@ -1,4 +1,5 @@ import HTTPTransport from "../utils/Http.ts"; +import {IChatUsersData} from "../models/IChat.ts"; export class ChatApi { private httpTransport = new HTTPTransport(); @@ -9,23 +10,27 @@ export class ChatApi { } public getChats() { - return this.httpTransport.get(this.baseUrl); + return this.httpTransport.get(this.baseUrl); } - public createChat(title:string) { - return this.httpTransport.post(this.baseUrl,{data:{title: title}}); + public createChat(title: string) { + return this.httpTransport.post(this.baseUrl, {data: {title: title}}); } - /* public signUp(userData: IUser) { - return this.httpTransport.post(this.baseUrl + '/signup', {data: userData}); + + 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 signIn(userData: IAuthData) { - return this.httpTransport.post(this.baseUrl + '/signin', {data: userData}); + public getChatUsers(id: string) { + return this.httpTransport.get(this.baseUrl + `/${id}/users`); } - public logOut() { - return this.httpTransport.post(this.baseUrl + '/logout'); - }*/ + /* public logOut() { + return this.httpTransport.post(this.baseUrl + '/logout'); + }*/ } export default ChatApi diff --git a/src/api/user-settings.ts b/src/api/user-settings.ts index 875bdb542..30100de8f 100644 --- a/src/api/user-settings.ts +++ b/src/api/user-settings.ts @@ -21,6 +21,9 @@ export class UserSettingsApi { 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 diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index e7f6b0e95..fa548f9bf 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -3,11 +3,14 @@ import {IChat} from "../../models/IChat.ts"; export interface IChatItemProps extends IProps { chat:IChat, + onClick:()=>void } export class ChatItem extends Block { constructor(props: IChatItemProps) { - super(props) + super({ + ...props, + }) } public renderForList=this.render; @@ -19,7 +22,7 @@ export class ChatItem extends Block { {{{ Avatar imageUrl=${chat.avatar} isLoadAvatar=false size='sm' }}}
    -
    +
    ${chat.title}
    ${chat.last_message?`
    diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index c358a6e81..8606cebd4 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -6,27 +6,29 @@ import {IUser} from "../../models/IUser.ts"; import modalController from "../../utils/modal-controller.ts"; import ModalPrompt from "../modal-prompt"; import {createChat} from "../../services/chat.ts"; -import {initChatPage} from "../../services/app.ts"; +import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; + interface IChatListProps extends IProps { list: IChat[], currentUser: IUser | null, - showModalAddChat:()=>void + showModalAddChat: () => void, + setCurrentChat:(chat:IChat|null)=>void } export class ChatList extends Block { constructor(props: IChatListProps) { props.currentUser = window.user; - props.list=window.chats||[]; - props.showModalAddChat = ()=>{ + props.list = window.chats || []; + props.showModalAddChat = () => { modalController.addModal((new ModalPrompt({ caption: 'Add Chat', labelText: 'Title Chat', okText: 'Add Chat', - ref:"modal", - okClick: (result:string) => { + ref: "modal", + okClick: (result: string) => { console.log(result); - createChat(result).then(()=>initChatPage()) + createChat(result).then(() => initChatPage()) }, })) as unknown as Block); modalController.openModal(); @@ -35,19 +37,30 @@ export class ChatList extends Block { super({ ...props, events: { - click: (e:Event) => { - if(!(e.target as HTMLElement).className.includes('chat-item__caption__name')) return; - console.log('load chat') + click: (e: Event) => { + if (!(e.target as HTMLElement).className.includes('chat-item__caption__name')) return; + + const currentChat = (e.target as HTMLElement).id; + + setStateCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); + this.props.setCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); } } }) - console.log(props.list) } + public get props(){ + return this._props as IChatListProps; + } getChats(list: IChat[]): string { if (!list || list.length === 0) return ''; return list.map(chat => { - const chatBlock = new ChatItem({chat: chat} as IChatItemProps) + const chatBlock = new ChatItem({ + chat: chat, onClick: () => { + console.log('item chat') + this.props.setCurrentChat(chat); + } + } as IChatItemProps) return (` ${chatBlock.renderForList()} `) @@ -55,7 +68,7 @@ export class ChatList extends Block { } protected render(): string { - const {list,currentUser} = this._props as IChatListProps; + const {list, currentUser} = this._props as IChatListProps; return (`
    diff --git a/src/components/index.ts b/src/components/index.ts index a62539eda..195641d1f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -9,8 +9,10 @@ export {default as FormProfile } from './form-profile'; export {default as Modal } from './modal'; export {default as ModalAvatar } from './modal-avatar'; export {default as ModalPrompt } from './modal-prompt'; +export {default as ModalChatUsers } from './modal-chat-users'; export {default as Input } from './input'; export { default as ChatItem } from './chat-item'; +export { default as UserItem } from './user-item'; export { default as InputSearch } from './input-search'; export {default as ChatList } from './chat-list'; export {default as MessageList } from './message-list'; diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts index 1282bed0e..426698392 100644 --- a/src/components/menu-chat/menu-chat.ts +++ b/src/components/menu-chat/menu-chat.ts @@ -1,5 +1,8 @@ import {IProps, Block} from "../../utils/Block"; import {IChat} from "../../models/IChat.ts"; +import modalController from "../../utils/modal-controller.ts"; +import {ModalChatUsers} from "../index.ts"; + interface IMenuChatProps extends IProps { @@ -15,11 +18,28 @@ export class MenuChat extends Block { constructor(props: IMenuChatProps) { props.currentChat = window.currentChat; props.addUser = () => { - console.log('add user!'); + console.log('add user!',props.currentChat); + modalController.addModal((new ModalChatUsers({ + users: [], + type:'add', + ref: "modal", + okClick: (result: string) => { + console.log(result); + }, + })) as unknown as Block); + modalController.openModal(); this.props.closeMenu(); } props.deleteUser = () => { - console.log('delete User!'); + modalController.addModal((new ModalChatUsers({ + users: window.currentChat?.users||[], + type:'delete', + ref: "modal", + okClick: (result: string) => { + console.log(result); + }, + })) as unknown as Block); + modalController.openModal(); this.props.closeMenu(); } props.changeAvatarChat = () => { diff --git a/src/components/message-list/message-list.pcss b/src/components/message-list/message-list.pcss index 9d278d631..2104fe848 100644 --- a/src/components/message-list/message-list.pcss +++ b/src/components/message-list/message-list.pcss @@ -61,3 +61,16 @@ } } +.message-list__empty{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + p{ + font-weight: 600; + font-size: 16px; + opacity:70%; + } + +} diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index fb0d723a1..ca4bae8f5 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -4,10 +4,12 @@ import {IUser} from "../../models/IUser.ts"; import {Message} from "../index.ts"; import {IMessageProps} from "../message/message.ts"; import {validateMessage} from "../../utils/validates.utils.ts"; +import {IChat} from "../../models/IChat.ts"; interface IMessageListProps extends IProps { messageList: IChatMessage[]; currentUser: IUser; + currentChat: IChat|null; onBlurMessage?: () => void; message?: string; onClickSend?: () => void; @@ -21,6 +23,7 @@ export class MessageList extends Block { constructor(props: IMessageListProps) { props.isOpenedMenuMessage = false; props.isOpenedMenuChat = false; + props.currentChat = window.currentChat; props.onBlurMessage = () => this.validate(); props.onClickSend = () => { if (!validateMessage(this.valueMessage())) console.log('Send Message:' + this.valueMessage()); @@ -76,14 +79,19 @@ export class MessageList extends Block { } protected render(): string { - const {messageList, currentUser, message = '',isOpenedMenuMessage,isOpenedMenuChat} = this.props; - const {avatar, display_name} = currentUser; + const {messageList, message = '',isOpenedMenuMessage,isOpenedMenuChat,currentChat} = this.props; + + if(!currentChat) + return (`
    +

    Select a chat to write a message

    +
    `) + const {avatar,title} = currentChat; return (`
    - {{{ Avatar imageUrl='${avatar}' size='sm' }}} - ${display_name} + {{{ Avatar imageUrl='${avatar||''}' size='sm' }}} + ${title}
    {{{ Button type="dots" onClick=openMenuChat}}} {{{ MenuChat isOpenedMenu=${isOpenedMenuChat } closeMenu=openMenuChat}}} diff --git a/src/components/modal-chat-users/index.ts b/src/components/modal-chat-users/index.ts new file mode 100644 index 000000000..e7f8c7dc2 --- /dev/null +++ b/src/components/modal-chat-users/index.ts @@ -0,0 +1,2 @@ +import './modal-chat-users.pcss'; +export { ModalChatUsers as default } from './modal-chat-users.ts'; diff --git a/src/components/modal-chat-users/modal-chat-users.pcss b/src/components/modal-chat-users/modal-chat-users.pcss new file mode 100644 index 000000000..00eccd1be --- /dev/null +++ b/src/components/modal-chat-users/modal-chat-users.pcss @@ -0,0 +1,5 @@ +.modal-users{ + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts new file mode 100644 index 000000000..188e5bafe --- /dev/null +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -0,0 +1,102 @@ +import {IProps, Block} from "../../utils/Block"; +import modalController from "../../utils/modal-controller.ts"; +import {searchUsersByLogin} from "../../services/user-settings.ts"; +import {IUser} from "../../models/IUser.ts"; +import {UserItem} from "../index.ts"; +import {addChatUser, deleteChatUsers} from "../../services/chat.ts"; +import {setStateUsers} from "../../services/app.ts"; + +interface IModalChatUsersProps extends IProps { + okClick?: (result: string) => void, + okInputClick?: (event: Event) => void, + cancelClick?: () => void, + ref?: string, + type: 'add' | 'delete', + users: IUser[] | null +} + +export class ModalChatUsers extends Block { + constructor(props: IModalChatUsersProps) { + props.okInputClick = (event: Event) => { + event.preventDefault(); + event.stopPropagation(); + const input = this.refs.modal.getRefs().input.value(); + if (!input) { + return; + } + searchUsersByLogin(input).then((users) => { + console.log('users', users) + this.props.users = users; + this.setProps(this.props) + }) + /*this.props.okClick&&this.props.okClick(input); + modalController.closeModal();*/ + } + props.cancelClick = () => { + modalController.closeModal(); + } + + + super({ + ...props, + events: { + click: (e: Event) => { + e.stopPropagation(); + const id = (e.target as HTMLElement).id; + console.log(id); + if (window.currentChat && id&&props.type==='add') addChatUser({ + users: [Number(id)], + chatId: window.currentChat.id + }).then(() => { + modalController.closeModal(); + setStateUsers() + }) + if(props.type==='delete'&&window.currentChat){ + deleteChatUsers({ + users: [Number(id)], + chatId: window.currentChat.id + }).then(() => { + modalController.closeModal(); + setStateUsers() + }) + } + } + } + }) + } + + + public get props() { + return this._props as IModalChatUsersProps; + } + + getChildren() { + const {users, type} = this.props; + const result = users?.reduce((sum, user) => { + const item = new UserItem({user: user, icon: type === 'add' ? 'plus' : 'delete'}); + return sum + item.renderForList(); + }, ''); + return ( + ` + ${type === 'add' ? + `{{{ InputShort label='Login' type='text' name='input' validate=validate.login ref='input' }}} ` : ''} + +
    ${result}
    + ` + ) + } + + protected render(): string { + return (` + {{{ Modal + caption='${this.props.type === 'add' ? 'Add User' : 'Delete User'}' + okText='Save' + cancelText='Cancel' + okClick=okInputClick + cancelClick=cancelClick + children="${this.getChildren()}" + ref='modal' + }}} + `) + } +} diff --git a/src/components/user-item/index.ts b/src/components/user-item/index.ts new file mode 100644 index 000000000..233fc0a1a --- /dev/null +++ b/src/components/user-item/index.ts @@ -0,0 +1,3 @@ +import './user-item.pcss'; + +export {UserItem as default} from './user-item.ts'; diff --git a/src/components/user-item/user-item.pcss b/src/components/user-item/user-item.pcss new file mode 100644 index 000000000..b7f10d262 --- /dev/null +++ b/src/components/user-item/user-item.pcss @@ -0,0 +1,37 @@ +.user-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 10px; + border:1px solid var(--red); + border-radius: 20px; + + width:auto; + + + + + .user-item__icon { + cursor: pointer; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + padding: 1px; + &:hover{ + opacity: 80%; + } + + &.user-item__icon_plus{ + background-image: url("../../assets/icons/circle-plus.svg"); + } + &.user-item__icon_delete{ + background-image: url("../../assets/icons/circle-x.svg") ; + } + } + .user-item__name{ + font-size: 14px; + font-weight: 500; + margin-right:10px ; + } +} diff --git a/src/components/user-item/user-item.ts b/src/components/user-item/user-item.ts new file mode 100644 index 000000000..11c87d808 --- /dev/null +++ b/src/components/user-item/user-item.ts @@ -0,0 +1,32 @@ +import {IProps,Block} from "../../utils/Block"; +import {IUser} from "../../models/IUser.ts"; +import {getUserName} from "../../utils/user.utils.ts"; + + +export interface IUserItemProps extends IProps { + user:IUser, + icon:'plus'|'delete'; + onClick?:()=>void; +} + +export class UserItem extends Block { + constructor(props: IUserItemProps) { + super({ + ...props + }) + } + + public renderForList=this.render; + public get props(){ + return this._props as IUserItemProps; + } + protected render(): string { + const { icon='',user} = this.props; + return (` +
    +

    ${getUserName(user, true)}

    +
    +
    + `) + } +} diff --git a/src/main.ts b/src/main.ts index bd0a27050..38355b90c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -23,6 +23,7 @@ const allComponents = { 'Link': Components.Link, 'Error': Components.Error, 'ChatItem': Components.ChatItem, + 'UserItem': Components.UserItem, 'ChatList': Components.ChatList, 'Message': Components.Message, 'MessageList': Components.MessageList, @@ -30,6 +31,7 @@ const allComponents = { 'Modal': Components.Modal, 'ModalAvatar': Components.ModalAvatar, 'ModalPrompt': Components.ModalPrompt, + 'ModalChatUsers': Components.ModalChatUsers, 'FormAuth': Components.FormAuth, 'FormProfile': Components.FormProfile, 'MenuItem': Components.MenuItem, @@ -50,10 +52,11 @@ declare global { type Nullable = T | null; } +const router = new Router(".app"); await initialStateApp(); -const router = new Router(".app"); + router.use(BASE_URLS['page-default'], Pages.PageChat as unknown as Block) .use(BASE_URLS['page-all-components'], Pages.AllComponentsPage as unknown as Block) diff --git a/src/models/IChat.ts b/src/models/IChat.ts index 9281696d6..9f2a9a2c8 100644 --- a/src/models/IChat.ts +++ b/src/models/IChat.ts @@ -7,6 +7,7 @@ export interface IChat { unread_count: number; created_by: number; last_message?: ILastMessage; + users?:IUser[]; } export interface ILastMessage { @@ -14,3 +15,8 @@ export interface ILastMessage { time: string; content: string; } + +export type IChatUsersData = { + users: number[]; + chatId: number; +} diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 7b741c91a..376673b6b 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -1,30 +1,36 @@ import {IProps,Block} from "../../utils/Block.ts"; -import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import Router from "../../utils/Router.ts"; import {BASE_URLS} from "../../config.ts"; -import {initChatPage} from "../../services/app.ts"; +import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; export interface IPageChatProps extends IProps { currentUser:IUser|null, + currentChat:IChat|null, chatList:IChat[], messageList:IChatMessage[], + setCurrentChat:(chat:IChat)=>void } export class PageChat extends Block { constructor() { const props: IPageChatProps = { currentUser: window.user||null, + currentChat: window.currentChat||null, chatList: [], - messageList: mockListMessages, + messageList:[], + setCurrentChat:(chat:IChat)=>{ + setStateCurrentChat(chat); + this.props.currentChat=chat; + this.setProps(this.props) + }, events: {} } super(props); if (!window.user) Router.getRouter().go(BASE_URLS['page-login']); initChatPage(); - console.log(window.chats) } public get props(){ return this._props as IPageChatProps; @@ -33,10 +39,10 @@ export class PageChat extends Block { return (`
    - {{{ ChatList list=chatList }}} + {{{ ChatList list=chatList setCurrentChat=setCurrentChat}}}
    - {{{ MessageList messageList=messageList currentUser=currentUser }}} + {{{ MessageList messageList=messageList currentUser=currentUser currentChat=${this.props.currentChat} }}}
    `) diff --git a/src/services/app.ts b/src/services/app.ts index 3c169af66..1456ce752 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -2,7 +2,8 @@ import {getUser} from "./auth.ts"; import Router from "../utils/Router.ts"; import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; -import {getChats} from "./chat.ts"; +import {getChats, getChatUsers} from "./chat.ts"; +import {IChat} from "../models/IChat.ts"; const initialStateApp = async () => { @@ -14,7 +15,7 @@ const initialStateApp = async () => { return; } setStateUser(result); - console.log('window.user_initial', window.user,Router.getRouter()); + console.log('window.user_initial', window.user, Router.getRouter()); await initChatPage(); /*const chats = await getChats(); window.store.set({user: me, chats}); @@ -22,17 +23,27 @@ const initialStateApp = async () => { } const initChatPage = async () => { - const result=await getChats(); + const result = await getChats(); console.log('window.chat_initial', result) - window.chats=result; -} -const setStateUser=(user:IUser)=>{ - window.user=user; + window.chats = result; + } -export{ +const setStateCurrentChat = async (chat: IChat | null) => { + if (chat) chat.users = await getChatUsers(String(chat.id)); + window.currentChat = chat; +} +const setStateUser = (user: IUser) => { + window.user = user; +} +const setStateUsers = async () => { + if (!window.currentChat) return; + window.currentChat.users = await getChatUsers(String(window.currentChat.id)); +} +export { initialStateApp, setStateUser, initChatPage, - + setStateCurrentChat, + setStateUsers } diff --git a/src/services/chat.ts b/src/services/chat.ts index 52adb5162..245123093 100644 --- a/src/services/chat.ts +++ b/src/services/chat.ts @@ -1,6 +1,8 @@ import {responseHasError} from "../utils/api.utils.ts"; import ChatApi from "../api/chat.ts"; -import {IChat} from "../models/IChat.ts"; +import {IChat, IChatUsersData} from "../models/IChat.ts"; +import {initChatPage} from "./app.ts"; +import {IUser} from "../models/IUser.ts"; const chatApi=new ChatApi('/chats'); @@ -16,7 +18,30 @@ const createChat= async (title:string):Promise => { if(error) throw Error(error); return JSON.parse( result.responseText); } + +const addChatUser= async (data:IChatUsersData) => { + const result=await chatApi.addChatUsers(data) as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + await initChatPage(); +} +const deleteChatUsers= async (data:IChatUsersData) => { + const result=await chatApi.deleteChatUsers(data) as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + await initChatPage(); +} + +const getChatUsers=async (idChat:string):Promise => { + const result=await chatApi.getChatUsers(idChat) as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + return JSON.parse( result.responseText); +} export { getChats, - createChat + createChat, + addChatUser, + getChatUsers, + deleteChatUsers } diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts index cc01b35fb..6f5f02b4a 100644 --- a/src/services/user-settings.ts +++ b/src/services/user-settings.ts @@ -29,10 +29,16 @@ const updateUserAvatar=async (newAvatar:FormData) => { return JSON.parse(result.responseText); } - +const searchUsersByLogin=async (login:string) => { + const result= await userApi.searchUser(login); + const error=responseHasError(result); + if(error) throw Error(error); + return JSON.parse(result.responseText); +} export { updateUserProfile, updateUserPassword, - updateUserAvatar + updateUserAvatar, + searchUsersByLogin } diff --git a/src/utils/user.utils.ts b/src/utils/user.utils.ts new file mode 100644 index 000000000..2e931c7db --- /dev/null +++ b/src/utils/user.utils.ts @@ -0,0 +1,7 @@ +import {IUser} from "../models/IUser.ts"; + +export const getUserName=(user:IUser,fullName?:boolean)=>{ + const _fullName=`${user.first_name} ${user.second_name}`; + if(fullName)return _fullName; + else return user.display_name||_fullName; +} From c33a64592f202356e888abe17ac8dc7c2a02735c Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 8 Oct 2023 22:44:26 +0400 Subject: [PATCH 16/43] added alert for errors --- src/assets/icons/close.svg | 1 + src/components/alert/alert.pcss | 28 ++++++++++++++++++++++++ src/components/alert/alert.ts | 36 +++++++++++++++++++++++++++++++ src/components/alert/index.ts | 2 ++ src/components/button/button.pcss | 11 +++++++++- src/components/button/button.ts | 2 +- src/components/index.ts | 1 + src/index.html | 1 + src/pages/login/login.ts | 9 ++++---- src/services/app.ts | 19 ++++++++++++++-- src/services/auth.ts | 6 ++---- src/services/chat.ts | 3 +-- src/utils/alert-controller.ts | 35 ++++++++++++++++++++++++++++++ src/utils/api.utils.ts | 25 ++++++++++++++++----- 14 files changed, 160 insertions(+), 19 deletions(-) create mode 100644 src/assets/icons/close.svg create mode 100644 src/components/alert/alert.pcss create mode 100644 src/components/alert/alert.ts create mode 100644 src/components/alert/index.ts create mode 100644 src/utils/alert-controller.ts diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 000000000..9c2c93514 --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1 @@ + diff --git a/src/components/alert/alert.pcss b/src/components/alert/alert.pcss new file mode 100644 index 000000000..9387ab561 --- /dev/null +++ b/src/components/alert/alert.pcss @@ -0,0 +1,28 @@ +.alert { + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + min-height: 100px; + z-index: 100; + + .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; +} diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts new file mode 100644 index 000000000..0354d4bb5 --- /dev/null +++ b/src/components/alert/alert.ts @@ -0,0 +1,36 @@ +import {IProps, Block} from "../../utils/Block"; +import alertController from "../../utils/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 (` +
    +

    + ${message} +

    +
    + {{{ Button onClick=okClick type='close'}}}
    +
    + `) + } +} diff --git a/src/components/alert/index.ts b/src/components/alert/index.ts new file mode 100644 index 000000000..630d7310f --- /dev/null +++ b/src/components/alert/index.ts @@ -0,0 +1,2 @@ +import './alert.pcss'; +export { Alert as default } from './alert.ts'; diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss index 5611d4438..ae453f7c7 100644 --- a/src/components/button/button.pcss +++ b/src/components/button/button.pcss @@ -58,7 +58,16 @@ width: 36px; height: 36px; } - +.button-close { + padding: 0; + background-image: url("../../assets/icons/close.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 60%; + background-color:transparent; + width: 36px; + height: 36px; +} .button-number { padding: 10px; max-width: 36px; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index a657d76a3..097e3101e 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,7 +1,7 @@ import {IProps,Block} from "../../utils/Block"; interface IButtonProps extends IProps{ - type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number', + type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number'|'close', caption: string, page: string, onClick: () => void diff --git a/src/components/index.ts b/src/components/index.ts index 195641d1f..d81b394a8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -22,3 +22,4 @@ export { default as Error } from './error'; export { default as MenuItem } from './menu-item'; export { default as MenuMessage } from './menu-message'; export { default as MenuChat } from './menu-chat'; +export { default as Alert } from './alert'; diff --git a/src/index.html b/src/index.html index 36841769a..e8f15bd11 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,7 @@
    + diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 7896a92d5..60687146f 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,6 +1,7 @@ import {IProps, Block} from "../../utils/Block"; import {BASE_URLS} from "../../config.ts"; -import {getUser, signIn} from "../../services/auth.ts"; +import { signIn} from "../../services/auth.ts"; +import Router from "../../utils/Router.ts"; export interface ILoginPageProps extends IProps { @@ -26,12 +27,12 @@ export class LoginPage extends Block { if (!password) { return; } - signIn({login, password}).catch((error)=>console.log(error)) + signIn({login, password}).catch((error)=>console.log(error)).then(()=>Router.getRouter().go(BASE_URLS['page-chat'])) } } - getUser().catch(error=>console.log(error)) + // getUser().catch(error=>console.log(error)) super(props); - console.log('window.user', window.user) + //console.log('window.user', window.user) } protected render(): string { diff --git a/src/services/app.ts b/src/services/app.ts index 1456ce752..af141a548 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -23,14 +23,29 @@ const initialStateApp = async () => { } const initChatPage = async () => { - const result = await getChats(); + let result:IChat[]=[]; + try { + result = await getChats(); + } + catch (error) { + window.chats = result; + } console.log('window.chat_initial', result) window.chats = result; } const setStateCurrentChat = async (chat: IChat | null) => { - if (chat) chat.users = await getChatUsers(String(chat.id)); + if (chat) { + let result:IUser[]=[]; + try { + result = await getChatUsers(String(chat.id)); + } + catch (error) { + chat.users = result; + } + chat.users = result; + } window.currentChat = chat; } const setStateUser = (user: IUser) => { diff --git a/src/services/auth.ts b/src/services/auth.ts index 768ccea48..3bf321640 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -13,15 +13,13 @@ const signUp = async (data: IUser) => { } const signIn= async (data: IAuthData) => { const result=await authApi.signIn(data); - const error=responseHasError(result as XMLHttpRequest); - if(error) throw Error(error); + responseHasError(result as XMLHttpRequest); await initialStateApp(); } const getUser= async () => { const result=await authApi.getAuthUser() as XMLHttpRequest; - const error=responseHasError(result); - if(error) throw Error(error); + responseHasError(result); return JSON.parse( result.responseText); } diff --git a/src/services/chat.ts b/src/services/chat.ts index 245123093..153e9867c 100644 --- a/src/services/chat.ts +++ b/src/services/chat.ts @@ -8,8 +8,7 @@ import {IUser} from "../models/IUser.ts"; const chatApi=new ChatApi('/chats'); const getChats= async ():Promise => { const result=await chatApi.getChats() as XMLHttpRequest; - const error=responseHasError(result); - if(error) throw Error(error); + responseHasError(result); return JSON.parse( result.responseText); } const createChat= async (title:string):Promise => { diff --git a/src/utils/alert-controller.ts b/src/utils/alert-controller.ts new file mode 100644 index 000000000..bbfa4a81c --- /dev/null +++ b/src/utils/alert-controller.ts @@ -0,0 +1,35 @@ +import Block from "./Block.ts"; + +class AlertController { + private static __instance: AlertController; + private dialog: HTMLDialogElement | null=null; + + constructor() { + if (AlertController.__instance) { + return AlertController.__instance; + } + AlertController.__instance = this; + this.dialog= document.getElementById('dialog-alert') as HTMLDialogElement; + } + + public static getInstance() { + return this.__instance; + } + + public addModal(modal: Block) { + const htmlElement = modal.getContent(); + if (!this.dialog?.firstElementChild) this.dialog?.append(document.createElement('div')); + if(htmlElement)this.dialog?.firstElementChild?.replaceWith(htmlElement); + } + + public openModal(){ + this.dialog?.show() + } + + public closeModal(){ + this.dialog?.close() + } + +} +const alertController=new AlertController(); +export default alertController; diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts index d459f570e..498e2cec3 100644 --- a/src/utils/api.utils.ts +++ b/src/utils/api.utils.ts @@ -1,16 +1,31 @@ import {BASE_URLS} from "../config.ts"; import Router from "./Router.ts"; +import alertController from "./alert-controller.ts"; +import Alert from "../components/alert"; +import Block from "./Block.ts"; - -export const responseHasError=(response:XMLHttpRequest)=>{ +export const responseHasError = (response: XMLHttpRequest) => { switch (response.status) { - case 200:return false; + case 200: + return false; case 500: Router.getRouter().go(BASE_URLS['page-500']); break; - default: - return JSON.parse( response.responseText).reason; + default: { + const error = JSON.parse(response.responseText).reason; + if (error.includes('Cookie')) { + showAlert('Please, login!'); + } else showAlert(error); + if (error) throw Error(error); + } } } + +export const showAlert = (message: string) => { + alertController.addModal((new Alert({ + message: message || '' + })) as unknown as Block); + alertController.openModal(); +} From e57d93e4f31e9fd9785c9361984ce03c5db4060f Mon Sep 17 00:00:00 2001 From: ellevanova Date: Mon, 9 Oct 2023 21:58:26 +0400 Subject: [PATCH 17/43] refactoring,added state,fixed errors --- src/api/auth.ts | 2 +- src/api/chat.ts | 5 +- src/api/socket.ts | 0 src/api/user-settings.ts | 2 +- src/components/alert/alert.pcss | 2 +- src/components/alert/alert.ts | 4 +- src/components/avatar/avatar.ts | 6 +- src/components/badge/badge.ts | 2 +- src/components/button/button.ts | 2 +- src/components/chat-item/chat-item.ts | 2 +- src/components/chat-list/chat-list.ts | 10 +-- src/components/error/error.ts | 2 +- src/components/form-auth/form-auth.ts | 2 +- src/components/form-profile/form-profile.ts | 6 +- src/components/input-search/input-search.ts | 2 +- src/components/input-short/input-short.ts | 2 +- src/components/input-wide/input-wide.ts | 2 +- src/components/input/input.ts | 2 +- src/components/link/link.ts | 4 +- src/components/loader/loader.ts | 2 +- src/components/menu-chat/menu-chat.ts | 8 +- src/components/menu-item/menu-item.ts | 2 +- src/components/menu-message/menu-message.ts | 4 +- src/components/message-list/message-list.pcss | 9 +- src/components/message-list/message-list.ts | 11 ++- src/components/message/message.ts | 2 +- src/components/modal-avatar/modal-avatar.ts | 8 +- .../modal-chat-users/modal-chat-users.ts | 21 +++-- src/components/modal-prompt/modal-prompt.ts | 4 +- src/components/modal/modal.ts | 2 +- src/components/user-item/user-item.ts | 2 +- src/{utils => core}/alert-controller.ts | 0 src/{utils/Block.ts => core/block.ts} | 4 +- src/{utils/EventBus.ts => core/event-bus.ts} | 0 src/{utils/Http.ts => core/http.ts} | 2 +- src/{utils => core}/modal-controller.ts | 0 .../register-components.ts} | 2 +- src/{utils/Route.ts => core/route.ts} | 0 src/{utils/Router.ts => core/router.ts} | 2 +- src/core/store.ts | 29 ++++++ src/main.ts | 58 ++++-------- src/models/IAppState.ts | 9 ++ src/models/IChat.ts | 1 + src/pages/404/404.ts | 2 +- src/pages/500/500.ts | 2 +- src/pages/all-components/all-components.ts | 2 +- src/pages/all-pages/all-pages.ts | 2 +- src/pages/chat-page/page-chat.ts | 18 ++-- src/pages/login/login.ts | 11 ++- src/pages/password-edit/password-edit.ts | 4 +- src/pages/profile-edit/profile-edit.ts | 4 +- src/pages/profile/profile.ts | 4 +- src/pages/registration/registration.ts | 2 +- src/services/app.ts | 90 ++++++++++++------- src/services/auth.ts | 35 ++++---- src/services/chat.ts | 11 ++- src/services/user-settings.ts | 2 +- src/utils/api.utils.ts | 9 +- 58 files changed, 253 insertions(+), 186 deletions(-) create mode 100644 src/api/socket.ts rename src/{utils => core}/alert-controller.ts (100%) rename src/{utils/Block.ts => core/block.ts} (98%) rename src/{utils/EventBus.ts => core/event-bus.ts} (100%) rename src/{utils/Http.ts => core/http.ts} (97%) rename src/{utils => core}/modal-controller.ts (100%) rename src/{utils/registerComponents.ts => core/register-components.ts} (97%) rename src/{utils/Route.ts => core/route.ts} (100%) rename src/{utils/Router.ts => core/router.ts} (98%) create mode 100644 src/core/store.ts create mode 100644 src/models/IAppState.ts diff --git a/src/api/auth.ts b/src/api/auth.ts index 1d7411277..ec3d54a32 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -1,4 +1,4 @@ -import HTTPTransport from "../utils/Http.ts"; +import HTTPTransport from "../core/http.ts"; import {IAuthData, IUser} from "../models/IUser.ts"; export class AuthApi { diff --git a/src/api/chat.ts b/src/api/chat.ts index 899bdcea0..3dd8e528c 100644 --- a/src/api/chat.ts +++ b/src/api/chat.ts @@ -1,4 +1,4 @@ -import HTTPTransport from "../utils/Http.ts"; +import HTTPTransport from "../core/http.ts"; import {IChatUsersData} from "../models/IChat.ts"; export class ChatApi { @@ -27,6 +27,9 @@ export class ChatApi { 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 logOut() { return this.httpTransport.post(this.baseUrl + '/logout'); diff --git a/src/api/socket.ts b/src/api/socket.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/api/user-settings.ts b/src/api/user-settings.ts index 30100de8f..b118cc3eb 100644 --- a/src/api/user-settings.ts +++ b/src/api/user-settings.ts @@ -1,4 +1,4 @@ -import HTTPTransport from "../utils/Http.ts"; +import HTTPTransport from "../core/http.ts"; import {IPasswords, IUser} from "../models/IUser.ts"; export class UserSettingsApi { diff --git a/src/components/alert/alert.pcss b/src/components/alert/alert.pcss index 9387ab561..81829b7ad 100644 --- a/src/components/alert/alert.pcss +++ b/src/components/alert/alert.pcss @@ -4,7 +4,7 @@ justify-content: center; padding: 10px; min-height: 100px; - z-index: 100; + z-index:200; .alert__message { text-align: center; diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 0354d4bb5..da258d8ab 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -1,5 +1,5 @@ -import {IProps, Block} from "../../utils/Block"; -import alertController from "../../utils/alert-controller.ts"; +import {IProps, Block} from "../../core/Block.ts"; +import alertController from "../../core/alert-controller.ts"; interface IModalProps extends IProps { message: string, diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index fdc8436af..344c6be77 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,5 +1,5 @@ -import {IProps, Block} from "../../utils/Block"; -import modalController from "../../utils/modal-controller.ts"; +import {IProps, Block} from "../../core/Block.ts"; +import modalController from "../../core/modal-controller.ts"; import { ModalAvatar} from "../index.ts"; import {BASE_RESOURCES_URL} from "../../config.ts"; @@ -18,7 +18,7 @@ export class Avatar extends Block { click: () => { if(!props.isLoadAvatar)return; modalController.addModal((new ModalAvatar({ - oldAvatar:window.user?.avatar||'' + oldAvatar:window.store.getState().user?.avatar||'' })) as unknown as Block); modalController.openModal(); } diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index f2146f7f7..5800924fb 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; interface IBadgeProps extends IProps{ type: 'primary' | 'ready', diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 097e3101e..2aa831818 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; interface IButtonProps extends IProps{ type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number'|'close', diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index fa548f9bf..0f80798eb 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; export interface IChatItemProps extends IProps { diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 8606cebd4..57e06e85d 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -1,9 +1,9 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; import {ChatItem} from "../index.ts"; import {IChatItemProps} from "../chat-item/chat-item.ts"; import {IUser} from "../../models/IUser.ts"; -import modalController from "../../utils/modal-controller.ts"; +import modalController from "../../core/modal-controller.ts"; import ModalPrompt from "../modal-prompt"; import {createChat} from "../../services/chat.ts"; import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; @@ -18,8 +18,8 @@ interface IChatListProps extends IProps { export class ChatList extends Block { constructor(props: IChatListProps) { - props.currentUser = window.user; - props.list = window.chats || []; + props.currentUser = window.store.getState().user; + props.list = window.store.getState().chats || []; props.showModalAddChat = () => { modalController.addModal((new ModalPrompt({ caption: 'Add Chat', @@ -42,7 +42,7 @@ export class ChatList extends Block { const currentChat = (e.target as HTMLElement).id; - setStateCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); + /*setStateCurrentChat(props.list.find(item => item.id === Number(currentChat))||null);*/ this.props.setCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); } } diff --git a/src/components/error/error.ts b/src/components/error/error.ts index da40ae9fa..34b6dbe9b 100644 --- a/src/components/error/error.ts +++ b/src/components/error/error.ts @@ -1,4 +1,4 @@ -import{IProps,Block} from "../../utils/Block"; +import{IProps,Block} from "../../core/Block.ts"; interface IErrorProps extends IProps{ errorNumber: string, diff --git a/src/components/form-auth/form-auth.ts b/src/components/form-auth/form-auth.ts index 74ab6cc3f..63cc86398 100644 --- a/src/components/form-auth/form-auth.ts +++ b/src/components/form-auth/form-auth.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; interface IFormAuthProps extends IProps { diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 8b06aae0f..1fae6f6bb 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -1,8 +1,8 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; import {logOut} from "../../services/auth.ts"; -import Router from "../../utils/Router.ts"; +import Router from "../../core/router.ts"; interface IFormProfileProps extends IProps{ user:IUser|null, @@ -28,7 +28,7 @@ export class FormProfile extends Block { event.preventDefault(); Router.getRouter().back(); } - props.user=window.user; + props.user=window.store.getState().user; super(props); } diff --git a/src/components/input-search/input-search.ts b/src/components/input-search/input-search.ts index 8a7726f02..03b360eb7 100644 --- a/src/components/input-search/input-search.ts +++ b/src/components/input-search/input-search.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; interface IInputSearch extends IProps{ name: string, diff --git a/src/components/input-short/input-short.ts b/src/components/input-short/input-short.ts index 0b515fd60..e2f274f81 100644 --- a/src/components/input-short/input-short.ts +++ b/src/components/input-short/input-short.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; interface IInputProps extends IProps{ type: 'text' | 'password', diff --git a/src/components/input-wide/input-wide.ts b/src/components/input-wide/input-wide.ts index 9b99bca21..25e15fd6c 100644 --- a/src/components/input-wide/input-wide.ts +++ b/src/components/input-wide/input-wide.ts @@ -1,4 +1,4 @@ -import{IProps,Block} from "../../utils/Block"; +import{IProps,Block} from "../../core/Block.ts"; interface IInputWideProps extends IProps{ type: 'text' | 'button', diff --git a/src/components/input/input.ts b/src/components/input/input.ts index d0234ef96..f6d3dc769 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; interface IInputProps extends IProps { diff --git a/src/components/link/link.ts b/src/components/link/link.ts index 0dbfe8981..9bc112010 100644 --- a/src/components/link/link.ts +++ b/src/components/link/link.ts @@ -1,5 +1,5 @@ -import {IProps,Block} from "../../utils/Block"; -import Router from "../../utils/Router.ts"; +import {IProps,Block} from "../../core/Block.ts"; +import Router from "../../core/router.ts"; interface ILinkProps extends IProps{ caption: string, diff --git a/src/components/loader/loader.ts b/src/components/loader/loader.ts index b6a9a116e..5df92df0e 100644 --- a/src/components/loader/loader.ts +++ b/src/components/loader/loader.ts @@ -1,4 +1,4 @@ -import {Block} from "../../utils/Block"; +import {Block} from "../../core/Block.ts"; export class Loader extends Block { protected render(): string { diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts index 426698392..bdd545123 100644 --- a/src/components/menu-chat/menu-chat.ts +++ b/src/components/menu-chat/menu-chat.ts @@ -1,6 +1,6 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; -import modalController from "../../utils/modal-controller.ts"; +import modalController from "../../core/modal-controller.ts"; import {ModalChatUsers} from "../index.ts"; @@ -16,7 +16,7 @@ interface IMenuChatProps extends IProps { export class MenuChat extends Block { constructor(props: IMenuChatProps) { - props.currentChat = window.currentChat; + props.currentChat = window.store.getState().currentChat; props.addUser = () => { console.log('add user!',props.currentChat); modalController.addModal((new ModalChatUsers({ @@ -32,7 +32,7 @@ export class MenuChat extends Block { } props.deleteUser = () => { modalController.addModal((new ModalChatUsers({ - users: window.currentChat?.users||[], + users: window.store.getState().currentChat?.users||[], type:'delete', ref: "modal", okClick: (result: string) => { diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 3c74d2163..9904d2e10 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; export interface IMenuItemProps extends IProps { diff --git a/src/components/menu-message/menu-message.ts b/src/components/menu-message/menu-message.ts index 41030e873..894bbe457 100644 --- a/src/components/menu-message/menu-message.ts +++ b/src/components/menu-message/menu-message.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; @@ -13,7 +13,7 @@ interface IMenuMessageProps extends IProps { export class MenuMessage extends Block { constructor(props: IMenuMessageProps) { - props.currentChat = window.currentChat; + props.currentChat = window.store.getState().currentChat; props.addMedia = () => { console.log('add media!'); this.props.closeMenu(); diff --git a/src/components/message-list/message-list.pcss b/src/components/message-list/message-list.pcss index 2104fe848..46d359f73 100644 --- a/src/components/message-list/message-list.pcss +++ b/src/components/message-list/message-list.pcss @@ -17,10 +17,13 @@ display: flex; align-items: center; - span { + .message-list__header__title { padding-left: 20px; - font-size: 16px; - font-weight: bold; + span{ + font-size: 16px; + font-weight: bold; + } + } } diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index ca4bae8f5..658d0a310 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; import {Message} from "../index.ts"; @@ -23,7 +23,7 @@ export class MessageList extends Block { constructor(props: IMessageListProps) { props.isOpenedMenuMessage = false; props.isOpenedMenuChat = false; - props.currentChat = window.currentChat; + props.currentChat = window.store.getState().currentChat; props.onBlurMessage = () => this.validate(); props.onClickSend = () => { if (!validateMessage(this.valueMessage())) console.log('Send Message:' + this.valueMessage()); @@ -80,7 +80,7 @@ export class MessageList extends Block { protected render(): string { const {messageList, message = '',isOpenedMenuMessage,isOpenedMenuChat,currentChat} = this.props; - + const countUsers=currentChat?.users?.length||1; if(!currentChat) return (`

    Select a chat to write a message

    @@ -91,7 +91,10 @@ export class MessageList extends Block {
    {{{ Avatar imageUrl='${avatar||''}' size='sm' }}} - ${title} +
    + ${title} +

    ${countUsers+' members'}

    +
    {{{ Button type="dots" onClick=openMenuChat}}} {{{ MenuChat isOpenedMenu=${isOpenedMenuChat } closeMenu=openMenuChat}}} diff --git a/src/components/message/message.ts b/src/components/message/message.ts index d49f5eede..0bb89a530 100644 --- a/src/components/message/message.ts +++ b/src/components/message/message.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; export interface IMessageProps extends IProps{ diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index f3c1e7790..02a4e4b50 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -1,7 +1,7 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {updateUserAvatar, updateUserProfile} from "../../services/user-settings.ts"; import {BASE_RESOURCES_URL} from "../../config.ts"; -import modalController from "../../utils/modal-controller.ts"; +import modalController from "../../core/modal-controller.ts"; import {addActive, deleteActive, loadNewFileFromDrag} from "../../utils/load-file.utils.ts"; interface IModalAvatarProps extends IProps { @@ -21,7 +21,7 @@ export class ModalAvatar extends Block { modalController.closeModal(); } props.cancelClick = () => { - const user = window.user; + const user = window.store.getState().user; if (user && this.props.newAvatar) { updateUserProfile({...user, avatar: this.props.oldAvatar}).then(() => { modalController.closeModal(); @@ -39,7 +39,7 @@ export class ModalAvatar extends Block { updateUserAvatar(formData).then(user => { this.props.newAvatar = user.avatar; modalController.addModal((new ModalAvatar({ - oldAvatar: window.user?.avatar || '' + oldAvatar: window.store.getState().user?.avatar || '' })) as unknown as Block); }); } diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index 188e5bafe..cc9300252 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -1,10 +1,10 @@ -import {IProps, Block} from "../../utils/Block"; -import modalController from "../../utils/modal-controller.ts"; +import {IProps, Block} from "../../core/Block.ts"; +import modalController from "../../core/modal-controller.ts"; import {searchUsersByLogin} from "../../services/user-settings.ts"; import {IUser} from "../../models/IUser.ts"; import {UserItem} from "../index.ts"; import {addChatUser, deleteChatUsers} from "../../services/chat.ts"; -import {setStateUsers} from "../../services/app.ts"; +import {initChatUsers } from "../../services/app.ts"; interface IModalChatUsersProps extends IProps { okClick?: (result: string) => void, @@ -44,20 +44,19 @@ export class ModalChatUsers extends Block { e.stopPropagation(); const id = (e.target as HTMLElement).id; console.log(id); - if (window.currentChat && id&&props.type==='add') addChatUser({ + const chat=window.store.getState().currentChat; + if ( chat&& id&&props.type==='add') addChatUser({ users: [Number(id)], - chatId: window.currentChat.id + chatId:chat.id }).then(() => { - modalController.closeModal(); - setStateUsers() + initChatUsers(chat).then(()=>modalController.closeModal()); }) - if(props.type==='delete'&&window.currentChat){ + if(props.type==='delete'&&chat){ deleteChatUsers({ users: [Number(id)], - chatId: window.currentChat.id + chatId:chat.id }).then(() => { - modalController.closeModal(); - setStateUsers() + initChatUsers(chat).then(()=>modalController.closeModal()); }) } } diff --git a/src/components/modal-prompt/modal-prompt.ts b/src/components/modal-prompt/modal-prompt.ts index 2a3296268..323b17725 100644 --- a/src/components/modal-prompt/modal-prompt.ts +++ b/src/components/modal-prompt/modal-prompt.ts @@ -1,5 +1,5 @@ -import {IProps, Block} from "../../utils/Block"; -import modalController from "../../utils/modal-controller.ts"; +import {IProps, Block} from "../../core/Block.ts"; +import modalController from "../../core/modal-controller.ts"; interface IModalPromptProps extends IProps { caption: string, diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 69a380f9a..8e2ac94f3 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; interface IModalProps extends IProps { diff --git a/src/components/user-item/user-item.ts b/src/components/user-item/user-item.ts index 11c87d808..2b6db0cf3 100644 --- a/src/components/user-item/user-item.ts +++ b/src/components/user-item/user-item.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {getUserName} from "../../utils/user.utils.ts"; diff --git a/src/utils/alert-controller.ts b/src/core/alert-controller.ts similarity index 100% rename from src/utils/alert-controller.ts rename to src/core/alert-controller.ts diff --git a/src/utils/Block.ts b/src/core/block.ts similarity index 98% rename from src/utils/Block.ts rename to src/core/block.ts index eb37a38f9..a3164f766 100644 --- a/src/utils/Block.ts +++ b/src/core/block.ts @@ -1,7 +1,7 @@ -import EventBus from "./EventBus"; +import EventBus from "./event-bus.ts"; import {v4 as uuidv4} from 'uuid'; import Handlebars from "handlebars"; -import {isDeepEqual} from "./object.utils.ts"; +import {isDeepEqual} from "../utils/object.utils.ts"; export interface IProps { events?: object diff --git a/src/utils/EventBus.ts b/src/core/event-bus.ts similarity index 100% rename from src/utils/EventBus.ts rename to src/core/event-bus.ts diff --git a/src/utils/Http.ts b/src/core/http.ts similarity index 97% rename from src/utils/Http.ts rename to src/core/http.ts index ef923289e..cfdcadbe2 100644 --- a/src/utils/Http.ts +++ b/src/core/http.ts @@ -1,4 +1,4 @@ -import {queryStringify} from "./string.utils.ts"; +import {queryStringify} from "../utils/string.utils.ts"; import {BASE_API_URL} from "../config.ts"; enum METHODS { diff --git a/src/utils/modal-controller.ts b/src/core/modal-controller.ts similarity index 100% rename from src/utils/modal-controller.ts rename to src/core/modal-controller.ts diff --git a/src/utils/registerComponents.ts b/src/core/register-components.ts similarity index 97% rename from src/utils/registerComponents.ts rename to src/core/register-components.ts index 323dd608c..b27dcb7c5 100644 --- a/src/utils/registerComponents.ts +++ b/src/core/register-components.ts @@ -1,5 +1,5 @@ import Handlebars from 'handlebars'; -import Block from "./Block"; +import Block from "./Block.ts"; import {HelperOptions} from "handlebars"; export function registerComponent(name: string, Component: typeof Block) { diff --git a/src/utils/Route.ts b/src/core/route.ts similarity index 100% rename from src/utils/Route.ts rename to src/core/route.ts diff --git a/src/utils/Router.ts b/src/core/router.ts similarity index 98% rename from src/utils/Router.ts rename to src/core/router.ts index 9e3d18d20..43506a0b7 100644 --- a/src/utils/Router.ts +++ b/src/core/router.ts @@ -1,5 +1,5 @@ import Block from "./Block.ts"; -import Route from "./Route.ts"; +import Route from "./route.ts"; class Router { private static __instance: Router; diff --git a/src/core/store.ts b/src/core/store.ts new file mode 100644 index 000000000..ed720a9a9 --- /dev/null +++ b/src/core/store.ts @@ -0,0 +1,29 @@ +import EventBus from "./event-bus.ts"; + +export enum StoreEvents { + Updated = 'Updated' +} + +export class Store> extends EventBus { + private state: State = {} as State; + + constructor(initState: State) { + super(); + this.state = initState; + this.on(StoreEvents.Updated, this._set.bind(this)); + } + + public getState() { + return this.state; + } + + private _set(nextState: Partial) { + const prevState = {...this.state}; + this.set(nextState); + this.emit(StoreEvents.Updated, prevState, nextState); + } + + public set(nextState: Partial) { + this.state = {...this.state, ...nextState}; + } +} diff --git a/src/main.ts b/src/main.ts index 38355b90c..9a4a028fa 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,57 +1,37 @@ import './styles/main.pcss'; import * as Components from './components'; import * as Pages from './pages'; -import {registerComponent} from "./utils/registerComponents"; -import Router from "./utils/Router.ts"; -import Block from "./utils/Block.ts"; +import {registerComponent} from "./core/register-components.ts"; +import Router from "./core/router.ts"; +import Block from "./core/Block.ts"; import {BASE_URLS} from "./config.ts"; -import {IUser} from "./models/IUser.ts"; import { initialStateApp} from "./services/app.ts"; -import {IChat} from "./models/IChat.ts"; +import {IAppState} from "./models/IAppState.ts"; +import {Store} from "./core/store.ts"; +Object.entries(Components).forEach( + ([componentName, component]) => registerComponent(componentName, component) +) - -const allComponents = { - 'Button': Components.Button, - 'Avatar': Components.Avatar, - 'Badge': Components.Badge, - 'Input': Components.Input, - 'InputShort': Components.InputShort, - 'InputWide': Components.InputWide, - 'InputSearch': Components.InputSearch, - 'Link': Components.Link, - 'Error': Components.Error, - 'ChatItem': Components.ChatItem, - 'UserItem': Components.UserItem, - 'ChatList': Components.ChatList, - 'Message': Components.Message, - 'MessageList': Components.MessageList, - 'Loader': Components.Loader, - 'Modal': Components.Modal, - 'ModalAvatar': Components.ModalAvatar, - 'ModalPrompt': Components.ModalPrompt, - 'ModalChatUsers': Components.ModalChatUsers, - 'FormAuth': Components.FormAuth, - 'FormProfile': Components.FormProfile, - 'MenuItem': Components.MenuItem, - 'MenuMessage': Components.MenuMessage, - 'MenuChat': Components.MenuChat, -} -Object.entries(allComponents).forEach(([name, component]) => { - registerComponent(name, component); -}); - declare global { interface Window { - user: IUser|null; - chats:IChat[]|null; - currentChat:IChat|null; + store: Store; } type Nullable = T | null; } + +const initState: IAppState = { + error: null, + user: null, + currentChat:null, + chats: [] +} + +window.store =new Store(initState); + const router = new Router(".app"); await initialStateApp(); diff --git a/src/models/IAppState.ts b/src/models/IAppState.ts new file mode 100644 index 000000000..33097b767 --- /dev/null +++ b/src/models/IAppState.ts @@ -0,0 +1,9 @@ +import {IChat} from "./IChat.ts"; +import {IUser} from "./IUser.ts"; + +export type IAppState = { + error: string | null, + user: IUser | null, + chats: IChat[]|null, + currentChat: IChat|null +} diff --git a/src/models/IChat.ts b/src/models/IChat.ts index 9f2a9a2c8..447cc9968 100644 --- a/src/models/IChat.ts +++ b/src/models/IChat.ts @@ -4,6 +4,7 @@ export interface IChat { id: number; title: string; avatar?: string; + token?: string; unread_count: number; created_by: number; last_message?: ILastMessage; diff --git a/src/pages/404/404.ts b/src/pages/404/404.ts index 69751f45f..bec917593 100644 --- a/src/pages/404/404.ts +++ b/src/pages/404/404.ts @@ -1,4 +1,4 @@ -import {Block} from "../../utils/Block.ts"; +import {Block} from "../../core/Block.ts"; export class Page404 extends Block { constructor() { diff --git a/src/pages/500/500.ts b/src/pages/500/500.ts index b2dfc05a1..0692b8272 100644 --- a/src/pages/500/500.ts +++ b/src/pages/500/500.ts @@ -1,4 +1,4 @@ -import {Block} from "../../utils/Block.ts"; +import {Block} from "../../core/Block.ts"; export class Page500 extends Block { constructor() { diff --git a/src/pages/all-components/all-components.ts b/src/pages/all-components/all-components.ts index 2672727ab..adadebc51 100644 --- a/src/pages/all-components/all-components.ts +++ b/src/pages/all-components/all-components.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block"; +import {IProps,Block} from "../../core/Block.ts"; import {chat1, mockListChats} from "../../mocks/chat.mocks.ts"; import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {mockUser} from "../../mocks/user-profile.mocks.ts"; diff --git a/src/pages/all-pages/all-pages.ts b/src/pages/all-pages/all-pages.ts index 1aa4fd2cd..b283d55c6 100644 --- a/src/pages/all-pages/all-pages.ts +++ b/src/pages/all-pages/all-pages.ts @@ -1,4 +1,4 @@ -import {Block} from "../../utils/Block"; +import {Block} from "../../core/Block.ts"; export class AllPages extends Block { diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 376673b6b..c74a6f5ba 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -1,9 +1,7 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; -import Router from "../../utils/Router.ts"; -import {BASE_URLS} from "../../config.ts"; import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; export interface IPageChatProps extends IProps { @@ -17,20 +15,20 @@ export class PageChat extends Block { constructor() { const props: IPageChatProps = { - currentUser: window.user||null, - currentChat: window.currentChat||null, + currentUser: window.store.getState().user || null, + currentChat: window.store.getState().currentChat || null, chatList: [], - messageList:[], - setCurrentChat:(chat:IChat)=>{ + messageList: [], + setCurrentChat: (chat: IChat) => { setStateCurrentChat(chat); - this.props.currentChat=chat; + this.props.currentChat = chat; this.setProps(this.props) }, events: {} } super(props); - if (!window.user) Router.getRouter().go(BASE_URLS['page-login']); - initChatPage(); + //if (!window.user) Router.getRouter().go(BASE_URLS['page-login']); + } public get props(){ return this._props as IPageChatProps; diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 60687146f..2c6886533 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,7 +1,7 @@ -import {IProps, Block} from "../../utils/Block"; +import {IProps, Block} from "../../core/Block.ts"; import {BASE_URLS} from "../../config.ts"; import { signIn} from "../../services/auth.ts"; -import Router from "../../utils/Router.ts"; +import Router from "../../core/router.ts"; export interface ILoginPageProps extends IProps { @@ -27,7 +27,12 @@ export class LoginPage extends Block { if (!password) { return; } - signIn({login, password}).catch((error)=>console.log(error)).then(()=>Router.getRouter().go(BASE_URLS['page-chat'])) + signIn({login, password}) + .catch((error)=>console.log('login',error)) + .then(()=> { + console.log('loginOk') + Router.getRouter().go(BASE_URLS['page-chat']) + }) } } // getUser().catch(error=>console.log(error)) diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index 801e355b7..992d78306 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {updateUserPassword} from "../../services/user-settings.ts"; @@ -11,7 +11,7 @@ export class PagePasswordEdit extends Block { constructor() { const props:ILoginPageProps={ events:{}, - user:window.user, + user:window.store.getState().user, onChange: async (event: Event) => { event.preventDefault(); const oldPassword = this.refs.form.getRefs()?.oldPassword.value(); diff --git a/src/pages/profile-edit/profile-edit.ts b/src/pages/profile-edit/profile-edit.ts index d651173f9..03359e30a 100644 --- a/src/pages/profile-edit/profile-edit.ts +++ b/src/pages/profile-edit/profile-edit.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {IPageProfileProps} from "../profile/profile.ts"; import {updateUserProfile} from "../../services/user-settings.ts"; @@ -11,7 +11,7 @@ export class PageProfileEdit extends Block { constructor() { const props:IPageProfileEditProps={ events:{}, - user:window.user, + user:window.store.getState().user, onChange: async (event: Event) => { event.preventDefault(); const login = this.refs.form.getRefs()?.login.value(); diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index b23c9d65e..3ffa3fafc 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; export interface IPageProfileProps extends IProps { @@ -8,7 +8,7 @@ export class PageProfile extends Block { constructor() { const props:IPageProfileProps= { - user: window.user, + user: window.store.getState().user, events: {} } diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index e21180b3c..3cd06e78a 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../utils/Block.ts"; +import {IProps,Block} from "../../core/Block.ts"; import {signUp} from "../../services/auth.ts"; import {IUser} from "../../models/IUser.ts"; import {BASE_URLS} from "../../config.ts"; diff --git a/src/services/app.ts b/src/services/app.ts index af141a548..290b36157 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -1,64 +1,90 @@ import {getUser} from "./auth.ts"; -import Router from "../utils/Router.ts"; +import Router from "../core/router.ts"; import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; -import {getChats, getChatUsers} from "./chat.ts"; +import {getChats, getChatToken, getChatUsers} from "./chat.ts"; import {IChat} from "../models/IChat.ts"; const initialStateApp = async () => { - let result = null; + let user = null; try { - result = await getUser(); + user = await getUser(); } catch (error) { Router.getRouter().go(BASE_URLS['page-login']); return; } - setStateUser(result); - console.log('window.user_initial', window.user, Router.getRouter()); + setStateUser(user); + console.log('user_initial', window.store.getState()); await initChatPage(); - /*const chats = await getChats(); - window.store.set({user: me, chats}); - navigate('emails')*/ } const initChatPage = async () => { - let result:IChat[]=[]; + let chats:IChat[]=[]; try { - result = await getChats(); + chats = await getChats(); } catch (error) { - window.chats = result; + setStateChats(chats) } - console.log('window.chat_initial', result) - window.chats = result; + console.log('chats_initial', chats) + setStateChats(chats) } - -const setStateCurrentChat = async (chat: IChat | null) => { - if (chat) { - let result:IUser[]=[]; - try { - result = await getChatUsers(String(chat.id)); - } - catch (error) { - chat.users = result; - } - chat.users = result; +const initChatUsers = async (chat: IChat | null) => { + if (!chat) return; + let users:IUser[]=[]; + try { + users = await getChatUsers(String(chat.id)); + } + catch (error) { + setStateUsers(chat,[]) + } + console.log('users_initial', users); + setStateUsers(chat,users) +} +const initChatToken = async (chat: IChat | null) => { + if (!chat) return; + let token=''; + try { + token = await getChatToken(String(chat.id)); + } + catch (error) { + setStateToken(chat,token) } - window.currentChat = chat; + console.log('token_initial', token); + setStateToken(chat,token) +} +const setStateUser = (user: IUser|null) => { + window.store.set({user:user}); +} +const setStateChats = (chats: IChat[]|null) => { + window.store.set({chats:chats}); } -const setStateUser = (user: IUser) => { - window.user = user; +const setStateUsers = (chat:IChat,users:IUser[]) => { + chat.users=[...users]; + window.store.set({currentChat:chat}); } -const setStateUsers = async () => { - if (!window.currentChat) return; - window.currentChat.users = await getChatUsers(String(window.currentChat.id)); +const setStateToken = (chat:IChat,token:string) => { + chat.token=token; + window.store.set({currentChat:chat}); +} +const setStateCurrentChat = async (chat: IChat | null) => { + await initChatUsers(chat); + await initChatToken(chat); + window.store.set({currentChat: chat}); } + + + + export { initialStateApp, setStateUser, initChatPage, setStateCurrentChat, - setStateUsers + setStateUsers, + initChatToken, + initChatUsers, + setStateToken } diff --git a/src/services/auth.ts b/src/services/auth.ts index 3bf321640..472d74d11 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -1,33 +1,34 @@ import {IAuthData, IUser} from "../models/IUser.ts"; import AuthApi from "../api/auth.ts"; import {responseHasError} from "../utils/api.utils.ts"; -import Router from "../utils/Router.ts"; +import Router from "../core/router.ts"; import {BASE_URLS} from "../config.ts"; -import {initialStateApp} from "./app.ts"; +import {initialStateApp, setStateUser} from "./app.ts"; -const authApi=new AuthApi('/auth'); +const authApi = new AuthApi('/auth'); const signUp = async (data: IUser) => { - const result= await authApi.signUp(data); - console.log(result) + const result = await authApi.signUp(data); + responseHasError(result); + return JSON.parse(result.responseText); } -const signIn= async (data: IAuthData) => { - const result=await authApi.signIn(data); - responseHasError(result as XMLHttpRequest); - await initialStateApp(); +const signIn = async (data: IAuthData) => { + const result = await authApi.signIn(data); + const error = responseHasError(result as XMLHttpRequest); + if (!error) await initialStateApp(); } -const getUser= async () => { - const result=await authApi.getAuthUser() as XMLHttpRequest; +const getUser = async () => { + const result = await authApi.getAuthUser() as XMLHttpRequest; responseHasError(result); - return JSON.parse( result.responseText); + return JSON.parse(result.responseText); } -const logOut= async () => { - const result=await authApi.logOut() as XMLHttpRequest; - const error=responseHasError(result); - if(error) throw Error(error); - window.user=null; +const logOut = async () => { + const result = await authApi.logOut() as XMLHttpRequest; + const error = responseHasError(result); + if (error) throw Error(error); + setStateUser(null); Router.getRouter().go(BASE_URLS['page-login']); } diff --git a/src/services/chat.ts b/src/services/chat.ts index 153e9867c..811844507 100644 --- a/src/services/chat.ts +++ b/src/services/chat.ts @@ -37,10 +37,19 @@ const getChatUsers=async (idChat:string):Promise => { if(error) throw Error(error); return JSON.parse( result.responseText); } +const getChatToken=async (idChat:string):Promise => { + const result=await chatApi.getChatToken(idChat) as XMLHttpRequest; + const error=responseHasError(result); + if(error) throw Error(error); + return JSON.parse( result.responseText).token; +} + + export { getChats, createChat, addChatUser, getChatUsers, - deleteChatUsers + deleteChatUsers, + getChatToken } diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts index 6f5f02b4a..796c80969 100644 --- a/src/services/user-settings.ts +++ b/src/services/user-settings.ts @@ -2,7 +2,7 @@ import UserSettingsApi from "../api/user-settings.ts"; import {IPasswords, IUser} from "../models/IUser.ts"; import {responseHasError} from "../utils/api.utils.ts"; import {setStateUser} from "./app.ts"; -import Router from "../utils/Router.ts"; +import Router from "../core/router.ts"; const userApi=new UserSettingsApi('/user'); diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts index 498e2cec3..42d7e44b8 100644 --- a/src/utils/api.utils.ts +++ b/src/utils/api.utils.ts @@ -1,8 +1,8 @@ import {BASE_URLS} from "../config.ts"; -import Router from "./Router.ts"; -import alertController from "./alert-controller.ts"; +import Router from "../core/router.ts"; +import alertController from "../core/alert-controller.ts"; import Alert from "../components/alert"; -import Block from "./Block.ts"; +import Block from "../core/Block.ts"; export const responseHasError = (response: XMLHttpRequest) => { @@ -17,7 +17,8 @@ export const responseHasError = (response: XMLHttpRequest) => { if (error.includes('Cookie')) { showAlert('Please, login!'); } else showAlert(error); - if (error) throw Error(error); + //if (error) throw Error(error); + return error; } } From eb7944d838b4bd13e2ef318a2d8734dc5ed51499 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Wed, 11 Oct 2023 22:23:25 +0400 Subject: [PATCH 18/43] add socket --- src/api/socket.ts | 65 ++++++++++++++ src/components/avatar/avatar.ts | 6 +- src/components/chat-list/chat-list.ts | 14 +-- src/components/form-profile/form-profile.ts | 4 +- src/components/index.ts | 2 + src/components/message-list-footer/index.ts | 2 + .../message-list-footer.ts | 85 +++++++++++++++++++ .../message-list-footer/message-list.pcss | 79 +++++++++++++++++ src/components/message-list-header/index.ts | 2 + .../message-list-header.ts | 53 ++++++++++++ .../message-list-header/message-list.pcss | 79 +++++++++++++++++ src/components/message-list/message-list.ts | 80 ++--------------- .../modal-chat-users/modal-chat-users.ts | 20 ++--- src/config.ts | 1 + src/core/event-bus.ts | 3 +- src/core/store.ts | 16 ++-- src/models/IChat.ts | 1 + src/pages/chat-page/chat-page.hbs | 3 +- src/pages/chat-page/page-chat.ts | 10 ++- src/pages/profile/profile.ts | 10 ++- src/services/app.ts | 51 ++++++----- src/services/send-message.ts | 27 ++++++ 22 files changed, 481 insertions(+), 132 deletions(-) create mode 100644 src/components/message-list-footer/index.ts create mode 100644 src/components/message-list-footer/message-list-footer.ts create mode 100644 src/components/message-list-footer/message-list.pcss create mode 100644 src/components/message-list-header/index.ts create mode 100644 src/components/message-list-header/message-list-header.ts create mode 100644 src/components/message-list-header/message-list.pcss create mode 100644 src/services/send-message.ts diff --git a/src/api/socket.ts b/src/api/socket.ts index e69de29bb..689b27adb 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -0,0 +1,65 @@ +//'wss://ya-praktikum.tech/ws/chats///' +class SocketIO { + private 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 open=(callBack: () => void) =>{ + this.socket?.addEventListener('open', callBack); + } + + public close=(callBack: (event: CloseEvent) => void)=> { + const funk = (event: CloseEvent) => { + callBack(event); + if (event.wasClean) { + console.log('Соединение закрыто чисто'); + } else { + console.log('Обрыв соединения'); + } + + console.log(`Код: ${event.code} | Причина: ${event.reason}`); + } + this.socket?.addEventListener('close', funk); + } + + public message=(callBack: (event: MessageEvent) => void)=> { + const funk = (event: MessageEvent) => { + callBack(event); + console.log('Получены данные', event.data); + } + this.socket?.addEventListener('message', funk); + } + + public error(callBack: (event: Event) => void) { + this.socket?.addEventListener('error', callBack); + } + + public send=(message: string)=> { + const _message = JSON.stringify( + { + content: message, + type: "message" + }) + this.socket?.send(_message); + } + + public ping=()=> { + this.socket?.send(JSON.stringify({ + type: "ping" + })); + } + + +} + +export default SocketIO; diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 344c6be77..f6767bcb7 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -24,11 +24,13 @@ export class Avatar extends Block { } } }) - } + public get props(){ + return this._props as IAvatarProps; + } protected render(): string { - const {size = 'md', isLoadAvatar = false, imageUrl = ''} = this._props as IAvatarProps; + const {size = 'md', isLoadAvatar = false, imageUrl = ''} = this.props; return (`
    ${imageUrl ? ` diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 57e06e85d..ed02012ca 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -6,7 +6,8 @@ import {IUser} from "../../models/IUser.ts"; import modalController from "../../core/modal-controller.ts"; import ModalPrompt from "../modal-prompt"; import {createChat} from "../../services/chat.ts"; -import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; +import {initChatPage} from "../../services/app.ts"; +import {StoreEvents} from "../../core/store.ts"; interface IChatListProps extends IProps { @@ -39,19 +40,22 @@ export class ChatList extends Block { events: { click: (e: Event) => { if (!(e.target as HTMLElement).className.includes('chat-item__caption__name')) return; - const currentChat = (e.target as HTMLElement).id; - - /*setStateCurrentChat(props.list.find(item => item.id === Number(currentChat))||null);*/ this.props.setCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); } } }) + + window.store.on(StoreEvents.Updated, () => { + this.props.list=window.store.getState().chats||[]; + this.setProps(this.props); + }); } public get props(){ return this._props as IChatListProps; } + getChats(list: IChat[]): string { if (!list || list.length === 0) return ''; return list.map(chat => { @@ -68,7 +72,7 @@ export class ChatList extends Block { } protected render(): string { - const {list, currentUser} = this._props as IChatListProps; + const {list, currentUser} = this.props; return (`
    diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 1fae6f6bb..91eef8335 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -29,7 +29,6 @@ export class FormProfile extends Block { Router.getRouter().back(); } props.user=window.store.getState().user; - super(props); } public get props(){ @@ -38,12 +37,13 @@ export class FormProfile extends Block { protected render(): string { const {user,withButton=false,children='',buttonText=''}=this.props; if(!user)return ''; + console.log('user_profile',user); const {avatar='',first_name,second_name}=user; return(`
    - {{{ Avatar imageUrl="${avatar}" isLoadAvatar=true }}} + {{{ Avatar imageUrl='${avatar}' isLoadAvatar=true }}}

    ${first_name} ${second_name}

    ${user ? diff --git a/src/components/index.ts b/src/components/index.ts index d81b394a8..4eb2d6859 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -23,3 +23,5 @@ export { default as MenuItem } from './menu-item'; export { default as MenuMessage } from './menu-message'; export { default as MenuChat } from './menu-chat'; export { default as Alert } from './alert'; +export { default as MessageListFooter } from './message-list-footer'; +export { default as MessageListHeader } from './message-list-header'; diff --git a/src/components/message-list-footer/index.ts b/src/components/message-list-footer/index.ts new file mode 100644 index 000000000..bcb7ecf11 --- /dev/null +++ b/src/components/message-list-footer/index.ts @@ -0,0 +1,2 @@ +import './message-list.pcss'; +export { MessageListFooter as default } from './message-list-footer.ts'; diff --git a/src/components/message-list-footer/message-list-footer.ts b/src/components/message-list-footer/message-list-footer.ts new file mode 100644 index 000000000..65bb6d611 --- /dev/null +++ b/src/components/message-list-footer/message-list-footer.ts @@ -0,0 +1,85 @@ +import {IProps, Block} from "../../core/Block.ts"; +import {IChatMessage} from "../../models/IChatMessage.ts"; +import {IUser} from "../../models/IUser.ts"; +import {validateMessage} from "../../utils/validates.utils.ts"; +import {IChat} from "../../models/IChat.ts"; +import {sendMessage} from "../../services/send-message.ts"; + + +interface IMessageListProps extends IProps { + messageList: IChatMessage[]; + currentUser: IUser; + currentChat: IChat|null; + onBlurMessage?: () => void; + message?: string; + onClickSend?: () => void; + openMenuMessage?: () => void; + openMenuChat?: () => void; + isOpenedMenuMessage: boolean; + isOpenedMenuChat: boolean; +} + +export class MessageListFooter extends Block { + constructor(props: IMessageListProps) { + props.isOpenedMenuMessage = false; + props.onBlurMessage = () => this.validate(); + props.onClickSend = () => { + if (!validateMessage(this.valueMessage())) { + console.log('Send Message:' + this.valueMessage()); + sendMessage( this.valueMessage()); + } + else console.log('Error! Can not send!') + } + props.openMenuMessage = () => { + this.props.isOpenedMenuMessage = !this.props.isOpenedMenuMessage; + this.setProps(this.props); + } + super(props); + } + + public get props() { + return this._props as IMessageListProps; + } + + public valueMessage() { + if (!this.validate()) { + return ''; + } + return this.refs?.message.value() + } + + private validate() { + const value = this.refs?.message.value(); + const error = validateMessage(value); + + this.props.message = value; + if (error) { + console.log('Message can not be blank') + this.setProps(this.props); + return false; + } + this.setProps(this.props); + return true; + } + + protected render(): string { + const { message = '',isOpenedMenuMessage} = this.props; + + return (` +
    + {{{ MenuMessage isOpenedMenu=${isOpenedMenuMessage } closeMenu=openMenuMessage}}} + {{{ Button type="paperclip" onClick=openMenuMessage}}} + {{{ Input + ref="message" + type="text" + classes="message-list__footer__input" + value='${message}' + placeholder="Message" + name="message" + onBlur=onBlurMessage + }}} + {{{ Button type="arrow" onClick=onClickSend}}} +
    + `) + } +} diff --git a/src/components/message-list-footer/message-list.pcss b/src/components/message-list-footer/message-list.pcss new file mode 100644 index 000000000..46d359f73 --- /dev/null +++ b/src/components/message-list-footer/message-list.pcss @@ -0,0 +1,79 @@ +.message-list { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100vh; + width: 100%; + padding: 10px; + + .message-list__header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--gray-light); + padding: 10px; + + .message-list__header__avatar { + display: flex; + align-items: center; + + .message-list__header__title { + padding-left: 20px; + span{ + font-size: 16px; + font-weight: bold; + } + + } + } + + } + + .message-list__main { + display: flex; + flex-direction: column; + overflow-y: auto; + padding: 20px 0; + margin-bottom:20px; + height: 100%; + list-style-type: none; + + .message-list__main__message{ + margin:20px 10px; + } + } + + .message-list__footer { + position: relative; + width: 100%; + max-height: 200px; + padding: 10px; + border-top: 1px solid var(--gray-light); + display: grid; + grid-template-columns: auto 1fr auto; + column-gap: 10px; + align-items: center; + + .message-list__footer__input{ + padding: 15px 10px; + border-radius: 15px; + background-color: var(--gray-0); + border:none; + + } + } + +} +.message-list__empty{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + p{ + font-weight: 600; + font-size: 16px; + opacity:70%; + } + +} diff --git a/src/components/message-list-header/index.ts b/src/components/message-list-header/index.ts new file mode 100644 index 000000000..ca09dcef8 --- /dev/null +++ b/src/components/message-list-header/index.ts @@ -0,0 +1,2 @@ +import './message-list.pcss'; +export { MessageListHeader as default } from './message-list-header.ts'; diff --git a/src/components/message-list-header/message-list-header.ts b/src/components/message-list-header/message-list-header.ts new file mode 100644 index 000000000..8077dd87e --- /dev/null +++ b/src/components/message-list-header/message-list-header.ts @@ -0,0 +1,53 @@ +import {IProps, Block} from "../../core/Block.ts"; +import {IChat} from "../../models/IChat.ts"; +import {StoreEvents} from "../../core/store.ts"; + +interface IMessageListProps extends IProps { + currentChat: IChat|null; + openMenuMessage?: () => void; + openMenuChat?: () => void; + isOpenedMenuChat: boolean; +} + +export class MessageListHeader extends Block { + constructor(props: IMessageListProps) { + props.isOpenedMenuChat = false; + props.currentChat = window.store.getState().currentChat; + props.openMenuChat = () => { + this.props.isOpenedMenuChat = !this.props.isOpenedMenuChat; + this.props.currentChat = window.store.getState().currentChat; + this.setProps(this.props); + } + super(props); + + window.store.on(StoreEvents.Updated, () => { + this.props.currentChat=window.store.getState().currentChat; + this.setProps(this.props); + }); + } + + public get props() { + return this._props as IMessageListProps; + } + + protected render(): string { + const {isOpenedMenuChat,currentChat} = this.props; + const countUsers=currentChat?.users?.length||1; + if(!currentChat)return ''; + const {avatar,title} = currentChat; + return (` +
    +
    + {{{ Avatar imageUrl='${avatar||''}' size='sm' }}} +
    + ${title} +

    ${countUsers+' members'}

    +
    +
    + {{{ Button type="dots" onClick=openMenuChat}}} + {{{ MenuChat isOpenedMenu=${isOpenedMenuChat } closeMenu=openMenuChat}}} +
    + + `) + } +} diff --git a/src/components/message-list-header/message-list.pcss b/src/components/message-list-header/message-list.pcss new file mode 100644 index 000000000..46d359f73 --- /dev/null +++ b/src/components/message-list-header/message-list.pcss @@ -0,0 +1,79 @@ +.message-list { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100vh; + width: 100%; + padding: 10px; + + .message-list__header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--gray-light); + padding: 10px; + + .message-list__header__avatar { + display: flex; + align-items: center; + + .message-list__header__title { + padding-left: 20px; + span{ + font-size: 16px; + font-weight: bold; + } + + } + } + + } + + .message-list__main { + display: flex; + flex-direction: column; + overflow-y: auto; + padding: 20px 0; + margin-bottom:20px; + height: 100%; + list-style-type: none; + + .message-list__main__message{ + margin:20px 10px; + } + } + + .message-list__footer { + position: relative; + width: 100%; + max-height: 200px; + padding: 10px; + border-top: 1px solid var(--gray-light); + display: grid; + grid-template-columns: auto 1fr auto; + column-gap: 10px; + align-items: center; + + .message-list__footer__input{ + padding: 15px 10px; + border-radius: 15px; + background-color: var(--gray-0); + border:none; + + } + } + +} +.message-list__empty{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + p{ + font-weight: 600; + font-size: 16px; + opacity:70%; + } + +} diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index 658d0a310..401c1fd42 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -1,71 +1,34 @@ import {IProps, Block} from "../../core/Block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; -import {Message} from "../index.ts"; +import {Message } from "../index.ts"; import {IMessageProps} from "../message/message.ts"; -import {validateMessage} from "../../utils/validates.utils.ts"; import {IChat} from "../../models/IChat.ts"; +import {StoreEvents} from "../../core/store.ts"; interface IMessageListProps extends IProps { messageList: IChatMessage[]; currentUser: IUser; currentChat: IChat|null; - onBlurMessage?: () => void; - message?: string; - onClickSend?: () => void; openMenuMessage?: () => void; openMenuChat?: () => void; - isOpenedMenuMessage: boolean; isOpenedMenuChat: boolean; } export class MessageList extends Block { constructor(props: IMessageListProps) { - props.isOpenedMenuMessage = false; - props.isOpenedMenuChat = false; props.currentChat = window.store.getState().currentChat; - props.onBlurMessage = () => this.validate(); - props.onClickSend = () => { - if (!validateMessage(this.valueMessage())) console.log('Send Message:' + this.valueMessage()); - else console.log('Error! Can not send!') - } - props.openMenuMessage = () => { - this.props.isOpenedMenuMessage = !this.props.isOpenedMenuMessage; - this.setProps(this.props); - } - props.openMenuChat = () => { - this.props.isOpenedMenuChat = !this.props.isOpenedMenuChat; - this.setProps(this.props); - } - super(props); + window.store.on(StoreEvents.Updated, () => { + this.props.currentUser=window.store.getState().user as IUser; + this.setProps(this.props); + }); } public get props() { return this._props as IMessageListProps; } - public valueMessage() { - if (!this.validate()) { - return ''; - } - return this.refs?.message.value() - } - - private validate() { - const value = this.refs?.message.value(); - const error = validateMessage(value); - - this.props.message = value; - if (error) { - console.log('Message can not be blank') - this.setProps(this.props); - return false; - } - this.setProps(this.props); - return true; - } - getListMessages(list: IChatMessage[]): string { if (!list || list.length === 0) return ''; return list.map(message => { @@ -79,43 +42,18 @@ export class MessageList extends Block { } protected render(): string { - const {messageList, message = '',isOpenedMenuMessage,isOpenedMenuChat,currentChat} = this.props; - const countUsers=currentChat?.users?.length||1; + const {messageList,currentChat} = this.props; if(!currentChat) return (`

    Select a chat to write a message

    `) - const {avatar,title} = currentChat; return (`
    -
    -
    - {{{ Avatar imageUrl='${avatar||''}' size='sm' }}} -
    - ${title} -

    ${countUsers+' members'}

    -
    -
    - {{{ Button type="dots" onClick=openMenuChat}}} - {{{ MenuChat isOpenedMenu=${isOpenedMenuChat } closeMenu=openMenuChat}}} -
    + {{{ MessageListHeader }}}
      ${this.getListMessages(messageList)}
    -
    - {{{ MenuMessage isOpenedMenu=${isOpenedMenuMessage } closeMenu=openMenuMessage}}} - {{{ Button type="paperclip" onClick=openMenuMessage}}} - {{{ Input - ref="message" - type="text" - classes="message-list__footer__input" - value='${message}' - placeholder="Message" - name="message" - onBlur=onBlurMessage - }}} - {{{ Button type="arrow" onClick=onClickSend}}} -
    + {{{MessageListFooter }}}
    `) } diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index cc9300252..14e98d1d0 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -25,12 +25,9 @@ export class ModalChatUsers extends Block { return; } searchUsersByLogin(input).then((users) => { - console.log('users', users) this.props.users = users; this.setProps(this.props) }) - /*this.props.okClick&&this.props.okClick(input); - modalController.closeModal();*/ } props.cancelClick = () => { modalController.closeModal(); @@ -43,14 +40,15 @@ export class ModalChatUsers extends Block { click: (e: Event) => { e.stopPropagation(); const id = (e.target as HTMLElement).id; - console.log(id); const chat=window.store.getState().currentChat; - if ( chat&& id&&props.type==='add') addChatUser({ - users: [Number(id)], - chatId:chat.id - }).then(() => { - initChatUsers(chat).then(()=>modalController.closeModal()); - }) + if ( chat&& id&&props.type==='add') { + addChatUser({ + users: [Number(id)], + chatId: chat.id + }).then(() => { + initChatUsers(chat).then(() => modalController.closeModal()); + }) + } if(props.type==='delete'&&chat){ deleteChatUsers({ users: [Number(id)], @@ -89,7 +87,7 @@ export class ModalChatUsers extends Block { return (` {{{ Modal caption='${this.props.type === 'add' ? 'Add User' : 'Delete User'}' - okText='Save' + okText='${this.props.type === 'add' ?'Find users':'OK'}' cancelText='Cancel' okClick=okInputClick cancelClick=cancelClick diff --git a/src/config.ts b/src/config.ts index fcbe531a1..541b268dc 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,6 +1,7 @@ export const urlImages = '/'; export const BASE_API_URL='https://ya-praktikum.tech/api/v2'; export const BASE_RESOURCES_URL='https://ya-praktikum.tech/api/v2/resources'; +export const BASE_SOCKET_CHAT='wss://ya-praktikum.tech/ws/chats/'; export const BASE_URLS={ 'page-login':"/login", 'page-sign-up':"/sign-up", diff --git a/src/core/event-bus.ts b/src/core/event-bus.ts index 537d73c7a..7779c9878 100644 --- a/src/core/event-bus.ts +++ b/src/core/event-bus.ts @@ -39,7 +39,8 @@ export default class EventBus { */ emit(event: string, ...args: object[]) { if (!this.listeners[event]) { - throw new Error(`Нет события: ${event}`); + //throw new Error(`Нет события: ${event}`);ret + return; } this.listeners[event].forEach(listener => { diff --git a/src/core/store.ts b/src/core/store.ts index ed720a9a9..e4174a75c 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -10,20 +10,24 @@ export class Store> extends EventBus { constructor(initState: State) { super(); this.state = initState; - this.on(StoreEvents.Updated, this._set.bind(this)); + //this.on(StoreEvents.Updated, this._set.bind(this)); + this.set(this.state); } public getState() { return this.state; } - private _set(nextState: Partial) { - const prevState = {...this.state}; - this.set(nextState); - this.emit(StoreEvents.Updated, prevState, nextState); - } +/* private _set(nextState: Partial) { + + }*/ public set(nextState: Partial) { + const prevState = {...this.state}; +console.log('nextState',nextState) + this.state = {...this.state, ...nextState}; + console.log('this.state ',this.state ) + this.emit(StoreEvents.Updated, prevState, nextState); } } diff --git a/src/models/IChat.ts b/src/models/IChat.ts index 447cc9968..e5575dbb7 100644 --- a/src/models/IChat.ts +++ b/src/models/IChat.ts @@ -9,6 +9,7 @@ export interface IChat { created_by: number; last_message?: ILastMessage; users?:IUser[]; + connection?:SocketIO|null; } export interface ILastMessage { diff --git a/src/pages/chat-page/chat-page.hbs b/src/pages/chat-page/chat-page.hbs index 9c7684995..392fbc151 100644 --- a/src/pages/chat-page/chat-page.hbs +++ b/src/pages/chat-page/chat-page.hbs @@ -3,7 +3,6 @@ {{>ChatList list=chatList}}
    - {{>MessageList messageList=messageList currentUser=currentUser}} + {{>MessageListFooter messageList=messageList currentUser=currentUser}}
    - diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index c74a6f5ba..88dafb49c 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -2,7 +2,7 @@ import {IProps,Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; -import {initChatPage, setStateCurrentChat} from "../../services/app.ts"; +import { setStateCurrentChat} from "../../services/app.ts"; export interface IPageChatProps extends IProps { currentUser:IUser|null, @@ -20,9 +20,11 @@ export class PageChat extends Block { chatList: [], messageList: [], setCurrentChat: (chat: IChat) => { - setStateCurrentChat(chat); - this.props.currentChat = chat; - this.setProps(this.props) + setStateCurrentChat({...chat}).then(()=>{ + this.props.currentChat = chat; + this.setProps(this.props) + }) + }, events: {} } diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index 3ffa3fafc..624f5866e 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,5 +1,6 @@ import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; +import {StoreEvents} from "../../core/store.ts"; export interface IPageProfileProps extends IProps { user:IUser|null @@ -11,10 +12,15 @@ export class PageProfile extends Block { user: window.store.getState().user, events: {} } - + window.store.on(StoreEvents.Updated, () => { + this.props.user={...window.store.getState().user}as IUser; + this.setProps(this.props); + }); super(props); } - + public get props(){ + return this._props as IPageProfileProps; + } getChildren() { const user=(this._props as IPageProfileProps).user; if(!user )return '' diff --git a/src/services/app.ts b/src/services/app.ts index 290b36157..14764ba93 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -4,6 +4,8 @@ import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; import {getChats, getChatToken, getChatUsers} from "./chat.ts"; import {IChat} from "../models/IChat.ts"; +import {cloneDeep} from "../utils/object.utils.ts"; +import {openConnectMessages} from "./send-message.ts"; const initialStateApp = async () => { @@ -20,11 +22,10 @@ const initialStateApp = async () => { } const initChatPage = async () => { - let chats:IChat[]=[]; + let chats: IChat[] = []; try { chats = await getChats(); - } - catch (error) { + } catch (error) { setStateChats(chats) } console.log('chats_initial', chats) @@ -33,51 +34,49 @@ const initChatPage = async () => { } const initChatUsers = async (chat: IChat | null) => { if (!chat) return; - let users:IUser[]=[]; + let users: IUser[] = []; try { users = await getChatUsers(String(chat.id)); - } - catch (error) { - setStateUsers(chat,[]) + } catch (error) { + setStateUsers(chat, []) } console.log('users_initial', users); - setStateUsers(chat,users) + setStateUsers(chat, users) } const initChatToken = async (chat: IChat | null) => { if (!chat) return; - let token=''; + let token = ''; try { token = await getChatToken(String(chat.id)); - } - catch (error) { - setStateToken(chat,token) + } catch (error) { + setStateToken(chat, token) } console.log('token_initial', token); - setStateToken(chat,token) + setStateToken(chat, token) } -const setStateUser = (user: IUser|null) => { - window.store.set({user:user}); +const setStateUser = (user: IUser | null) => { + window.store.set({user: user}); } -const setStateChats = (chats: IChat[]|null) => { - window.store.set({chats:chats}); +const setStateChats = (chats: IChat[] | null) => { + window.store.set({chats: chats}); } -const setStateUsers = (chat:IChat,users:IUser[]) => { - chat.users=[...users]; - window.store.set({currentChat:chat}); +const setStateUsers = (chat: IChat, users: IUser[]) => { + chat.users = [...users]; + window.store.set({currentChat: chat}); } -const setStateToken = (chat:IChat,token:string) => { - chat.token=token; - window.store.set({currentChat:chat}); +const setStateToken = (chat: IChat, token: string) => { + chat.token = token; + window.store.set({currentChat: chat}); } const setStateCurrentChat = async (chat: IChat | null) => { await initChatUsers(chat); await initChatToken(chat); - window.store.set({currentChat: chat}); + const user = window.store.getState().user; + if (chat && user) openConnectMessages(chat, user); + window.store.set({currentChat: cloneDeep(chat)}); } - - export { initialStateApp, setStateUser, diff --git a/src/services/send-message.ts b/src/services/send-message.ts new file mode 100644 index 000000000..5fe024c84 --- /dev/null +++ b/src/services/send-message.ts @@ -0,0 +1,27 @@ +import {IChat} from "../models/IChat.ts"; +import {BASE_SOCKET_CHAT} from "../config.ts"; +import {IUser} from "../models/IUser.ts"; +import SocketIO from "../api/socket.ts"; + +export const openConnectMessages = (chat: IChat, currentUser: IUser) => { + if (chat.connection) { + chat.connection.ping(); + } else { + if (!chat.id) return; + const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); + socket.open(() => console.log('Open connect!')) + socket.message((event: MessageEvent) => console.log('Message!', event.data)) + socket.error((event: Event) => console.log('Error!', event)); + chat.connection = socket; + window.store.set({currentChat: chat}); + } +} + +export const sendMessage = (message: string) => { + const chat = window.store.getState().currentChat; + if (!chat) throw Error('Select Chat!'); + if (chat.connection) { + console.log(chat.connection) + chat.connection.send(message); + } +} From 64f89f88495a0197dec72f7ebe13bdf054c5bd9b Mon Sep 17 00:00:00 2001 From: ellevanova Date: Thu, 12 Oct 2023 17:15:28 +0400 Subject: [PATCH 19/43] added messages in chat --- src/api/socket.ts | 10 +++++- .../message-list-footer.ts | 2 +- src/components/message-list/message-list.ts | 4 ++- src/components/modal-avatar/modal-avatar.ts | 6 ++-- src/core/store.ts | 2 +- src/models/IChat.ts | 3 ++ src/models/IChatMessage.ts | 3 +- src/services/app.ts | 7 ++-- src/services/send-message.ts | 34 +++++++++++++++++-- src/services/user-settings.ts | 2 +- 10 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/api/socket.ts b/src/api/socket.ts index 689b27adb..face85c0a 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -44,7 +44,7 @@ class SocketIO { this.socket?.addEventListener('error', callBack); } - public send=(message: string)=> { + public sendMessage=(message: string)=> { const _message = JSON.stringify( { content: message, @@ -52,6 +52,14 @@ class SocketIO { }) 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({ diff --git a/src/components/message-list-footer/message-list-footer.ts b/src/components/message-list-footer/message-list-footer.ts index 65bb6d611..1e56889a5 100644 --- a/src/components/message-list-footer/message-list-footer.ts +++ b/src/components/message-list-footer/message-list-footer.ts @@ -28,7 +28,7 @@ export class MessageListFooter extends Block { console.log('Send Message:' + this.valueMessage()); sendMessage( this.valueMessage()); } - else console.log('Error! Can not send!') + else console.log('Error! Can not sendMessage!') } props.openMenuMessage = () => { this.props.isOpenedMenuMessage = !this.props.isOpenedMenuMessage; diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index 401c1fd42..db24803e7 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -18,9 +18,11 @@ interface IMessageListProps extends IProps { export class MessageList extends Block { constructor(props: IMessageListProps) { props.currentChat = window.store.getState().currentChat; + props.messageList = window.store.getState().currentChat?.messages||[]; super(props); window.store.on(StoreEvents.Updated, () => { this.props.currentUser=window.store.getState().user as IUser; + this.props.messageList = window.store.getState().currentChat?.messages||[]; this.setProps(this.props); }); } @@ -32,7 +34,7 @@ export class MessageList extends Block { getListMessages(list: IChatMessage[]): string { if (!list || list.length === 0) return ''; return list.map(message => { - const messageBlock = new Message({message: message, myMessage: message.main || false} as IMessageProps) + const messageBlock = new Message({message: message, myMessage: String(message.user_id)===String(this.props.currentUser.id)} as IMessageProps) return (`
    ${messageBlock.renderForList()} diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index 02a4e4b50..a115c1462 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -21,12 +21,14 @@ export class ModalAvatar extends Block { modalController.closeModal(); } props.cancelClick = () => { + console.log('cancel',this.props); const user = window.store.getState().user; - if (user && this.props.newAvatar) { + if (user && this.props.oldAvatar) { + this.props.newAvatar =''; updateUserProfile({...user, avatar: this.props.oldAvatar}).then(() => { modalController.closeModal(); }); - } else modalController.closeModal(); + } //else modalController.closeModal(); } diff --git a/src/core/store.ts b/src/core/store.ts index e4174a75c..bd06f954d 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -24,7 +24,7 @@ export class Store> extends EventBus { public set(nextState: Partial) { const prevState = {...this.state}; -console.log('nextState',nextState) + //console.log('nextState',nextState) this.state = {...this.state, ...nextState}; console.log('this.state ',this.state ) diff --git a/src/models/IChat.ts b/src/models/IChat.ts index e5575dbb7..bebf3a8bd 100644 --- a/src/models/IChat.ts +++ b/src/models/IChat.ts @@ -1,4 +1,6 @@ import {IUser} from "./IUser.ts"; +import SocketIO from "../api/socket.ts"; +import {IChatMessage} from "./IChatMessage.ts"; export interface IChat { id: number; @@ -10,6 +12,7 @@ export interface IChat { last_message?: ILastMessage; users?:IUser[]; connection?:SocketIO|null; + messages?:IChatMessage[]|null; } export interface ILastMessage { diff --git a/src/models/IChatMessage.ts b/src/models/IChatMessage.ts index d7d201c69..cd448febd 100644 --- a/src/models/IChatMessage.ts +++ b/src/models/IChatMessage.ts @@ -5,8 +5,9 @@ export interface IChatMessage { user_id: number; chat_id: number; time: string; - type: string; + type: string|'message'; content: number | string; file?: IFile; main?: boolean; + is_read?:boolean; } diff --git a/src/services/app.ts b/src/services/app.ts index 14764ba93..c267f099d 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -5,7 +5,7 @@ import {IUser} from "../models/IUser.ts"; import {getChats, getChatToken, getChatUsers} from "./chat.ts"; import {IChat} from "../models/IChat.ts"; import {cloneDeep} from "../utils/object.utils.ts"; -import {openConnectMessages} from "./send-message.ts"; +import { openConnectMessages} from "./send-message.ts"; const initialStateApp = async () => { @@ -72,7 +72,10 @@ const setStateCurrentChat = async (chat: IChat | null) => { await initChatUsers(chat); await initChatToken(chat); const user = window.store.getState().user; - if (chat && user) openConnectMessages(chat, user); + if (chat && user) { + openConnectMessages(chat, user); + + } window.store.set({currentChat: cloneDeep(chat)}); } diff --git a/src/services/send-message.ts b/src/services/send-message.ts index 5fe024c84..f9bf96465 100644 --- a/src/services/send-message.ts +++ b/src/services/send-message.ts @@ -8,9 +8,26 @@ export const openConnectMessages = (chat: IChat, currentUser: IUser) => { chat.connection.ping(); } else { if (!chat.id) return; + const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); - socket.open(() => console.log('Open connect!')) - socket.message((event: MessageEvent) => console.log('Message!', event.data)) + socket.open(() => { + console.log('Open connect!'); + if(chat.unread_count>0) getAllNewMessage(0); + }) + socket.message((event: MessageEvent) => { + //console.log('Message!', event.data); + const message=JSON.parse(event.data); + console.log('mesages',message) + if(!chat.messages)chat.messages=[]; + if(Array.isArray(message)) { + message.reverse(); + chat.messages = [...chat.messages, ...message]; + } + else chat.messages.push(message); + + + window.store.set({currentChat: {...chat}}); + }) socket.error((event: Event) => console.log('Error!', event)); chat.connection = socket; window.store.set({currentChat: chat}); @@ -22,6 +39,17 @@ export const sendMessage = (message: string) => { if (!chat) throw Error('Select Chat!'); if (chat.connection) { console.log(chat.connection) - chat.connection.send(message); + chat.connection.sendMessage(message); + } +} + +export const getAllNewMessage=(limit:number)=>{ + { + const chat = window.store.getState().currentChat; + if (!chat) throw Error('Select Chat!'); + if (chat.connection) { + console.log(chat.connection) + chat.connection.sendRequestForgetMessage(limit); + } } } diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts index 796c80969..fce5ec3af 100644 --- a/src/services/user-settings.ts +++ b/src/services/user-settings.ts @@ -12,7 +12,7 @@ const updateUserProfile=async (newUserData: IUser) => { const error=responseHasError(result); if(error) throw Error(error); setStateUser(JSON.parse(result.responseText)); - Router.getRouter().back(); + } const updateUserPassword=async (newUserPasswords: IPasswords) => { const result= await userApi.changeUserPassword(newUserPasswords); From 74e6eb75920517e71a588037e678b7f7d9ce6bff Mon Sep 17 00:00:00 2001 From: ellevanova Date: Thu, 12 Oct 2023 21:56:43 +0400 Subject: [PATCH 20/43] fixed errors --- src/api/socket.ts | 7 ++- src/components/chat-item/chat-item.ts | 48 ++++++++++----- src/components/chat-list/chat-list.pcss | 13 ++++- src/components/chat-list/chat-list.ts | 58 ++++++++++--------- src/components/form-profile/form-profile.ts | 3 +- src/components/message-list/message-list.ts | 15 ++++- .../modal-chat-users/modal-chat-users.ts | 6 +- src/pages/chat-page/page-chat.ts | 42 +++----------- src/services/app.ts | 19 +++--- src/services/chat.ts | 6 +- src/services/send-message.ts | 53 ++++++++++------- src/utils/date.utils.ts | 23 ++++++++ 12 files changed, 171 insertions(+), 122 deletions(-) create mode 100644 src/utils/date.utils.ts diff --git a/src/api/socket.ts b/src/api/socket.ts index face85c0a..a5ef95826 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -1,6 +1,7 @@ //'wss://ya-praktikum.tech/ws/chats///' class SocketIO { - private socket: WebSocket | null = null; + 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; @@ -14,6 +15,10 @@ class SocketIO { 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); } diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index 0f80798eb..ca6ad2eab 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -1,41 +1,57 @@ -import {IProps,Block} from "../../core/Block.ts"; -import {IChat} from "../../models/IChat.ts"; +import {IProps, Block} from "../../core/Block.ts"; +import {getShortDate} from "../../utils/date.utils.ts"; export interface IChatItemProps extends IProps { - chat:IChat, - onClick:()=>void + id: number; + title: string; + avatar: string|null; + unread_count: string|null; + last_message_content:string|null; + last_message_time:string|null; + + onClick: (id:string) => void } export class ChatItem extends Block { constructor(props: IChatItemProps) { super({ ...props, + events: { + click: (e: Event) => { + e.stopPropagation(); + props.onClick(String(this.props.id)); + } + } }) } - public renderForList=this.render; + public get props() { + return this._props as IChatItemProps; + } + protected render(): string { - const { chat } = this._props as IChatItemProps; + const {id,title,avatar,unread_count,last_message_content,last_message_time} = this._props as IChatItemProps; + return (`
  • - {{{ Avatar imageUrl=${chat.avatar} isLoadAvatar=false size='sm' }}} + {{{ Avatar imageUrl=${avatar} isLoadAvatar=false size='sm' }}}
    -
    - ${chat.title} +
    + ${title}
    - ${chat.last_message?`
    - ${chat.last_message?.time} -
    `:``} + ${last_message_time ? `
    + ${ getShortDate(last_message_time)} +
    ` : ``}
    - ${chat.last_message?`
    + ${last_message_content ? `
    -

    ${chat.last_message?.content}

    +

    ${last_message_content}

    - {{{ Button type="number" caption=${chat.unread_count}}}} -
    `:`
    + ${unread_count ? `{{{ Button type="number" caption='${unread_count}' }}}` : ''} +
    ` : `

    no messages

    `} diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss index 674220f07..c228a3812 100644 --- a/src/components/chat-list/chat-list.pcss +++ b/src/components/chat-list/chat-list.pcss @@ -1,11 +1,13 @@ .chat-list { - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: auto auto 1fr 10px; + border-right: 1px solid var(--gray-light); - height: 100%; + height: 100vh; padding: 10px; + .chat-list__header { display: flex; justify-content: space-between; @@ -21,6 +23,11 @@ .chat-list__chats { overflow-y: auto; + overflow-x: hidden; list-style-type: none; + //max-height: 80%; + } + .chat-list__footer { + } } diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index ed02012ca..a92fb9ce6 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -1,12 +1,10 @@ import {IProps, Block} from "../../core/Block.ts"; import {IChat} from "../../models/IChat.ts"; -import {ChatItem} from "../index.ts"; -import {IChatItemProps} from "../chat-item/chat-item.ts"; import {IUser} from "../../models/IUser.ts"; import modalController from "../../core/modal-controller.ts"; import ModalPrompt from "../modal-prompt"; import {createChat} from "../../services/chat.ts"; -import {initChatPage} from "../../services/app.ts"; +import {updateChats, setStateCurrentChat} from "../../services/app.ts"; import {StoreEvents} from "../../core/store.ts"; @@ -14,11 +12,12 @@ interface IChatListProps extends IProps { list: IChat[], currentUser: IUser | null, showModalAddChat: () => void, - setCurrentChat:(chat:IChat|null)=>void + setCurrentChat: (chat: string) => void } export class ChatList extends Block { constructor(props: IChatListProps) { + props.currentUser = window.store.getState().user; props.list = window.store.getState().chats || []; props.showModalAddChat = () => { @@ -29,55 +28,55 @@ export class ChatList extends Block { ref: "modal", okClick: (result: string) => { console.log(result); - createChat(result).then(() => initChatPage()) + createChat(result).then(async () => await updateChats()) }, })) as unknown as Block); modalController.openModal(); } + props.setCurrentChat = (id: string) => { + const chat=this.props.list.find(item => item.id === Number(id)) || null; + console.log('chat',chat) + setStateCurrentChat(chat).then(() => { + this.setProps(this.props) + }) + } + super({ - ...props, - events: { - click: (e: Event) => { - if (!(e.target as HTMLElement).className.includes('chat-item__caption__name')) return; - const currentChat = (e.target as HTMLElement).id; - this.props.setCurrentChat(props.list.find(item => item.id === Number(currentChat))||null); - } - } + ...props }) window.store.on(StoreEvents.Updated, () => { - this.props.list=window.store.getState().chats||[]; + this.props.currentUser = window.store.getState().user; + this.props.list = window.store.getState().chats || []; this.setProps(this.props); }); } - public get props(){ + public get props() { return this._props as IChatListProps; } getChats(list: IChat[]): string { if (!list || list.length === 0) return ''; return list.map(chat => { - const chatBlock = new ChatItem({ - chat: chat, onClick: () => { - console.log('item chat') - this.props.setCurrentChat(chat); - } - } as IChatItemProps) - return (` - ${chatBlock.renderForList()} - `) + return (` {{{ChatItem + onClick=setCurrentChat + id='${chat.id} ' + title='${chat.title} ' + avatar='${chat.avatar} ' + unread_count='${chat.unread_count>0?String(chat.unread_count):''}' + last_message_content='${chat.last_message ?chat.last_message.content : 'no messages'} ' + last_message_time='${chat.last_message ? chat.last_message.time : ''}' }}} `) }).join('') } - protected render(): string { const {list, currentUser} = this.props; - + //if (!list || list.length === 0) return ''; return (`
    @@ -85,8 +84,11 @@ export class ChatList extends Block { {{{ InputSearch }}}
      - ${this.getChats(list)} + ${this.getChats(list)}
    +
    + +
    `) } diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 91eef8335..a30eae74d 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -37,13 +37,12 @@ export class FormProfile extends Block { protected render(): string { const {user,withButton=false,children='',buttonText=''}=this.props; if(!user)return ''; - console.log('user_profile',user); const {avatar='',first_name,second_name}=user; return(`
    - {{{ Avatar imageUrl='${avatar}' isLoadAvatar=true }}} + {{{ Avatar imageUrl='${avatar||''}' isLoadAvatar=true }}}

    ${first_name} ${second_name}

    ${user ? diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index db24803e7..d7daf73c9 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -23,6 +23,7 @@ export class MessageList extends Block { window.store.on(StoreEvents.Updated, () => { this.props.currentUser=window.store.getState().user as IUser; this.props.messageList = window.store.getState().currentChat?.messages||[]; + this.props.currentChat = window.store.getState().currentChat; this.setProps(this.props); }); } @@ -49,13 +50,21 @@ export class MessageList extends Block { return (`

    Select a chat to write a message

    `) + const users=currentChat.users?.length||0; return (`
    {{{ MessageListHeader }}} -
      + ${users>1? + `
        ${this.getListMessages(messageList)} -
      - {{{MessageListFooter }}} +
    + {{{MessageListFooter }}} + `: + `
    +

    Add users to chat

    +
    ` + } +
    `) } diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index 14e98d1d0..2724fc562 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -4,7 +4,7 @@ import {searchUsersByLogin} from "../../services/user-settings.ts"; import {IUser} from "../../models/IUser.ts"; import {UserItem} from "../index.ts"; import {addChatUser, deleteChatUsers} from "../../services/chat.ts"; -import {initChatUsers } from "../../services/app.ts"; +import { setStateCurrentChat} from "../../services/app.ts"; interface IModalChatUsersProps extends IProps { okClick?: (result: string) => void, @@ -46,7 +46,7 @@ export class ModalChatUsers extends Block { users: [Number(id)], chatId: chat.id }).then(() => { - initChatUsers(chat).then(() => modalController.closeModal()); + setStateCurrentChat(chat).then(() => modalController.closeModal()); }) } if(props.type==='delete'&&chat){ @@ -54,7 +54,7 @@ export class ModalChatUsers extends Block { users: [Number(id)], chatId:chat.id }).then(() => { - initChatUsers(chat).then(()=>modalController.closeModal()); + setStateCurrentChat(chat).then(()=>modalController.closeModal()); }) } } diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 88dafb49c..296ebc4b8 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -1,48 +1,22 @@ -import {IProps,Block} from "../../core/Block.ts"; -import {IChat} from "../../models/IChat.ts"; -import {IUser} from "../../models/IUser.ts"; -import {IChatMessage} from "../../models/IChatMessage.ts"; -import { setStateCurrentChat} from "../../services/app.ts"; +import {IProps, Block} from "../../core/Block.ts"; -export interface IPageChatProps extends IProps { - currentUser:IUser|null, - currentChat:IChat|null, - chatList:IChat[], - messageList:IChatMessage[], - setCurrentChat:(chat:IChat)=>void -} export class PageChat extends Block { - constructor() { - const props: IPageChatProps = { - currentUser: window.store.getState().user || null, - currentChat: window.store.getState().currentChat || null, - chatList: [], - messageList: [], - setCurrentChat: (chat: IChat) => { - setStateCurrentChat({...chat}).then(()=>{ - this.props.currentChat = chat; - this.setProps(this.props) - }) - - }, - events: {} - } - super(props); - //if (!window.user) Router.getRouter().go(BASE_URLS['page-login']); - + constructor() { + const props: IProps = { + events: {} } - public get props(){ - return this._props as IPageChatProps; + super(props); } + protected render(): string { return (`
    - {{{ ChatList list=chatList setCurrentChat=setCurrentChat}}} + {{{ ChatList }}}
    - {{{ MessageList messageList=messageList currentUser=currentUser currentChat=${this.props.currentChat} }}} + {{{ MessageList }}}
    `) diff --git a/src/services/app.ts b/src/services/app.ts index c267f099d..24c4542bb 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -8,7 +8,7 @@ import {cloneDeep} from "../utils/object.utils.ts"; import { openConnectMessages} from "./send-message.ts"; const initialStateApp = async () => { - + let store= window.store.getState(); let user = null; try { user = await getUser(); @@ -16,12 +16,12 @@ const initialStateApp = async () => { Router.getRouter().go(BASE_URLS['page-login']); return; } - setStateUser(user); + store.user=user; console.log('user_initial', window.store.getState()); - await initChatPage(); + await updateChats(); } -const initChatPage = async () => { +const updateChats = async () => { let chats: IChat[] = []; try { chats = await getChats(); @@ -62,11 +62,9 @@ const setStateChats = (chats: IChat[] | null) => { } const setStateUsers = (chat: IChat, users: IUser[]) => { chat.users = [...users]; - window.store.set({currentChat: chat}); } const setStateToken = (chat: IChat, token: string) => { chat.token = token; - window.store.set({currentChat: chat}); } const setStateCurrentChat = async (chat: IChat | null) => { await initChatUsers(chat); @@ -74,16 +72,19 @@ const setStateCurrentChat = async (chat: IChat | null) => { const user = window.store.getState().user; if (chat && user) { openConnectMessages(chat, user); - + const foundedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); + if(foundedChat) { + foundedChat.unread_count =0; + } } - window.store.set({currentChat: cloneDeep(chat)}); + window.store.set({currentChat: cloneDeep(chat),chats: window.store.getState().chats}); } export { initialStateApp, setStateUser, - initChatPage, + updateChats, setStateCurrentChat, setStateUsers, initChatToken, diff --git a/src/services/chat.ts b/src/services/chat.ts index 811844507..31bf3bb94 100644 --- a/src/services/chat.ts +++ b/src/services/chat.ts @@ -1,7 +1,7 @@ import {responseHasError} from "../utils/api.utils.ts"; import ChatApi from "../api/chat.ts"; import {IChat, IChatUsersData} from "../models/IChat.ts"; -import {initChatPage} from "./app.ts"; +import {updateChats} from "./app.ts"; import {IUser} from "../models/IUser.ts"; @@ -22,13 +22,13 @@ const addChatUser= async (data:IChatUsersData) => { const result=await chatApi.addChatUsers(data) as XMLHttpRequest; const error=responseHasError(result); if(error) throw Error(error); - await initChatPage(); + await updateChats(); } const deleteChatUsers= async (data:IChatUsersData) => { const result=await chatApi.deleteChatUsers(data) as XMLHttpRequest; const error=responseHasError(result); if(error) throw Error(error); - await initChatPage(); + await updateChats(); } const getChatUsers=async (idChat:string):Promise => { diff --git a/src/services/send-message.ts b/src/services/send-message.ts index f9bf96465..1f5cc6fc0 100644 --- a/src/services/send-message.ts +++ b/src/services/send-message.ts @@ -4,34 +4,47 @@ import {IUser} from "../models/IUser.ts"; import SocketIO from "../api/socket.ts"; export const openConnectMessages = (chat: IChat, currentUser: IUser) => { - if (chat.connection) { - chat.connection.ping(); - } else { if (!chat.id) return; - + if(!chat.users)return; + if(chat.users.length<2)return chat; + if(chat.connection&&chat.connection.getState()==='OPEN')return; const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); socket.open(() => { - console.log('Open connect!'); if(chat.unread_count>0) getAllNewMessage(0); + setInterval(()=>{ + socket.ping(); + },5000); + }) - socket.message((event: MessageEvent) => { + socket.message((event: MessageEvent) => { //console.log('Message!', event.data); - const message=JSON.parse(event.data); - console.log('mesages',message) - if(!chat.messages)chat.messages=[]; - if(Array.isArray(message)) { - message.reverse(); - chat.messages = [...chat.messages, ...message]; - } - else chat.messages.push(message); + const message = JSON.parse(event.data); + if(message.type==='message'||Array.isArray(message)) { + console.log('mesages', message) + if (!chat.messages) chat.messages = []; + if (Array.isArray(message)) { + message.reverse(); + chat.messages = [...chat.messages, ...message]; + } else chat.messages.push(message); + if(chat.id=== window.store.getState().currentChat?.id) window.store.set({currentChat: {...chat}}); + else { + const findedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); + if(findedChat) { + findedChat.unread_count += 1; + window.store.set({chats: window.store.getState().chats}); + } + } + } - window.store.set({currentChat: {...chat}}); + if(event.data.type==='user connected') { + console.log('user connected', event.data) + } }) - socket.error((event: Event) => console.log('Error!', event)); + /* socket.error((event: Event) => console.log('Error!', event));*/ chat.connection = socket; - window.store.set({currentChat: chat}); - } + return chat; + } export const sendMessage = (message: string) => { @@ -48,8 +61,8 @@ export const getAllNewMessage=(limit:number)=>{ const chat = window.store.getState().currentChat; if (!chat) throw Error('Select Chat!'); if (chat.connection) { - console.log(chat.connection) - chat.connection.sendRequestForgetMessage(limit); + chat.connection.sendRequestForgetMessage(limit); + chat.unread_count=0; } } } diff --git a/src/utils/date.utils.ts b/src/utils/date.utils.ts new file mode 100644 index 000000000..fddf3892f --- /dev/null +++ b/src/utils/date.utils.ts @@ -0,0 +1,23 @@ +export const getShortDate=(date:string)=>{ + let result=''; + try { + const _date = new Date(date); + const now = new Date(); + if(_date.getFullYear()===now.getFullYear()) { + result=`${_date.getFullYear() } ${_date.getMonth() } ${_date.getDate() }`; + if(_date.getMonth()===now.getMonth()&&_date.getDate()-now.getDate()<8){ + result=getWeekDay(_date); + if(_date.getDate()===now.getDate())result=`${_date.getHours() }:${_date.getMinutes()}` + } + } + } + catch { + return ''; + } + return result; +} +function getWeekDay(date:Date) { + let days = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']; + + return days[date.getDay()]; +} From e1b69a4b9aece066e2759052d1a3725f967d664a Mon Sep 17 00:00:00 2001 From: ellevanova Date: Thu, 12 Oct 2023 22:16:53 +0400 Subject: [PATCH 21/43] fixed errors --- src/pages/password-edit/password-edit.ts | 14 ++++++++++---- src/pages/profile-edit/profile-edit.ts | 6 +++++- src/pages/registration/registration.ts | 13 ++++++++----- src/services/auth.ts | 6 +++++- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index 992d78306..4259f4436 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -1,6 +1,8 @@ import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {updateUserPassword} from "../../services/user-settings.ts"; +import Router from "../../core/router.ts"; +import {showAlert} from "../../utils/api.utils.ts"; export interface ILoginPageProps extends IProps { onChange:(event:Event)=>void, @@ -18,10 +20,14 @@ export class PagePasswordEdit extends Block { const newPassword = this.refs.form.getRefs()?.newPassword.value(); const repeatPassword = this.refs.form.getRefs()?.repeatPassword.value(); - if (oldPassword && newPassword && newPassword === repeatPassword) await updateUserPassword({ - oldPassword, - newPassword - }) + if(newPassword !== repeatPassword)showAlert('Repeat new password correct!'); + if (oldPassword && newPassword && newPassword === repeatPassword) { + await updateUserPassword({ + oldPassword, + newPassword + }); + Router.getRouter().back(); + } } } diff --git a/src/pages/profile-edit/profile-edit.ts b/src/pages/profile-edit/profile-edit.ts index 03359e30a..24491ea26 100644 --- a/src/pages/profile-edit/profile-edit.ts +++ b/src/pages/profile-edit/profile-edit.ts @@ -2,6 +2,7 @@ import {IProps,Block} from "../../core/Block.ts"; import {IUser} from "../../models/IUser.ts"; import {IPageProfileProps} from "../profile/profile.ts"; import {updateUserProfile} from "../../services/user-settings.ts"; +import Router from "../../core/router.ts"; export interface IPageProfileEditProps extends IProps { onChange:(event:Event)=>void, @@ -29,7 +30,10 @@ export class PageProfileEdit extends Block { phone, email } - if (login && first_name && second_name && phone && email) await updateUserProfile(userData); + if (login && first_name && second_name && phone && email) { + await updateUserProfile(userData); + Router.getRouter().back(); + } } } super(props); diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index 3cd06e78a..8fccfecfe 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -2,6 +2,8 @@ import {IProps,Block} from "../../core/Block.ts"; import {signUp} from "../../services/auth.ts"; import {IUser} from "../../models/IUser.ts"; import {BASE_URLS} from "../../config.ts"; +import {showAlert} from "../../utils/api.utils.ts"; +import Router from "../../core/router.ts"; export interface IPageRegistrationProps extends IProps { onLogin:(event:Event)=>void, @@ -10,7 +12,7 @@ export class PageRegistration extends Block { constructor() { const props:IPageRegistrationProps={ events:{}, - onLogin: (event: Event) => { + onLogin: async (event: Event) => { event.preventDefault(); const login = this.refs.form.getRefs()?.login.value(); const email = this.refs.form.getRefs()?.email.value(); @@ -29,9 +31,9 @@ export class PageRegistration extends Block { phone, email }) - - if(password===password2){ - const data={ + if (password !== password2) showAlert('Repeat passwords correct!'); + if (password === password2) { + const data = { first_name, second_name, login, @@ -39,7 +41,8 @@ export class PageRegistration extends Block { password, phone } as IUser; - signUp(data) + await signUp(data); + Router.getRouter().go(BASE_URLS['page-chat']); } } diff --git a/src/services/auth.ts b/src/services/auth.ts index 472d74d11..83b770bcd 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -9,7 +9,11 @@ import {initialStateApp, setStateUser} from "./app.ts"; const authApi = new AuthApi('/auth'); const signUp = async (data: IUser) => { const result = await authApi.signUp(data); - responseHasError(result); + const error=responseHasError(result); + if(!error) { + setStateUser(JSON.parse(result.responseText)); + + } return JSON.parse(result.responseText); } const signIn = async (data: IAuthData) => { From 657712ef8c8be5e684fe6385dddc1f6ce8f83ae5 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 01:10:28 +0400 Subject: [PATCH 22/43] fixed errors --- src/api/socket.ts | 1 + src/components/alert/alert.pcss | 2 +- src/components/button/button.pcss | 1 + src/components/chat-item/chat-item.pcss | 2 +- src/components/chat-list/chat-list.pcss | 4 ++ src/components/chat-list/chat-list.ts | 4 +- src/components/menu-message/menu-message.pcss | 1 + .../message-list-footer.ts | 27 +++--------- src/components/message-list/message-list.ts | 43 ++++++++++++------- src/components/message/message.pcss | 8 +++- src/components/message/message.ts | 17 ++++++-- .../modal-chat-users/modal-chat-users.ts | 24 ++++++----- src/components/modal/modal.pcss | 2 +- src/index.html | 3 +- src/pages/login/login.ts | 10 ++--- src/services/app.ts | 5 ++- src/services/auth.ts | 10 ++++- src/services/send-message.ts | 20 ++++++--- src/styles/reset.pcss | 18 ++++++++ src/utils/api.utils.ts | 3 +- 20 files changed, 130 insertions(+), 75 deletions(-) diff --git a/src/api/socket.ts b/src/api/socket.ts index a5ef95826..3f4fe6ac2 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -58,6 +58,7 @@ class SocketIO { this.socket?.send(_message); } public sendRequestForgetMessage=(limit: number=0)=> { + console.log("get old") const _message = JSON.stringify( { content: String(limit), diff --git a/src/components/alert/alert.pcss b/src/components/alert/alert.pcss index 81829b7ad..9a05c9690 100644 --- a/src/components/alert/alert.pcss +++ b/src/components/alert/alert.pcss @@ -4,7 +4,7 @@ justify-content: center; padding: 10px; min-height: 100px; - z-index:200; + z-index:1000; .alert__message { text-align: center; diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss index ae453f7c7..b0da086dc 100644 --- a/src/components/button/button.pcss +++ b/src/components/button/button.pcss @@ -15,6 +15,7 @@ &:hover { opacity: 0.8; } + } .button-arrow { diff --git a/src/components/chat-item/chat-item.pcss b/src/components/chat-item/chat-item.pcss index c0f391fd0..584477494 100644 --- a/src/components/chat-item/chat-item.pcss +++ b/src/components/chat-item/chat-item.pcss @@ -7,7 +7,7 @@ grid-auto-flow: column; border-bottom: 1px solid var(--gray-light); height: 80px; - width: 310px; + width: auto; margin: 10px 0; } diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss index c228a3812..cff817fec 100644 --- a/src/components/chat-list/chat-list.pcss +++ b/src/components/chat-list/chat-list.pcss @@ -13,6 +13,8 @@ justify-content: space-between; align-items: center; margin:10px 0; + border-bottom: 1px solid var(--gray-light); + padding-bottom: 20px; } .chat-list__search { @@ -25,6 +27,8 @@ overflow-y: auto; overflow-x: hidden; list-style-type: none; + padding-right: 10px; + //max-height: 80%; } .chat-list__footer { diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index a92fb9ce6..973480089 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -80,9 +80,9 @@ export class ChatList extends Block { {{{Button caption="New Chat" type='link' onClick=showModalAddChat }}} {{{Link caption="Profile" href="/settings" linkIcon=true }}} -
    +
      ${this.getChats(list)}
    diff --git a/src/components/menu-message/menu-message.pcss b/src/components/menu-message/menu-message.pcss index cf71d7382..1e27e9667 100644 --- a/src/components/menu-message/menu-message.pcss +++ b/src/components/menu-message/menu-message.pcss @@ -5,6 +5,7 @@ justify-content: space-between; align-items: center; padding: 10px; + z-index: 300; &.menu-message{ top:-150%; diff --git a/src/components/message-list-footer/message-list-footer.ts b/src/components/message-list-footer/message-list-footer.ts index 1e56889a5..6f1b496c4 100644 --- a/src/components/message-list-footer/message-list-footer.ts +++ b/src/components/message-list-footer/message-list-footer.ts @@ -4,6 +4,7 @@ import {IUser} from "../../models/IUser.ts"; import {validateMessage} from "../../utils/validates.utils.ts"; import {IChat} from "../../models/IChat.ts"; import {sendMessage} from "../../services/send-message.ts"; +import {showAlert} from "../../utils/api.utils.ts"; interface IMessageListProps extends IProps { @@ -22,13 +23,14 @@ interface IMessageListProps extends IProps { export class MessageListFooter extends Block { constructor(props: IMessageListProps) { props.isOpenedMenuMessage = false; - props.onBlurMessage = () => this.validate(); + //props.onBlurMessage = () => this.validate(); props.onClickSend = () => { - if (!validateMessage(this.valueMessage())) { + const error=validateMessage(this.valueMessage()); + if (!error) { console.log('Send Message:' + this.valueMessage()); sendMessage( this.valueMessage()); } - else console.log('Error! Can not sendMessage!') + else showAlert(error); } props.openMenuMessage = () => { this.props.isOpenedMenuMessage = !this.props.isOpenedMenuMessage; @@ -42,24 +44,7 @@ export class MessageListFooter extends Block { } public valueMessage() { - if (!this.validate()) { - return ''; - } - return this.refs?.message.value() - } - - private validate() { - const value = this.refs?.message.value(); - const error = validateMessage(value); - - this.props.message = value; - if (error) { - console.log('Message can not be blank') - this.setProps(this.props); - return false; - } - this.setProps(this.props); - return true; + return this.refs?.message.value(); } protected render(): string { diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index d7daf73c9..ca67879cc 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -1,15 +1,16 @@ import {IProps, Block} from "../../core/Block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; -import {Message } from "../index.ts"; +import {Message} from "../index.ts"; import {IMessageProps} from "../message/message.ts"; import {IChat} from "../../models/IChat.ts"; import {StoreEvents} from "../../core/store.ts"; +import {getUserName} from "../../utils/user.utils.ts"; interface IMessageListProps extends IProps { messageList: IChatMessage[]; currentUser: IUser; - currentChat: IChat|null; + currentChat: IChat | null; openMenuMessage?: () => void; openMenuChat?: () => void; isOpenedMenuChat: boolean; @@ -18,11 +19,11 @@ interface IMessageListProps extends IProps { export class MessageList extends Block { constructor(props: IMessageListProps) { props.currentChat = window.store.getState().currentChat; - props.messageList = window.store.getState().currentChat?.messages||[]; + props.messageList = window.store.getState().currentChat?.messages || []; super(props); window.store.on(StoreEvents.Updated, () => { - this.props.currentUser=window.store.getState().user as IUser; - this.props.messageList = window.store.getState().currentChat?.messages||[]; + this.props.currentUser = window.store.getState().user as IUser; + this.props.messageList = window.store.getState().currentChat?.messages || []; this.props.currentChat = window.store.getState().currentChat; this.setProps(this.props); }); @@ -33,9 +34,20 @@ export class MessageList extends Block { } getListMessages(list: IChatMessage[]): string { + const users = this.props.currentChat?.users; + const mapUsers = new Map(); + if (users) { + users.forEach(user => mapUsers.set(user.id, getUserName(user))); + } + if (!list || list.length === 0) return ''; return list.map(message => { - const messageBlock = new Message({message: message, myMessage: String(message.user_id)===String(this.props.currentUser.id)} as IMessageProps) + + const messageBlock = new Message({ + userName: mapUsers.size ? mapUsers.get(message.user_id) : '', + message: message, + myMessage: String(message.user_id) === String(this.props.currentUser.id) + } as IMessageProps) return (`
    ${messageBlock.renderForList()} @@ -45,22 +57,23 @@ export class MessageList extends Block { } protected render(): string { - const {messageList,currentChat} = this.props; - if(!currentChat) + const {messageList, currentChat} = this.props; + if (!currentChat) return (`

    Select a chat to write a message

    `) - const users=currentChat.users?.length||0; + const users = currentChat.users?.length || 0; return (`
    {{{ MessageListHeader }}} - ${users>1? - `
      - ${this.getListMessages(messageList)} -
    + ${users > 1 ? + `
      + ${this.getListMessages(messageList)} +
    • +
    {{{MessageListFooter }}} - `: - `
    + ` : + `

    Add users to chat

    ` } diff --git a/src/components/message/message.pcss b/src/components/message/message.pcss index 3bfc75bb2..2ffb77e4a 100644 --- a/src/components/message/message.pcss +++ b/src/components/message/message.pcss @@ -7,6 +7,13 @@ float:left; max-width: 50%; min-width: 200px; + position: relative; + .message__user{ + color: var(--red); + font-size: 13px; + font-weight: bold; + top:0px; + } &.message-my { border-radius:15px 15px 0; @@ -60,4 +67,3 @@ justify-content: flex-end; } } - diff --git a/src/components/message/message.ts b/src/components/message/message.ts index 0bb89a530..679369b96 100644 --- a/src/components/message/message.ts +++ b/src/components/message/message.ts @@ -1,9 +1,11 @@ import {IProps,Block} from "../../core/Block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; +import {getShortDate} from "../../utils/date.utils.ts"; export interface IMessageProps extends IProps{ message:IChatMessage; - myMessage:boolean + myMessage:boolean; + userName:string; } export class Message extends Block { @@ -15,19 +17,26 @@ export class Message extends Block { return this._props as IMessageProps; } protected render(): string { - const { message,myMessage } = this.props; + const { message,myMessage,userName } = this.props; return (`
  • ${message.file?`
    + ${!myMessage?`
    + ${userName} +
    `:''} included_file
    - {{{ Badge text="01.20" type="primary" }}} + {{{ Badge text="${getShortDate(message.time)}" type="primary" }}}
    `:`
    + ${!myMessage?`
    + ${userName} +
    `:''} +

    ${message.content}

    - {{{Badge text="01.20" }}} + {{{Badge text="${getShortDate(message.time)}" }}}
    ` } diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index 2724fc562..0516611af 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -20,14 +20,18 @@ export class ModalChatUsers extends Block { props.okInputClick = (event: Event) => { event.preventDefault(); event.stopPropagation(); - const input = this.refs.modal.getRefs().input.value(); - if (!input) { - return; + if(this.props.type==='add'){ + const input = this.refs.modal.getRefs().input.value(); + if (!input) { + return; + } + searchUsersByLogin(input).then((users) => { + this.props.users = users; + this.setProps(this.props) + }) } - searchUsersByLogin(input).then((users) => { - this.props.users = users; - this.setProps(this.props) - }) + else modalController.closeModal(); + } props.cancelClick = () => { modalController.closeModal(); @@ -69,10 +73,10 @@ export class ModalChatUsers extends Block { getChildren() { const {users, type} = this.props; - const result = users?.reduce((sum, user) => { + const result = users&&users.length>1?users.reduce((sum, user) => { const item = new UserItem({user: user, icon: type === 'add' ? 'plus' : 'delete'}); return sum + item.renderForList(); - }, ''); + }, ''):''; return ( ` ${type === 'add' ? @@ -88,7 +92,7 @@ export class ModalChatUsers extends Block { {{{ Modal caption='${this.props.type === 'add' ? 'Add User' : 'Delete User'}' okText='${this.props.type === 'add' ?'Find users':'OK'}' - cancelText='Cancel' + cancelText='${this.props.type === 'add' ?'Cancel':''}' okClick=okInputClick cancelClick=cancelClick children="${this.getChildren()}" diff --git a/src/components/modal/modal.pcss b/src/components/modal/modal.pcss index bc1c8bd0a..71770f22f 100644 --- a/src/components/modal/modal.pcss +++ b/src/components/modal/modal.pcss @@ -5,7 +5,7 @@ gap: 10px; padding: 30px; min-height: 300px; - z-index: 100; + z-index: 500; .modal__header { text-align: center; diff --git a/src/index.html b/src/index.html index e8f15bd11..8bc575fcb 100644 --- a/src/index.html +++ b/src/index.html @@ -9,8 +9,9 @@
    - + + diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 2c6886533..eb56f8ed1 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,7 +1,7 @@ import {IProps, Block} from "../../core/Block.ts"; import {BASE_URLS} from "../../config.ts"; import { signIn} from "../../services/auth.ts"; -import Router from "../../core/router.ts"; + export interface ILoginPageProps extends IProps { @@ -27,12 +27,8 @@ export class LoginPage extends Block { if (!password) { return; } - signIn({login, password}) - .catch((error)=>console.log('login',error)) - .then(()=> { - console.log('loginOk') - Router.getRouter().go(BASE_URLS['page-chat']) - }) + signIn({login, password}).catch((error)=>console.log('login',error)) + } } // getUser().catch(error=>console.log(error)) diff --git a/src/services/app.ts b/src/services/app.ts index 24c4542bb..aac5fa218 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -71,11 +71,12 @@ const setStateCurrentChat = async (chat: IChat | null) => { await initChatToken(chat); const user = window.store.getState().user; if (chat && user) { - openConnectMessages(chat, user); const foundedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); - if(foundedChat) { + if(foundedChat&&chat.connection) { foundedChat.unread_count =0; } + openConnectMessages(chat, user); + } window.store.set({currentChat: cloneDeep(chat),chats: window.store.getState().chats}); } diff --git a/src/services/auth.ts b/src/services/auth.ts index 83b770bcd..698f7b726 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -19,12 +19,18 @@ const signUp = async (data: IUser) => { const signIn = async (data: IAuthData) => { const result = await authApi.signIn(data); const error = responseHasError(result as XMLHttpRequest); - if (!error) await initialStateApp(); + if (error) throw Error(error); + if (!error) { + await initialStateApp(); + Router.getRouter().go(BASE_URLS['page-chat']) + } } const getUser = async () => { const result = await authApi.getAuthUser() as XMLHttpRequest; - responseHasError(result); + const error=responseHasError(result); + if (error) throw Error(error); + if(!error) return JSON.parse(result.responseText); } diff --git a/src/services/send-message.ts b/src/services/send-message.ts index 1f5cc6fc0..224f42bf6 100644 --- a/src/services/send-message.ts +++ b/src/services/send-message.ts @@ -10,7 +10,8 @@ export const openConnectMessages = (chat: IChat, currentUser: IUser) => { if(chat.connection&&chat.connection.getState()==='OPEN')return; const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); socket.open(() => { - if(chat.unread_count>0) getAllNewMessage(0); + console.log('chat',chat) + if(chat.unread_count>0) getAllNewMessage(0,chat); setInterval(()=>{ socket.ping(); },5000); @@ -29,12 +30,18 @@ export const openConnectMessages = (chat: IChat, currentUser: IUser) => { } else chat.messages.push(message); if(chat.id=== window.store.getState().currentChat?.id) window.store.set({currentChat: {...chat}}); else { - const findedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); - if(findedChat) { - findedChat.unread_count += 1; + const foundedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); + if(foundedChat) { + foundedChat.unread_count += 1; window.store.set({chats: window.store.getState().chats}); } } + const element = document.querySelector('.scroll-bottom'); + if(element) + element.scrollIntoView({ + behavior: 'auto', + block: 'end', + }); } if(event.data.type==='user connected') { @@ -56,13 +63,14 @@ export const sendMessage = (message: string) => { } } -export const getAllNewMessage=(limit:number)=>{ +export const getAllNewMessage=(limit:number,chat:IChat|null)=>{ { - const chat = window.store.getState().currentChat; + //const chat = window.store.getState().currentChat; if (!chat) throw Error('Select Chat!'); if (chat.connection) { chat.connection.sendRequestForgetMessage(limit); chat.unread_count=0; + window.store.set({currentChat: {...chat}}); } } } diff --git a/src/styles/reset.pcss b/src/styles/reset.pcss index 144d0f0ce..3b23f08b3 100644 --- a/src/styles/reset.pcss +++ b/src/styles/reset.pcss @@ -3,6 +3,21 @@ margin: 0; padding: 0; + scroll-behavior: smooth; + scrollbar-color: var(--red-light); + scrollbar-width: thin; + &::-webkit-scrollbar { + width: 5px; + } + + &::-webkit-scrollbar-track { + background-color: var(--white); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--red-light); + border-radius: 10px; + } } input, select { width: 100% } @@ -10,3 +25,6 @@ input, select { width: 100% } input:focus-visible { outline: none; } +button:focus-visible { + outline: none; +} diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts index 42d7e44b8..b084a9d57 100644 --- a/src/utils/api.utils.ts +++ b/src/utils/api.utils.ts @@ -15,7 +15,8 @@ export const responseHasError = (response: XMLHttpRequest) => { default: { const error = JSON.parse(response.responseText).reason; if (error.includes('Cookie')) { - showAlert('Please, login!'); + // showAlert('Please, login!'); + return error; } else showAlert(error); //if (error) throw Error(error); return error; From 3fb6e5259e143b3a6bf9ff0627490019ad20ce95 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 01:40:46 +0400 Subject: [PATCH 23/43] fixed linter errors --- package.json | 2 +- src/components/alert/alert.pcss | 1 - src/components/button/button.pcss | 3 ++ src/components/chat-item/chat-item.pcss | 3 +- src/components/chat-list/chat-list.pcss | 6 ---- src/components/menu-chat/menu-chat.pcss | 1 + src/components/menu-item/menu-item.pcss | 10 +++++-- src/components/menu-message/menu-message.pcss | 1 + .../message-list-footer/message-list.pcss | 5 +++- .../message-list-header/message-list.pcss | 5 +++- src/components/message-list/message-list.pcss | 5 +++- src/components/message/message.pcss | 3 +- src/components/modal-avatar/modal-avatar.pcss | 4 +++ .../modal-chat-users/modal-chat-users.ts | 27 +++++++++--------- src/components/modal-prompt/modal-prompt.pcss | 4 +++ src/components/modal/modal.pcss | 4 +-- src/components/user-item/user-item.pcss | 6 ++-- src/core/route.ts | 6 ++-- src/core/router.ts | 7 ++--- src/core/store.ts | 10 +------ src/services/app.ts | 5 ++-- src/styles/reset.pcss | 3 +- src/utils/date.utils.ts | 3 +- src/utils/load-file.utils.ts | 2 +- src/utils/object.utils.ts | 18 ++++++------ src/utils/string.utils.ts | 28 +++++++++---------- 26 files changed, 91 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index 9566931db..2efa63fa0 100644 --- a/package.json +++ b/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": { diff --git a/src/components/alert/alert.pcss b/src/components/alert/alert.pcss index 9a05c9690..f585cae7b 100644 --- a/src/components/alert/alert.pcss +++ b/src/components/alert/alert.pcss @@ -20,7 +20,6 @@ .dialog-alert { border: none; - width: 340px; inset: 0; position: fixed; diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss index b0da086dc..7bd9c763b 100644 --- a/src/components/button/button.pcss +++ b/src/components/button/button.pcss @@ -59,6 +59,7 @@ width: 36px; height: 36px; } + .button-close { padding: 0; background-image: url("../../assets/icons/close.svg"); @@ -69,6 +70,7 @@ width: 36px; height: 36px; } + .button-number { padding: 10px; max-width: 36px; @@ -85,6 +87,7 @@ color: var(--red); text-transform: none; width: auto; + &:hover { text-decoration: underline; } diff --git a/src/components/chat-item/chat-item.pcss b/src/components/chat-item/chat-item.pcss index 584477494..8a4ff763f 100644 --- a/src/components/chat-item/chat-item.pcss +++ b/src/components/chat-item/chat-item.pcss @@ -27,8 +27,9 @@ .chat-item__caption__name { font-weight: bold; cursor:pointer; + &:hover{ - opacity: 70%; + opacity: 0.7; } } } diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss index cff817fec..47a416882 100644 --- a/src/components/chat-list/chat-list.pcss +++ b/src/components/chat-list/chat-list.pcss @@ -1,7 +1,6 @@ .chat-list { display: grid; grid-template-rows: auto auto 1fr 10px; - border-right: 1px solid var(--gray-light); height: 100vh; padding: 10px; @@ -28,10 +27,5 @@ overflow-x: hidden; list-style-type: none; padding-right: 10px; - - //max-height: 80%; - } - .chat-list__footer { - } } diff --git a/src/components/menu-chat/menu-chat.pcss b/src/components/menu-chat/menu-chat.pcss index ea1c55dab..5d4ee7b7f 100644 --- a/src/components/menu-chat/menu-chat.pcss +++ b/src/components/menu-chat/menu-chat.pcss @@ -11,6 +11,7 @@ &.opened{ display: flex; } + &.hide{ display: none; } diff --git a/src/components/menu-item/menu-item.pcss b/src/components/menu-item/menu-item.pcss index 8a659e931..2aedf60af 100644 --- a/src/components/menu-item/menu-item.pcss +++ b/src/components/menu-item/menu-item.pcss @@ -2,12 +2,12 @@ display: flex; justify-content: flex-start; align-items: center; - padding: 5px 5px 5px 5px; + padding: 5px; cursor: pointer; &:hover{ - opacity: 80%; + opacity: 0.8; } .menu-item__icon { @@ -21,22 +21,28 @@ &.menu-item__icon_media { background-image: url("../../assets/icons/image.svg") ; } + &.menu-item__icon_file { background-image: url("../../assets/icons/file.svg"); } + &.menu-item__icon_location { background-image: url("../../assets/icons/location.svg"); } + &.menu-item__icon_plus{ background-image: url("../../assets/icons/circle-plus.svg"); } + &.menu-item__icon_delete{ background-image: url("../../assets/icons/circle-x.svg") ; } + &.menu-item__icon_avatar{ background-image: url("../../assets/icons/chat-avatar.svg") ; } } + .menu-item__caption{ font-size: 12px; font-weight: 500; diff --git a/src/components/menu-message/menu-message.pcss b/src/components/menu-message/menu-message.pcss index 1e27e9667..0a9652a08 100644 --- a/src/components/menu-message/menu-message.pcss +++ b/src/components/menu-message/menu-message.pcss @@ -20,6 +20,7 @@ &.opened{ display: flex; } + &.hide{ display: none; } diff --git a/src/components/message-list-footer/message-list.pcss b/src/components/message-list-footer/message-list.pcss index 46d359f73..6830fc145 100644 --- a/src/components/message-list-footer/message-list.pcss +++ b/src/components/message-list-footer/message-list.pcss @@ -19,6 +19,7 @@ .message-list__header__title { padding-left: 20px; + span{ font-size: 16px; font-weight: bold; @@ -64,16 +65,18 @@ } } + .message-list__empty{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; + p{ font-weight: 600; font-size: 16px; - opacity:70%; + opacity:0.7; } } diff --git a/src/components/message-list-header/message-list.pcss b/src/components/message-list-header/message-list.pcss index 46d359f73..6830fc145 100644 --- a/src/components/message-list-header/message-list.pcss +++ b/src/components/message-list-header/message-list.pcss @@ -19,6 +19,7 @@ .message-list__header__title { padding-left: 20px; + span{ font-size: 16px; font-weight: bold; @@ -64,16 +65,18 @@ } } + .message-list__empty{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; + p{ font-weight: 600; font-size: 16px; - opacity:70%; + opacity:0.7; } } diff --git a/src/components/message-list/message-list.pcss b/src/components/message-list/message-list.pcss index 46d359f73..6830fc145 100644 --- a/src/components/message-list/message-list.pcss +++ b/src/components/message-list/message-list.pcss @@ -19,6 +19,7 @@ .message-list__header__title { padding-left: 20px; + span{ font-size: 16px; font-weight: bold; @@ -64,16 +65,18 @@ } } + .message-list__empty{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; + p{ font-weight: 600; font-size: 16px; - opacity:70%; + opacity:0.7; } } diff --git a/src/components/message/message.pcss b/src/components/message/message.pcss index 2ffb77e4a..c7333d453 100644 --- a/src/components/message/message.pcss +++ b/src/components/message/message.pcss @@ -8,11 +8,12 @@ max-width: 50%; min-width: 200px; position: relative; + .message__user{ color: var(--red); font-size: 13px; font-weight: bold; - top:0px; + top:0; } &.message-my { diff --git a/src/components/modal-avatar/modal-avatar.pcss b/src/components/modal-avatar/modal-avatar.pcss index 4ad4943a4..632751327 100644 --- a/src/components/modal-avatar/modal-avatar.pcss +++ b/src/components/modal-avatar/modal-avatar.pcss @@ -23,6 +23,7 @@ width: 130px; } + .modal-avatar__empty{ background: url("../../assets/icons/image.svg") no-repeat center; position: relative; @@ -31,14 +32,17 @@ border-radius: 100px; border: 1px var(--red) solid; } + .modal-avatar__label { margin-top:20px; font-weight: bold; + &:hover { cursor: pointer; text-decoration: underline; } } + .modal-avatar__input{ width: 0.1px; height: 0.1px; diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index 0516611af..6ee8640c3 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -4,7 +4,7 @@ import {searchUsersByLogin} from "../../services/user-settings.ts"; import {IUser} from "../../models/IUser.ts"; import {UserItem} from "../index.ts"; import {addChatUser, deleteChatUsers} from "../../services/chat.ts"; -import { setStateCurrentChat} from "../../services/app.ts"; +import {setStateCurrentChat} from "../../services/app.ts"; interface IModalChatUsersProps extends IProps { okClick?: (result: string) => void, @@ -20,7 +20,7 @@ export class ModalChatUsers extends Block { props.okInputClick = (event: Event) => { event.preventDefault(); event.stopPropagation(); - if(this.props.type==='add'){ + if (this.props.type === 'add') { const input = this.refs.modal.getRefs().input.value(); if (!input) { return; @@ -29,8 +29,7 @@ export class ModalChatUsers extends Block { this.props.users = users; this.setProps(this.props) }) - } - else modalController.closeModal(); + } else modalController.closeModal(); } props.cancelClick = () => { @@ -44,8 +43,8 @@ export class ModalChatUsers extends Block { click: (e: Event) => { e.stopPropagation(); const id = (e.target as HTMLElement).id; - const chat=window.store.getState().currentChat; - if ( chat&& id&&props.type==='add') { + const chat = window.store.getState().currentChat; + if (chat && id && props.type === 'add') { addChatUser({ users: [Number(id)], chatId: chat.id @@ -53,12 +52,12 @@ export class ModalChatUsers extends Block { setStateCurrentChat(chat).then(() => modalController.closeModal()); }) } - if(props.type==='delete'&&chat){ + if (props.type === 'delete' && chat) { deleteChatUsers({ users: [Number(id)], - chatId:chat.id + chatId: chat.id }).then(() => { - setStateCurrentChat(chat).then(()=>modalController.closeModal()); + setStateCurrentChat(chat).then(() => modalController.closeModal()); }) } } @@ -73,13 +72,13 @@ export class ModalChatUsers extends Block { getChildren() { const {users, type} = this.props; - const result = users&&users.length>1?users.reduce((sum, user) => { + const result = users && users.length > 1 ? users.reduce((sum, user) => { const item = new UserItem({user: user, icon: type === 'add' ? 'plus' : 'delete'}); return sum + item.renderForList(); - }, ''):''; + }, '') : ''; return ( ` - ${type === 'add' ? + ${type === 'add' ? `{{{ InputShort label='Login' type='text' name='input' validate=validate.login ref='input' }}} ` : ''}
    ${result}
    @@ -91,8 +90,8 @@ export class ModalChatUsers extends Block { return (` {{{ Modal caption='${this.props.type === 'add' ? 'Add User' : 'Delete User'}' - okText='${this.props.type === 'add' ?'Find users':'OK'}' - cancelText='${this.props.type === 'add' ?'Cancel':''}' + okText='${this.props.type === 'add' ? 'Find users' : 'OK'}' + cancelText='${this.props.type === 'add' ? 'Cancel' : ''}' okClick=okInputClick cancelClick=cancelClick children="${this.getChildren()}" diff --git a/src/components/modal-prompt/modal-prompt.pcss b/src/components/modal-prompt/modal-prompt.pcss index 4ad4943a4..632751327 100644 --- a/src/components/modal-prompt/modal-prompt.pcss +++ b/src/components/modal-prompt/modal-prompt.pcss @@ -23,6 +23,7 @@ width: 130px; } + .modal-avatar__empty{ background: url("../../assets/icons/image.svg") no-repeat center; position: relative; @@ -31,14 +32,17 @@ border-radius: 100px; border: 1px var(--red) solid; } + .modal-avatar__label { margin-top:20px; font-weight: bold; + &:hover { cursor: pointer; text-decoration: underline; } } + .modal-avatar__input{ width: 0.1px; height: 0.1px; diff --git a/src/components/modal/modal.pcss b/src/components/modal/modal.pcss index 71770f22f..19296bc79 100644 --- a/src/components/modal/modal.pcss +++ b/src/components/modal/modal.pcss @@ -23,14 +23,14 @@ align-self: end; } } + .dialog::backdrop { background-color: rgb(0 0 0 / 20%); - -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } + .dialog { border: none; - width: 340px; inset: 0; position: fixed; diff --git a/src/components/user-item/user-item.pcss b/src/components/user-item/user-item.pcss index b7f10d262..9855c03a4 100644 --- a/src/components/user-item/user-item.pcss +++ b/src/components/user-item/user-item.pcss @@ -5,7 +5,6 @@ padding: 5px 10px; border:1px solid var(--red); border-radius: 20px; - width:auto; @@ -18,17 +17,20 @@ background-size: contain; background-repeat: no-repeat; padding: 1px; + &:hover{ - opacity: 80%; + opacity: 0.8; } &.user-item__icon_plus{ background-image: url("../../assets/icons/circle-plus.svg"); } + &.user-item__icon_delete{ background-image: url("../../assets/icons/circle-x.svg") ; } } + .user-item__name{ font-size: 14px; font-weight: 500; diff --git a/src/core/route.ts b/src/core/route.ts index a3b6f0768..43447157b 100644 --- a/src/core/route.ts +++ b/src/core/route.ts @@ -2,11 +2,11 @@ import Block, {IProps} from "./Block.ts"; class Route { private _pathname: string; - private readonly _blockClass: Block; + private readonly _blockClass: typeof Block; private _block:Block|null=null; private readonly _props: IProps; - constructor(pathname:string, view:Block, props:object) { + constructor(pathname:string, view:typeof Block, props:object) { this._pathname = pathname; this._blockClass = view; this._block = null; @@ -43,7 +43,7 @@ class Route { * */ render() { if (!this._block) { - // @ts-ignore + this._block = new this._blockClass(this._props); this.render(); return; diff --git a/src/core/router.ts b/src/core/router.ts index 43506a0b7..de5714461 100644 --- a/src/core/router.ts +++ b/src/core/router.ts @@ -28,7 +28,7 @@ class Router { * @param pathname * @param block */ - use(pathname:string, block:Block) { + use(pathname:string, block:typeof Block) { const route = new Route(pathname, block, {rootQuery: this._rootQuery}); this.routes?.push(route); return this; @@ -38,10 +38,8 @@ class Router { * start — по событию onpopstate запускает приложение. */ start() { - // Реагируем на изменения в адресной строке и вызываем перерисовку window.onpopstate = event => { - // @ts-ignore - this._onRoute(event?.currentTarget?.location?.pathname); + this._onRoute((event?.currentTarget as Window)?.location?.pathname); }; this._onRoute(window.location.pathname); @@ -54,7 +52,6 @@ class Router { } if (this._currentRoute && this._currentRoute !== route) { - // @ts-ignore this._currentRoute.leave(); } diff --git a/src/core/store.ts b/src/core/store.ts index bd06f954d..4af2a3da9 100644 --- a/src/core/store.ts +++ b/src/core/store.ts @@ -4,13 +4,12 @@ export enum StoreEvents { Updated = 'Updated' } -export class Store> extends EventBus { +export class Store> extends EventBus { private state: State = {} as State; constructor(initState: State) { super(); this.state = initState; - //this.on(StoreEvents.Updated, this._set.bind(this)); this.set(this.state); } @@ -18,16 +17,9 @@ export class Store> extends EventBus { return this.state; } -/* private _set(nextState: Partial) { - - }*/ - public set(nextState: Partial) { const prevState = {...this.state}; - //console.log('nextState',nextState) - this.state = {...this.state, ...nextState}; - console.log('this.state ',this.state ) this.emit(StoreEvents.Updated, prevState, nextState); } } diff --git a/src/services/app.ts b/src/services/app.ts index aac5fa218..5d04ae457 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -4,11 +4,10 @@ import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; import {getChats, getChatToken, getChatUsers} from "./chat.ts"; import {IChat} from "../models/IChat.ts"; -import {cloneDeep} from "../utils/object.utils.ts"; import { openConnectMessages} from "./send-message.ts"; const initialStateApp = async () => { - let store= window.store.getState(); + const store= window.store.getState(); let user = null; try { user = await getUser(); @@ -78,7 +77,7 @@ const setStateCurrentChat = async (chat: IChat | null) => { openConnectMessages(chat, user); } - window.store.set({currentChat: cloneDeep(chat),chats: window.store.getState().chats}); + window.store.set({currentChat: chat,chats: window.store.getState().chats}); } diff --git a/src/styles/reset.pcss b/src/styles/reset.pcss index 3b23f08b3..39a612c80 100644 --- a/src/styles/reset.pcss +++ b/src/styles/reset.pcss @@ -1,11 +1,11 @@ * { box-sizing: border-box!important; - margin: 0; padding: 0; scroll-behavior: smooth; scrollbar-color: var(--red-light); scrollbar-width: thin; + &::-webkit-scrollbar { width: 5px; } @@ -25,6 +25,7 @@ input, select { width: 100% } input:focus-visible { outline: none; } + button:focus-visible { outline: none; } diff --git a/src/utils/date.utils.ts b/src/utils/date.utils.ts index fddf3892f..42b77e77e 100644 --- a/src/utils/date.utils.ts +++ b/src/utils/date.utils.ts @@ -17,7 +17,6 @@ export const getShortDate=(date:string)=>{ return result; } function getWeekDay(date:Date) { - let days = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']; - + const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; return days[date.getDay()]; } diff --git a/src/utils/load-file.utils.ts b/src/utils/load-file.utils.ts index 1de1ef2e1..fac7a9fda 100644 --- a/src/utils/load-file.utils.ts +++ b/src/utils/load-file.utils.ts @@ -2,7 +2,7 @@ export const loadNewFileFromDrag=(e:TEvent):FormData|null=>{ let file=null; if(e instanceof DragEvent){ - let dt = e.dataTransfer; + const dt = e.dataTransfer; if (dt) { file = dt.files[0]; } diff --git a/src/utils/object.utils.ts b/src/utils/object.utils.ts index 0c5521eb7..55228ff24 100644 --- a/src/utils/object.utils.ts +++ b/src/utils/object.utils.ts @@ -23,7 +23,7 @@ export const isDeepEqual = (object1: { [index: string]: T }, o return true; }; -export function cloneDeep(obj: any): any { +/*export function cloneDeep(obj: object | unknown ): any { if (!isObject(obj)) { return obj; } @@ -32,13 +32,12 @@ export function cloneDeep(obj: any): any { for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { - // @ts-ignore clonedObj[key] = cloneDeep(obj[key]); } } return clonedObj; -} +}*/ export const isObject = (object: object | unknown) => { return object != null && typeof object === "object"; @@ -47,7 +46,7 @@ export const isObject = (object: object | unknown) => { /** * Напишите функцию, которая объединит два объекта с сохранением их уникальных ключей. Порядок ключей важен. * merge({a: {b: {a: 2}}, d: 5}, {a: {b: {c: 1}}}); - * /* + * /!* * { * a: { * b: { @@ -58,7 +57,6 @@ export const isObject = (object: object | unknown) => { * d: 5, * } * - */ export const merge = (lhs: Indexed, rhs: Indexed): Indexed => { let result = lhs; @@ -80,7 +78,7 @@ export const merge = (lhs: Indexed, rhs: Indexed): Indexed => { if (objKeys1.indexOf(key) === -1) result[key] = rhs[key]; } return result; - /* + /!* for (let p in rhs) { if (!rhs.hasOwnProperty(p)) { continue; @@ -98,18 +96,18 @@ export const merge = (lhs: Indexed, rhs: Indexed): Indexed => { } return lhs; - */ + *!/ } -/** +/!** * set, которая получает путь к вложенному свойству объекта и устанавливает значение в это свойство. * Если поля не существует, его нужно создать по указанному пути. * Проверьте, что path — строка, иначе нужно выбросить ошибку 'path must be string' * @param object * @param path * @param value - */ + *!/ export function set(object: Indexed | unknown, path: string, value: unknown): Indexed | unknown { if (!isObject(object)) return object; @@ -122,4 +120,4 @@ function createObjectFromString(string: string, value: any) { return string.split('.').reduceRight((acc, key) => ({ [key]: acc, }), value as any); -} +}*/ diff --git a/src/utils/string.utils.ts b/src/utils/string.utils.ts index 3538bdae0..23cabceec 100644 --- a/src/utils/string.utils.ts +++ b/src/utils/string.utils.ts @@ -1,7 +1,7 @@ import {isObject} from "./object.utils.ts"; -export type StringIndexed = Record; +export type StringIndexed = Record; /** * Напишите функцию, которая умеет удалять из начала и конца строки пробельные или отдельно заданные пользовательские символы. Удаление пробелов из начала и конца строк — поведение по умолчанию. Пробел необязательно должен быть передан в качестве аргумента. @@ -36,30 +36,30 @@ export const trim = (str: string, deleted?: string): string => { * @param data */ export function queryStringify(data: StringIndexed) { - if(!isObject(data)){ + if (!isObject(data)) { throw Error('Input must be an object') } - let result:string[] = []; + const result: string[] = []; Object.entries(data).map(([key, value]) => { - valueToString(key,value,result) + valueToString(key, value, result) }) - return '?'+result.join("&"); + return '?' + result.join("&"); } -export const objToString=(keyItog:string,value:object,resultArray:string[])=>{ +export const objToString = (keyItog: string, value: object, resultArray: string[]) => { Object.entries(value).map(([key, value]) => { - valueToString(`${keyItog}[${key}]`,value,resultArray) + valueToString(`${keyItog}[${key}]`, value, resultArray) }) } -export const arrayToString=(key:string,value:Array,resultArray:string[])=>{ - value.map((item,index)=>{ - valueToString(`${key}[${String(index)}]`,item,resultArray) +export const arrayToString = (key: string, value: Array, resultArray: string[]) => { + value.map((item, index) => { + valueToString(`${key}[${String(index)}]`, item, resultArray) }) } -export const valueToString=(key:string,value:unknown,result:string[])=>{ - if(Array.isArray(value))return arrayToString(key,value,result); - if(isObject(value))return objToString(key,value as Object,result); - result.push (`${key}=${String(value)}`); +export const valueToString = (key: string, value: unknown, result: string[]) => { + if (Array.isArray(value)) return arrayToString(key, value, result); + if (isObject(value)) return objToString(key, value as NonNullable, result); + result.push(`${key}=${String(value)}`); } From 73e4f94828d07d6ad79fb5dfd2696693c8058f44 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 01:55:50 +0400 Subject: [PATCH 24/43] fixed linter errors --- src/api/socket.ts | 7 -- src/components/alert/alert.ts | 2 +- src/components/avatar/avatar.ts | 2 +- src/components/badge/badge.ts | 2 +- src/components/button/button.ts | 2 +- src/components/chat-item/chat-item.ts | 2 +- src/components/chat-list/chat-list.ts | 3 +- src/components/error/error.ts | 2 +- src/components/form-auth/form-auth.ts | 6 +- src/components/form-profile/form-profile.ts | 2 +- src/components/input-search/input-search.ts | 18 +--- src/components/input-short/input-short.ts | 2 +- src/components/input-wide/input-wide.ts | 5 +- src/components/input/input.ts | 2 +- src/components/link/link.ts | 2 +- src/components/loader/loader.ts | 2 +- src/components/menu-chat/menu-chat.ts | 3 +- src/components/menu-item/menu-item.ts | 2 +- src/components/menu-message/menu-message.ts | 2 +- .../message-list-footer.ts | 3 +- .../message-list-header.ts | 2 +- src/components/message-list/message-list.ts | 2 +- src/components/message/message.ts | 2 +- src/components/modal-avatar/modal-avatar.ts | 5 +- .../modal-chat-users/modal-chat-users.ts | 2 +- src/components/modal-prompt/modal-prompt.ts | 2 +- src/components/modal/modal.ts | 2 +- src/components/user-item/user-item.ts | 2 +- src/core/alert-controller.ts | 2 +- src/core/block.ts | 3 - src/core/modal-controller.ts | 3 +- src/core/register-components.ts | 2 +- src/core/route.ts | 2 +- src/core/router.ts | 2 +- src/main.ts | 29 +++--- src/pages/404/404.ts | 2 +- src/pages/500/500.ts | 2 +- src/pages/all-components/all-components.ts | 3 +- src/pages/all-pages/all-pages.ts | 2 +- src/pages/chat-page/page-chat.ts | 2 +- src/pages/login/login.ts | 8 +- src/pages/password-edit/password-edit.ts | 2 +- src/pages/profile-edit/profile-edit.ts | 2 +- src/pages/profile/profile.ts | 2 +- src/pages/registration/registration.ts | 12 +-- src/services/app.ts | 2 - src/services/send-message.ts | 95 +++++++++---------- src/utils/api.utils.ts | 2 +- 48 files changed, 101 insertions(+), 168 deletions(-) diff --git a/src/api/socket.ts b/src/api/socket.ts index 3f4fe6ac2..5c98cc6d2 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -26,13 +26,7 @@ class SocketIO { public close=(callBack: (event: CloseEvent) => void)=> { const funk = (event: CloseEvent) => { callBack(event); - if (event.wasClean) { - console.log('Соединение закрыто чисто'); - } else { - console.log('Обрыв соединения'); - } - console.log(`Код: ${event.code} | Причина: ${event.reason}`); } this.socket?.addEventListener('close', funk); } @@ -40,7 +34,6 @@ class SocketIO { public message=(callBack: (event: MessageEvent) => void)=> { const funk = (event: MessageEvent) => { callBack(event); - console.log('Получены данные', event.data); } this.socket?.addEventListener('message', funk); } diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index da258d8ab..af1da2961 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import alertController from "../../core/alert-controller.ts"; interface IModalProps extends IProps { diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index f6767bcb7..434c302cf 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import modalController from "../../core/modal-controller.ts"; import { ModalAvatar} from "../index.ts"; import {BASE_RESOURCES_URL} from "../../config.ts"; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index 5800924fb..0f3d880d9 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; interface IBadgeProps extends IProps{ type: 'primary' | 'ready', diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 2aa831818..b25b3d0f8 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; interface IButtonProps extends IProps{ type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number'|'close', diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index ca6ad2eab..2997123d5 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {getShortDate} from "../../utils/date.utils.ts"; export interface IChatItemProps extends IProps { diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index 973480089..f338206f3 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; import {IUser} from "../../models/IUser.ts"; import modalController from "../../core/modal-controller.ts"; @@ -27,7 +27,6 @@ export class ChatList extends Block { okText: 'Add Chat', ref: "modal", okClick: (result: string) => { - console.log(result); createChat(result).then(async () => await updateChats()) }, })) as unknown as Block); diff --git a/src/components/error/error.ts b/src/components/error/error.ts index 34b6dbe9b..3507d91d4 100644 --- a/src/components/error/error.ts +++ b/src/components/error/error.ts @@ -1,4 +1,4 @@ -import{IProps,Block} from "../../core/Block.ts"; +import{IProps,Block} from "../../core/block.ts"; interface IErrorProps extends IProps{ errorNumber: string, diff --git a/src/components/form-auth/form-auth.ts b/src/components/form-auth/form-auth.ts index 63cc86398..d860c8ddc 100644 --- a/src/components/form-auth/form-auth.ts +++ b/src/components/form-auth/form-auth.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; interface IFormAuthProps extends IProps { @@ -14,10 +14,6 @@ interface IFormAuthProps extends IProps { export class FormAuth extends Block { constructor(props:IFormAuthProps) { props.validate= ALL_VALIDATE_FIELDS; - /*props.onClickOk={ - console.log('OK'); - props.onClickOkButton(event) - }*/ super(props); } diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index a30eae74d..8572f4697 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; import {logOut} from "../../services/auth.ts"; diff --git a/src/components/input-search/input-search.ts b/src/components/input-search/input-search.ts index 03b360eb7..266947414 100644 --- a/src/components/input-search/input-search.ts +++ b/src/components/input-search/input-search.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; interface IInputSearch extends IProps{ name: string, @@ -20,22 +20,6 @@ export class InputSearch extends Block { return this.refs?.input?.value() } - -/* private validate() { - console.log(this) - const value =this.refs?.input?.value(); - const error = this.props.validate(value); - - console.log('value,error',value,error) - this.props.value=value; - if (error) { - this.setProps({...this.props, errorText: error,error:true}); - return false; - } - this.setProps({...this.props, errorText: '',error:false} ); - return true; - }*/ - protected render(): string { const { name = '', value = ''} = this._props as IInputSearch; diff --git a/src/components/input-short/input-short.ts b/src/components/input-short/input-short.ts index e2f274f81..4588d3102 100644 --- a/src/components/input-short/input-short.ts +++ b/src/components/input-short/input-short.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; interface IInputProps extends IProps{ type: 'text' | 'password', diff --git a/src/components/input-wide/input-wide.ts b/src/components/input-wide/input-wide.ts index 25e15fd6c..f93aab92e 100644 --- a/src/components/input-wide/input-wide.ts +++ b/src/components/input-wide/input-wide.ts @@ -1,4 +1,4 @@ -import{IProps,Block} from "../../core/Block.ts"; +import{IProps,Block} from "../../core/block.ts"; interface IInputWideProps extends IProps{ type: 'text' | 'button', @@ -35,11 +35,8 @@ export class InputWide extends Block { } private validate() { - console.log(this) const value = this.refs?.input?.value(); const error = this.props.validate(value); - - console.log('value,error', value, error) this.props.value = value; if (error) { diff --git a/src/components/input/input.ts b/src/components/input/input.ts index f6d3dc769..5a53b6eae 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; interface IInputProps extends IProps { diff --git a/src/components/link/link.ts b/src/components/link/link.ts index 9bc112010..63865209e 100644 --- a/src/components/link/link.ts +++ b/src/components/link/link.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import Router from "../../core/router.ts"; interface ILinkProps extends IProps{ diff --git a/src/components/loader/loader.ts b/src/components/loader/loader.ts index 5df92df0e..5f056a03e 100644 --- a/src/components/loader/loader.ts +++ b/src/components/loader/loader.ts @@ -1,4 +1,4 @@ -import {Block} from "../../core/Block.ts"; +import {Block} from "../../core/block.ts"; export class Loader extends Block { protected render(): string { diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts index bdd545123..e6501dc69 100644 --- a/src/components/menu-chat/menu-chat.ts +++ b/src/components/menu-chat/menu-chat.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; import modalController from "../../core/modal-controller.ts"; import {ModalChatUsers} from "../index.ts"; @@ -18,7 +18,6 @@ export class MenuChat extends Block { constructor(props: IMenuChatProps) { props.currentChat = window.store.getState().currentChat; props.addUser = () => { - console.log('add user!',props.currentChat); modalController.addModal((new ModalChatUsers({ users: [], type:'add', diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 9904d2e10..4c021c404 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; export interface IMenuItemProps extends IProps { diff --git a/src/components/menu-message/menu-message.ts b/src/components/menu-message/menu-message.ts index 894bbe457..374654dbd 100644 --- a/src/components/menu-message/menu-message.ts +++ b/src/components/menu-message/menu-message.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; diff --git a/src/components/message-list-footer/message-list-footer.ts b/src/components/message-list-footer/message-list-footer.ts index 6f1b496c4..abbae94ac 100644 --- a/src/components/message-list-footer/message-list-footer.ts +++ b/src/components/message-list-footer/message-list-footer.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; import {validateMessage} from "../../utils/validates.utils.ts"; @@ -27,7 +27,6 @@ export class MessageListFooter extends Block { props.onClickSend = () => { const error=validateMessage(this.valueMessage()); if (!error) { - console.log('Send Message:' + this.valueMessage()); sendMessage( this.valueMessage()); } else showAlert(error); diff --git a/src/components/message-list-header/message-list-header.ts b/src/components/message-list-header/message-list-header.ts index 8077dd87e..5f31209b4 100644 --- a/src/components/message-list-header/message-list-header.ts +++ b/src/components/message-list-header/message-list-header.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; import {StoreEvents} from "../../core/store.ts"; diff --git a/src/components/message-list/message-list.ts b/src/components/message-list/message-list.ts index ca67879cc..71e9f5df5 100644 --- a/src/components/message-list/message-list.ts +++ b/src/components/message-list/message-list.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IUser} from "../../models/IUser.ts"; import {Message} from "../index.ts"; diff --git a/src/components/message/message.ts b/src/components/message/message.ts index 679369b96..f869101c0 100644 --- a/src/components/message/message.ts +++ b/src/components/message/message.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {getShortDate} from "../../utils/date.utils.ts"; diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index a115c1462..2cff9fea9 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {updateUserAvatar, updateUserProfile} from "../../services/user-settings.ts"; import {BASE_RESOURCES_URL} from "../../config.ts"; import modalController from "../../core/modal-controller.ts"; @@ -21,7 +21,6 @@ export class ModalAvatar extends Block { modalController.closeModal(); } props.cancelClick = () => { - console.log('cancel',this.props); const user = window.store.getState().user; if (user && this.props.oldAvatar) { this.props.newAvatar =''; @@ -35,8 +34,6 @@ export class ModalAvatar extends Block { const _onAddFile = (e: TEvent) => { deleteActive(e as Event); const formData = loadNewFileFromDrag(e); - console.log('added file',e); - console.log('formData',formData) if (formData) { updateUserAvatar(formData).then(user => { this.props.newAvatar = user.avatar; diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index 6ee8640c3..ede9938ba 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import modalController from "../../core/modal-controller.ts"; import {searchUsersByLogin} from "../../services/user-settings.ts"; import {IUser} from "../../models/IUser.ts"; diff --git a/src/components/modal-prompt/modal-prompt.ts b/src/components/modal-prompt/modal-prompt.ts index 323b17725..f128ee5c1 100644 --- a/src/components/modal-prompt/modal-prompt.ts +++ b/src/components/modal-prompt/modal-prompt.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import modalController from "../../core/modal-controller.ts"; interface IModalPromptProps extends IProps { diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 8e2ac94f3..8509f89ad 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; interface IModalProps extends IProps { diff --git a/src/components/user-item/user-item.ts b/src/components/user-item/user-item.ts index 2b6db0cf3..482c94339 100644 --- a/src/components/user-item/user-item.ts +++ b/src/components/user-item/user-item.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {getUserName} from "../../utils/user.utils.ts"; diff --git a/src/core/alert-controller.ts b/src/core/alert-controller.ts index bbfa4a81c..cf864de77 100644 --- a/src/core/alert-controller.ts +++ b/src/core/alert-controller.ts @@ -1,4 +1,4 @@ -import Block from "./Block.ts"; +import Block from "./block.ts"; class AlertController { private static __instance: AlertController; diff --git a/src/core/block.ts b/src/core/block.ts index a3164f766..d1c5b255d 100644 --- a/src/core/block.ts +++ b/src/core/block.ts @@ -34,8 +34,6 @@ export class Block { this.children = children; this._props = this._makePropsProxy(props, this); - // console.log('init props',props,this.props) - this._eventBus = () => eventBus; this._registerEvents(eventBus); @@ -204,7 +202,6 @@ export class Block { } public hide(){ - console.log('hide') } public show(){ const app = document.getElementById('app'); diff --git a/src/core/modal-controller.ts b/src/core/modal-controller.ts index 402209b58..e591ff803 100644 --- a/src/core/modal-controller.ts +++ b/src/core/modal-controller.ts @@ -1,4 +1,4 @@ -import Block from "./Block.ts"; +import Block from "./block.ts"; class ModalController { private static __instance: ModalController; @@ -23,7 +23,6 @@ class ModalController { } public openModal(){ - console.log('OPEN!') this.dialog?.showModal() } diff --git a/src/core/register-components.ts b/src/core/register-components.ts index b27dcb7c5..b1218bb91 100644 --- a/src/core/register-components.ts +++ b/src/core/register-components.ts @@ -1,5 +1,5 @@ import Handlebars from 'handlebars'; -import Block from "./Block.ts"; +import Block from "./block.ts"; import {HelperOptions} from "handlebars"; export function registerComponent(name: string, Component: typeof Block) { diff --git a/src/core/route.ts b/src/core/route.ts index 43447157b..61cab8dad 100644 --- a/src/core/route.ts +++ b/src/core/route.ts @@ -1,4 +1,4 @@ -import Block, {IProps} from "./Block.ts"; +import Block, {IProps} from "./block.ts"; class Route { private _pathname: string; diff --git a/src/core/router.ts b/src/core/router.ts index de5714461..4d7e50b85 100644 --- a/src/core/router.ts +++ b/src/core/router.ts @@ -1,4 +1,4 @@ -import Block from "./Block.ts"; +import Block from "./block.ts"; import Route from "./route.ts"; class Router { diff --git a/src/main.ts b/src/main.ts index 9a4a028fa..80e13ffc9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,9 +3,8 @@ import * as Components from './components'; import * as Pages from './pages'; import {registerComponent} from "./core/register-components.ts"; import Router from "./core/router.ts"; -import Block from "./core/Block.ts"; import {BASE_URLS} from "./config.ts"; -import { initialStateApp} from "./services/app.ts"; +import {initialStateApp} from "./services/app.ts"; import {IAppState} from "./models/IAppState.ts"; import {Store} from "./core/store.ts"; @@ -26,26 +25,24 @@ declare global { const initState: IAppState = { error: null, user: null, - currentChat:null, + currentChat: null, chats: [] } -window.store =new Store(initState); +window.store = new Store(initState); const router = new Router(".app"); await initialStateApp(); - - -router.use(BASE_URLS['page-default'], Pages.PageChat as unknown as Block) - .use(BASE_URLS['page-all-components'], Pages.AllComponentsPage as unknown as Block) - .use(BASE_URLS['page-login'], Pages.LoginPage as unknown as Block) - .use(BASE_URLS['page-sign-up'], Pages.PageRegistration as unknown as Block) - .use(BASE_URLS['page-profile'], Pages.PageProfile as unknown as Block) - .use(BASE_URLS['page-profile-edit'], Pages.PageProfileEdit as unknown as Block) - .use(BASE_URLS['page-password-edit'], Pages.PagePasswordEdit as unknown as Block) - .use(BASE_URLS['page-404'], Pages.Page404 as unknown as Block) - .use(BASE_URLS['page-500'], Pages.Page500 as unknown as Block) - .use(BASE_URLS['page-chat'], Pages.PageChat as unknown as Block) +router.use(BASE_URLS['page-default'], Pages.PageChat) + .use(BASE_URLS['page-all-components'], Pages.AllComponentsPage) + .use(BASE_URLS['page-login'], Pages.LoginPage) + .use(BASE_URLS['page-sign-up'], Pages.PageRegistration) + .use(BASE_URLS['page-profile'], Pages.PageProfile) + .use(BASE_URLS['page-profile-edit'], Pages.PageProfileEdit) + .use(BASE_URLS['page-password-edit'], Pages.PagePasswordEdit) + .use(BASE_URLS['page-404'], Pages.Page404) + .use(BASE_URLS['page-500'], Pages.Page500) + .use(BASE_URLS['page-chat'], Pages.PageChat) .start(); diff --git a/src/pages/404/404.ts b/src/pages/404/404.ts index bec917593..b153cfbf2 100644 --- a/src/pages/404/404.ts +++ b/src/pages/404/404.ts @@ -1,4 +1,4 @@ -import {Block} from "../../core/Block.ts"; +import {Block} from "../../core/block.ts"; export class Page404 extends Block { constructor() { diff --git a/src/pages/500/500.ts b/src/pages/500/500.ts index 0692b8272..8ac551390 100644 --- a/src/pages/500/500.ts +++ b/src/pages/500/500.ts @@ -1,4 +1,4 @@ -import {Block} from "../../core/Block.ts"; +import {Block} from "../../core/block.ts"; export class Page500 extends Block { constructor() { diff --git a/src/pages/all-components/all-components.ts b/src/pages/all-components/all-components.ts index adadebc51..b54ee07dd 100644 --- a/src/pages/all-components/all-components.ts +++ b/src/pages/all-components/all-components.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {chat1, mockListChats} from "../../mocks/chat.mocks.ts"; import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {mockUser} from "../../mocks/user-profile.mocks.ts"; @@ -29,7 +29,6 @@ export class AllComponents extends Block { }, onClick: (event:Event) => { event.preventDefault(); - console.log("click") }, onLogin: (event:Event) => { event.preventDefault(); diff --git a/src/pages/all-pages/all-pages.ts b/src/pages/all-pages/all-pages.ts index b283d55c6..576e0ce71 100644 --- a/src/pages/all-pages/all-pages.ts +++ b/src/pages/all-pages/all-pages.ts @@ -1,4 +1,4 @@ -import {Block} from "../../core/Block.ts"; +import {Block} from "../../core/block.ts"; export class AllPages extends Block { diff --git a/src/pages/chat-page/page-chat.ts b/src/pages/chat-page/page-chat.ts index 296ebc4b8..86c671147 100644 --- a/src/pages/chat-page/page-chat.ts +++ b/src/pages/chat-page/page-chat.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; export class PageChat extends Block { diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index eb56f8ed1..94e2d6cde 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -1,4 +1,4 @@ -import {IProps, Block} from "../../core/Block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {BASE_URLS} from "../../config.ts"; import { signIn} from "../../services/auth.ts"; @@ -17,10 +17,6 @@ export class LoginPage extends Block { const login = this.refs.formLogin.getRefs()?.login.value(); const password = this.refs.formLogin.getRefs()?.password.value(); - console.log({ - login, - password - }) if (!login) { return; } @@ -31,9 +27,7 @@ export class LoginPage extends Block { } } - // getUser().catch(error=>console.log(error)) super(props); - //console.log('window.user', window.user) } protected render(): string { diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index 4259f4436..c865e636e 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {updateUserPassword} from "../../services/user-settings.ts"; import Router from "../../core/router.ts"; diff --git a/src/pages/profile-edit/profile-edit.ts b/src/pages/profile-edit/profile-edit.ts index 24491ea26..62f9aa63a 100644 --- a/src/pages/profile-edit/profile-edit.ts +++ b/src/pages/profile-edit/profile-edit.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {IPageProfileProps} from "../profile/profile.ts"; import {updateUserProfile} from "../../services/user-settings.ts"; diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index 624f5866e..b37916c5d 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {StoreEvents} from "../../core/store.ts"; diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index 8fccfecfe..f6b612f05 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/Block.ts"; +import {IProps,Block} from "../../core/block.ts"; import {signUp} from "../../services/auth.ts"; import {IUser} from "../../models/IUser.ts"; import {BASE_URLS} from "../../config.ts"; @@ -21,16 +21,6 @@ export class PageRegistration extends Block { const second_name = this.refs.form.getRefs()?.second_name.value(); const password = this.refs.form.getRefs()?.password.value(); const password2 = this.refs.form.getRefs()?.password2.value(); - - console.log({ - login, - password, - password2, - second_name, - first_name, - phone, - email - }) if (password !== password2) showAlert('Repeat passwords correct!'); if (password === password2) { const data = { diff --git a/src/services/app.ts b/src/services/app.ts index 5d04ae457..af859efed 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -16,7 +16,6 @@ const initialStateApp = async () => { return; } store.user=user; - console.log('user_initial', window.store.getState()); await updateChats(); } @@ -39,7 +38,6 @@ const initChatUsers = async (chat: IChat | null) => { } catch (error) { setStateUsers(chat, []) } - console.log('users_initial', users); setStateUsers(chat, users) } const initChatToken = async (chat: IChat | null) => { diff --git a/src/services/send-message.ts b/src/services/send-message.ts index 224f42bf6..ac3b8ae19 100644 --- a/src/services/send-message.ts +++ b/src/services/send-message.ts @@ -4,53 +4,49 @@ import {IUser} from "../models/IUser.ts"; import SocketIO from "../api/socket.ts"; export const openConnectMessages = (chat: IChat, currentUser: IUser) => { - if (!chat.id) return; - if(!chat.users)return; - if(chat.users.length<2)return chat; - if(chat.connection&&chat.connection.getState()==='OPEN')return; - const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); - socket.open(() => { - console.log('chat',chat) - if(chat.unread_count>0) getAllNewMessage(0,chat); - setInterval(()=>{ - socket.ping(); - },5000); + if (!chat.id) return; + if (!chat.users) return; + if (chat.users.length < 2) return chat; + if (chat.connection && chat.connection.getState() === 'OPEN') return; + const socket = new SocketIO(BASE_SOCKET_CHAT, currentUser.id, String(chat.id), chat.token); + socket.open(() => { + if (chat.unread_count > 0) getAllNewMessage(0, chat); + setInterval(() => { + socket.ping(); + }, 5000); - }) - socket.message((event: MessageEvent) => { - //console.log('Message!', event.data); - const message = JSON.parse(event.data); - if(message.type==='message'||Array.isArray(message)) { - - console.log('mesages', message) - if (!chat.messages) chat.messages = []; - if (Array.isArray(message)) { - message.reverse(); - chat.messages = [...chat.messages, ...message]; - } else chat.messages.push(message); - if(chat.id=== window.store.getState().currentChat?.id) window.store.set({currentChat: {...chat}}); - else { - const foundedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); - if(foundedChat) { - foundedChat.unread_count += 1; - window.store.set({chats: window.store.getState().chats}); - } - } - const element = document.querySelector('.scroll-bottom'); - if(element) - element.scrollIntoView({ - behavior: 'auto', - block: 'end', - }); - } + }) + socket.message((event: MessageEvent) => { + //console.log('Message!', event.data); + const message = JSON.parse(event.data); + if (message.type === 'message' || Array.isArray(message)) { + if (!chat.messages) chat.messages = []; + if (Array.isArray(message)) { + message.reverse(); + chat.messages = [...chat.messages, ...message]; + } else chat.messages.push(message); + if (chat.id === window.store.getState().currentChat?.id) window.store.set({currentChat: {...chat}}); + else { + const foundedChat = window.store.getState().chats?.find(_chat => _chat.id === chat.id); + if (foundedChat) { + foundedChat.unread_count += 1; + window.store.set({chats: window.store.getState().chats}); + } + } + const element = document.querySelector('.scroll-bottom'); + if (element) + element.scrollIntoView({ + behavior: 'auto', + block: 'end', + }); + } - if(event.data.type==='user connected') { - console.log('user connected', event.data) - } - }) - /* socket.error((event: Event) => console.log('Error!', event));*/ - chat.connection = socket; - return chat; + if (event.data.type === 'user connected') { + console.log('user connected', event.data) + } + }) + chat.connection = socket; + return chat; } @@ -58,19 +54,18 @@ export const sendMessage = (message: string) => { const chat = window.store.getState().currentChat; if (!chat) throw Error('Select Chat!'); if (chat.connection) { - console.log(chat.connection) chat.connection.sendMessage(message); } } -export const getAllNewMessage=(limit:number,chat:IChat|null)=>{ +export const getAllNewMessage = (limit: number, chat: IChat | null) => { { //const chat = window.store.getState().currentChat; if (!chat) throw Error('Select Chat!'); if (chat.connection) { - chat.connection.sendRequestForgetMessage(limit); - chat.unread_count=0; - window.store.set({currentChat: {...chat}}); + chat.connection.sendRequestForgetMessage(limit); + chat.unread_count = 0; + window.store.set({currentChat: {...chat}}); } } } diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts index b084a9d57..b6f6cc6d8 100644 --- a/src/utils/api.utils.ts +++ b/src/utils/api.utils.ts @@ -2,7 +2,7 @@ import {BASE_URLS} from "../config.ts"; import Router from "../core/router.ts"; import alertController from "../core/alert-controller.ts"; import Alert from "../components/alert"; -import Block from "../core/Block.ts"; +import Block from "../core/block.ts"; export const responseHasError = (response: XMLHttpRequest) => { From 4bfcb0df7e0016425c0cb26036a953efe6ac0b40 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 01:59:05 +0400 Subject: [PATCH 25/43] fixed linter errors --- src/core/http.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/http.ts b/src/core/http.ts index cfdcadbe2..299dc1a72 100644 --- a/src/core/http.ts +++ b/src/core/http.ts @@ -26,7 +26,7 @@ class HTTPTransport { this.baseUrl=base_url||BASE_API_URL; } get: HTTPMethod = (url, options = {}):Promise => { - return this.request(this.baseUrl+url+queryStringify(options.params || {}) || '', { + return this.request(this.baseUrl+url+queryStringify(options.params as NonNullable || {}) || '', { ...options, method: METHODS.GET }, options.timeout)as Promise ; From a1d7810b133ecd439d696f0a5c12383a2c73835f Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 02:04:16 +0400 Subject: [PATCH 26/43] fixed test errors --- src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index 80e13ffc9..e206d45b8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -32,7 +32,7 @@ const initState: IAppState = { window.store = new Store(initState); const router = new Router(".app"); -await initialStateApp(); +initialStateApp(); router.use(BASE_URLS['page-default'], Pages.PageChat) From 3322fbd4610cad2e07d086e223d10aa266ea1ce0 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 02:11:42 +0400 Subject: [PATCH 27/43] fixed test errors --- src/core/route.ts | 3 +++ src/core/router.ts | 4 ++++ src/services/app.ts | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/core/route.ts b/src/core/route.ts index 61cab8dad..89f9d1093 100644 --- a/src/core/route.ts +++ b/src/core/route.ts @@ -13,6 +13,9 @@ class Route { this._props = props; } + public get pathname() { + return this._pathname + } /** * navigate — метод для отображения вьюшки, если переданный URL совпадает с URL текущего Route; * @param pathname diff --git a/src/core/router.ts b/src/core/router.ts index 4d7e50b85..e74fa57e3 100644 --- a/src/core/router.ts +++ b/src/core/router.ts @@ -23,6 +23,10 @@ class Router { public static getRouter(){ return this.__instance; } + + public get currentRoute(){ + return this._currentRoute?.pathname; + } /** * use — регистрирует блок по пути в роут и возвращает себя — чтобы можно было выстроить в цепочку; * @param pathname diff --git a/src/services/app.ts b/src/services/app.ts index af859efed..a528bfbe6 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -12,7 +12,7 @@ const initialStateApp = async () => { try { user = await getUser(); } catch (error) { - Router.getRouter().go(BASE_URLS['page-login']); + if(Router.getRouter().currentRoute!==BASE_URLS['page-sign-up']) Router.getRouter().go(BASE_URLS['page-login']); return; } store.user=user; From 98c75a625868d2ec510f4067b99d4504d55b6245 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 03:03:49 +0400 Subject: [PATCH 28/43] fixed test errors --- server.js | 4 +- src/api/socket.ts | 31 ++++++------- src/components/chat-list/chat-list.ts | 10 ++-- src/components/menu-chat/menu-chat.ts | 8 ++-- src/pages/all-components/all-components.ts | 54 +++++++++++----------- src/services/app.ts | 18 ++++---- 6 files changed, 61 insertions(+), 64 deletions(-) diff --git a/server.js b/server.js index 2c197b482..228fd14f8 100644 --- a/server.js +++ b/server.js @@ -1,5 +1,6 @@ // server.js const express = require('express'); +const path = require('path'); const 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'))); diff --git a/src/api/socket.ts b/src/api/socket.ts index 5c98cc6d2..2e209fddd 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -1,29 +1,29 @@ //'wss://ya-praktikum.tech/ws/chats///' class SocketIO { - private STATES=['CONNECTING','OPEN','CLOSING','CLOSED']; + 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; + 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)=> { + private init = (url: string) => { return new WebSocket(url); } - public getState=()=>{ - if(!this.socket)return this.STATES[3]; + public getState = () => { + if (!this.socket) return this.STATES[3]; return this.STATES[this.socket.readyState]; } - public open=(callBack: () => void) =>{ + public open = (callBack: () => void) => { this.socket?.addEventListener('open', callBack); } - public close=(callBack: (event: CloseEvent) => void)=> { + public close = (callBack: (event: CloseEvent) => void) => { const funk = (event: CloseEvent) => { callBack(event); @@ -31,7 +31,7 @@ class SocketIO { this.socket?.addEventListener('close', funk); } - public message=(callBack: (event: MessageEvent) => void)=> { + public message = (callBack: (event: MessageEvent) => void) => { const funk = (event: MessageEvent) => { callBack(event); } @@ -42,7 +42,7 @@ class SocketIO { this.socket?.addEventListener('error', callBack); } - public sendMessage=(message: string)=> { + public sendMessage = (message: string) => { const _message = JSON.stringify( { content: message, @@ -50,8 +50,7 @@ class SocketIO { }) this.socket?.send(_message); } - public sendRequestForgetMessage=(limit: number=0)=> { - console.log("get old") + public sendRequestForgetMessage = (limit: number = 0) => { const _message = JSON.stringify( { content: String(limit), @@ -60,7 +59,7 @@ class SocketIO { this.socket?.send(_message); } - public ping=()=> { + public ping = () => { this.socket?.send(JSON.stringify({ type: "ping" })); diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index f338206f3..b10c069cd 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -33,8 +33,7 @@ export class ChatList extends Block { modalController.openModal(); } props.setCurrentChat = (id: string) => { - const chat=this.props.list.find(item => item.id === Number(id)) || null; - console.log('chat',chat) + const chat = this.props.list.find(item => item.id === Number(id)) || null; setStateCurrentChat(chat).then(() => { this.setProps(this.props) }) @@ -64,18 +63,19 @@ export class ChatList extends Block { id='${chat.id} ' title='${chat.title} ' avatar='${chat.avatar} ' - unread_count='${chat.unread_count>0?String(chat.unread_count):''}' - last_message_content='${chat.last_message ?chat.last_message.content : 'no messages'} ' + unread_count='${chat.unread_count > 0 ? String(chat.unread_count) : ''}' + last_message_content='${chat.last_message ? chat.last_message.content : 'no messages'} ' last_message_time='${chat.last_message ? chat.last_message.time : ''}' }}} `) }).join('') } + protected render(): string { const {list, currentUser} = this.props; //if (!list || list.length === 0) return ''; return (`
    diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts index e6501dc69..4b2cc10d7 100644 --- a/src/components/menu-chat/menu-chat.ts +++ b/src/components/menu-chat/menu-chat.ts @@ -4,7 +4,6 @@ import modalController from "../../core/modal-controller.ts"; import {ModalChatUsers} from "../index.ts"; - interface IMenuChatProps extends IProps { currentChat: IChat | null, isOpenedMenu: boolean, @@ -20,7 +19,7 @@ export class MenuChat extends Block { props.addUser = () => { modalController.addModal((new ModalChatUsers({ users: [], - type:'add', + type: 'add', ref: "modal", okClick: (result: string) => { console.log(result); @@ -31,8 +30,8 @@ export class MenuChat extends Block { } props.deleteUser = () => { modalController.addModal((new ModalChatUsers({ - users: window.store.getState().currentChat?.users||[], - type:'delete', + users: window.store.getState().currentChat?.users || [], + type: 'delete', ref: "modal", okClick: (result: string) => { console.log(result); @@ -42,7 +41,6 @@ export class MenuChat extends Block { this.props.closeMenu(); } props.changeAvatarChat = () => { - console.log(' add Avatar Chat!'); this.props.closeMenu(); } diff --git a/src/pages/all-components/all-components.ts b/src/pages/all-components/all-components.ts index b54ee07dd..55f4306f9 100644 --- a/src/pages/all-components/all-components.ts +++ b/src/pages/all-components/all-components.ts @@ -1,61 +1,61 @@ -import {IProps,Block} from "../../core/block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {chat1, mockListChats} from "../../mocks/chat.mocks.ts"; import {mockListMessages} from "../../mocks/chat-message.mocks.ts"; import {mockUser} from "../../mocks/user-profile.mocks.ts"; -import { validateName} from "../../utils/validates.utils.ts"; +import {validateName} from "../../utils/validates.utils.ts"; import {IUser} from "../../models/IUser.ts"; import {IChat} from "../../models/IChat.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {IValidateType} from "../../models/IValidateType.ts"; export interface IAllComponentsProps extends IProps { - onClick:(event:Event)=>void, - onLogin:(event:Event)=>void, - onClickLoadAvatar:(event:Event)=>void, - user:IUser, - chat:IChat, - chatList:IChat[], - message:IChatMessage, - messageList:IChatMessage[], - validate:IValidateType + onClick: (event: Event) => void, + onLogin: (event: Event) => void, + onClickLoadAvatar: (event: Event) => void, + user: IUser, + chat: IChat, + chatList: IChat[], + message: IChatMessage, + messageList: IChatMessage[], + validate: IValidateType } + export class AllComponents extends Block { constructor() { - const props:IAllComponentsProps={ - events:{}, - validate:{ - login:validateName + const props: IAllComponentsProps = { + events: {}, + validate: { + login: validateName }, - onClick: (event:Event) => { + onClick: (event: Event) => { event.preventDefault(); }, - onLogin: (event:Event) => { + onLogin: (event: Event) => { event.preventDefault(); - const login = this.refs.login.value(); - const password = this.refs.password.value(); + const login = this.refs.login.value(); + const password = this.refs.password.value(); console.log({ login, password }) }, - onClickLoadAvatar: (event:Event) => { + onClickLoadAvatar: (event: Event) => { event.preventDefault(); - console.log("click") }, - chat:chat1, - chatList:mockListChats, - message:mockListMessages[0], - messageList:mockListMessages, - user:mockUser + chat: chat1, + chatList: mockListChats, + message: mockListMessages[0], + messageList: mockListMessages, + user: mockUser } super(props) } protected render(): string { - return(` + return (`
    {{{ Button caption="sign in" onClick=onClick}}} diff --git a/src/services/app.ts b/src/services/app.ts index a528bfbe6..9ebf46bb0 100644 --- a/src/services/app.ts +++ b/src/services/app.ts @@ -4,18 +4,18 @@ import {BASE_URLS} from "../config.ts"; import {IUser} from "../models/IUser.ts"; import {getChats, getChatToken, getChatUsers} from "./chat.ts"; import {IChat} from "../models/IChat.ts"; -import { openConnectMessages} from "./send-message.ts"; +import {openConnectMessages} from "./send-message.ts"; const initialStateApp = async () => { - const store= window.store.getState(); + const store = window.store.getState(); let user = null; try { user = await getUser(); } catch (error) { - if(Router.getRouter().currentRoute!==BASE_URLS['page-sign-up']) Router.getRouter().go(BASE_URLS['page-login']); + if (Router.getRouter().currentRoute !== BASE_URLS['page-sign-up']) Router.getRouter().go(BASE_URLS['page-login']); return; } - store.user=user; + store.user = user; await updateChats(); } @@ -26,7 +26,6 @@ const updateChats = async () => { } catch (error) { setStateChats(chats) } - console.log('chats_initial', chats) setStateChats(chats) } @@ -48,7 +47,6 @@ const initChatToken = async (chat: IChat | null) => { } catch (error) { setStateToken(chat, token) } - console.log('token_initial', token); setStateToken(chat, token) } const setStateUser = (user: IUser | null) => { @@ -68,14 +66,14 @@ const setStateCurrentChat = async (chat: IChat | null) => { await initChatToken(chat); const user = window.store.getState().user; if (chat && user) { - const foundedChat= window.store.getState().chats?.find(_chat => _chat.id === chat.id); - if(foundedChat&&chat.connection) { - foundedChat.unread_count =0; + const foundedChat = window.store.getState().chats?.find(_chat => _chat.id === chat.id); + if (foundedChat && chat.connection) { + foundedChat.unread_count = 0; } openConnectMessages(chat, user); } - window.store.set({currentChat: chat,chats: window.store.getState().chats}); + window.store.set({currentChat: chat, chats: window.store.getState().chats}); } From b8ff43b974c5ff0f5bf471ad04d5c58516e6de48 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 03:16:01 +0400 Subject: [PATCH 29/43] fixed test errors --- public/_redirects | 1 + 1 file changed, 1 insertion(+) create mode 100644 public/_redirects diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 000000000..7797f7c6a --- /dev/null +++ b/public/_redirects @@ -0,0 +1 @@ +/* /index.html 200 From b86f931e66534e14a64f4247fabd21293e896c62 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 13:54:45 +0400 Subject: [PATCH 30/43] fixed errors --- src/api/chat.ts | 7 +- src/components/avatar/avatar.ts | 5 +- src/components/chat-item/chat-item.ts | 2 +- src/components/menu-chat/menu-chat.ts | 7 +- src/components/modal-avatar/modal-avatar.ts | 81 ++++++++++++++++----- src/components/modal-prompt/modal-prompt.ts | 2 +- src/models/IValidateType.ts | 14 +++- src/services/chat.ts | 68 +++++++++-------- src/utils/load-file.utils.ts | 2 + src/utils/validates.utils.ts | 8 ++ 10 files changed, 138 insertions(+), 58 deletions(-) diff --git a/src/api/chat.ts b/src/api/chat.ts index 3dd8e528c..7853f8337 100644 --- a/src/api/chat.ts +++ b/src/api/chat.ts @@ -31,9 +31,10 @@ export class ChatApi { return this.httpTransport.post(this.baseUrl + `/token/${id}`); } - /* public logOut() { - return this.httpTransport.post(this.baseUrl + '/logout'); - }*/ + public updateChatAvatar(file: FormData,chatId:number) { + file.append('chatId', String(chatId)); + return this.httpTransport.put(this.baseUrl + '/avatar', {data: file}); + } } export default ChatApi diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 434c302cf..ded692da7 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -18,7 +18,8 @@ export class Avatar extends Block { click: () => { if(!props.isLoadAvatar)return; modalController.addModal((new ModalAvatar({ - oldAvatar:window.store.getState().user?.avatar||'' + oldAvatar:window.store.getState().user?.avatar||'', + type:'user' })) as unknown as Block); modalController.openModal(); } @@ -33,7 +34,7 @@ export class Avatar extends Block { const {size = 'md', isLoadAvatar = false, imageUrl = ''} = this.props; return (`
    - ${imageUrl ? ` + ${imageUrl&&imageUrl.trim()!=='null'? ` image avatar` : ``} ${isLoadAvatar ? `
    diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts index 2997123d5..5f1d30175 100644 --- a/src/components/chat-item/chat-item.ts +++ b/src/components/chat-item/chat-item.ts @@ -35,7 +35,7 @@ export class ChatItem extends Block { return (`
  • - {{{ Avatar imageUrl=${avatar} isLoadAvatar=false size='sm' }}} + {{{ Avatar imageUrl='${avatar||''}' isLoadAvatar=false size='sm' }}}
    diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts index 4b2cc10d7..6f78cc75b 100644 --- a/src/components/menu-chat/menu-chat.ts +++ b/src/components/menu-chat/menu-chat.ts @@ -1,7 +1,7 @@ import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; import modalController from "../../core/modal-controller.ts"; -import {ModalChatUsers} from "../index.ts"; +import {ModalAvatar, ModalChatUsers} from "../index.ts"; interface IMenuChatProps extends IProps { @@ -41,6 +41,11 @@ export class MenuChat extends Block { this.props.closeMenu(); } props.changeAvatarChat = () => { + modalController.addModal((new ModalAvatar({ + oldAvatar:window.store.getState().currentChat?.avatar||'', + type:'chat' + })) as unknown as Block); + modalController.openModal(); this.props.closeMenu(); } diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index 2cff9fea9..d16923611 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -2,7 +2,8 @@ import {IProps, Block} from "../../core/block.ts"; import {updateUserAvatar, updateUserProfile} from "../../services/user-settings.ts"; import {BASE_RESOURCES_URL} from "../../config.ts"; import modalController from "../../core/modal-controller.ts"; -import {addActive, deleteActive, loadNewFileFromDrag} from "../../utils/load-file.utils.ts"; +import {addActive, deleteActive, loadNewFileFromDrag} from "../../utils/load-file.utils.ts"; +import {updateChatAvatar} from "../../services/chat.ts"; interface IModalAvatarProps extends IProps { oldAvatar?: string, @@ -11,23 +12,48 @@ interface IModalAvatarProps extends IProps { cancelClick?: () => void, onAddFile?: (e: InputEvent) => void, file?: unknown; + type: 'user' | 'chat' } export class ModalAvatar extends Block { constructor(props: IModalAvatarProps) { props.file = null; props.newAvatar = ''; - props.okClick = () => { + props.okClick = async () => { + if(this.props.type==='chat') { + const chat=window.store.getState().chats?.find(item=>item.id===window.store.getState().currentChat?.id); + if(chat){ + chat.avatar=window.store.getState().currentChat?.avatar; + window.store.set({chats:window.store.getState().chats}); + } + } modalController.closeModal(); } props.cancelClick = () => { - const user = window.store.getState().user; - if (user && this.props.oldAvatar) { - this.props.newAvatar =''; - updateUserProfile({...user, avatar: this.props.oldAvatar}).then(() => { - modalController.closeModal(); - }); - } //else modalController.closeModal(); + switch (this.props.type) { + case "user": { + const user = window.store.getState().user; + if (user && this.props.oldAvatar) { + this.props.newAvatar = ''; + updateUserProfile({...user, avatar: this.props.oldAvatar}).then(() => { + modalController.closeModal(); + }); + } + break; + } + case "chat": { + const chat = window.store.getState().currentChat; + if (chat && this.props.oldAvatar) { + this.props.newAvatar = ''; + console.log('Вернуть на место старый аватар') + /* updateChatAvatar({...user, avatar: this.props.oldAvatar}).then(() => { + modalController.closeModal(); + });*/ + } + break; + } + } + } @@ -35,12 +61,31 @@ export class ModalAvatar extends Block { deleteActive(e as Event); const formData = loadNewFileFromDrag(e); if (formData) { - updateUserAvatar(formData).then(user => { - this.props.newAvatar = user.avatar; - modalController.addModal((new ModalAvatar({ - oldAvatar: window.store.getState().user?.avatar || '' - })) as unknown as Block); - }); + switch (this.props.type) { + case "user": { + updateUserAvatar(formData).then(user => { + this.props.newAvatar = user.avatar; + modalController.addModal((new ModalAvatar({ + oldAvatar: window.store.getState().user?.avatar || '', + type: 'user' + })) as unknown as Block); + }); + break; + } + case "chat": { + const _chat = window.store.getState().currentChat; + if (!_chat) break; + updateChatAvatar(formData, _chat.id).then(chat => { + this.props.newAvatar = chat.avatar; + modalController.addModal((new ModalAvatar({ + oldAvatar: window.store.getState().currentChat?.avatar || '', + type: 'chat' + })) as unknown as Block); + }); + break; + } + } + } } super({ @@ -56,7 +101,7 @@ export class ModalAvatar extends Block { deleteActive(e); }, drop: _onAddFile, - change:_onAddFile, + change: _onAddFile, } }) @@ -71,9 +116,9 @@ export class ModalAvatar extends Block { const {oldAvatar = '', newAvatar = ''} = this.props; let result: string; if (newAvatar) { - result = `image avatar` + result = `image avatar` } else { - result = oldAvatar ? `image avatar` : `
    ` + result = oldAvatar ? `image avatar` : `
    ` } return ( `
  • +

  • ${caption}

    • diff --git a/src/components/menu-message/menu-message.ts b/src/components/menu-message/menu-message.ts index 374654dbd..2f03cb0c5 100644 --- a/src/components/menu-message/menu-message.ts +++ b/src/components/menu-message/menu-message.ts @@ -1,5 +1,8 @@ import {IProps, Block} from "../../core/block.ts"; import {IChat} from "../../models/IChat.ts"; +import modalController from "../../core/modal-controller.ts"; +import ModalLoadFile from "../modal-load-file"; +import ModalController from "../../core/modal-controller.ts"; interface IMenuMessageProps extends IProps { @@ -16,6 +19,11 @@ export class MenuMessage extends Block { props.currentChat = window.store.getState().currentChat; props.addMedia = () => { console.log('add media!'); + modalController.addModal((new ModalLoadFile({ + file:null, + type: 'picture' + })) as unknown as Block); + ModalController.openModal(); this.props.closeMenu(); } props.addFile = () => { @@ -41,9 +49,9 @@ export class MenuMessage extends Block { return (` `) diff --git a/src/components/message/message.ts b/src/components/message/message.ts index f869101c0..3894b875f 100644 --- a/src/components/message/message.ts +++ b/src/components/message/message.ts @@ -1,6 +1,7 @@ import {IProps,Block} from "../../core/block.ts"; import {IChatMessage} from "../../models/IChatMessage.ts"; import {getShortDate} from "../../utils/date.utils.ts"; +import {BASE_RESOURCES_URL} from "../../config.ts"; export interface IMessageProps extends IProps{ message:IChatMessage; @@ -25,7 +26,7 @@ export class Message extends Block { ${!myMessage?`
    ${userName}
    `:''} - included_file + included_file
    {{{ Badge text="${getShortDate(message.time)}" type="primary" }}}
    diff --git a/src/components/modal-avatar/modal-avatar.ts b/src/components/modal-avatar/modal-avatar.ts index d16923611..c23c7533a 100644 --- a/src/components/modal-avatar/modal-avatar.ts +++ b/src/components/modal-avatar/modal-avatar.ts @@ -49,6 +49,7 @@ export class ModalAvatar extends Block { /* updateChatAvatar({...user, avatar: this.props.oldAvatar}).then(() => { modalController.closeModal(); });*/ + modalController.closeModal(); } break; } diff --git a/src/components/modal-chat-users/modal-chat-users.ts b/src/components/modal-chat-users/modal-chat-users.ts index ede9938ba..ac4f8670d 100644 --- a/src/components/modal-chat-users/modal-chat-users.ts +++ b/src/components/modal-chat-users/modal-chat-users.ts @@ -5,6 +5,7 @@ import {IUser} from "../../models/IUser.ts"; import {UserItem} from "../index.ts"; import {addChatUser, deleteChatUsers} from "../../services/chat.ts"; import {setStateCurrentChat} from "../../services/app.ts"; +import {showModalAlert} from "../../utils/api.utils.ts"; interface IModalChatUsersProps extends IProps { okClick?: (result: string) => void, @@ -26,6 +27,9 @@ export class ModalChatUsers extends Block { return; } searchUsersByLogin(input).then((users) => { + if(!users||users.length===0){ + showModalAlert('Not Found users') + } this.props.users = users; this.setProps(this.props) }) diff --git a/src/components/modal-load-file/index.ts b/src/components/modal-load-file/index.ts new file mode 100644 index 000000000..6a4b9d14b --- /dev/null +++ b/src/components/modal-load-file/index.ts @@ -0,0 +1,2 @@ +import './modal-load-file.pcss'; +export { ModalLoadFile as default } from './modal-load-file.ts'; diff --git a/src/components/modal-load-file/modal-load-file.pcss b/src/components/modal-load-file/modal-load-file.pcss new file mode 100644 index 000000000..b29b2183d --- /dev/null +++ b/src/components/modal-load-file/modal-load-file.pcss @@ -0,0 +1,10 @@ +.modal-load-file__image{ + border-radius: 10px; + border: 1px var(--red) solid; + transition: .5s ease; + backface-visibility: hidden; + opacity: 1; + display: block; + height: auto; + width: 200px; +} diff --git a/src/components/modal-load-file/modal-load-file.ts b/src/components/modal-load-file/modal-load-file.ts new file mode 100644 index 000000000..9d322ff01 --- /dev/null +++ b/src/components/modal-load-file/modal-load-file.ts @@ -0,0 +1,107 @@ +import {IProps, Block} from "../../core/block.ts"; +import {BASE_RESOURCES_URL} from "../../config.ts"; +import modalController from "../../core/modal-controller.ts"; +import {addActive, deleteActive, loadNewFileFromDrag} from "../../utils/load-file.utils.ts"; +import {uploadResource} from "../../services/resources.ts"; +import {IFile} from "../../models/IFile.ts"; +import { showModalAlert} from "../../utils/api.utils.ts"; + +interface IModalAvatarProps extends IProps { + okClick?: () => void, + cancelClick?: () => void, + onAddFile?: (e: InputEvent) => void, + file?: IFile|null; + type: 'picture' | 'video'|'document'|'location' +} + +export class ModalLoadFile extends Block { + constructor(props: IModalAvatarProps) { + props.file = null; + props.okClick = async () => { + if(!this.props.file)showModalAlert('Load File!') + else{ + const chat=window.store.getState().currentChat; + if(chat&&chat.connection){ + chat.connection.sendFile(String(this.props.file.id)); + } + } + modalController.closeModal(); + } + props.cancelClick = () => { + modalController.closeModal(); + } + + const _onAddFile = (e: TEvent) => { + deleteActive(e as Event); + const formData = loadNewFileFromDrag(e,'resource'); + if (formData) { + uploadResource(formData).then(file => { + console.log('file',file) + this.props.file=file; + this.setProps(this.props) + /* modalController.addModal((new ModalLoadFile({ + file:file.path, + type: this.props.type + })) as unknown as Block);*/ + }); + + } + } + super({ + ...props, + events: { + dragenter: (e: Event) => { + addActive(e); + }, + dragover: (e: Event) => { + addActive(e); + }, + dragleave: (e: Event) => { + deleteActive(e); + }, + drop: _onAddFile, + change: _onAddFile, + + } + }) + } + + + public get props() { + return this._props as IModalAvatarProps; + } + + getChildren() { + const {file } = this.props; + let result: string; + if (file) { + result = `file` + } else { + result = '' + } + return ( + ` + ` + ) + } + + protected render(): string { + return (` + {{{ Modal + caption="Add File" + okText='Send' + cancelText='Cancel' + okClick=okClick + cancelClick=cancelClick + children="${this.getChildren()}" + }}} + `) + } +} diff --git a/src/core/alert-controller.ts b/src/core/alert-controller.ts index cf864de77..98602f694 100644 --- a/src/core/alert-controller.ts +++ b/src/core/alert-controller.ts @@ -26,6 +26,9 @@ class AlertController { this.dialog?.show() } + public open(){ + this.dialog?.showModal() + } public closeModal(){ this.dialog?.close() } diff --git a/src/core/modal-controller.ts b/src/core/modal-controller.ts index e591ff803..941fe6a5f 100644 --- a/src/core/modal-controller.ts +++ b/src/core/modal-controller.ts @@ -3,6 +3,7 @@ import Block from "./block.ts"; class ModalController { private static __instance: ModalController; private dialog: HTMLDialogElement | null=null; + private _opened: boolean=false; constructor() { if (ModalController.__instance) { @@ -10,12 +11,16 @@ class ModalController { } ModalController.__instance = this; this.dialog= document.getElementById('dialog') as HTMLDialogElement; + this._opened=false; } public static getInstance() { return this.__instance; } + public get opened(){ + return this._opened; + } public addModal(modal: Block) { const htmlElement = modal.getContent(); if (!this.dialog?.firstElementChild) this.dialog?.append(document.createElement('div')); @@ -23,10 +28,12 @@ class ModalController { } public openModal(){ + this._opened=true; this.dialog?.showModal() } public closeModal(){ + this._opened=false; this.dialog?.close() } diff --git a/src/models/IChatMessage.ts b/src/models/IChatMessage.ts index cd448febd..bc13f1bff 100644 --- a/src/models/IChatMessage.ts +++ b/src/models/IChatMessage.ts @@ -5,7 +5,7 @@ export interface IChatMessage { user_id: number; chat_id: number; time: string; - type: string|'message'; + type: string|'message'|'file'; content: number | string; file?: IFile; main?: boolean; diff --git a/src/services/resources.ts b/src/services/resources.ts new file mode 100644 index 000000000..913bbc196 --- /dev/null +++ b/src/services/resources.ts @@ -0,0 +1,18 @@ +import {responseHasError} from "../utils/api.utils.ts"; +import ResourcesApi from "../api/resources.ts"; + + +const resourcesApi = new ResourcesApi('/resources'); + +const uploadResource = async (file:FormData) => { + const result = await resourcesApi.uploadResource(file) as XMLHttpRequest; + const error=responseHasError(result); + if (error) throw Error(error); + if(!error) + return JSON.parse(result.responseText); + +} + +export { + uploadResource +} diff --git a/src/services/send-message.ts b/src/services/send-message.ts index ac3b8ae19..897195fd7 100644 --- a/src/services/send-message.ts +++ b/src/services/send-message.ts @@ -19,7 +19,7 @@ export const openConnectMessages = (chat: IChat, currentUser: IUser) => { socket.message((event: MessageEvent) => { //console.log('Message!', event.data); const message = JSON.parse(event.data); - if (message.type === 'message' || Array.isArray(message)) { + if (message.type === 'message' || Array.isArray(message)||message.type === 'file') { if (!chat.messages) chat.messages = []; if (Array.isArray(message)) { message.reverse(); @@ -40,7 +40,6 @@ export const openConnectMessages = (chat: IChat, currentUser: IUser) => { block: 'end', }); } - if (event.data.type === 'user connected') { console.log('user connected', event.data) } diff --git a/src/utils/api.utils.ts b/src/utils/api.utils.ts index b6f6cc6d8..f5b24eda8 100644 --- a/src/utils/api.utils.ts +++ b/src/utils/api.utils.ts @@ -3,6 +3,7 @@ import Router from "../core/router.ts"; import alertController from "../core/alert-controller.ts"; import Alert from "../components/alert"; import Block from "../core/block.ts"; +import modalController from "../core/modal-controller.ts"; export const responseHasError = (response: XMLHttpRequest) => { @@ -17,7 +18,10 @@ export const responseHasError = (response: XMLHttpRequest) => { if (error.includes('Cookie')) { // showAlert('Please, login!'); return error; - } else showAlert(error); + } else { + if(modalController.opened)showModalAlert(error); + else showAlert(error); + } //if (error) throw Error(error); return error; } @@ -31,3 +35,10 @@ export const showAlert = (message: string) => { })) as unknown as Block); alertController.openModal(); } + +export const showModalAlert = (message: string) => { + alertController.addModal((new Alert({ + message: message || '' + })) as unknown as Block); + alertController.open(); +} diff --git a/src/utils/load-file.utils.ts b/src/utils/load-file.utils.ts index 21fed0021..091bf3357 100644 --- a/src/utils/load-file.utils.ts +++ b/src/utils/load-file.utils.ts @@ -1,5 +1,5 @@ -export const loadNewFileFromDrag=(e:TEvent):FormData|null=>{ +export const loadNewFileFromDrag=(e:TEvent,name:string='avatar'):FormData|null=>{ let file=null; if(e instanceof DragEvent){ const dt = e.dataTransfer; @@ -11,11 +11,9 @@ export const loadNewFileFromDrag=(e:TEvent):FormData|null=>{ const files = (e.target as unknown as HTMLInputElement)?.files; if(files)file=files[0]; } - console.log('file',file) if(file){ const formData = new FormData(); - formData.append('avatar', file); - console.log('file',formData) + formData.append(name, file); return formData; } From 9b15d6b5fc5197805c12550419a20785e905ede8 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Fri, 13 Oct 2023 15:56:11 +0400 Subject: [PATCH 33/43] fixed eslint --- src/components/menu-item/menu-item.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/menu-item/menu-item.pcss b/src/components/menu-item/menu-item.pcss index 0b8dc363d..5583e9394 100644 --- a/src/components/menu-item/menu-item.pcss +++ b/src/components/menu-item/menu-item.pcss @@ -14,6 +14,7 @@ opacity: 0.5; cursor: inherit; } + .menu-item__icon { margin-right: 5px; width: 22px; From d96e2ecd0a1a1912c8cd967cfd8d599fce6425ff Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 15 Oct 2023 09:08:22 +0400 Subject: [PATCH 34/43] fixed submit --- src/components/button/button.pcss | 5 +++ src/components/button/button.ts | 14 +++--- src/components/form-auth/form-auth.ts | 2 +- src/components/input/input.ts | 25 +++++++---- src/components/modal/modal.ts | 12 +++-- src/core/block.ts | 21 ++++++--- src/pages/login/login.ts | 33 ++++++++------ src/pages/registration/registration.ts | 62 +++++++++++++++----------- src/services/auth.ts | 5 ++- 9 files changed, 112 insertions(+), 67 deletions(-) diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss index 7bd9c763b..8f2cb3407 100644 --- a/src/components/button/button.pcss +++ b/src/components/button/button.pcss @@ -92,3 +92,8 @@ text-decoration: underline; } } + +button:focus-visible { + outline: none; + opacity: 0.8; +} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index b25b3d0f8..f2b479fcd 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,7 +1,8 @@ -import {IProps,Block} from "../../core/block.ts"; +import {IProps, Block} from "../../core/block.ts"; -interface IButtonProps extends IProps{ - type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number'|'close', +interface IButtonProps extends IProps { + type: 'arrow' | 'dots' | 'paperclip' | 'cancel' | 'number' | 'close', + isSubmit?: boolean, caption: string, page: string, onClick: () => void @@ -12,15 +13,16 @@ export class Button extends Block { super({ ...props, events: { - click: props.onClick || (() => {}) + click: props.onClick || (() => { + }) } }) } protected render(): string { - const { type='', caption='', page='' } = this._props as IButtonProps; + const {isSubmit = false, type = '', caption = '', page = ''} = this._props as IButtonProps; return (` - diff --git a/src/components/form-auth/form-auth.ts b/src/components/form-auth/form-auth.ts index d860c8ddc..7e5bcf2bf 100644 --- a/src/components/form-auth/form-auth.ts +++ b/src/components/form-auth/form-auth.ts @@ -28,7 +28,7 @@ export class FormAuth extends Block { ${children}
    - {{{ Button caption="${captionOk}" onClick=onClickOkButton }}} + {{{ Button caption="${captionOk}" onClick=onClickOkButton isSubmit=true}}} {{{ Link caption="${captionCancel}" href="${cancelLink}" }}}
    diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 5a53b6eae..122a7853e 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -1,26 +1,35 @@ -import {IProps,Block} from "../../core/block.ts"; +import {IProps, Block} from "../../core/block.ts"; interface IInputProps extends IProps { classes: string, placeholder: string, - onBlur:()=>void, - ref:string, - name:string, - value:string + onBlur: () => void, + ref: string, + name: string, + value: string type: 'text' | 'password', } export class Input extends Block { constructor(props: IInputProps) { - props.events={ - blur: props.onBlur || (() => {}) + props.events = { + blur: props.onBlur || (() => { + }), + /*keypress: ((event:KeyboardEvent) => { + if (event.key === "Enter") { + event.preventDefault(); + props.onBlur(); + } + + }) || (() => { + })*/ }; super(props) } protected render(): string { - const { classes, placeholder,ref,value,name,type } = this._props as IInputProps; + const {classes, placeholder, ref, value, name, type} = this._props as IInputProps; return (` { + console.log('submit_form') + this.props.okClick(event); + } + } }) } @@ -26,7 +32,7 @@ export class Modal extends Block { protected render(): string { const {caption = '', okText = '', cancelText = '',children=''} = this.props; return (` -
    +

    ${caption}

    @@ -34,7 +40,7 @@ export class Modal extends Block { ${children}
    - {{{ Button caption="${okText}" onClick=okClick }}} + {{{ Button caption="${okText}" onClick=okClick isSubmit=true}}} {{{ Button caption="${cancelText}" onClick=cancelClick type='link'}}}
    diff --git a/src/core/block.ts b/src/core/block.ts index d1c5b255d..a2d793977 100644 --- a/src/core/block.ts +++ b/src/core/block.ts @@ -127,17 +127,24 @@ export class Block { } private _render() { - const fragment = this.compile(this.render(), this._props); + try{ + const fragment = this.compile(this.render(), this._props); - const newElement = fragment.firstElementChild as HTMLElement; + const newElement = fragment.firstElementChild as HTMLElement; - if (this._element) { - this._element.replaceWith(newElement); - } + if (this._element&&newElement) { + this._element.replaceWith(newElement); + } + + this._element = newElement; - this._element = newElement; + this._addEvents(); + + } + catch (err:unknown) { + //console.log('error',err) + } - this._addEvents(); } _addEvents() { diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts index 94e2d6cde..ee657f084 100644 --- a/src/pages/login/login.ts +++ b/src/pages/login/login.ts @@ -10,22 +10,27 @@ export interface ILoginPageProps extends IProps { export class LoginPage extends Block { constructor() { - const props: ILoginPageProps = { - events: {}, - onLogin: (event: Event) => { - event.preventDefault(); - const login = this.refs.formLogin.getRefs()?.login.value(); - const password = this.refs.formLogin.getRefs()?.password.value(); - - if (!login) { - return; - } - if (!password) { - return; - } - signIn({login, password}).catch((error)=>console.log('login',error)) + const onLogin=(event: Event) => { + event.preventDefault(); + const login = this.refs.formLogin.getRefs()?.login.value(); + const password = this.refs.formLogin.getRefs()?.password.value(); + if (!login) { + return; } + if (!password) { + return; + } + signIn({login, password}).catch((error)=>console.log('login',error)) + + }; + const props: ILoginPageProps = { + events:{ + submit:(event: Event)=>{ + onLogin(event); + } + }, + onLogin: onLogin } super(props); } diff --git a/src/pages/registration/registration.ts b/src/pages/registration/registration.ts index f6b612f05..7db0b4031 100644 --- a/src/pages/registration/registration.ts +++ b/src/pages/registration/registration.ts @@ -1,4 +1,4 @@ -import {IProps,Block} from "../../core/block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {signUp} from "../../services/auth.ts"; import {IUser} from "../../models/IUser.ts"; import {BASE_URLS} from "../../config.ts"; @@ -6,36 +6,46 @@ import {showAlert} from "../../utils/api.utils.ts"; import Router from "../../core/router.ts"; export interface IPageRegistrationProps extends IProps { - onLogin:(event:Event)=>void, + onLogin: (event: Event) => void, } + export class PageRegistration extends Block { constructor() { - const props:IPageRegistrationProps={ - events:{}, - onLogin: async (event: Event) => { - event.preventDefault(); - const login = this.refs.form.getRefs()?.login.value(); - const email = this.refs.form.getRefs()?.email.value(); - const phone = this.refs.form.getRefs()?.phone.value(); - const first_name = this.refs.form.getRefs()?.first_name.value(); - const second_name = this.refs.form.getRefs()?.second_name.value(); - const password = this.refs.form.getRefs()?.password.value(); - const password2 = this.refs.form.getRefs()?.password2.value(); - if (password !== password2) showAlert('Repeat passwords correct!'); - if (password === password2) { - const data = { - first_name, - second_name, - login, - email, - password, - phone - } as IUser; - await signUp(data); - Router.getRouter().go(BASE_URLS['page-chat']); - } + const onLogin = async (event: Event) => { + event.preventDefault(); + const login = this.refs.form.getRefs()?.login.value(); + const email = this.refs.form.getRefs()?.email.value(); + const phone = this.refs.form.getRefs()?.phone.value(); + const first_name = this.refs.form.getRefs()?.first_name.value(); + const second_name = this.refs.form.getRefs()?.second_name.value(); + const password = this.refs.form.getRefs()?.password.value(); + const password2 = this.refs.form.getRefs()?.password2.value(); + if (password !== password2) { + showAlert('Repeat passwords correct!'); + return; + } + const data = { + first_name, + second_name, + login, + email, + password, + phone + } as IUser; + if (Object.values(data).findIndex(value=>value==='')===-1) { + await signUp(data); + Router.getRouter().go(BASE_URLS['page-chat']); } + + } + const props: IPageRegistrationProps = { + events: { + submit: async (event: Event) => { + await onLogin(event); + } + }, + onLogin: onLogin } super(props); diff --git a/src/services/auth.ts b/src/services/auth.ts index 698f7b726..5c75b00df 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -10,9 +10,10 @@ const authApi = new AuthApi('/auth'); const signUp = async (data: IUser) => { const result = await authApi.signUp(data); const error=responseHasError(result); + if (error) throw Error(error); if(!error) { - setStateUser(JSON.parse(result.responseText)); - + const newUser=await getUser(); + setStateUser(newUser); } return JSON.parse(result.responseText); } From 11e5c68ae11b56c500f1e1cde2d3410eb0bf5636 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 15 Oct 2023 09:33:01 +0400 Subject: [PATCH 35/43] added states to profile --- src/components/form-profile/form-profile.ts | 4 +- src/pages/password-edit/password-edit.ts | 2 +- src/pages/profile/profile.ts | 89 ++++++++++++++++++--- 3 files changed, 80 insertions(+), 15 deletions(-) diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 8572f4697..94f0883bd 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -55,8 +55,8 @@ export class FormProfile extends Block { {{{ Button caption="${buttonText}" onClick=onClickOkButton }}}
    ` : `
    - {{{Link caption="Change IUser Data" href='/settings-edit' type='success' linkLine=true }}} - {{{Link caption="Change Password" href='/password-edit' type='success' linkLine=true }}} + {{{Link caption="Change IUser Data" href='/settings?edit=profile' type='success' linkLine=true }}} + {{{Link caption="Change Password" href='/settings?edit=password' type='success' linkLine=true }}} {{{Button caption="Logout" onClick=onLogOut type='link' }}}
    ` } diff --git a/src/pages/password-edit/password-edit.ts b/src/pages/password-edit/password-edit.ts index c865e636e..ec113734e 100644 --- a/src/pages/password-edit/password-edit.ts +++ b/src/pages/password-edit/password-edit.ts @@ -48,7 +48,7 @@ export class PagePasswordEdit extends Block { protected render(): string { return (`
    - {{{ FormProfile user=user withButton=true children="${this.getChildren()}" ref="form" buttonPage='pageProfile' onClickOkButton=onChange buttonText='Save Password' }}} + {{{ FormProfile user=user withButton=true children="${this.getChildren()}" ref="form" onClickOkButton=onChange buttonText='Save Password' }}}
    `) } } diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index 9f9b7fe44..3c9f240aa 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,17 +1,67 @@ import {IProps, Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {StoreEvents} from "../../core/store.ts"; +import Router from "../../core/router.ts"; +import {showAlert} from "../../utils/api.utils.ts"; +import {updateUserPassword, updateUserProfile} from "../../services/user-settings.ts"; export interface IPageProfileProps extends IProps { - user: IUser | null + user: IUser | null; + isEditPassword?: boolean; + isEditProfile?: boolean; + onChangePassword:(event:Event)=>void, + onChangeProfile:(event:Event)=>void, + onChangeStateForm:(isEditPassword:boolean,isEditProfile:boolean)=>void, } export class PageProfile extends Block { constructor() { + const props: IPageProfileProps = { user: window.store.getState().user, - events: {} + events: {}, + onChangeStateForm:(isEditPassword:boolean,isEditProfile:boolean)=>{ + this.props.isEditProfile=isEditProfile; + this.props.isEditPassword=isEditPassword; + }, + onChangePassword: async (event: Event) => { + event.preventDefault(); + const oldPassword = this.refs.form.getRefs()?.oldPassword.value(); + const newPassword = this.refs.form.getRefs()?.newPassword.value(); + const repeatPassword = this.refs.form.getRefs()?.repeatPassword.value(); + + if(newPassword !== repeatPassword)showAlert('Repeat new password correct!'); + if (oldPassword && newPassword && newPassword === repeatPassword) { + await updateUserPassword({ + oldPassword, + newPassword + }); + Router.getRouter().back(); + } + }, + onChangeProfile: async (event: Event) => { + event.preventDefault(); + const login = this.refs.form.getRefs()?.login.value(); + const email = this.refs.form.getRefs()?.email.value(); + const phone = this.refs.form.getRefs()?.phone.value(); + const first_name = this.refs.form.getRefs()?.first_name.value(); + const second_name = this.refs.form.getRefs()?.second_name.value(); + const display_name = this.refs.form.getRefs()?.display_name.value(); + + const userData: IUser = { + login, + second_name, + first_name, + display_name, + phone, + email + } + if (login && first_name && second_name && phone && email) { + await updateUserProfile(userData); + Router.getRouter().back(); + } + } } window.store.on(StoreEvents.Updated, () => { this.props.user = window.store.getState().user; @@ -24,24 +74,35 @@ export class PageProfile extends Block { return this._props as IPageProfileProps; } - getChildren() { - const {user} = this.props; + getChildrenPassword() { + return ( + `{{{ InputWide label='Old Password' type='password' name='oldPassword' validate=validate.password ref='oldPassword' readOnly=false }}} + {{{ InputWide label='New Password' type='password' name='newPassword' validate=validate.password ref='newPassword' readOnly=false }}} + {{{ InputWide label='Repeat New Password' type='password' name='repeatPassword' validate=validate.password ref='repeatPassword' readOnly=false }}} + + ` + ) + } + + getChildrenEditProfile() { + const {user, isEditProfile = false} = this.props; if (!user) return '' const {email, login, first_name, second_name, display_name, phone} = user; return ( - `{{{ InputWide label='Email' type='email' name='email' validate=validate.email ref='email' readOnly=true value='${email}' }}} - {{{ InputWide label='Login' type='text' name='login' validate=validate.login ref='login' readOnly=true value='${login}' }}} - {{{ InputWide label='First Name' type='first_name' name='first_name' validate=validate.name ref='first_name' readOnly=true value='${first_name}' }}} - {{{ InputWide label='Second Name' name='second_name' validate=validate.name ref='second_name' readOnly=true value='${second_name}' }}} - {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=true value='${display_name || ''}' }}} - {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=true value='${phone}' }}} + `{{{ InputWide label='Email' type='email' name='email' validate=validate.email ref='email' readOnly=${!isEditProfile} value='${email}' }}} + {{{ InputWide label='Login' type='text' name='login' validate=validate.login ref='login' readOnly=${!isEditProfile} value='${login}' }}} + {{{ InputWide label='First Name' type='first_name' name='first_name' validate=validate.name ref='first_name' readOnly=${!isEditProfile} value='${first_name}' }}} + {{{ InputWide label='Second Name' name='second_name' validate=validate.name ref='second_name' readOnly=${!isEditProfile} value='${second_name}' }}} + {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=${!isEditProfile} value='${display_name || ''}' }}} + {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=${!isEditProfile} value='${phone}' }}} + ` ) } protected render(): string { - const {user} = this.props; + const {user, isEditProfile = false, isEditPassword = false} = this.props; if (!user) return (`
    {{{Loader }}} @@ -49,7 +110,11 @@ export class PageProfile extends Block { `); return (`
    - {{{ FormProfile user=user withButton=false children="${this.getChildren()}" ref="form" }}} + {{{ FormProfile user=user withButton=${isEditProfile || isEditPassword} children="${isEditPassword ? this.getChildrenPassword() : this.getChildrenEditProfile()}" ref="form" + ${isEditProfile ? `onClickOkButton=onChangeProfile buttonText='Save User Profile' ` : + isEditPassword ? `onClickOkButton=onChangePassword buttonText='Save Password'` : ''} + onChangeStateForm=onChangeStateForm + }}}
    `) } From 51e723720eedf80d8d9180f7acc77e3bacb278de Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 15 Oct 2023 12:32:21 +0400 Subject: [PATCH 36/43] delete routes:/setting-password and /settings-edit --- src/components/form-profile/form-profile.ts | 64 ++++++++++++--------- src/components/link/link.ts | 17 ++++-- src/models/IValidateType.ts | 5 +- src/pages/profile/profile.ts | 60 +++++++++++++------ src/services/user-settings.ts | 2 +- src/utils/validates.utils.ts | 9 +++ 6 files changed, 105 insertions(+), 52 deletions(-) diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts index 94f0883bd..14a03171c 100644 --- a/src/components/form-profile/form-profile.ts +++ b/src/components/form-profile/form-profile.ts @@ -1,48 +1,56 @@ -import {IProps,Block} from "../../core/block.ts"; +import {IProps, Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts"; import {logOut} from "../../services/auth.ts"; -import Router from "../../core/router.ts"; -interface IFormProfileProps extends IProps{ - user:IUser|null, - withButton:boolean, +interface IFormProfileProps extends IProps { + user: IUser | null, + withButton: boolean, children: string, - buttonText:string, - onClickOkButton: (event:Event) => void, - onLogOut: (event:Event) => void, - onCancel: (event:Event) => void, - validate:IValidateType, + buttonText: string, + onClickOkButton: (event: Event) => void, + onChangeStateForm: (isEditPassword: boolean, isEditProfile: boolean) => void, + onLogOut: (event: Event) => void, + onCancel: (event: Event) => void, + onClickLink: (event: Event) => void, + validate: IValidateType, } + export class FormProfile extends Block { - constructor(props:IFormProfileProps) { + constructor(props: IFormProfileProps) { - props.validate= ALL_VALIDATE_FIELDS; - props.onLogOut=(event: Event) => { + props.validate = ALL_VALIDATE_FIELDS; + props.onLogOut = (event: Event) => { event.preventDefault(); - logOut().catch((error)=>console.log(error)) - } - props.onCancel=(event: Event) => { + logOut().catch((error) => console.log(error)) + }; + props.onClickLink = (event: Event) => { event.preventDefault(); - Router.getRouter().back(); - } - props.user=window.store.getState().user; + event.stopPropagation(); + const id=(event.target as Element).id; + if(id==='edit_password')this.props.onChangeStateForm(true,false); + if(id==='edit_profile')this.props.onChangeStateForm(false,true); + }; + + props.user = window.store.getState().user; super(props); } - public get props(){ + + public get props() { return this._props as IFormProfileProps; } + protected render(): string { - const {user,withButton=false,children='',buttonText=''}=this.props; - if(!user)return ''; - const {avatar='',first_name,second_name}=user; - return(` + const {user, withButton = false, children = '', buttonText = ''} = this.props; + if (!user) return ''; + const {avatar = '', first_name, second_name} = user; + return (`
    - {{{ Avatar imageUrl='${avatar||''}' isLoadAvatar=true }}} + {{{ Avatar imageUrl='${avatar || ''}' isLoadAvatar=true }}}

    ${first_name} ${second_name}

    ${user ? @@ -52,11 +60,11 @@ export class FormProfile extends Block { } ${withButton ? `
    - {{{ Button caption="${buttonText}" onClick=onClickOkButton }}} + {{{ Button caption="${buttonText}" onClick=onClickOkButton isSubmit=true}}}
    ` : `
    - {{{Link caption="Change IUser Data" href='/settings?edit=profile' type='success' linkLine=true }}} - {{{Link caption="Change Password" href='/settings?edit=password' type='success' linkLine=true }}} + {{{Link caption="Change IUser Data" href='' type='success' linkLine=true onClick=onClickLink id='edit_profile'}}} + {{{Link caption="Change Password" href='' type='success' linkLine=true onClick=onClickLink id='edit_password'}}} {{{Button caption="Logout" onClick=onLogOut type='link' }}}
    ` } diff --git a/src/components/link/link.ts b/src/components/link/link.ts index 63865209e..0801485e3 100644 --- a/src/components/link/link.ts +++ b/src/components/link/link.ts @@ -5,9 +5,11 @@ interface ILinkProps extends IProps{ caption: string, page?: string, href?: string, + id?: string, type: string, - linkIcon?:boolean - linkLine?:boolean + linkIcon?:boolean, + linkLine?:boolean, + onClick:(event: Event)=>void, } export class Link extends Block { @@ -15,8 +17,9 @@ export class Link extends Block { super({ ...props, events: { - click: ()=>{ - Router.getRouter().go(props.href||'/'); + click: (event: Event)=>{ + if(!this.props.onClick)Router.getRouter().go(props.href||'/'); + this.props.onClick&& this.props.onClick(event); } } }) @@ -25,12 +28,14 @@ export class Link extends Block { return this._props as ILinkProps; } protected render(): string { - const { caption='', page='' ,linkIcon=false,linkLine=false,type=''} = this.props; + const { caption='', page='' ,linkIcon=false,linkLine=false,type='',id} = this.props; const classLink=`link ${type?`link-${type}`:''} ${linkLine?'link-line':''}` return (` + ${page ? `page=${page}` : ''} + id='${id ? id : ''}' + > ${caption} ${linkIcon ? '
    ' : ''}     diff --git a/src/models/IValidateType.ts b/src/models/IValidateType.ts index e49af39c1..fa87bac02 100644 --- a/src/models/IValidateType.ts +++ b/src/models/IValidateType.ts @@ -1,4 +1,5 @@ import { + validateDisplayName, validateEmail, validateLogin, validateName, @@ -15,6 +16,7 @@ export interface IValidateType{ phone?:(value:string)=>string, email?:(value:string)=>string, nameChat?:(value:string)=>string, + displayName?:(value:string)=>string, } @@ -25,5 +27,6 @@ export const ALL_VALIDATE_FIELDS:IValidateType={ phone:validatePhone, email:validateEmail, password:validatePassword, - nameChat:validateNameChat + nameChat:validateNameChat, + displayName:validateDisplayName } diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index 3c9f240aa..316402c1f 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -1,17 +1,18 @@ import {IProps, Block} from "../../core/block.ts"; import {IUser} from "../../models/IUser.ts"; import {StoreEvents} from "../../core/store.ts"; -import Router from "../../core/router.ts"; import {showAlert} from "../../utils/api.utils.ts"; import {updateUserPassword, updateUserProfile} from "../../services/user-settings.ts"; +import Router from "../../core/router.ts"; export interface IPageProfileProps extends IProps { user: IUser | null; isEditPassword?: boolean; isEditProfile?: boolean; - onChangePassword:(event:Event)=>void, - onChangeProfile:(event:Event)=>void, - onChangeStateForm:(isEditPassword:boolean,isEditProfile:boolean)=>void, + onChangePassword: (event: Event) => void, + onChangeProfile: (event: Event) => void, + onChangeStateForm: (isEditPassword: boolean, isEditProfile: boolean) => void, + onCancel: () => void, } export class PageProfile extends Block { @@ -20,10 +21,28 @@ export class PageProfile extends Block { const props: IPageProfileProps = { user: window.store.getState().user, - events: {}, - onChangeStateForm:(isEditPassword:boolean,isEditProfile:boolean)=>{ - this.props.isEditProfile=isEditProfile; - this.props.isEditPassword=isEditPassword; + events: { + submit: (event: Event) => { + console.log('sub') + if (this.props.isEditPassword) { + this.props.onChangeProfile(event) + } + if (this.props.isEditProfile) { + this.props.onChangeProfile(event) + } + } + }, + onCancel: () => { + if (this.props.isEditProfile || this.props.isEditPassword) { + this.props.onChangeStateForm(false, false); + return; + } + Router.getRouter().back(); + }, + onChangeStateForm: (isEditPassword: boolean, isEditProfile: boolean) => { + this.props.isEditProfile = isEditProfile; + this.props.isEditPassword = isEditPassword; + this.setProps(this.props); }, onChangePassword: async (event: Event) => { event.preventDefault(); @@ -31,13 +50,13 @@ export class PageProfile extends Block { const newPassword = this.refs.form.getRefs()?.newPassword.value(); const repeatPassword = this.refs.form.getRefs()?.repeatPassword.value(); - if(newPassword !== repeatPassword)showAlert('Repeat new password correct!'); + if (newPassword !== repeatPassword) showAlert('Repeat new password correct!'); if (oldPassword && newPassword && newPassword === repeatPassword) { await updateUserPassword({ oldPassword, newPassword }); - Router.getRouter().back(); + this.props.onChangeStateForm(false, false); } }, onChangeProfile: async (event: Event) => { @@ -59,7 +78,7 @@ export class PageProfile extends Block { } if (login && first_name && second_name && phone && email) { await updateUserProfile(userData); - Router.getRouter().back(); + this.props.onChangeStateForm(false, false); } } } @@ -93,7 +112,7 @@ export class PageProfile extends Block { {{{ InputWide label='Login' type='text' name='login' validate=validate.login ref='login' readOnly=${!isEditProfile} value='${login}' }}} {{{ InputWide label='First Name' type='first_name' name='first_name' validate=validate.name ref='first_name' readOnly=${!isEditProfile} value='${first_name}' }}} {{{ InputWide label='Second Name' name='second_name' validate=validate.name ref='second_name' readOnly=${!isEditProfile} value='${second_name}' }}} - {{{ InputWide label='Name in Chat' name='display_name' validate=validate.name ref='display_name' readOnly=${!isEditProfile} value='${display_name || ''}' }}} + {{{ InputWide label='Name in Chat' name='display_name' validate=validate.displayName ref='display_name' readOnly=${!isEditProfile} value='${display_name || ''}' }}} {{{ InputWide label='Phone' name='phone' validate=validate.phone ref='phone' readOnly=${!isEditProfile} value='${phone}' }}} ` @@ -110,10 +129,19 @@ export class PageProfile extends Block { `); return (`
    - {{{ FormProfile user=user withButton=${isEditProfile || isEditPassword} children="${isEditPassword ? this.getChildrenPassword() : this.getChildrenEditProfile()}" ref="form" - ${isEditProfile ? `onClickOkButton=onChangeProfile buttonText='Save User Profile' ` : - isEditPassword ? `onClickOkButton=onChangePassword buttonText='Save Password'` : ''} - onChangeStateForm=onChangeStateForm + {{{ FormProfile user=user + withButton=${isEditProfile || isEditPassword} + children="${isEditPassword ? this.getChildrenPassword() : this.getChildrenEditProfile()}" + ref="form" + onChangeStateForm=onChangeStateForm + onCancel=onCancel + ${isEditProfile ? + `onClickOkButton=onChangeProfile buttonText='Save User Profile' ` : + isEditPassword ? + `onClickOkButton=onChangePassword buttonText='Save Password'` : '' + } + + }}}
    `) } diff --git a/src/services/user-settings.ts b/src/services/user-settings.ts index fce5ec3af..331a609b7 100644 --- a/src/services/user-settings.ts +++ b/src/services/user-settings.ts @@ -11,7 +11,7 @@ const updateUserProfile=async (newUserData: IUser) => { const result= await userApi.changeUserProfile(newUserData); const error=responseHasError(result); if(error) throw Error(error); - setStateUser(JSON.parse(result.responseText)); + if(!error)setStateUser(JSON.parse(result.responseText)); } const updateUserPassword=async (newUserPasswords: IPasswords) => { diff --git a/src/utils/validates.utils.ts b/src/utils/validates.utils.ts index 293d03ff5..b2eb6bad2 100644 --- a/src/utils/validates.utils.ts +++ b/src/utils/validates.utils.ts @@ -103,3 +103,12 @@ export const validateNameChat = (value: string) => { if (value.length === 0) return `Chat Name can not be blank`; return ''; } + +/** + * DisplayName — не должно быть больше 50 букв. + */ +export const validateDisplayName = (value: string) => { + if (value.length > 50) return `Display Name can not be more then 50 letters`; + if(value.length===0)return ' '; + return ''; +} From 709002ecdad505cccc84d6f649e8c6eadd32f2f7 Mon Sep 17 00:00:00 2001 From: ellevanova Date: Sun, 15 Oct 2023 13:58:28 +0400 Subject: [PATCH 37/43] delete routes:/login, fixed errors --- server.js | 2 +- src/components/chat-list/chat-list.pcss | 6 +++++ src/components/chat-list/chat-list.ts | 4 +-- src/components/modal-avatar/modal-avatar.ts | 2 ++ src/components/modal/modal.ts | 3 ++- src/config.ts | 2 +- src/main.ts | 6 ++--- src/models/IAppState.ts | 4 +-- src/pages/login/login.ts | 27 +++++++++++++++++++-- src/services/app.ts | 4 +++ 10 files changed, 48 insertions(+), 12 deletions(-) diff --git a/server.js b/server.js index 228fd14f8..9b0e46ea5 100644 --- a/server.js +++ b/server.js @@ -1,7 +1,7 @@ // server.js const express = require('express'); const path = require('path'); -const PORT = 3000; +const PORT = process.env.PORT || 3000; const app = express(); diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss index 47a416882..8239ed4e5 100644 --- a/src/components/chat-list/chat-list.pcss +++ b/src/components/chat-list/chat-list.pcss @@ -27,5 +27,11 @@ overflow-x: hidden; list-style-type: none; padding-right: 10px; + .chat-list__chats-empty{ + height: 80vh; + display: flex; + align-items: center; + justify-content: center; + } } } diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts index e7482dd8c..ebd042491 100644 --- a/src/components/chat-list/chat-list.ts +++ b/src/components/chat-list/chat-list.ts @@ -56,7 +56,7 @@ export class ChatList extends Block { } getChats(list: IChat[]): string { - if (!list || list.length === 0) return ''; + if (!list || list.length === 0) return `
  • {{{Button caption="Add chat" type='link' onClick=showModalAddChat }}}
    • `; return list.map(chat => { return (` {{{ChatItem onClick=setCurrentChat @@ -76,7 +76,7 @@ export class ChatList extends Block { {{{Loader }}}
    ` - //if (!list || list.length === 0) return ''; + //if (!list || list.length === 0) return 'Add chat'; return (`