Refactor verbose methods into simpler methods.

src/app/_services/transaction.service.ts

@@ -176,7 +176,7 @@ export class TransactionService {
     const hash = hashFunction.digest();
     const methodSignature = hash.toString('hex').substring(0, 8);
     const abiCoder = new utils.AbiCoder();
-    const abi = await abiCoder.encode(
+    const abi = abiCoder.encode(
       ['address', 'address', 'address', 'uint256'],
       [senderAddress, recipientAddress, tokenAddress, value]
     );

src/app/_services/user.service.ts

@@ -83,47 +83,18 @@ export class UserService {
     locationType: string,
     oldPhoneNumber: string
   ): Promise<any> {
-    const accountInfo: any = {
+    const accountInfo = await this.loadChangesToAccountStructure(
-      vcard: {
+      name,
-        fn: [{}],
+      phoneNumber,
-        n: [{}],
+      age,
-        tel: [{}],
+      type,
-      },
+      bio,
-      location: {},
+      gender,
-    };
+      businessCategory,
-    if (name) {
+      userLocation,
-      accountInfo.vcard.fn[0].value = name;
+      location,
-      accountInfo.vcard.n[0].value = name.split(' ');
+      locationType
-    }
+    );
-    if (phoneNumber) {
-      accountInfo.vcard.tel[0].value = phoneNumber;
-    }
-    if (bio) {
-      accountInfo.products = [bio];
-    }
-    if (gender) {
-      accountInfo.gender = gender;
-    }
-    if (age) {
-      accountInfo.age = age;
-    }
-    if (type) {
-      accountInfo.type = type;
-    }
-    if (businessCategory) {
-      accountInfo.category = businessCategory;
-    }
-    if (location) {
-      accountInfo.location.area = location;
-    }
-    if (userLocation) {
-      accountInfo.location.area_name = userLocation;
-    }
-    if (locationType) {
-      accountInfo.location.area_type = locationType;
-    }
-    await vcardValidation(accountInfo.vcard);
-    accountInfo.vcard = btoa(vCard.generate(accountInfo.vcard));
     const accountKey: string = await User.toKey(address);
     this.getAccountDetailsFromMeta(accountKey)
       .pipe(first())
@@ -357,4 +328,60 @@ export class UserService {
     }
     this.accountsList.next(this.accounts);
   }
+
+  async loadChangesToAccountStructure(
+    name: string,
+    phoneNumber: string,
+    age: string,
+    type: string,
+    bio: string,
+    gender: string,
+    businessCategory: string,
+    userLocation: string,
+    location: string,
+    locationType: string
+  ): Promise<AccountDetails> {
+    const accountInfo: any = {
+      vcard: {
+        fn: [{}],
+        n: [{}],
+        tel: [{}],
+      },
+      location: {},
+    };
+    if (name) {
+      accountInfo.vcard.fn[0].value = name;
+      accountInfo.vcard.n[0].value = name.split(' ');
+    }
+    if (phoneNumber) {
+      accountInfo.vcard.tel[0].value = phoneNumber;
+    }
+    if (bio) {
+      accountInfo.products = [bio];
+    }
+    if (gender) {
+      accountInfo.gender = gender;
+    }
+    if (age) {
+      accountInfo.age = age;
+    }
+    if (type) {
+      accountInfo.type = type;
+    }
+    if (businessCategory) {
+      accountInfo.category = businessCategory;
+    }
+    if (location) {
+      accountInfo.location.area = location;
+    }
+    if (userLocation) {
+      accountInfo.location.area_name = userLocation;
+    }
+    if (locationType) {
+      accountInfo.location.area_type = locationType;
+    }
+    await vcardValidation(accountInfo.vcard);
+    accountInfo.vcard = btoa(vCard.generate(accountInfo.vcard));
+    return accountInfo;
+  }
 }

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<any> {
   const userKey = await User.toKey(add0x(accountAddress));
 

src/app/app.component.ts

@@ -61,31 +61,7 @@ export class AppComponent implements OnInit {
         }
       });
     }
