diff --git a/src/app/App/model/AppModel.ts b/src/app/App/model/AppModel.ts index cb2a7014..b7150741 100644 --- a/src/app/App/model/AppModel.ts +++ b/src/app/App/model/AppModel.ts @@ -17,31 +17,29 @@ class AppModel { private router = new RouterModel(); constructor() { - this.router.setPages(this.initPages()); + document.body.append(this.appView.getHTML()); + this.appView.getHTML().insertAdjacentElement('beforebegin', new HeaderModel(this.router).getHTML()); + this.appView.getHTML().insertAdjacentElement('afterend', new FooterModel(this.router).getHTML()); + this.router.setRoutes(this.createRoutes()); } - private initPages(): Map { - const root = this.getHTML(); - root.append(new HeaderModel(this.router).getHTML()); - const loginPage = new LoginPageModel(root, this.router); - const mainPage = new MainPageModel(root, this.router); - const registrationPage = new RegistrationPageModel(root, this.router); - const notFoundPage = new NotFoundPageModel(root, this.router); - const pages: Map = new Map( + private createRoutes(): Map Page> { + return new Map( Object.entries({ - [PAGE_ID.DEFAULT_PAGE]: mainPage, - [PAGE_ID.LOGIN_PAGE]: loginPage, - [PAGE_ID.MAIN_PAGE]: mainPage, - [PAGE_ID.NOT_FOUND_PAGE]: notFoundPage, - [PAGE_ID.REGISTRATION_PAGE]: registrationPage, + [PAGE_ID.DEFAULT_PAGE]: () => new MainPageModel(this.appView.getHTML()), + [PAGE_ID.LOGIN_PAGE]: () => new LoginPageModel(this.appView.getHTML(), this.router), + [PAGE_ID.MAIN_PAGE]: () => new MainPageModel(this.appView.getHTML()), + [PAGE_ID.NOT_FOUND_PAGE]: () => new NotFoundPageModel(this.appView.getHTML(), this.router), + [PAGE_ID.REGISTRATION_PAGE]: () => new RegistrationPageModel(this.appView.getHTML(), this.router), }), ); - root.append(new FooterModel(this.router).getHTML()); - return pages; } - public getHTML(): HTMLDivElement { - return this.appView.getHTML(); + public start(): boolean { + if (!this.appView.getHTML()) { + return false; + } + return true; } } diff --git a/src/app/App/tests/App.spec.ts b/src/app/App/tests/App.spec.ts index 4ddd25c6..af57744d 100644 --- a/src/app/App/tests/App.spec.ts +++ b/src/app/App/tests/App.spec.ts @@ -3,7 +3,7 @@ import AppModel from '../model/AppModel.ts'; const app = new AppModel(); describe('Checking AppModel class', () => { - it('the getHTML method should return HTMLDivElement', () => { - expect(app.getHTML()).toBeInstanceOf(HTMLDivElement); + it('application successfully created', () => { + expect(app.start()).toBe(true); }); }); diff --git a/src/app/App/view/appView.module.scss b/src/app/App/view/appView.module.scss index f4a6d30e..fc88aeff 100644 --- a/src/app/App/view/appView.module.scss +++ b/src/app/App/view/appView.module.scss @@ -2,9 +2,10 @@ position: relative; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; margin: 0 auto; + padding: 60px 0; width: 100%; - min-height: 100vh; + min-height: calc(100vh - 141px); max-width: 1440px; } diff --git a/src/app/Router/model/RouterModel.ts b/src/app/Router/model/RouterModel.ts index 5fe29a95..61bd9d32 100644 --- a/src/app/Router/model/RouterModel.ts +++ b/src/app/Router/model/RouterModel.ts @@ -1,7 +1,5 @@ import type { Page } from '@/shared/types/common.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; import { PAGE_ID } from '@/shared/constants/pages.ts'; const DEFAULT_SEGMENT = import.meta.env.VITE_APP_DEFAULT_SEGMENT; @@ -10,9 +8,7 @@ const PATH_SEGMENTS_TO_KEEP = import.meta.env.VITE_APP_PATH_SEGMENTS_TO_KEEP; const PROJECT_TITLE = import.meta.env.VITE_APP_PROJECT_TITLE; class RouterModel { - private eventMediator = EventMediatorModel.getInstance(); - - private pages: Map = new Map(); + private routes: Map Page> = new Map(); constructor() { document.addEventListener('DOMContentLoaded', () => { @@ -20,43 +16,38 @@ class RouterModel { .split(DEFAULT_SEGMENT) .slice(PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT) .join(DEFAULT_SEGMENT); - this.handleRequest(currentPath); + this.navigateTo(currentPath); }); } - private handleRequest(path: string): null | string { - const pathParts = path.split(DEFAULT_SEGMENT); - const hasRoute = this.pages.has(pathParts.join('')); - if (!hasRoute) { - document.title = `${PROJECT_TITLE} | ${PAGE_ID.NOT_FOUND_PAGE}`; - this.eventMediator.notify(MEDIATOR_EVENT.CHANGE_PAGE, PAGE_ID.NOT_FOUND_PAGE); - return null; - } - document.title = `${PROJECT_TITLE} | ${pathParts.join('')}`; - this.eventMediator.notify(MEDIATOR_EVENT.CHANGE_PAGE, pathParts.join('')); - return pathParts.join(''); + private changeAppTitle(path: string, hasRoute: boolean): void { + const title = `${PROJECT_TITLE} | ${hasRoute ? path : PAGE_ID.NOT_FOUND_PAGE}`; + document.title = title; } - public navigateTo(route: string): History { - if (this.pages.has(route)) { - const pathnameApp = window.location.pathname - .split(DEFAULT_SEGMENT) - .slice(NEXT_SEGMENT, PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT) - .join(DEFAULT_SEGMENT); - const url = `${pathnameApp}/${route}`; - const titleRoute = route === '' ? PAGE_ID.MAIN_PAGE : route; - document.title = `${PROJECT_TITLE} | ${titleRoute}`; + public navigateTo(path: string): void { + const pathnameApp = window.location.pathname + .split(DEFAULT_SEGMENT) + .slice(NEXT_SEGMENT, PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT) + .join(DEFAULT_SEGMENT); + const url = `${pathnameApp}/${path}`; + history.pushState(path, '', url); - history.pushState(route, '', url); + const pathParts = url.split(DEFAULT_SEGMENT); + const hasRoute = this.routes.has(pathParts[1]); + this.changeAppTitle(pathParts[1], hasRoute); - this.eventMediator.notify(MEDIATOR_EVENT.CHANGE_PAGE, route); + if (!hasRoute) { + this.routes.get(PAGE_ID.NOT_FOUND_PAGE)?.(); + return; } - return window.history; + + this.routes.get(pathParts[1])?.(); } - public setPages(pages: Map): Map { - this.pages = pages; - return this.pages; + public setRoutes(routes: Map Page>): Map Page> { + this.routes = routes; + return this.routes; } } diff --git a/src/app/styles/common.scss b/src/app/styles/common.scss index 0fb605e7..8d42555c 100644 --- a/src/app/styles/common.scss +++ b/src/app/styles/common.scss @@ -5,6 +5,8 @@ html, body { display: flex; + flex-direction: column; + align-items: center; margin: 0 auto; width: 100%; min-width: 320px; diff --git a/src/entities/Navigation/model/NavigationModel.ts b/src/entities/Navigation/model/NavigationModel.ts index 30249641..746c0b3b 100644 --- a/src/entities/Navigation/model/NavigationModel.ts +++ b/src/entities/Navigation/model/NavigationModel.ts @@ -1,16 +1,12 @@ import type RouterModel from '@/app/Router/model/RouterModel'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import observeStore, { selectCurrentUser } from '@/shared/Store/observer.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; +import observeStore, { selectCurrentPage, selectCurrentUser } from '@/shared/Store/observer.ts'; import { PAGE_ID } from '@/shared/constants/pages.ts'; import NavigationView from '../view/NavigationView.ts'; class NavigationModel { - private eventMediator = EventMediatorModel.getInstance(); - private router: RouterModel; private view = new NavigationView(); @@ -33,13 +29,14 @@ class NavigationModel { private init(): boolean { this.setNavigationLinksHandlers(); - this.observeCurrentUser(); - this.subscribeToEventMediator(); + this.switchLinksState(); + this.observeState(); return true; } - private observeCurrentUser(): boolean { - observeStore(selectCurrentUser, () => this.checkCurrentUser.bind(this)); + private observeState(): boolean { + observeStore(selectCurrentUser, () => this.checkCurrentUser()); + observeStore(selectCurrentPage, () => this.switchLinksState()); return true; } @@ -55,16 +52,16 @@ class NavigationModel { return true; } - private subscribeToEventMediator(): boolean { - this.eventMediator.subscribe(MEDIATOR_EVENT.CHANGE_PAGE, (route) => { - const currentRoute = route === '' ? PAGE_ID.MAIN_PAGE : route; - const navigationLinks = this.view.getNavigationLinks(); - const currentLink = navigationLinks.get(String(currentRoute)); - navigationLinks.forEach((link) => link.setEnabled()); - this.checkCurrentUser(); - currentLink?.setDisabled(); - this.view.switchActiveLink(String(currentRoute)); - }); + private switchLinksState(): boolean { + const { currentPage } = getStore().getState(); + const currentPath = currentPage === '' ? PAGE_ID.MAIN_PAGE : currentPage; + const navigationLinks = this.view.getNavigationLinks(); + const currentLink = navigationLinks.get(String(currentPath)); + navigationLinks.forEach((link) => link.setEnabled()); + this.checkCurrentUser(); + currentLink?.setDisabled(); + this.view.switchActiveLink(String(currentPath)); + return true; } diff --git a/src/features/CountryChoice/model/CountryChoiceModel.ts b/src/features/CountryChoice/model/CountryChoiceModel.ts index 48c82e5f..5a8adf80 100644 --- a/src/features/CountryChoice/model/CountryChoiceModel.ts +++ b/src/features/CountryChoice/model/CountryChoiceModel.ts @@ -61,7 +61,7 @@ class CountryChoiceModel { private setCountryToStore(element: HTMLDivElement | HTMLInputElement, key: string): boolean { const currentCountryIndex = getCountryIndex( - element instanceof HTMLDivElement ? formattedText(element.textContent ?? '') || '' : formattedText(element.value), + element instanceof HTMLDivElement ? formattedText(element.textContent ?? '') : formattedText(element.value), ); const action = key === BILLING_ADDRESS_COUNTRY.inputParams.id ? setBillingCountry : setShippingCountry; diff --git a/src/features/InputFieldValidator/validators/validators.ts b/src/features/InputFieldValidator/validators/validators.ts index 97eafcfc..f4f473c3 100644 --- a/src/features/InputFieldValidator/validators/validators.ts +++ b/src/features/InputFieldValidator/validators/validators.ts @@ -4,6 +4,7 @@ import getStore from '@/shared/Store/Store.ts'; import COUNTRIES_LIST from '@/shared/constants/countriesList.ts'; import { USER_POSTAL_CODE } from '@/shared/constants/forms.ts'; import { ERROR_MESSAGE } from '@/shared/constants/messages.ts'; +import { checkInputLanguage } from '@/shared/utils/getCountryIndex.ts'; import { maxAgeMessage, maxLengthMessage, minAgeMessage, minLengthMessage } from '@/shared/utils/messageTemplate.ts'; import { postcodeValidator } from 'postcode-validator'; @@ -72,11 +73,11 @@ export const checkValidAge = (value: string, validParams: InputFieldValidatorPar export const checkValidCountry = (value: string, validParams: InputFieldValidatorParams): boolean | string => { if (validParams.validCountry) { if ( - !Object.keys(COUNTRIES_LIST[getStore().getState().currentLanguage]).find( + !Object.keys(COUNTRIES_LIST[checkInputLanguage(value)]).find( (countryName) => countryName.toLowerCase() === value.toLowerCase(), ) ) { - return ERROR_MESSAGE[getStore().getState().currentLanguage].INVALID_COUNTRY; + return ERROR_MESSAGE[checkInputLanguage(value)].INVALID_COUNTRY; } } return true; diff --git a/src/main.ts b/src/main.ts index a827903a..2559ce8f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,4 +2,4 @@ import AppModel from '@/app/App/model/AppModel.ts'; import '@/styles.scss'; const myApp = new AppModel(); -document.body.append(myApp.getHTML()); +myApp.start(); diff --git a/src/pages/LoginPage/model/LoginPageModel.ts b/src/pages/LoginPage/model/LoginPageModel.ts index 31f21f18..295d2a4e 100644 --- a/src/pages/LoginPage/model/LoginPageModel.ts +++ b/src/pages/LoginPage/model/LoginPageModel.ts @@ -1,9 +1,10 @@ import type RouterModel from '@/app/Router/model/RouterModel.ts'; import type { Page } from '@/shared/types/common.ts'; +import type { User } from '@/shared/types/user.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; +import observeStore, { selectCurrentUser } from '@/shared/Store/observer.ts'; import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts'; import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts'; import LoginFormModel from '@/widgets/LoginForm/model/LoginFormModel.ts'; @@ -11,8 +12,6 @@ import LoginFormModel from '@/widgets/LoginForm/model/LoginFormModel.ts'; import LoginPageView from '../view/LoginPageView.ts'; class LoginPageModel implements Page { - private eventMediator = EventMediatorModel.getInstance(); - private loginForm = new LoginFormModel(); private router: RouterModel; @@ -25,20 +24,24 @@ class LoginPageModel implements Page { this.init(); } - private checkAuthUser(): boolean { - if (!getStore().getState().currentUser) { - this.view.show(); - this.loginForm.getFirstInputField().getView().getInput().getHTML().focus(); - return false; + private checkAuthUser(): User | null { + const { currentUser } = getStore().getState(); + + if (currentUser) { + this.router.navigateTo(PAGE_ID.MAIN_PAGE); + return currentUser; } - this.router.navigateTo(PAGE_ID.MAIN_PAGE); - return true; + + return null; } private init(): boolean { - this.subscribeToEventMediator(); + getStore().dispatch(setCurrentPage(PAGE_ID.LOGIN_PAGE)); + this.checkAuthUser(); this.view.getAuthWrapper().append(this.loginForm.getHTML()); + this.loginForm.getFirstInputField().getView().getInput().getHTML().focus(); this.setRegisterLinkHandler(); + observeStore(selectCurrentUser, () => this.checkAuthUser()); return true; } @@ -59,20 +62,6 @@ class LoginPageModel implements Page { toRegisterPageWrapper.append(registerLinkCopy); } - private subscribeToEventMediator(): void { - this.eventMediator.subscribe(MEDIATOR_EVENT.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); - } - - private switchPageVisibility(route: unknown): boolean { - if (route === PAGE_ID.LOGIN_PAGE) { - this.checkAuthUser(); - } else { - this.view.hide(); - return false; - } - return true; - } - public getHTML(): HTMLDivElement { return this.view.getHTML(); } diff --git a/src/pages/LoginPage/view/LoginPageView.ts b/src/pages/LoginPage/view/LoginPageView.ts index 897221b4..4554cb67 100644 --- a/src/pages/LoginPage/view/LoginPageView.ts +++ b/src/pages/LoginPage/view/LoginPageView.ts @@ -1,6 +1,5 @@ import LinkModel from '@/shared/Link/model/LinkModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import { PAGE_TIMEOUT_DURATION } from '@/shared/constants/animations.ts'; import { PAGE_ANSWER, PAGE_ANSWER_KEYS, @@ -36,6 +35,7 @@ class LoginPageView { constructor(parent: HTMLDivElement) { this.parent = parent; + this.parent.innerHTML = ''; this.toRegisterPageWrapper = this.createToRegisterPageWrapper(); this.loginSpan = this.createLoginSpan(); this.designElement = this.createDesignElement(); @@ -155,17 +155,5 @@ class LoginPageView { public getToRegisterPageWrapper(): HTMLSpanElement { return this.toRegisterPageWrapper; } - - public hide(): boolean { - this.page.classList.add(styles.loginPage_hidden); - return true; - } - - public show(): boolean { - setTimeout(() => { - this.page.classList.remove(styles.loginPage_hidden); - }, PAGE_TIMEOUT_DURATION); - return true; - } } export default LoginPageView; diff --git a/src/pages/LoginPage/view/loginPageView.module.scss b/src/pages/LoginPage/view/loginPageView.module.scss index 56336283..16e565c4 100644 --- a/src/pages/LoginPage/view/loginPageView.module.scss +++ b/src/pages/LoginPage/view/loginPageView.module.scss @@ -3,10 +3,6 @@ display: block; padding: 0 var(--small-offset); animation: show 0.2s ease-out forwards; - - &_hidden { - animation: hide 0.2s ease-in forwards; - } } @keyframes show { @@ -20,17 +16,6 @@ } } -@keyframes hide { - 0% { - opacity: 1; - } - - 100% { - display: none; - opacity: 0; - } -} - .authWrapper { display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/src/pages/MainPage/model/MainPageModel.ts b/src/pages/MainPage/model/MainPageModel.ts index 496a74a9..6e45edd6 100644 --- a/src/pages/MainPage/model/MainPageModel.ts +++ b/src/pages/MainPage/model/MainPageModel.ts @@ -1,50 +1,21 @@ -import type RouterModel from '@/app/Router/model/RouterModel.ts'; import type { Page } from '@/shared/types/common.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; -import observeStore, { selectCurrentUser } from '@/shared/Store/observer.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; +import getStore from '@/shared/Store/Store.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; import { PAGE_ID } from '@/shared/constants/pages.ts'; import MainPageView from '../view/MainPageView.ts'; class MainPageModel implements Page { - private eventMediator = EventMediatorModel.getInstance(); - - private router: RouterModel; - private view: MainPageView; - constructor(parent: HTMLDivElement, router: RouterModel) { - this.router = router; + constructor(parent: HTMLDivElement) { this.view = new MainPageView(parent); this.init(); } private init(): void { - this.subscribeToEventMediator(); - this.subscribeToStore(); - } - - private subscribeToEventMediator(): void { - this.eventMediator.subscribe(MEDIATOR_EVENT.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); - } - - private subscribeToStore(): boolean { - observeStore(selectCurrentUser, () => { - this.router.navigateTo(PAGE_ID.MAIN_PAGE); - }); - return true; - } - - private switchPageVisibility(route: unknown): boolean { - if (route === PAGE_ID.MAIN_PAGE || route === PAGE_ID.DEFAULT_PAGE) { - this.view.show(); - } else { - this.view.hide(); - return false; - } - return true; + getStore().dispatch(setCurrentPage(PAGE_ID.MAIN_PAGE)); } public getHTML(): HTMLDivElement { diff --git a/src/pages/MainPage/view/MainPageView.ts b/src/pages/MainPage/view/MainPageView.ts index 655797e4..cd6bbd83 100644 --- a/src/pages/MainPage/view/MainPageView.ts +++ b/src/pages/MainPage/view/MainPageView.ts @@ -1,4 +1,3 @@ -import { PAGE_TIMEOUT_DURATION } from '@/shared/constants/animations.ts'; import createBaseElement from '@/shared/utils/createBaseElement.ts'; import styles from './mainPageView.module.scss'; @@ -10,6 +9,7 @@ class MainPageView { constructor(parent: HTMLDivElement) { this.parent = parent; + this.parent.innerHTML = ''; this.page = this.createHTML(); } @@ -27,17 +27,5 @@ class MainPageView { public getHTML(): HTMLDivElement { return this.page; } - - public hide(): boolean { - this.page.classList.add(styles.mainPage_hidden); - return true; - } - - public show(): boolean { - setTimeout(() => { - this.page.classList.remove(styles.mainPage_hidden); - }, PAGE_TIMEOUT_DURATION); - return true; - } } export default MainPageView; diff --git a/src/pages/MainPage/view/mainPageView.module.scss b/src/pages/MainPage/view/mainPageView.module.scss index df1156b7..de4c2be5 100644 --- a/src/pages/MainPage/view/mainPageView.module.scss +++ b/src/pages/MainPage/view/mainPageView.module.scss @@ -3,10 +3,6 @@ display: block; padding: 0 var(--small-offset); animation: show 0.2s ease-out forwards; - - &_hidden { - animation: hide 0.2s ease-in forwards; - } } @keyframes show { @@ -19,14 +15,3 @@ opacity: 1; } } - -@keyframes hide { - 0% { - opacity: 1; - } - - 100% { - display: none; - opacity: 0; - } -} diff --git a/src/pages/NotFoundPage/model/NotFoundPageModel.ts b/src/pages/NotFoundPage/model/NotFoundPageModel.ts index 26a8ed41..d92c4213 100644 --- a/src/pages/NotFoundPage/model/NotFoundPageModel.ts +++ b/src/pages/NotFoundPage/model/NotFoundPageModel.ts @@ -1,17 +1,14 @@ import type RouterModel from '@/app/Router/model/RouterModel.ts'; import type { Page } from '@/shared/types/common.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; import getStore from '@/shared/Store/Store.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; import { PAGE_DESCRIPTION, PAGE_ID } from '@/shared/constants/pages.ts'; import NotFoundPageView from '../view/NotFoundPageView.ts'; class NotFoundPageModel implements Page { - private eventMediator = EventMediatorModel.getInstance(); - private router: RouterModel; private view: NotFoundPageView; @@ -32,9 +29,10 @@ class NotFoundPageModel implements Page { } private init(): boolean { - this.subscribeToEventMediator(); + getStore().dispatch(setCurrentPage(PAGE_ID.NOT_FOUND_PAGE)); this.toMainButtonHandler(); this.observeStoreLanguage(); + this.view.setPageDescription(this.createPageDescription()); return true; } @@ -45,21 +43,6 @@ class NotFoundPageModel implements Page { return true; } - private subscribeToEventMediator(): void { - this.eventMediator.subscribe(MEDIATOR_EVENT.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); - } - - private switchPageVisibility(route: unknown): boolean { - if (route === PAGE_ID.NOT_FOUND_PAGE) { - this.view.show(); - this.view.setPageDescription(this.createPageDescription()); - } else { - this.view.hide(); - return false; - } - return true; - } - private toMainButtonHandler(): boolean { const toMainButton = this.view.getToMainButton().getHTML(); toMainButton.addEventListener('click', this.router.navigateTo.bind(this.router, PAGE_ID.MAIN_PAGE)); diff --git a/src/pages/NotFoundPage/view/NotFoundPageView.ts b/src/pages/NotFoundPage/view/NotFoundPageView.ts index 98f7c49d..4fab6ba1 100644 --- a/src/pages/NotFoundPage/view/NotFoundPageView.ts +++ b/src/pages/NotFoundPage/view/NotFoundPageView.ts @@ -1,6 +1,5 @@ import ButtonModel from '@/shared/Button/model/ButtonModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import { PAGE_TIMEOUT_DURATION } from '@/shared/constants/animations.ts'; import { BUTTON_TEXT, BUTTON_TEXT_KEYS } from '@/shared/constants/buttons.ts'; import { PAGE_DESCRIPTION_KEYS } from '@/shared/constants/pages.ts'; import SVG_DETAILS from '@/shared/constants/svg.ts'; @@ -87,22 +86,10 @@ class NotFoundPageView { return this.toMainButton; } - public hide(): boolean { - this.page.classList.add(styles.notFoundPage_hidden); - return true; - } - public setPageDescription(text: string): HTMLParagraphElement { this.description.innerText = text; return this.description; } - - public show(): boolean { - setTimeout(() => { - this.page.classList.remove(styles.notFoundPage_hidden); - }, PAGE_TIMEOUT_DURATION); - return true; - } } export default NotFoundPageView; diff --git a/src/pages/NotFoundPage/view/notFoundPageView.module.scss b/src/pages/NotFoundPage/view/notFoundPageView.module.scss index e3fcc2af..00192d75 100644 --- a/src/pages/NotFoundPage/view/notFoundPageView.module.scss +++ b/src/pages/NotFoundPage/view/notFoundPageView.module.scss @@ -10,10 +10,6 @@ background-color: var(--white); animation: show 0.2s ease-out forwards; gap: var(--extra-small-offset); - - &_hidden { - animation: hide 0.2s ease-in forwards; - } } @keyframes show { @@ -27,17 +23,6 @@ } } -@keyframes hide { - 0% { - opacity: 1; - } - - 100% { - display: none; - opacity: 0; - } -} - .pageLogo { display: flex; margin: 0 auto; diff --git a/src/pages/RegistrationPage/model/RegistrationPageModel.ts b/src/pages/RegistrationPage/model/RegistrationPageModel.ts index 03298892..0b67429d 100644 --- a/src/pages/RegistrationPage/model/RegistrationPageModel.ts +++ b/src/pages/RegistrationPage/model/RegistrationPageModel.ts @@ -1,8 +1,9 @@ import type RouterModel from '@/app/Router/model/RouterModel.ts'; import type { Page } from '@/shared/types/common.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; +import getStore from '@/shared/Store/Store.ts'; +import { setCurrentPage } from '@/shared/Store/actions.ts'; +import observeStore, { selectIsUserLoggedIn } from '@/shared/Store/observer.ts'; import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts'; import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts'; import RegisterFormModel from '@/widgets/RegistrationForm/model/RegistrationFormModel.ts'; @@ -10,8 +11,6 @@ import RegisterFormModel from '@/widgets/RegistrationForm/model/RegistrationForm import RegistrationPageView from '../view/RegistrationPageView.ts'; class RegistrationPageModel implements Page { - private eventMediator = EventMediatorModel.getInstance(); - private registerForm = new RegisterFormModel(); private router: RouterModel; @@ -25,8 +24,10 @@ class RegistrationPageModel implements Page { } private init(): void { + getStore().dispatch(setCurrentPage(PAGE_ID.REGISTRATION_PAGE)); this.view.getAuthWrapper().append(this.registerForm.getHTML()); - this.subscribeToEventMediator(); + this.registerForm.getFirstInputField().getView().getInput().getHTML().focus(); + observeStore(selectIsUserLoggedIn, () => this.router.navigateTo(PAGE_ID.MAIN_PAGE)); this.setLoginLinkHandler(); } @@ -47,21 +48,6 @@ class RegistrationPageModel implements Page { toLoginPageWrapper.append(loginLinkCopy); } - private subscribeToEventMediator(): void { - this.eventMediator.subscribe(MEDIATOR_EVENT.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); - } - - private switchPageVisibility(route: unknown): boolean { - if (route === PAGE_ID.REGISTRATION_PAGE) { - this.view.show(); - this.registerForm.getFirstInputField().getView().getInput().getHTML().focus(); - } else { - this.view.hide(); - return false; - } - return true; - } - public getHTML(): HTMLDivElement { return this.view.getHTML(); } diff --git a/src/pages/RegistrationPage/view/RegistrationPageView.ts b/src/pages/RegistrationPage/view/RegistrationPageView.ts index a43f4bd7..f92f0497 100644 --- a/src/pages/RegistrationPage/view/RegistrationPageView.ts +++ b/src/pages/RegistrationPage/view/RegistrationPageView.ts @@ -1,6 +1,5 @@ import LinkModel from '@/shared/Link/model/LinkModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import { PAGE_TIMEOUT_DURATION } from '@/shared/constants/animations.ts'; import { PAGE_ANSWER, PAGE_ANSWER_KEYS, @@ -36,6 +35,7 @@ class RegistrationPageView { constructor(parent: HTMLDivElement) { this.parent = parent; + this.parent.innerHTML = ''; this.toLoginPageWrapper = this.createToLoginPageWrapper(); this.registerSpan = this.createRegisterSpan(); this.designElement = this.createDesignElement(); @@ -155,17 +155,5 @@ class RegistrationPageView { public getToLoginPageWrapper(): HTMLSpanElement { return this.toLoginPageWrapper; } - - public hide(): boolean { - this.page.classList.add(styles.registrationPage_hidden); - return true; - } - - public show(): boolean { - setTimeout(() => { - this.page.classList.remove(styles.registrationPage_hidden); - }, PAGE_TIMEOUT_DURATION); - return true; - } } export default RegistrationPageView; diff --git a/src/pages/RegistrationPage/view/registrationPageView.module.scss b/src/pages/RegistrationPage/view/registrationPageView.module.scss index e61aaac4..4ef414b6 100644 --- a/src/pages/RegistrationPage/view/registrationPageView.module.scss +++ b/src/pages/RegistrationPage/view/registrationPageView.module.scss @@ -3,10 +3,6 @@ display: block; padding: 0 var(--small-offset); animation: show 0.2s ease-out forwards; - - &_hidden { - animation: hide 0.2s ease-in forwards; - } } @keyframes show { @@ -20,17 +16,6 @@ } } -@keyframes hide { - 0% { - opacity: 1; - } - - 100% { - display: none; - opacity: 0; - } -} - .authWrapper { display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/src/shared/EventMediator/model/EventMediatorModel.ts b/src/shared/EventMediator/model/EventMediatorModel.ts deleted file mode 100644 index 1d0924dd..00000000 --- a/src/shared/EventMediator/model/EventMediatorModel.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { ListenerCallback } from '@/shared/types/action'; - -class EventMediatorModel { - private listeners: Map>> = new Map(); - - private static mediator = new EventMediatorModel(); - - public static getInstance(): EventMediatorModel { - return EventMediatorModel.mediator; - } - - public notify(eventName: string, params: T): void { - const eventListeners = this.listeners.get(eventName); - if (eventListeners) { - eventListeners.forEach((listener) => listener(params)); - } - } - - public subscribe(eventName: string, listener: ListenerCallback): void { - if (this.listeners.has(eventName)) { - const listeners = this.listeners.get(eventName); - listeners?.push(listener); - } else { - const newListeners = []; - newListeners.push(listener); - this.listeners.set(eventName, newListeners); - } - } - - public unsubscribe(eventName: string, listener: ListenerCallback): void { - if (this.listeners.has(eventName)) { - const listeners = this.listeners.get(eventName); - const index = listeners?.findIndex((l) => l.toString() === listener.toString()); - - if (index !== undefined && index !== -1) { - listeners?.splice(index, 1); - - if (listeners) { - this.listeners.set(eventName, listeners); - } - } - } - } -} - -export default EventMediatorModel; diff --git a/src/shared/Store/actions.ts b/src/shared/Store/actions.ts index 77494a3d..532b5134 100644 --- a/src/shared/Store/actions.ts +++ b/src/shared/Store/actions.ts @@ -5,9 +5,11 @@ const ACTION = { SET_BILLING_COUNTRY: 'setBillingCountry', SET_CATEGORIES: 'setCategories', SET_CURRENT_LANGUAGE: 'setCurrentLanguage', + SET_CURRENT_PAGE: 'setCurrentPage', SET_CURRENT_USER: 'setCurrentUser', SET_PRODUCTS: 'setProducts', SET_SHIPPING_COUNTRY: 'setShippingCountry', + SWITCH_IS_USER_LOGGED_IN: 'switchIsUserLoggedIn', } as const; export type ActionType = (typeof ACTION)[keyof typeof ACTION]; @@ -48,3 +50,15 @@ export const setCurrentLanguage = ( payload: value, type: ACTION.SET_CURRENT_LANGUAGE, }); + +export const switchIsUserLoggedIn = ( + value: boolean, +): ActionWithPayload => ({ + payload: value, + type: ACTION.SWITCH_IS_USER_LOGGED_IN, +}); + +export const setCurrentPage = (value: string): ActionWithPayload => ({ + payload: value, + type: ACTION.SET_CURRENT_PAGE, +}); diff --git a/src/shared/Store/observer.ts b/src/shared/Store/observer.ts index 2739e96e..2fe20901 100644 --- a/src/shared/Store/observer.ts +++ b/src/shared/Store/observer.ts @@ -26,4 +26,8 @@ export const selectShippingCountry = (state: State): string => state.shippingCou export const selectCurrentLanguage = (state: State): string => state.currentLanguage; +export const selectIsUserLoggedIn = (state: State): boolean => state.isUserLoggedIn; + +export const selectCurrentPage = (state: State): string => state.currentPage; + export default observeStore; diff --git a/src/shared/Store/reducer.ts b/src/shared/Store/reducer.ts index 7b1cbd17..42db3f10 100644 --- a/src/shared/Store/reducer.ts +++ b/src/shared/Store/reducer.ts @@ -8,7 +8,9 @@ export interface State { billingCountry: string; categories: Category[]; currentLanguage: 'en' | 'ru'; + currentPage: string; // TBD Specify type currentUser: User | null; + isUserLoggedIn: boolean; products: Product[]; shippingCountry: string; } @@ -48,6 +50,17 @@ export const rootReducer: Reducer = (state: State, action: Action ...state, currentLanguage: action.payload, }; + + case 'switchIsUserLoggedIn': + return { + ...state, + isUserLoggedIn: action.payload, + }; + case 'setCurrentPage': + return { + ...state, + currentPage: action.payload, + }; default: return state; } diff --git a/src/shared/Store/test.spec.ts b/src/shared/Store/test.spec.ts index e4edd73d..12dd0a27 100644 --- a/src/shared/Store/test.spec.ts +++ b/src/shared/Store/test.spec.ts @@ -91,7 +91,9 @@ vi.mock('./Store.ts', async (importOriginal) => { billingCountry: '', categories: [], currentLanguage: 'en', + currentPage: '', currentUser: null, + isUserLoggedIn: false, products: [], shippingCountry: '', }), @@ -135,20 +137,22 @@ it('observeStore should call select and onChange when state changes', () => { billingCountry: '', categories: [], currentLanguage: 'en', + currentPage: 'main', currentUser: mockUser, + isUserLoggedIn: false, products: [], shippingCountry: '', }; const mockOnChange = vitest.fn(); - const selelectCurrentUserSpy = vitest.spyOn(actions, 'setCurrentUser'); + const selectCurrentUserSpy = vitest.spyOn(actions, 'setCurrentUser'); const mockSelect = vitest.fn(() => selectCurrentUser(mockState)); const unsubscribe = observeStore(mockSelect, mockOnChange); expect(selectCurrentUser(mockState)).toBe(mockUser); actions.setCurrentUser(mockUser); - expect(selelectCurrentUserSpy).toHaveBeenCalledWith(mockUser); + expect(selectCurrentUserSpy).toHaveBeenCalledWith(mockUser); unsubscribe(); }); @@ -161,7 +165,9 @@ describe('rootReducer', () => { billingCountry: '', categories: [], currentLanguage: 'en', + currentPage: '', currentUser: null, + isUserLoggedIn: false, products: [], shippingCountry: '', }; diff --git a/src/shared/constants/animations.ts b/src/shared/constants/animations.ts index b74c279b..5023ac2d 100644 --- a/src/shared/constants/animations.ts +++ b/src/shared/constants/animations.ts @@ -12,6 +12,4 @@ const SERVER_MESSAGE_ANIMATE_DETAILS = { params: SERVER_MESSAGE_ANIMATE_PARAMS, }; -export const PAGE_TIMEOUT_DURATION = 200; - export default SERVER_MESSAGE_ANIMATE_DETAILS; diff --git a/src/shared/constants/buttons.ts b/src/shared/constants/buttons.ts index b5d91fa5..4bf78fb9 100644 --- a/src/shared/constants/buttons.ts +++ b/src/shared/constants/buttons.ts @@ -37,3 +37,5 @@ export const LANGUAGE_CHOICE = { EN: 'en', RU: 'ru', } as const; + +export type LanguageChoiceType = (typeof LANGUAGE_CHOICE)[keyof typeof LANGUAGE_CHOICE]; diff --git a/src/shared/constants/events.ts b/src/shared/constants/events.ts deleted file mode 100644 index bada8622..00000000 --- a/src/shared/constants/events.ts +++ /dev/null @@ -1,6 +0,0 @@ -const MEDIATOR_EVENT = { - CHANGE_PAGE: 'changePage', - USER_LOGIN: 'userLogin', -} as const; - -export default MEDIATOR_EVENT; diff --git a/src/shared/constants/initialState.ts b/src/shared/constants/initialState.ts index e70a5248..a4036265 100644 --- a/src/shared/constants/initialState.ts +++ b/src/shared/constants/initialState.ts @@ -4,7 +4,9 @@ const initialState: State = { billingCountry: '', categories: [], currentLanguage: 'en', + currentPage: '', currentUser: null, + isUserLoggedIn: false, products: [], shippingCountry: '', }; diff --git a/src/shared/utils/getCountryIndex.ts b/src/shared/utils/getCountryIndex.ts index 34f36250..840594fe 100644 --- a/src/shared/utils/getCountryIndex.ts +++ b/src/shared/utils/getCountryIndex.ts @@ -1,8 +1,13 @@ -import getStore from '../Store/Store.ts'; +import type { LanguageChoiceType } from '../constants/buttons.ts'; + +import { LANGUAGE_CHOICE } from '../constants/buttons.ts'; import COUNTRIES_LIST from '../constants/countriesList.ts'; +export const checkInputLanguage = (text: string): LanguageChoiceType => + /[a-zA-Z]/.test(text) ? LANGUAGE_CHOICE.EN : LANGUAGE_CHOICE.RU; + export default function getCountryIndex(country: string): string { - const { currentLanguage } = getStore().getState(); + const currentLanguage = checkInputLanguage(country); const countryIndex: string = COUNTRIES_LIST[currentLanguage][country]; return countryIndex; } diff --git a/src/shared/utils/messageTemplate.ts b/src/shared/utils/messageTemplate.ts index c1375ef1..927c33a4 100644 --- a/src/shared/utils/messageTemplate.ts +++ b/src/shared/utils/messageTemplate.ts @@ -1,5 +1,6 @@ import getStore from '../Store/Store.ts'; import { LANGUAGE_CHOICE } from '../constants/buttons.ts'; +import { SERVER_MESSAGE } from '../constants/messages.ts'; const messageTemplate = (beginning: string, variable: number | string, end: string): string => { const start = beginning ? `${beginning} ` : ''; @@ -9,6 +10,9 @@ const messageTemplate = (beginning: string, variable: number | string, end: stri export const greeting = (name: string): string => messageTemplate('Hi, ', name, '!'); +export const createGreetingMessage = (): string => + `${greeting(getStore().getState().currentUser?.firstName || '')} ${SERVER_MESSAGE.SUCCESSFUL_LOGIN}`; + const maxLengthMessageRu = (maxLength: number): string => messageTemplate('Максимальная длина не должна превышать', maxLength, ' символов'); diff --git a/src/widgets/Footer/view/footerView.module.scss b/src/widgets/Footer/view/footerView.module.scss index 5b748941..40b5675b 100644 --- a/src/widgets/Footer/view/footerView.module.scss +++ b/src/widgets/Footer/view/footerView.module.scss @@ -2,9 +2,10 @@ display: flex; align-items: center; justify-content: center; - margin-top: var(--medium-offset); border-top: 10px solid var(--steam-green-800); border-radius: var(--medium-br); padding: calc(var(--small-offset) / 2) var(--small-offset); + width: 100%; + max-width: 1440px; background-color: var(--white); } diff --git a/src/widgets/Header/view/headerView.module.scss b/src/widgets/Header/view/headerView.module.scss index eba35c1f..e9e6bd5e 100644 --- a/src/widgets/Header/view/headerView.module.scss +++ b/src/widgets/Header/view/headerView.module.scss @@ -8,11 +8,11 @@ align-items: center; justify-content: space-between; grid-template-columns: repeat(3, max-content); - margin-bottom: var(--medium-offset); border-bottom: 10px solid var(--steam-green-800); border-radius: var(--medium-br); padding: calc(var(--small-offset) / 4) var(--small-offset); width: 100%; + max-width: 1440px; background-color: var(--white); } diff --git a/src/widgets/LoginForm/model/LoginFormModel.ts b/src/widgets/LoginForm/model/LoginFormModel.ts index f4d021c4..32d06110 100644 --- a/src/widgets/LoginForm/model/LoginFormModel.ts +++ b/src/widgets/LoginForm/model/LoginFormModel.ts @@ -2,42 +2,29 @@ import type InputFieldModel from '@/entities/InputField/model/InputFieldModel.ts import type { UserCredentials } from '@/shared/types/user.ts'; import getCustomerModel from '@/shared/API/customer/model/CustomerModel.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; import LoaderModel from '@/shared/Loader/model/LoaderModel.ts'; import serverMessageModel from '@/shared/ServerMessage/model/ServerMessageModel.ts'; import getStore from '@/shared/Store/Store.ts'; import { setCurrentUser } from '@/shared/Store/actions.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; import { INPUT_TYPE, PASSWORD_TEXT } from '@/shared/constants/forms.ts'; import { MESSAGE_STATUS, SERVER_MESSAGE } from '@/shared/constants/messages.ts'; import { SIZES } from '@/shared/constants/sizes.ts'; -import { isUserCredentialsData } from '@/shared/types/validation/user.ts'; -import { greeting } from '@/shared/utils/messageTemplate.ts'; +import { createGreetingMessage } from '@/shared/utils/messageTemplate.ts'; import LoginFormView from '../view/LoginFormView.ts'; class LoginFormModel { - private eventMediator = EventMediatorModel.getInstance(); - private view: LoginFormView = new LoginFormView(); constructor() { this.init(); } - private createGreetingMessage(name: string): string { - const greetingMessage = `${greeting(name)} ${SERVER_MESSAGE.SUCCESSFUL_LOGIN}`; - return greetingMessage; - } - private getFormData(): UserCredentials { const userData: UserCredentials = { email: this.view.getEmailField().getView().getValue(), password: this.view.getPasswordField().getView().getValue(), }; - - this.view.getInputFields().forEach((inputField) => inputField.getView().getInput().clear()); - this.view.getSubmitFormButton().setDisabled(); return userData; } @@ -45,12 +32,12 @@ class LoginFormModel { this.view.getInputFields().forEach((inputField) => this.setInputFieldHandlers(inputField)); this.setPreventDefaultToForm(); this.setSubmitFormHandler(); - this.subscribeToEventMediator(); this.setSwitchPasswordVisibilityHandler(); return true; } private loginUser(userLoginData: UserCredentials): void { + this.view.getSubmitFormButton().setDisabled(); const loader = new LoaderModel(SIZES.MEDIUM).getHTML(); this.view.getSubmitFormButton().getHTML().append(loader); getCustomerModel() @@ -74,9 +61,9 @@ class LoginFormModel { getCustomerModel() .authCustomer(userLoginData) .then((data) => { - getStore().dispatch(setCurrentUser(data)); if (data) { - serverMessageModel.showServerMessage(this.createGreetingMessage(data.firstName), MESSAGE_STATUS.SUCCESS); + getStore().dispatch(setCurrentUser(data)); + serverMessageModel.showServerMessage(createGreetingMessage(), MESSAGE_STATUS.SUCCESS); } }) .catch(() => { @@ -113,15 +100,6 @@ class LoginFormModel { return true; } - private subscribeToEventMediator(): boolean { - this.eventMediator.subscribe(MEDIATOR_EVENT.USER_LOGIN, (userLoginData) => { - if (isUserCredentialsData(userLoginData)) { - this.loginUser(userLoginData); - } - }); - return true; - } - private switchSubmitFormButtonAccess(): boolean { if (this.view.getInputFields().every((inputField) => inputField.getIsValid())) { this.view.getSubmitFormButton().setEnabled(); diff --git a/src/widgets/RegistrationForm/model/RegistrationFormModel.ts b/src/widgets/RegistrationForm/model/RegistrationFormModel.ts index 94d3b44e..c22b0334 100644 --- a/src/widgets/RegistrationForm/model/RegistrationFormModel.ts +++ b/src/widgets/RegistrationForm/model/RegistrationFormModel.ts @@ -4,17 +4,16 @@ import type { Address, PersonalData, User, UserCredentials } from '@/shared/type import AddressModel from '@/entities/Address/model/AddressModel.ts'; import getCustomerModel, { CustomerModel } from '@/shared/API/customer/model/CustomerModel.ts'; -import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; import LoaderModel from '@/shared/Loader/model/LoaderModel.ts'; import serverMessageModel from '@/shared/ServerMessage/model/ServerMessageModel.ts'; import getStore from '@/shared/Store/Store.ts'; -import { setBillingCountry, setCurrentUser } from '@/shared/Store/actions.ts'; -import MEDIATOR_EVENT from '@/shared/constants/events.ts'; +import { setBillingCountry, setCurrentUser, switchIsUserLoggedIn } from '@/shared/Store/actions.ts'; import { INPUT_TYPE, PASSWORD_TEXT } from '@/shared/constants/forms.ts'; import { MESSAGE_STATUS, SERVER_MESSAGE } from '@/shared/constants/messages.ts'; import { SIZES } from '@/shared/constants/sizes.ts'; import { ADDRESS_TYPE } from '@/shared/types/address.ts'; import formattedText from '@/shared/utils/formattedText.ts'; +import { createGreetingMessage } from '@/shared/utils/messageTemplate.ts'; import RegistrationFormView from '../view/RegistrationFormView.ts'; @@ -29,8 +28,6 @@ class RegisterFormModel { }), }; - private eventMediator = EventMediatorModel.getInstance(); - private inputFields: InputFieldModel[] = []; private view: RegistrationFormView = new RegistrationFormView(); @@ -128,6 +125,23 @@ class RegisterFormModel { return true; } + private loginUser(userLoginData: UserCredentials): void { + const loader = new LoaderModel(SIZES.MEDIUM).getHTML(); + this.view.getSubmitFormButton().getHTML().append(loader); + getCustomerModel() + .authCustomer(userLoginData) + .then((data) => { + if (data) { + getStore().dispatch(switchIsUserLoggedIn(true)); + serverMessageModel.showServerMessage(createGreetingMessage(), MESSAGE_STATUS.SUCCESS); + } + }) + .catch(() => { + serverMessageModel.showServerMessage(SERVER_MESSAGE.INCORRECT_PASSWORD, MESSAGE_STATUS.ERROR); + }) + .finally(() => loader.remove()); + } + private registerUser(): void { const loader = new LoaderModel(SIZES.MEDIUM).getHTML(); this.view.getSubmitFormButton().getHTML().append(loader); @@ -145,31 +159,6 @@ class RegisterFormModel { .finally(() => loader.remove()); } - private resetInputFieldsValidation(): void { - const checkboxSingleAddress = this.addressWrappers[ADDRESS_TYPE.SHIPPING] - .getView() - .getAddressAsBillingCheckBox() - ?.getHTML(); - const checkboxDefaultShippingAddress = this.addressWrappers[ADDRESS_TYPE.SHIPPING] - .getView() - .getAddressByDefaultCheckBox() - ?.getHTML(); - const checkboxDefaultBillingAddress = this.addressWrappers[ADDRESS_TYPE.BILLING] - .getView() - .getAddressByDefaultCheckBox() - ?.getHTML(); - if (checkboxSingleAddress) { - checkboxSingleAddress.checked = false; - } - if (checkboxDefaultShippingAddress) { - checkboxDefaultShippingAddress.checked = false; - } - if (checkboxDefaultBillingAddress) { - checkboxDefaultBillingAddress.checked = false; - } - this.addressWrappers[ADDRESS_TYPE.BILLING].getView().switchVisibilityAddressWrapper(false); - } - private setInputFieldHandlers(inputField: InputFieldModel): boolean { const inputHTML = inputField.getView().getInput().getHTML(); inputHTML.addEventListener('input', () => { @@ -222,6 +211,7 @@ class RegisterFormModel { (inputField) => inputField.getView().getInput().getHTML().placeholder === inputElement.getInput().getHTML().placeholder, ); + if (billingInput) { billingInput.getView().getInput().getHTML().value = inputElement.getInput().getHTML().value; } @@ -235,10 +225,11 @@ class RegisterFormModel { } private successfulUserRegistration(newUserData: User): void { - this.eventMediator.notify(MEDIATOR_EVENT.USER_LOGIN, this.getCredentialsData()); - this.updateUserData(newUserData).catch(() => { - serverMessageModel.showServerMessage(SERVER_MESSAGE.BAD_REQUEST, MESSAGE_STATUS.ERROR); - }); + this.updateUserData(newUserData) + .then(() => this.loginUser(this.getCredentialsData())) + .catch(() => { + serverMessageModel.showServerMessage(SERVER_MESSAGE.BAD_REQUEST, MESSAGE_STATUS.ERROR); + }); } private switchSubmitFormButtonAccess(): boolean { @@ -280,7 +271,7 @@ class RegisterFormModel { if (!currentUserData) { return null; } - const shippingAddressID = currentUserData.addresses[currentUserData.addresses.length - 1].id; + const shippingAddressID = currentUserData.addresses.at(-1)?.id ?? ''; if (checkboxDefaultShippingAddress?.checked) { currentUserData = await this.editDefaultShippingAddress(shippingAddressID, currentUserData); @@ -295,7 +286,7 @@ class RegisterFormModel { if (!currentUserData) { return null; } - const billingAddressID = currentUserData.addresses[currentUserData.addresses.length - 1].id; + const billingAddressID = currentUserData.addresses.at(-1)?.id ?? ''; if (checkboxDefaultBillingAddress?.checked) { currentUserData = await this.editDefaultBillingAddress(billingAddressID, currentUserData); @@ -312,8 +303,6 @@ class RegisterFormModel { currentUserData = await this.updateUserAddresses(currentUserData); getStore().dispatch(setCurrentUser(currentUserData)); - this.inputFields.forEach((inputField) => inputField.getView().getInput().clear()); - this.resetInputFieldsValidation(); return currentUserData; }