Add typing to components.

src/app/_helpers/mock-backend.ts

@@ -2,40 +2,7 @@ import {HTTP_INTERCEPTORS, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,
 import {Injectable} from '@angular/core';
 import {Observable, of, throwError} from 'rxjs';
 import {delay, dematerialize, materialize, mergeMap} from 'rxjs/operators';
-
-interface Action {
-  id: number;
-  user: string;
-  role: string;
-  action: string;
-  approval: boolean;
-}
-
-interface Token {
-  name: string;
-  symbol: string;
-  address: string;
-  supply: string;
-  decimals: string;
-  reserves: {};
-  reserveRatio?: string;
-  owner?: string;
-}
-
-interface Category {
-  name: string;
-  products: Array<string>;
-}
-
-interface AreaName {
-  name: string;
-  locations: Array<string>;
-}
-
-interface AreaType {
-  name: string;
-  area: Array<string>;
-}
+import {Action, AreaName, AreaType, Category, Token} from '@app/_models';
 
 const actions: Array<Action> = [
   { id: 1, user: 'Tom', role: 'enroller', action: 'Disburse RSV 100', approval: false },

src/app/_models/index.ts

@@ -3,3 +3,4 @@ export * from '@app/_models/settings';
 export * from '@app/_models/account';
 export * from '@app/_models/staff';
 export * from '@app/_models/token';
+export * from '@app/_models/mappings';

src/app/_models/mappings.ts

@@ -0,0 +1,29 @@
+interface Action {
+  id: number;
+  user: string;
+  role: string;
+  action: string;
+  approval: boolean;
+}
+
+interface Category {
+  name: string;
+  products: Array<string>;
+}
+
+interface AreaName {
+  name: string;
+  locations: Array<string>;
+}
+
+interface AreaType {
+  name: string;
+  area: Array<string>;
+}
+
+export {
+  Action,
+  Category,
+  AreaName,
+  AreaType
+};

src/app/_models/transaction.ts

@@ -30,6 +30,7 @@ class Transaction {
   token: TxToken;
   tx: Tx;
   value: number;
+  type?: string;
 }
 
 class Conversion {

src/app/app.component.ts

@@ -12,7 +12,7 @@ export class AppComponent {
   title = 'CICADA';
   readyStateTarget: number = 3;
   readyState: number = 0;
-  mediaQuery = window.matchMedia('(max-width: 768px)');
+  mediaQuery: MediaQueryList = window.matchMedia('(max-width: 768px)');
 
   constructor(
     private authService: AuthService,
@@ -41,9 +41,9 @@ export class AppComponent {
 
   // Load resize
   onResize(e): void {
-    const sidebar = document.getElementById('sidebar');
-    const content = document.getElementById('content');
-    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const sidebar: HTMLElement = document.getElementById('sidebar');
+    const content: HTMLElement = document.getElementById('content');
+    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
     if (sidebarCollapse?.classList.contains('active')) {
       sidebarCollapse?.classList.remove('active');
     }
@@ -66,13 +66,13 @@ export class AppComponent {
 
   @HostListener('window:cic_transfer', ['$event'])
   async cicTransfer(event: CustomEvent): Promise<void> {
-    const transaction = event.detail.tx;
+    const transaction: any = event.detail.tx;
     await this.transactionService.setTransaction(transaction, 100);
   }
 
   @HostListener('window:cic_convert', ['$event'])
   async cicConvert(event: CustomEvent): Promise<void> {
-    const conversion = event.detail.tx;
+    const conversion: any = event.detail.tx;
     await this.transactionService.setConversion(conversion, 100);
   }
 }

src/app/auth/_directives/password-toggle.directive.ts

@@ -20,8 +20,8 @@ export class PasswordToggleDirective {
   }
 
   togglePasswordVisibility(): void {
-    const password = document.getElementById(this.id);
-    const icon = document.getElementById(this.iconId);
+    const password: HTMLElement = document.getElementById(this.id);
+    const icon: HTMLElement = document.getElementById(this.iconId);
     // @ts-ignore
     if (password.type === 'password') {
       // @ts-ignore

src/app/auth/auth.component.ts

@@ -14,7 +14,7 @@ export class AuthComponent implements OnInit {
   keyForm: FormGroup;
   submitted: boolean = false;
   loading: boolean = false;
-  matcher = new CustomErrorStateMatcher();
+  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
 
   constructor(
     private authService: AuthService,
@@ -58,14 +58,14 @@ export class AuthComponent implements OnInit {
 
   switchWindows(): void {
     this.authService.sessionToken = undefined;
-    const divOne = document.getElementById('one');
-    const divTwo = document.getElementById('two');
+    const divOne: HTMLElement = document.getElementById('one');
+    const divTwo: HTMLElement = document.getElementById('two');
     this.toggleDisplay(divOne);
     this.toggleDisplay(divTwo);
   }
 
   toggleDisplay(element: any): void {
-    const style = window.getComputedStyle(element).display;
+    const style: string = window.getComputedStyle(element).display;
     if (style === 'block') {
       element.style.display = 'none';
     } else {

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

@@ -50,12 +50,4 @@ describe('AccountDetailsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('#addTransfer() should toggle #isDisbursing', () => {
-    expect(component.isDisbursing).toBe(false, 'off at first');
-    component.addTransfer();
-    expect(component.isDisbursing).toBe(true, 'on after click');
-    component.addTransfer();
-    expect(component.isDisbursing).toBe(false, 'off after second click');
-  });
 });

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

@@ -10,6 +10,7 @@ import {copyToClipboard, CustomErrorStateMatcher, exportCsv} from '@app/_helpers
 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';
 
 @Component({
   selector: 'app-account-details',
@@ -19,35 +20,35 @@ import {environment} from '@src/environments/environment';
 })
 export class AccountDetailsComponent implements OnInit {
   transactionsDataSource: MatTableDataSource<any>;
-  transactionsDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type'];
-  transactionsDefaultPageSize = 10;
-  transactionsPageSizeOptions = [10, 20, 50, 100];
+  transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
+  transactionsDefaultPageSize: number = 10;
+  transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
   @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
   @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;
 
   userDataSource: MatTableDataSource<any>;
-  userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'location'];
-  usersDefaultPageSize = 10;
-  usersPageSizeOptions = [10, 20, 50, 100];
+  userDisplayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
+  usersDefaultPageSize: number = 10;
+  usersPageSizeOptions: Array<number> = [10, 20, 50, 100];
   @ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
   @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;
 
   accountInfoForm: FormGroup;
-  account: any;
+  account: AccountDetails;
   accountAddress: string;
   accountStatus: any;
-  accounts: any[] = [];
-  accountsType = 'all';
-  categories: any[];
-  areaNames: any[];
-  areaTypes: any[];
+  accounts: Array<AccountDetails> = [];
+  accountsType: string = 'all';
+  categories: Array<Category>;
+  areaNames: Array<AreaName>;
+  areaTypes: Array<AreaType>;
   transaction: any;
-  transactions: any[];
-  transactionsType = 'all';
-  accountTypes: any[];
-  transactionsTypes: any[];
-  genders: any[];
-  matcher = new CustomErrorStateMatcher();
+  transactions: Array<Transaction>;
+  transactionsType: string = 'all';
+  accountTypes: Array<string>;
+  transactionsTypes: Array<string>;
+  genders: Array<string>;
+  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
   submitted: boolean = false;
   bloxbergLink: string;
 
@@ -84,7 +85,8 @@ export class AccountDetailsComponent implements OnInit {
           this.account = res;
           this.cdr.detectChanges();
           this.loggingService.sendInfoLevelMessage(this.account);
-          // this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first()).subscribe(response => this.accountStatus = response);
+          // this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first())
+          //   .subscribe(response => this.accountStatus = response);
           this.accountInfoForm.patchValue({
             name: this.account.vcard?.fn[0].value,
             phoneNumber: this.account.vcard?.tel[0].value,
@@ -188,7 +190,7 @@ export class AccountDetailsComponent implements OnInit {
 
   resetPin(): void {
     if (!confirm('Reset user\'s pin?')) { return; }
-    this.userService.resetPin(this.account.phone).pipe(first()).subscribe(res => {
+    this.userService.resetPin(this.account.vcard.tel[0].value).pipe(first()).subscribe(res => {
       this.loggingService.sendInfoLevelMessage(`Response: ${res}`);
     });
   }

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

@@ -22,7 +22,7 @@ export class AccountSearchComponent implements OnInit {
   addressSearchForm: FormGroup;
   addressSearchSubmitted: boolean = false;
   addressSearchLoading: boolean = false;
-  matcher = new CustomErrorStateMatcher();
+  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
 
   constructor(
     private formBuilder: FormBuilder,
@@ -59,7 +59,6 @@ export class AccountSearchComponent implements OnInit {
     if (this.phoneSearchForm.invalid) { return; }
     this.phoneSearchLoading = true;
     (await this.userService.getAccountByPhone(this.phoneSearchFormStub.phoneNumber.value, 100)).subscribe(async res => {
-      console.log(res);
       if (res !== undefined) {
         await this.router.navigateByUrl(`/accounts/${strip0x(res.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`);
       } else {

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

@@ -8,6 +8,7 @@ import {exportCsv} from '@app/_helpers';
 import {strip0x} from '@src/assets/js/ethtx/dist/hex';
 import {first} from 'rxjs/operators';
 import {environment} from '@src/environments/environment';
+import {AccountDetails} from '@app/_models';
 
 @Component({
   selector: 'app-accounts',
@@ -17,12 +18,12 @@ import {environment} from '@src/environments/environment';
 })
 export class AccountsComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
-  accounts: any[] = [];
-  displayedColumns = ['name', 'phone', 'created', 'balance', 'location'];
-  defaultPageSize = 10;
-  pageSizeOptions = [10, 20, 50, 100];
-  accountsType = 'all';
-  accountTypes: any[];
+  accounts: Array<AccountDetails> = [];
+  displayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
+  defaultPageSize: number = 10;
+  pageSizeOptions: Array<number> = [10, 20, 50, 100];
+  accountsType: string = 'all';
+  accountTypes: Array<string>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -35,7 +36,7 @@ export class AccountsComponent implements OnInit {
   {
     (async () => {
       try {
-          // TODO it feels like this shuold be in the onInit handler
+          // 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

@@ -3,6 +3,7 @@ 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',
@@ -12,12 +13,12 @@ import {first} from 'rxjs/operators';
 })
 export class CreateAccountComponent implements OnInit {
   createForm: FormGroup;
-  matcher = new CustomErrorStateMatcher();
+  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
   submitted: boolean = false;
-  categories: any[];
-  areaNames: any[];
-  accountTypes: any[];
-  genders: any[];
+  categories: Array<Category>;
+  areaNames: Array<AreaName>;
+  accountTypes: Array<string>;
+  genders: Array<string>;
 
   constructor(
     private formBuilder: FormBuilder,

src/app/pages/admin/admin.component.ts

@@ -6,6 +6,7 @@ import {LoggingService, UserService} from '@app/_services';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {first} from 'rxjs/operators';
 import {exportCsv} from '@app/_helpers';
+import {Action} from '../../_models';
 
 @Component({
   selector: 'app-admin',
@@ -22,9 +23,9 @@ import {exportCsv} from '@app/_helpers';
 })
 export class AdminComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
-  displayedColumns = ['expand', 'user', 'role', 'action', 'status', 'approve'];
-  action: any;
-  actions: any;
+  displayedColumns: Array<string> = ['expand', 'user', 'role', 'action', 'status', 'approve'];
+  action: Action;
+  actions: Array<Action>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -39,7 +40,6 @@ export class AdminComponent implements OnInit {
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.actions = actions;
-      console.log(this.actions);
     });
   }
 

src/app/pages/settings/organization/organization.component.ts

@@ -11,7 +11,7 @@ import {CustomErrorStateMatcher} from '@app/_helpers';
 export class OrganizationComponent implements OnInit {
   organizationForm: FormGroup;
   submitted: boolean = false;
-  matcher = new CustomErrorStateMatcher();
+  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
 
   constructor(
     private formBuilder: FormBuilder

src/app/pages/settings/settings.component.ts

@@ -15,8 +15,8 @@ import {exportCsv} from '@app/_helpers';
 export class SettingsComponent implements OnInit {
   date: string;
   dataSource: MatTableDataSource<any>;
-  displayedColumns = ['name', 'email', 'userId'];
-  trustedUsers: Staff[];
+  displayedColumns: Array<string> = ['name', 'email', 'userId'];
+  trustedUsers: Array<Staff>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;

src/app/pages/tokens/token-details/token-details.component.ts

@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
 import {TokenService} from '@app/_services';
 import {first} from 'rxjs/operators';
+import {Token} from '../../../_models';
 
 @Component({
   selector: 'app-token-details',
@@ -10,7 +11,7 @@ import {first} from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TokenDetailsComponent implements OnInit {
-  token: any;
+  token: Token;
 
   constructor(
     private route: ActivatedRoute,

src/app/pages/tokens/tokens.component.ts

@@ -6,6 +6,7 @@ import {MatTableDataSource} from '@angular/material/table';
 import {Router} from '@angular/router';
 import {exportCsv} from '@app/_helpers';
 import {TokenRegistry} from '../../_eth';
+import {Token} from '../../_models';
 
 @Component({
   selector: 'app-tokens',
@@ -15,10 +16,10 @@ import {TokenRegistry} from '../../_eth';
 })
 export class TokensComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
-  columnsToDisplay = ['name', 'symbol', 'address', 'supply'];
+  columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply'];
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  tokens: any;
+  tokens: Array<Promise<string>>;
 
   constructor(
     private tokenService: TokenService,

src/app/pages/transactions/transactions.component.ts

@@ -5,6 +5,7 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {exportCsv} from '@app/_helpers';
 import {first} from 'rxjs/operators';
+import {Transaction} from '@app/_models';
 
 @Component({
   selector: 'app-transactions',
@@ -14,13 +15,13 @@ import {first} from 'rxjs/operators';
 })
 export class TransactionsComponent implements OnInit, AfterViewInit {
   transactionDataSource: MatTableDataSource<any>;
-  transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type'];
-  defaultPageSize = 10;
-  pageSizeOptions = [10, 20, 50, 100];
-  transactions: any[];
-  transaction: any;
-  transactionsType = 'all';
-  transactionsTypes: any[];
+  transactionDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
+  defaultPageSize: number = 10;
+  pageSizeOptions: Array<number> = [10, 20, 50, 100];
+  transactions: Array<Transaction>;
+  transaction: Transaction;
+  transactionsType: string = 'all';
+  transactionsTypes: Array<string>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;

src/app/shared/_directives/menu-selection.directive.ts

@@ -18,15 +18,15 @@ export class MenuSelectionDirective {
   }
 
   onMenuSelect(): void {
-    const sidebar = document.getElementById('sidebar');
+    const sidebar: HTMLElement = document.getElementById('sidebar');
     if (!sidebar?.classList.contains('active')) {
       sidebar?.classList.add('active');
     }
-    const content = document.getElementById('content');
+    const content: HTMLElement = document.getElementById('content');
     if (!content?.classList.contains('active')) {
       content?.classList.add('active');
     }
-    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
     if (sidebarCollapse?.classList.contains('active')) {
       sidebarCollapse?.classList.remove('active');
     }

src/app/shared/_directives/menu-toggle.directive.ts

@@ -16,11 +16,11 @@ export class MenuToggleDirective {
 
   // Menu Trigger
   onMenuToggle(): void {
-    const sidebar = document.getElementById('sidebar');
+    const sidebar: HTMLElement = document.getElementById('sidebar');
     sidebar?.classList.toggle('active');
-    const content = document.getElementById('content');
+    const content: HTMLElement = document.getElementById('content');
     content?.classList.toggle('active');
-    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
     sidebarCollapse?.classList.toggle('active');
   }
 }