Project is Ready!!!

Author: zxcanton228

src/components/screens/home/card-info/card-info.component.js

@@ -3,6 +3,8 @@ import $K from '@/core/kquery/kquery.lib'
 import renderService from '@/core/services/render.service.js'
 import Store from '@/core/store/store'
 
+import { Loader } from '@/components/ui/loader/loader.component'
+
 import { formatCardNumber } from '@/utils/format/format-card-number'
 import { formatToCurrency } from '@/utils/format/format-to-currency'
 
@@ -19,14 +21,30 @@ export class CardInfo extends ChildComponent {
 	constructor() {
 		super()
 
+		this.store = Store.getInstance()
 		this.cardService = new CardService()
-		this.store = new Store.getInstance()
 
 		this.element = renderService.htmlToElement(template, [], styles)
 
 		this.#addListeners()
 	}
 
+	#addListeners() {
+		document.addEventListener(BALANCE_UPDATED, this.#onBalanceUpdated)
+	}
+
+	#removeListeners() {
+		document.removeEventListener(BALANCE_UPDATED, this.#onBalanceUpdated)
+	}
+
+	#onBalanceUpdated = () => {
+		this.fetchData()
+	}
+
+	destroy() {
+		this.#removeListeners()
+	}
+
 	#copyCardNumber(e) {
 		navigator.clipboard.writeText(e.target.innerText).then(() => {
 			e.target.innerText = 'Card number copied!'
@@ -35,24 +53,13 @@ export class CardInfo extends ChildComponent {
 			}, 2000)
 		})
 	}
+
 	#toggleCvc(cardCvcElement) {
 		const text = cardCvcElement.text()
 		text === CODE
 			? cardCvcElement.text(this.card.cvc)
 			: cardCvcElement.text(CODE)
 	}
-	#addListeners() {
-		document.addEventListener(BALANCE_UPDATED, this.#onBalanceUpdate)
-	}
-	#removeListener() {
-		document.removeEventListener(BALANCE_UPDATED, this.#onBalanceUpdate)
-	}
-	#onBalanceUpdate = () => {
-		this.fetchData()
-	}
-	destroy() {
-		this.#removeListener()
-	}
 
 	fillElements() {
 		$K(this.element).html(
@@ -83,6 +90,7 @@ export class CardInfo extends ChildComponent {
 			.find('#card-balance')
 			.text(formatToCurrency(this.card.balance))
 	}
+
 	fetchData() {
 		this.cardService.byUser(data => {
 			if (data?.id) {
@@ -94,8 +102,12 @@ export class CardInfo extends ChildComponent {
 			}
 		})
 	}
+
 	render() {
-		if (this.store.state.user) this.fetchData()
+		if (this.store.state.user) {
+			$K(this.element).html(new Loader().render().outerHTML)
+			setTimeout(() => this.fetchData(), 500)
+		}
 
 		return this.element
 	}

src/components/screens/home/contacts/contacts.component.js

@@ -55,6 +55,7 @@ export class Contacts extends ChildComponent {
 				})
 		})
 	}
+
 	render() {
 		this.element = renderService.htmlToElement(
 			template,
@@ -67,7 +68,7 @@ export class Contacts extends ChildComponent {
 				.find('#contacts-list')
 				.html(new Loader().render().outerHTML)
 
-			this.fetchData()
+			setTimeout(() => this.fetchData(), 500)
 		}
 
 		return this.element

src/components/screens/home/home.components.js

@@ -1,5 +1,9 @@
 import BaseScreen from '@/core/component/base-screen.component'
+import $K from '@/core/kquery/kquery.lib'
 import renderService from '@/core/services/render.service'
+import Store from '@/core/store/store'
+
+import { AuthRequiredMessage } from '@/components/ui/auth-required-message/auth-required-message.component'
 
 import styles from './home.module.scss'
 import template from './home.template.html'
@@ -13,15 +17,51 @@ import { Transactions } from './transactions/transactions.component'
 export class Home extends BaseScreen {
 	constructor() {
 		super({ title: 'Home' })
+
+		this.store = Store.getInstance()
+		this.store.addObserver(this)
+
+		this.components = {
+			cardInfo: null,
+			transactions: null,
+			statistics: null
+		}
+	}
+
+	createOrUpdateComponent(component, componentName) {
+		if (this.components[componentName]) {
+			this.components[componentName].destroy()
+		}
+		this.components[componentName] = new component()
+		return this.components[componentName]
+	}
+
+	update() {
+		this.user = this.store.state.user
+
+		if (!this.user) {
+			// Будьте аккуратные с outerHtml иначе он может не пробросить listener click, input и тд
+			$K(this.element).html(new AuthRequiredMessage().render().outerHTML)
+		}
 	}
 
 	render() {
-		const element = renderService.htmlToElement(
+		const componentsToRender = [
+			this.createOrUpdateComponent(CardInfo, 'cardInfo'),
+			this.createOrUpdateComponent(Transactions, 'transactions'),
+			this.createOrUpdateComponent(Statistics, 'statistics'),
+			Actions,
+			Contacts
+		]
+
+		this.element = renderService.htmlToElement(
 			template,
-			[CardInfo, Actions, Contacts, Transactions, Statistics],
+			componentsToRender,
 			styles
 		)
 
-		return element
+		this.update()
+
+		return this.element
 	}
 }

src/components/screens/home/statistics/statistics.component.js

@@ -111,7 +111,7 @@ export class Statistics extends ChildComponent {
 	render() {
 		if (this.store.user) {
 			$K(this.element).append(new Loader().render())
-			this.fetchData()
+			setTimeout(() => this.fetchData(), 500)
 		}
 
 		return this.element

src/components/screens/home/transactions/transactions.component.js

@@ -76,7 +76,7 @@ export class Transactions extends ChildComponent {
 	render() {
 		if (this.store.user) {
 			$K(this.element).append(new Loader().render())
-			this.fetchData()
+			setTimeout(() => this.fetchData(), 500)
 		}
 
 		return this.element

src/components/ui/auth-required-message/auth-required-message.component.js

@@ -0,0 +1,18 @@
+import styles from './auth-required-message.module.scss'
+
+
+
+import ChildComponent from '@/core/component/child.component.js'
+import renderService from '@/core/services/render.service.js'
+
+
+
+import template from './auth-required-message.template.html'
+
+export class AuthRequiredMessage extends ChildComponent {
+	render(){
+		this.element = renderService.htmlToElement(template, [], styles)
+
+		return this.element
+	}
+}

src/components/ui/auth-required-message/auth-required-message.module.scss

@@ -0,0 +1,11 @@
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
+
+.auth-required-message {
+	@include dashboard-section;
+
+	a {
+		font-weight: 700;
+		color: $primary;
+	}
+}

src/components/ui/auth-required-message/auth-required-message.template.html

@@ -0,0 +1,6 @@
+<div class="auth-required-message">
+	<span>
+		To view this page, please log in first -
+		<a href="/auth">go to login</a>
+	</span>
+</div>

src/core/router/router.js

@@ -64,7 +64,7 @@ export class Router {
 				children: component
 			}).render()
 
-			$K('#app').append(this.#layout)
+			$K('#app').html('').append(this.#layout)
 		} else {
 			$K('#content').html('').append(component)
 		}