Refactor mappings to handle object type.

src/app/_helpers/mock-backend.ts

@@ -14,7 +14,7 @@ import { Observable, of, throwError } from 'rxjs';
 import { delay, dematerialize, materialize, mergeMap } from 'rxjs/operators';
 
 // Application imports
-import { Action, AreaName, AreaType, Category, Token } from '@app/_models';
+import { Action } from '@app/_models';
 
 /** A mock of the curated account types. */
 const accountTypes: Array<string> = ['user', 'cashier', 'vendor', 'tokenagent', 'group'];
@@ -30,10 +30,8 @@ const actions: Array<Action> = [
 ];
 
 /** A mock of curated area names. */
-const areaNames: Array<AreaName> = [
+const areaNames: object = {
-  {
+  'Mukuru Nairobi': [
-    name: 'Mukuru Nairobi',
-    locations: [
     'kayaba',
     'kayba',
     'kambi',
@@ -57,10 +55,7 @@ const areaNames: Array<AreaName> = [
     'owino road',
     'seigei',
   ],
-  },
+  'Kinango Kwale': [
-  {
-    name: 'Kinango Kwale',
-    locations: [
     'amani',
     'bofu',
     'chibuga',
@@ -152,10 +147,7 @@ const areaNames: Array<AreaName> = [
     'kokotoni',
     'mikindani',
   ],
-  },
+  'Misc Nairobi': [
-  {
-    name: 'Misc Nairobi',
-    locations: [
     'nairobi',
     'west',
     'lindi',
@@ -222,10 +214,33 @@ const areaNames: Array<AreaName> = [
     'mwiki',
     'toi market',
   ],
-  },
+  'Kisauni Mombasa': [
-  {
+    'bamburi',
-    name: 'Misc Mombasa',
+    'mnyuchi',
-    locations: [
+    'kisauni',
+    'kasauni',
+    'mworoni',
+    'nyali',
+    'falcon',
+    'shanzu',
+    'bombolulu',
+    'kandongo',
+    'kadongo',
+    'mshomoro',
+    'mtopanga',
+    'mjambere',
+    'majaoni',
+    'manyani',
+    'magogoni',
+    'magongoni',
+    'junda',
+    'mwakirunge',
+    'mshomoroni',
+    'mjinga',
+    'mlaleo',
+    'utange',
+  ],
+  'Misc Mombasa': [
     'mombasa',
     'likoni',
     'bangla',
@@ -245,29 +260,7 @@ const areaNames: Array<AreaName> = [
     'tudor',
     'diani',
   ],
-  },
+  Kilifi: [
-  {
-    name: 'Kisauni',
-    locations: [
-      'bamburi',
-      'kisauni',
-      'mworoni',
-      'nyali',
-      'shanzu',
-      'bombolulu',
-      'mtopanga',
-      'mjambere',
-      'majaoni',
-      'manyani',
-      'magogoni',
-      'junda',
-      'mwakirunge',
-      'mshomoroni',
-    ],
-  },
-  {
-    name: 'Kilifi',
-    locations: [
     'kilfi',
     'kilifi',
     'mtwapa',
@@ -281,18 +274,9 @@ const areaNames: Array<AreaName> = [
     'raibai',
     'ribe',
   ],
-  },
+  Kakuma: ['kakuma'],
-  {
+  Kitui: ['kitui', 'mwingi'],
-    name: 'Kakuma',
+  Nyanza: [
-    locations: ['kakuma'],
-  },
-  {
-    name: 'Kitui',
-    locations: ['kitui', 'mwingi'],
-  },
-  {
-    name: 'Nyanza',
-    locations: [
     'busia',
     'nyalgunga',
     'mbita',
@@ -308,10 +292,7 @@ const areaNames: Array<AreaName> = [
     'migori',
     'kusumu',
   ],
-  },
+  'Misc Rural Counties': [
-  {
-    name: 'Misc Rural Counties',
-    locations: [
     'makueni',
     'meru',
     'kisii',
@@ -330,42 +311,20 @@ const areaNames: Array<AreaName> = [
     'nakuru',
     'narok',
   ],
-  },
+  other: ['other', 'none', 'unknown'],
-  {
+};
-    name: 'other',
-    locations: ['other', 'none', 'unknown'],
-  },
-];
 
-/** A mock of curated area types. */
+const areaTypes: object = {
-const areaTypes: Array<AreaType> = [
+  urban: ['urban', 'nairobi', 'mombasa', 'kisauni'],
-  {
+  rural: ['rural', 'kakuma', 'kwale', 'kinango', 'kitui', 'nyanza'],
-    name: 'urban',
+  periurban: ['kilifi', 'periurban'],
-    area: ['urban', 'nairobi', 'mombasa'],
+  other: ['other'],
-  },
+};
-  {
-    name: 'rural',
-    area: ['rural', 'kakuma', 'kwale', 'kinango', 'kitui', 'nyanza'],
-  },
-  {
-    name: 'periurban',
-    area: ['kilifi', 'periurban'],
-  },
-  {
-    name: 'other',
-    area: ['other'],
-  },
-];
 
 /** A mock of the user's business categories */
-const categories: Array<Category> = [
+const categories: object = {
-  {
+  system: ['system', 'office main', 'office main phone'],
-    name: 'system',
+  education: [
-    products: ['system', 'office main', 'office main phone'],
-  },
-  {
-    name: 'education',
-    products: [
     'book',
     'coach',
     'teacher',
@@ -403,7 +362,6 @@ const categories: Array<Category> = [
     'demo',
     'expert',
     'tution',
-      'tuition',
     'children',
     'headmaster',
     'educator',
@@ -422,10 +380,7 @@ const categories: Array<Category> = [
     'vitabu',
     'kitabu',
   ],
-  },
+  faith: [
-  {
-    name: 'faith',
-    products: [
     'pastor',
     'imam',
     'madrasa',
@@ -440,10 +395,7 @@ const categories: Array<Category> = [
     'mksiti',
     'donor',
   ],
-  },
+  government: [
-  {
-    name: 'government',
-    products: [
     'elder',
     'chief',
     'police',
@@ -457,12 +409,8 @@ const categories: Array<Category> = [
     'kra',
     'mailman',
     'immagration',
-      'immigration',
   ],
-  },
+  environment: [
-  {
-    name: 'environment',
-    products: [
     'conservation',
     'toilet',
     'choo',
@@ -486,10 +434,7 @@ const categories: Array<Category> = [
     'seedlings',
     'recycling',
   ],
-  },
+  farming: [
-  {
-    name: 'farming',
-    products: [
     'farm',
     'farmer',
     'farming',
@@ -500,10 +445,7 @@ const categories: Array<Category> = [
     'jembe',
     'shamba',
   ],
-  },
+  labour: [
-  {
-    name: 'labour',
-    products: [
     'artist',
     'agent',
     'guard',
@@ -635,10 +577,7 @@ const categories: Array<Category> = [
     'law firm',
     'brewer',
   ],
-  },
+  food: [
-  {
-    name: 'food',
-    products: [
     'avocado',
     'bhajia',
     'bajia',
@@ -797,14 +736,8 @@ const categories: Array<Category> = [
     'barafu',
     'juice',
   ],
-  },
+  water: ['maji', 'water'],
-  {
+  health: [
-    name: 'water',
-    products: ['maji', 'water'],
-  },
-  {
-    name: 'health',
-    products: [
     'agrovet',
     'dispensary',
     'barakoa',
@@ -835,14 +768,8 @@ const categories: Array<Category> = [
     'emergency response',
     'emergency',
   ],
-  },
+  savings: ['chama', 'group', 'savings', 'loan', 'silc', 'vsla', 'credit', 'finance'],
-  {
+  shop: [
-    name: 'savings',
-    products: ['chama', 'group', 'savings', 'loan', 'silc', 'vsla', 'credit', 'finance'],
-  },
-  {
-    name: 'shop',
-    products: [
     'bag',
     'bead',
     'belt',
@@ -914,10 +841,7 @@ const categories: Array<Category> = [
     'm-pesa',
     'vyombo',
   ],
-  },
+  transport: [
-  {
-    name: 'transport',
-    products: [
     'kebeba',
     'beba',
     'bebabeba',
@@ -952,10 +876,7 @@ const categories: Array<Category> = [
     'makanga',
     'car',
   ],
-  },
+  'fuel/energy': [
-  {
-    name: 'fuel/energy',
-    products: [
     'timber',
     'timberyard',
     'biogas',
@@ -984,94 +905,12 @@ const categories: Array<Category> = [
     'kerosene',
     'diesel',
   ],
-  },
+  other: ['other', 'none', 'unknown', 'none'],
-  {
+};
-    name: 'other',
-    products: ['other', 'none', 'unknown', 'none'],
-  },
-];
 
 /** A mock of curated genders */
 const genders: Array<string> = ['male', 'female', 'other'];
 
-/** A mock of the tokens in the system. */
-const tokens: Array<Token> = [
-  {
-    name: 'Giftable Reserve',
-    symbol: 'GRZ',
-    address: '0xa686005CE37Dce7738436256982C3903f2E4ea8E',
-    supply: '1000000001000000000000000000',
-    decimals: '18',
-    reserves: {},
-  },
-  {
-    name: 'Demo Token',
-    symbol: 'DEMO',
-    address: '0xc80D6aFF8194114c52AEcD84c9f15fd5c8abb187',
-    supply: '99999999999999998976',
-    decimals: '18',
-    reserves: {
-      '0xa686005CE37Dce7738436256982C3903f2E4ea8E': {
-        weight: '1000000',
-        balance: '99999999999999998976',
-      },
-    },
-    reserveRatio: '1000000',
-    owner: '0x3Da99AAD2D9CA01D131eFc3B17444b832B31Ff4a',
-  },
-  {
-    name: 'Foo Token',
-    symbol: 'FOO',
-    address: '0x9ceD86089f7aBB5A97B40eb0E7521e7aa308d354',
-    supply: '1000000000000000001014',
-    decimals: '18',
-    reserves: {
-      '0xa686005CE37Dce7738436256982C3903f2E4ea8E': {
-        weight: '1000000',
-        balance: '1000000000000000001014',
-      },
-    },
-    reserveRatio: '1000000',
-    owner: '0x3Da99AAD2D9CA01D131eFc3B17444b832B31Ff4a',
-  },
-  {
-    name: 'testb',
-    symbol: 'tstb',
-    address: '0xC63cFA91A3BFf41cE31Ff436f67D3ACBC977DB95',
-    supply: '99000',
-    decimals: '18',
-    reserves: {
-      '0xa686005CE37Dce7738436256982C3903f2E4ea8E': { weight: '1000000', balance: '99000' },
-    },
-    reserveRatio: '1000000',
-    owner: '0x3Da99AAD2D9CA01D131eFc3B17444b832B31Ff4a',
-  },
-  {
-    name: 'testa',
-    symbol: 'tsta',
-    address: '0x8fA4101ef19D0a078239d035659e92b278bD083C',
-    supply: '9981',
-    decimals: '18',
-    reserves: {
-      '0xa686005CE37Dce7738436256982C3903f2E4ea8E': { weight: '1000000', balance: '9981' },
-    },
-    reserveRatio: '1000000',
-    owner: '0x3Da99AAD2D9CA01D131eFc3B17444b832B31Ff4a',
-  },
-  {
-    name: 'testc',
-    symbol: 'tstc',
-    address: '0x4A6fA6bc3BfE4C9661bC692D9798425350C9e3D4',
-    supply: '100990',
-    decimals: '18',
-    reserves: {
-      '0xa686005CE37Dce7738436256982C3903f2E4ea8E': { weight: '1000000', balance: '100990' },
-    },
-    reserveRatio: '1000000',
-    owner: '0x3Da99AAD2D9CA01D131eFc3B17444b832B31Ff4a',
-  },
-];
-
 /** A mock of curated  transaction types. */
 const transactionTypes: Array<string> = [
   'transactions',
@@ -1118,22 +957,12 @@ export class MockBackendInterceptor implements HttpInterceptor {
           return approveAction();
         case url.endsWith('/areanames') && method === 'GET':
           return getAreaNames();
-        case url.match(/\/areanames\/\w+/) && method === 'GET':
-          return getAreaNameByLocation();
         case url.endsWith('/areatypes') && method === 'GET':
           return getAreaTypes();
-        case url.match(/\/areatypes\/\w+/) && method === 'GET':
-          return getAreaTypeByArea();
         case url.endsWith('/categories') && method === 'GET':
           return getCategories();
-        case url.match(/\/categories\/\w+/) && method === 'GET':
-          return getCategoryByProduct();
         case url.endsWith('/genders') && method === 'GET':
           return getGenders();
-        case url.endsWith('/tokens') && method === 'GET':
-          return getTokens();
-        case url.match(/\/tokens\/\w+/) && method === 'GET':
-          return getTokenBySymbol();
         case url.endsWith('/transactiontypes') && method === 'GET':
           return getTransactionTypes();
         default:
@@ -1165,78 +994,21 @@ export class MockBackendInterceptor implements HttpInterceptor {
     }
 
     function getAreaNames(): Observable<HttpResponse<any>> {
-      const areaNameList: Array<string> = areaNames.map((areaName) => areaName.name);
+      return ok(areaNames);
-      return ok(areaNameList);
-    }
-
-    function getAreaNameByLocation(): Observable<HttpResponse<any>> {
-      const keywords = stringFromUrl().split(' ');
-      for (const keyword of keywords) {
-        const queriedAreaName: AreaName = areaNames.find((areaName) =>
-          areaName.locations.includes(keyword)
-        );
-        if (queriedAreaName) {
-          return ok(queriedAreaName.name);
-        }
-      }
-      return ok('other');
     }
 
     function getAreaTypes(): Observable<HttpResponse<any>> {
-      const areaTypeList: Array<string> = areaTypes.map((areaType) => areaType.name);
+      return ok(areaTypes);
-      return ok(areaTypeList);
-    }
-
-    function getAreaTypeByArea(): Observable<HttpResponse<any>> {
-      const keywords = stringFromUrl().split(' ');
-      for (const keyword of keywords) {
-        const queriedAreaType: AreaType = areaTypes.find((areaType) =>
-          areaType.area.includes(keyword)
-        );
-        if (queriedAreaType) {
-          return ok(queriedAreaType.name);
-        }
-      }
-      return ok('other');
     }
 
     function getCategories(): Observable<HttpResponse<any>> {
-      const categoryList: Array<string> = categories.map((category) => category.name);
+      return ok(categories);
-      return ok(categoryList);
-    }
-
-    function getCategoryByProduct(): Observable<HttpResponse<any>> {
-      const keywords = stringFromUrl().split(' ');
-      for (const keyword of keywords) {
-        const queriedCategory: Category = categories.find((category) =>
-          category.products.includes(keyword)
-        );
-        if (queriedCategory) {
-          return ok(queriedCategory.name);
-        }
-      }
-      return ok('other');
     }
 
     function getGenders(): Observable<HttpResponse<any>> {
       return ok(genders);
     }
 
-    function getTokens(): Observable<HttpResponse<any>> {
-      return ok(tokens);
-    }
-
-    function getTokenBySymbol(): Observable<HttpResponse<any>> {
-      const keywords = stringFromUrl().split(' ');
-      for (const keyword of keywords) {
-        const queriedToken: Token = tokens.find((token) => token.symbol === keyword);
-        if (queriedToken) {
-          return ok(queriedToken.name);
-        }
-      }
-      return ok('other');
-    }
-
     function getTransactionTypes(): Observable<HttpResponse<any>> {
       return ok(transactionTypes);
     }

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,25 +115,19 @@ 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.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
+          this.userService.categoriesSubject.subscribe((result) => {
-            .getCategoryByProduct(this.account.products[0])
+            this.category = this.userService.getCategoryByProduct(this.account.products[0], result);
-            .pipe(first())
-            .subscribe((response) => {
-              this.category = response;
             this.cdr.detectChanges();
           });
           const fullName = this.account.vcard?.fn[0].value.split(' ');
@@ -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())