From aa8d9c5c73574ba6011ee70f7ba28e612f4bb524 Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Mon, 9 Aug 2021 11:29:33 +0300 Subject: [PATCH] Break accounts details component onInit function into multiple standalone functions. --- src/app/_workers/fetch-accounts.worker.ts | 2 +- .../account-details.component.ts | 217 ++++++++++-------- 2 files changed, 119 insertions(+), 100 deletions(-) diff --git a/src/app/_workers/fetch-accounts.worker.ts b/src/app/_workers/fetch-accounts.worker.ts index 078aa80..ed11dec 100644 --- a/src/app/_workers/fetch-accounts.worker.ts +++ b/src/app/_workers/fetch-accounts.worker.ts @@ -29,7 +29,7 @@ addEventListener('message', async ({ data }) => { async function getAccountByAddress( accountAddress: string, metaUrl: string, - token: string, + token: string ): Promise { const userKey = await User.toKey(add0x(accountAddress)); diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index 8164c5c..85e44e7 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/src/app/pages/accounts/account-details/account-details.component.ts @@ -110,19 +110,7 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit { } async ngOnInit(): Promise { - this.accountInfoForm = this.formBuilder.group({ - firstName: ['', Validators.required], - lastName: ['', Validators.required], - phoneNumber: ['', Validators.required], - age: [''], - type: ['', Validators.required], - bio: ['', Validators.required], - gender: ['', Validators.required], - businessCategory: ['', Validators.required], - userLocation: ['', Validators.required], - location: ['', Validators.required], - locationType: ['', Validators.required], - }); + this.buildAccountsInfoForm(); this.transactionService.resetTransactionsList(); await this.blockSyncService.blockSync(this.accountAddress); this.userService.resetAccountsList(); @@ -131,35 +119,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit { if (res !== undefined) { this.account = res; this.cdr.detectChanges(); - this.locationService.areaNamesSubject.subscribe((response) => { - this.area = this.locationService.getAreaNameByLocation( - this.account.location.area_name, - response - ); - this.cdr.detectChanges(); - this.locationService.areaTypesSubject.subscribe((result) => { - this.areaType = this.locationService.getAreaTypeByArea(this.area, result); - this.cdr.detectChanges(); - }); - }); - this.userService.categoriesSubject.subscribe((result) => { - this.category = this.userService.getCategoryByProduct(this.account.products[0], result); - this.cdr.detectChanges(); - }); - const fullName = this.account.vcard?.fn[0].value.split(' '); - this.accountInfoForm.patchValue({ - firstName: fullName[0].split(',')[0], - lastName: fullName.slice(1).join(' '), - phoneNumber: this.account.vcard?.tel[0].value, - age: this.account.age, - type: this.account.type, - bio: this.account.products, - gender: this.account.gender, - businessCategory: this.account.category || this.category || 'other', - userLocation: this.account.location.area_name, - location: this.account.location.area || this.area || 'other', - locationType: this.account.location.area_type || this.areaType || 'other', - }); + this.queryLocationAndCategory(this.account); + this.populateAccountsInfoForm(this.account); this.userService .getAccountStatus(this.account.vcard?.tel[0].value) .pipe(first()) @@ -169,63 +130,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit { } } ); - this.userService.accountsSubject.subscribe((accounts) => { - this.userDataSource = new MatTableDataSource(accounts); - this.userDataSource.paginator = this.userTablePaginator; - this.userDataSource.sort = this.userTableSort; - this.accounts = accounts; - if (accounts.length > 0) { - this.accountsLoading = false; - } - this.cdr.detectChanges(); - }); - - this.transactionService.transactionsSubject.subscribe((transactions) => { - this.transactionsDataSource = new MatTableDataSource(transactions); - this.transactionsDataSource.paginator = this.transactionTablePaginator; - this.transactionsDataSource.sort = this.transactionTableSort; - this.transactions = transactions; - if (transactions.length > 0) { - this.transactionsLoading = false; - } - this.cdr.detectChanges(); - }); - - this.userService.historySubject.subscribe(async (histories) => { - this.historyDataSource = new MatTableDataSource(histories); - this.historyDataSource.paginator = this.historyTablePaginator; - this.historyDataSource.sort = this.historyTableSort; - this.histories = histories; - if (histories.length > 0) { - this.historyLoading = false; - } - this.cdr.detectChanges(); - }); - - this.userService.getCategories(); - this.userService.categoriesSubject.subscribe((res) => { - this.categories = Object.keys(res); - }); - this.locationService.getAreaNames(); - this.locationService.areaNamesSubject.subscribe((res) => { - this.areaNames = Object.keys(res); - }); - this.locationService.getAreaTypes(); - this.locationService.areaTypesSubject.subscribe((res) => { - this.areaTypes = Object.keys(res); - }); - this.userService - .getAccountTypes() - .pipe(first()) - .subscribe((res) => (this.accountTypes = res)); - this.userService - .getTransactionTypes() - .pipe(first()) - .subscribe((res) => (this.transactionsTypes = res)); - this.userService - .getGenders() - .pipe(first()) - .subscribe((res) => (this.genders = res)); + this.populateDataTables(); + this.loadSearchData(); this.tokenService.load.subscribe(async (status: boolean) => { if (status) { this.tokenSymbol = await this.tokenService.getTokenSymbol(); @@ -355,4 +261,117 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit { } return str; } + + buildAccountsInfoForm(): void { + this.accountInfoForm = this.formBuilder.group({ + firstName: ['', Validators.required], + lastName: ['', Validators.required], + phoneNumber: ['', Validators.required], + age: [''], + type: ['', Validators.required], + bio: ['', Validators.required], + gender: ['', Validators.required], + businessCategory: ['', Validators.required], + userLocation: ['', Validators.required], + location: ['', Validators.required], + locationType: ['', Validators.required], + }); + } + + populateAccountsInfoForm(accountInfo: AccountDetails): void { + const fullName = accountInfo.vcard?.fn[0].value.split(' '); + this.accountInfoForm.patchValue({ + firstName: fullName[0].split(',')[0], + lastName: fullName.slice(1).join(' '), + phoneNumber: accountInfo.vcard?.tel[0].value, + age: accountInfo.age, + type: accountInfo.type, + bio: accountInfo.products, + gender: accountInfo.gender, + businessCategory: accountInfo.category || this.category || 'other', + userLocation: accountInfo.location.area_name, + location: accountInfo.location.area || this.area || 'other', + locationType: accountInfo.location.area_type || this.areaType || 'other', + }); + } + + populateDataTables(): void { + this.userService.accountsSubject.subscribe((accounts) => { + this.userDataSource = new MatTableDataSource(accounts); + this.userDataSource.paginator = this.userTablePaginator; + this.userDataSource.sort = this.userTableSort; + this.accounts = accounts; + if (accounts.length > 0) { + this.accountsLoading = false; + } + this.cdr.detectChanges(); + }); + + this.transactionService.transactionsSubject.subscribe((transactions) => { + this.transactionsDataSource = new MatTableDataSource(transactions); + this.transactionsDataSource.paginator = this.transactionTablePaginator; + this.transactionsDataSource.sort = this.transactionTableSort; + this.transactions = transactions; + if (transactions.length > 0) { + this.transactionsLoading = false; + } + this.cdr.detectChanges(); + }); + + this.userService.historySubject.subscribe(async (histories) => { + this.historyDataSource = new MatTableDataSource(histories); + this.historyDataSource.paginator = this.historyTablePaginator; + this.historyDataSource.sort = this.historyTableSort; + this.histories = histories; + if (histories.length > 0) { + this.historyLoading = false; + } + this.cdr.detectChanges(); + }); + } + + queryLocationAndCategory(accountInfo: AccountDetails): void { + this.locationService.areaNamesSubject.subscribe((response) => { + this.area = this.locationService.getAreaNameByLocation( + accountInfo.location.area_name, + response + ); + this.cdr.detectChanges(); + this.locationService.areaTypesSubject.subscribe((result) => { + this.areaType = this.locationService.getAreaTypeByArea(this.area, result); + this.cdr.detectChanges(); + }); + }); + this.userService.categoriesSubject.subscribe((result) => { + this.category = this.userService.getCategoryByProduct(accountInfo.products[0], result); + this.cdr.detectChanges(); + }); + } + + loadSearchData(): void { + this.userService.getCategories(); + this.userService.categoriesSubject.subscribe((res) => { + this.categories = Object.keys(res); + }); + this.locationService.getAreaNames(); + this.locationService.areaNamesSubject.subscribe((res) => { + this.areaNames = Object.keys(res); + }); + this.locationService.getAreaTypes(); + this.locationService.areaTypesSubject.subscribe((res) => { + this.areaTypes = Object.keys(res); + }); + this.userService + .getAccountTypes() + .pipe(first()) + .subscribe((res) => (this.accountTypes = res)); + this.userService + .getTransactionTypes() + .pipe(first()) + .subscribe((res) => (this.transactionsTypes = res)); + this.userService + .getGenders() + .pipe(first()) + .subscribe((res) => (this.genders = res)); + } }