-    await this.router.events
+    await this.routeManagement();
-      .pipe(filter((e) => e instanceof NavigationEnd))
-      .forEach(async (routeInfo) => {
-        if (routeInfo instanceof NavigationEnd) {
-          this.url = routeInfo.url;
-          if (!this.url.match(this.accountDetailsRegex) || !this.url.includes('tx')) {
-            await this.blockSyncService.blockSync();
-          }
-          if (!this.url.includes('accounts')) {
-            try {
-              // TODO it feels like this should be in the onInit handler
-              await this.userService.loadAccounts(100);
-            } catch (error) {
-              this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
-            }
-          }
-          if (!this.url.includes('tokens')) {
-            this.tokenService.load.subscribe(async (status: boolean) => {
-              if (status) {
-                await this.tokenService.getTokens();
-              }
-            });
-          }
-        }
-      });
   }
 
   // Load resize
@@ -124,4 +100,31 @@ export class AppComponent implements OnInit {
     const conversion: any = event.detail.tx;
     await this.transactionService.setConversion(conversion, 100);
   }
+
+  async routeManagement(): Promise<void> {
+    await this.router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .forEach(async (routeInfo) => {
+        if (routeInfo instanceof NavigationEnd) {
+          this.url = routeInfo.url;
+          if (!this.url.match(this.accountDetailsRegex) || !this.url.includes('tx')) {
+            await this.blockSyncService.blockSync();
+          }
+          if (!this.url.includes('accounts')) {
+            try {
+              await this.userService.loadAccounts(100);
+            } catch (error) {
+              this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
+            }
+          }
+          if (!this.url.includes('tokens')) {
+            this.tokenService.load.subscribe(async (status: boolean) => {
+              if (status) {
+                await this.tokenService.getTokens();
+              }
+            });
+          }
+        }
+      });
+  }
 }

src/app/pages/accounts/account-details/account-details.component.ts

@@ -110,19 +110,7 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   }
 
   async ngOnInit(): Promise<void> {
-    this.accountInfoForm = this.formBuilder.group({
+    this.buildAccountsInfoForm();
-      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.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.queryLocationAndCategory(this.account);
-            this.area = this.locationService.getAreaNameByLocation(
+          this.populateAccountsInfoForm(this.account);
-              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.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.populateDataTables();
-      this.userDataSource = new MatTableDataSource<any>(accounts);
+    this.loadSearchData();
-      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<any>(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<any>(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.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<any>(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<any>(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<any>(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));
+  }
 }

src/app/pages/accounts/accounts.component.ts

@@ -54,7 +54,6 @@ export class AccountsComponent implements OnInit, AfterViewInit {
       }
     });
     try {
-      // TODO it feels like this should be in the onInit handler
       await this.userService.loadAccounts(100);
     } catch (error) {
       this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });

src/app/pages/accounts/create-account/create-account.component.ts

@@ -38,6 +38,22 @@ export class CreateAccountComponent implements OnInit {
       referrer: ['', Validators.required],
       businessCategory: ['', Validators.required],
     });
+    this.loadSearchData();
+  }
+
+  get createFormStub(): any {
+    return this.createForm.controls;
+  }
+
+  onSubmit(): void {
+    this.submitted = true;
+    if (this.createForm.invalid || !confirm('Create account?')) {
+      return;
+    }
+    this.submitted = false;
+  }
+
+  loadSearchData(): void {
     this.userService.getCategories();
     this.userService.categoriesSubject.subscribe((res) => {
       this.categories = Object.keys(res);
@@ -55,16 +71,4 @@ export class CreateAccountComponent implements OnInit {
       .pipe(first())
       .subscribe((res) => (this.genders = res));
   }
-
-  get createFormStub(): any {
-    return this.createForm.controls;
-  }
-
-  onSubmit(): void {
-    this.submitted = true;
-    if (this.createForm.invalid || !confirm('Create account?')) {
-      return;
-    }
-    this.submitted = false;
-  }
 }