Refactor mappings to handle object type.

src/app/_models/mappings.ts

@@ -12,29 +12,5 @@ interface Action {
   user: string;
 }
 
-/** Area name object interface */
-interface AreaName {
-  /** Locations that map to that area name. */
-  locations: Array<string>;
-  /** Name of area */
-  name: string;
-}
-
-/** Area type object interface */
-interface AreaType {
-  /** Areas that map to that area type. */
-  area: Array<string>;
-  /** Type of area */
-  name: string;
-}
-
-/** Category object interface */
-interface Category {
-  /** Business category */
-  name: string;
-  /** Products that map to that category. */
-  products: Array<string>;
-}
-
 /** @exports */
-export { Action, AreaName, AreaType, Category };
+export { Action };

src/app/_services/location.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { environment } from '@src/environments/environment';
 import { first } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
@@ -8,21 +8,51 @@ import { HttpClient } from '@angular/common/http';
   providedIn: 'root',
 })
 export class LocationService {
+  areaNames: object = {};
+  private areaNamesList: BehaviorSubject<object> = new BehaviorSubject<object>(this.areaNames);
+  areaNamesSubject: Observable<object> = this.areaNamesList.asObservable();
+
+  areaTypes: object = {};
+  private areaTypesList: BehaviorSubject<object> = new BehaviorSubject<object>(this.areaTypes);
+  areaTypesSubject: Observable<object> = this.areaTypesList.asObservable();
+
   constructor(private httpClient: HttpClient) {}
 
-  getAreaNames(): Observable<any> {
+  getAreaNames(): void {
-    return this.httpClient.get(`${environment.cicMetaUrl}/areanames`);
+    this.httpClient
+      .get(`${environment.cicMetaUrl}/areanames`)
+      .pipe(first())
+      .subscribe((res: object) => this.areaNamesList.next(res));
   }
 
-  getAreaNameByLocation(location: string): Observable<any> {
+  getAreaNameByLocation(location: string, areaNames: object): string {
-    return this.httpClient.get(`${environment.cicMetaUrl}/areanames/${location.toLowerCase()}`);
+    const keywords = location.toLowerCase().split(' ');
+    for (const keyword of keywords) {
+      const queriedAreaName: string = Object.keys(areaNames).find((key) =>
+        areaNames[key].includes(keyword)
+      );
+      if (queriedAreaName) {
+        return queriedAreaName;
+      }
+    }
   }
 
-  getAreaTypes(): Observable<any> {
+  getAreaTypes(): void {
-    return this.httpClient.get(`${environment.cicMetaUrl}/areatypes`).pipe(first());
+    this.httpClient
+      .get(`${environment.cicMetaUrl}/areatypes`)
+      .pipe(first())
+      .subscribe((res: object) => this.areaTypesList.next(res));
   }
 
-  getAreaTypeByArea(area: string): Observable<any> {
+  getAreaTypeByArea(area: string, areaTypes: object): string {
-    return this.httpClient.get(`${environment.cicMetaUrl}/areatypes/${area.toLowerCase()}`);
+    const keywords = area.toLowerCase().split(' ');
+    for (const keyword of keywords) {
+      const queriedAreaType: string = Object.keys(areaTypes).find((key) =>
+        areaTypes[key].includes(keyword)
+      );
+      if (queriedAreaType) {
+        return queriedAreaType;
+      }
+    }
   }
 }

src/app/_services/token.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { CICRegistry } from '@cicnet/cic-client';
 import { TokenRegistry } from '@app/_eth';
-import { HttpClient } from '@angular/common/http';
 import { RegistryService } from '@app/_services/registry.service';
 import { Token } from '@app/_models';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
@@ -19,7 +18,7 @@ export class TokenService {
   tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
   load: BehaviorSubject<any> = new BehaviorSubject<any>(false);
 
-  constructor(private httpClient: HttpClient) {}
+  constructor() {}
 
   async init(): Promise<void> {
     this.registry = await RegistryService.getRegistry();

src/app/_services/user.service.ts

@@ -36,6 +36,10 @@ export class UserService {
   private actionsList: BehaviorSubject<any> = new BehaviorSubject<any>(this.actions);
   actionsSubject: Observable<Array<any>> = this.actionsList.asObservable();
 
+  categories: object = {};
+  private categoriesList: BehaviorSubject<object> = new BehaviorSubject<object>(this.categories);
+  categoriesSubject: Observable<object> = this.categoriesList.asObservable();
+
   constructor(
     private httpClient: HttpClient,
     private loggingService: LoggingService,
@@ -244,12 +248,23 @@ export class UserService {
     return;
   }
 
-  getCategories(): Observable<any> {
+  getCategories(): void {
-    return this.httpClient.get(`${environment.cicMetaUrl}/categories`);
+    this.httpClient
+      .get(`${environment.cicMetaUrl}/categories`)
+      .pipe(first())
+      .subscribe((res: object) => this.categoriesList.next(res));
   }
 
-  getCategoryByProduct(product: string): Observable<any> {
+  getCategoryByProduct(product: string, categories: object): string {
-    return this.httpClient.get(`${environment.cicMetaUrl}/categories/${product.toLowerCase()}`);
+    const keywords = product.toLowerCase().split(' ');
+    for (const keyword of keywords) {
+      const queriedCategory: string = Object.keys(categories).find((key) =>
+        categories[key].includes(keyword)
+      );
+      if (queriedCategory) {
+        return queriedCategory;
+      }
+    }
   }
 
   getAccountTypes(): Observable<any> {

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

@@ -113,24 +113,6 @@
                 </mat-form-field>
               </div>
 
-              <div class="col-md-6 col-lg-4">
-                <mat-form-field appearance="outline">
-                  <mat-label>Age: </mat-label>
-                  <input
-                    matInput
-                    type="text"
-                    id="age"
-                    placeholder="{{ account?.age }}"
-                    value="{{ account?.age }}"
-                    formControlName="age"
-                    [errorStateMatcher]="matcher"
-                  />
-                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors"
-                    >Age is required.</mat-error
-                  >
-                </mat-form-field>
-              </div>
-
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> ACCOUNT TYPE: </mat-label>
@@ -150,24 +132,6 @@
                 </mat-form-field>
               </div>
 
-              <div class="col-md-6 col-lg-4">
-                <mat-form-field appearance="outline">
-                  <mat-label>Bio: </mat-label>
-                  <input
-                    matInput
-                    type="text"
-                    id="bio"
-                    placeholder="{{ account?.products }}"
-                    value="{{ account?.products }}"
-                    formControlName="bio"
-                    [errorStateMatcher]="matcher"
-                  />
-                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors"
-                    >Bio is required.</mat-error
-                  >
-                </mat-form-field>
-              </div>
-
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> GENDER: </mat-label>
@@ -187,6 +151,42 @@
                 </mat-form-field>
               </div>
 
+              <div class="col-md-6 col-lg-4">
+                <mat-form-field appearance="outline">
+                  <mat-label>Age: </mat-label>
+                  <input
+                    matInput
+                    type="text"
+                    id="age"
+                    placeholder="{{ account?.age }}"
+                    value="{{ account?.age }}"
+                    formControlName="age"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors"
+                    >Age is required.</mat-error
+                  >
+                </mat-form-field>
+              </div>
+
+              <div class="col-md-6 col-lg-4">
+                <mat-form-field appearance="outline">
+                  <mat-label>Bio: </mat-label>
+                  <input
+                    matInput
+                    type="text"
+                    id="bio"
+                    placeholder="{{ account?.products }}"
+                    value="{{ account?.products }}"
+                    formControlName="bio"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors"
+                    >Bio is required.</mat-error
+                  >
+                </mat-form-field>
+              </div>
+
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
                   <mat-label> BUSINESS CATEGORY: </mat-label>

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

@@ -23,7 +23,7 @@ import { copyToClipboard, CustomErrorStateMatcher, exportCsv } from '@app/_helpe
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { add0x, strip0x } from '@src/assets/js/ethtx/dist/hex';
 import { environment } from '@src/environments/environment';
-import { AccountDetails, AreaName, AreaType, Category, Transaction } from '@app/_models';
+import { AccountDetails, Transaction } from '@app/_models';
 
 @Component({
   selector: 'app-account-details',
@@ -52,9 +52,9 @@ export class AccountDetailsComponent implements OnInit {
   accountStatus: any;
   accounts: Array<AccountDetails> = [];
   accountsType: string = 'all';
-  categories: Array<Category>;
+  categories: Array<string>;
-  areaNames: Array<AreaName>;
+  areaNames: Array<string>;
-  areaTypes: Array<AreaType>;
+  areaTypes: Array<string>;
   transaction: any;
   transactions: Array<Transaction>;
   transactionsType: string = 'all';
@@ -115,27 +115,21 @@ export class AccountDetailsComponent implements OnInit {
           this.account = res;
           this.cdr.detectChanges();
           this.loggingService.sendInfoLevelMessage(this.account);
-          this.locationService
+          this.locationService.areaNamesSubject.subscribe((response) => {
-            .getAreaNameByLocation(this.account.location.area_name)
+            this.area = this.locationService.getAreaNameByLocation(
-            .pipe(first())
+              this.account.location.area_name,
-            .subscribe((response) => {
+              response
-              this.area = response;
+            );
-              this.cdr.detectChanges();
+            this.cdr.detectChanges();
-              this.locationService
+            this.locationService.areaTypesSubject.subscribe((result) => {
-                .getAreaTypeByArea(this.area)
+              this.areaType = this.locationService.getAreaTypeByArea(this.area, result);
-                .pipe(first())
-                .subscribe((result) => {
-                  this.areaType = result;
-                  this.cdr.detectChanges();
-                });
-            });
-          this.userService
-            .getCategoryByProduct(this.account.products[0])
-            .pipe(first())
-            .subscribe((response) => {
-              this.category = response;
               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],
@@ -174,18 +168,18 @@ export class AccountDetailsComponent implements OnInit {
       this.transactions = transactions;
       this.cdr.detectChanges();
     });
-    this.userService
+    this.userService.getCategories();
-      .getCategories()
+    this.userService.categoriesSubject.subscribe((res) => {
-      .pipe(first())
+      this.categories = Object.keys(res);
-      .subscribe((res) => (this.categories = res));
+    });
-    this.locationService
+    this.locationService.getAreaNames();
-      .getAreaNames()
+    this.locationService.areaNamesSubject.subscribe((res) => {
-      .pipe(first())
+      this.areaNames = Object.keys(res);
-      .subscribe((res) => (this.areaNames = res));
+    });
-    this.locationService
+    this.locationService.getAreaTypes();
-      .getAreaTypes()
+    this.locationService.areaTypesSubject.subscribe((res) => {
-      .pipe(first())
+      this.areaTypes = Object.keys(res);
-      .subscribe((res) => (this.areaTypes = res));
+    });
     this.userService
       .getAccountTypes()
       .pipe(first())

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

@@ -3,7 +3,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { LocationService, UserService } from '@app/_services';
 import { CustomErrorStateMatcher } from '@app/_helpers';
 import { first } from 'rxjs/operators';
-import { AreaName, Category } from '@app/_models';
 
 @Component({
   selector: 'app-create-account',
@@ -15,8 +14,8 @@ export class CreateAccountComponent implements OnInit {
   createForm: FormGroup;
   matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
   submitted: boolean = false;
-  categories: Array<Category>;
+  categories: Array<string>;
-  areaNames: Array<AreaName>;
+  areaNames: Array<string>;
   accountTypes: Array<string>;
   genders: Array<string>;
 
@@ -40,14 +39,14 @@ export class CreateAccountComponent implements OnInit {
       referrer: ['', Validators.required],
       businessCategory: ['', Validators.required],
     });
-    this.userService
+    this.userService.getCategories();
-      .getCategories()
+    this.userService.categoriesSubject.subscribe((res) => {
-      .pipe(first())
+      this.categories = Object.keys(res);
-      .subscribe((res) => (this.categories = res));
+    });
-    this.locationService
+    this.locationService.getAreaNames();
-      .getAreaNames()
+    this.locationService.areaNamesSubject.subscribe((res) => {
-      .pipe(first())
+      this.areaNames = Object.keys(res);
-      .subscribe((res) => (this.areaNames = res));
+    });
     this.userService
       .getAccountTypes()
       .pipe(first())