From 53d6d6b7a41cafd8bacc82bc3d61694a70d39823 Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Fri, 30 Apr 2021 15:50:16 +0300 Subject: [PATCH] Add typing to components. --- src/app/_helpers/mock-backend.ts | 35 +--------------- src/app/_models/index.ts | 1 + src/app/_models/mappings.ts | 29 +++++++++++++ src/app/_models/transaction.ts | 1 + src/app/app.component.ts | 12 +++--- .../_directives/password-toggle.directive.ts | 4 +- src/app/auth/auth.component.ts | 8 ++-- .../account-details.component.spec.ts | 8 ---- .../account-details.component.ts | 42 ++++++++++--------- .../account-search.component.ts | 3 +- src/app/pages/accounts/accounts.component.ts | 15 +++---- .../create-account.component.ts | 11 ++--- src/app/pages/admin/admin.component.ts | 8 ++-- .../organization/organization.component.ts | 2 +- src/app/pages/settings/settings.component.ts | 4 +- .../token-details/token-details.component.ts | 3 +- src/app/pages/tokens/tokens.component.ts | 5 ++- .../transactions/transactions.component.ts | 15 +++---- .../_directives/menu-selection.directive.ts | 6 +-- .../_directives/menu-toggle.directive.ts | 6 +-- 20 files changed, 107 insertions(+), 111 deletions(-) create mode 100644 src/app/_models/mappings.ts diff --git a/src/app/_helpers/mock-backend.ts b/src/app/_helpers/mock-backend.ts index dd92523..c1a1c25 100644 --- a/src/app/_helpers/mock-backend.ts +++ b/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; -} - -interface AreaName { - name: string; - locations: Array; -} - -interface AreaType { - name: string; - area: Array; -} +import {Action, AreaName, AreaType, Category, Token} from '@app/_models'; const actions: Array = [ { id: 1, user: 'Tom', role: 'enroller', action: 'Disburse RSV 100', approval: false }, diff --git a/src/app/_models/index.ts b/src/app/_models/index.ts index c6b6756..a6dfb15 100644 --- a/src/app/_models/index.ts +++ b/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'; diff --git a/src/app/_models/mappings.ts b/src/app/_models/mappings.ts new file mode 100644 index 0000000..e5abbec --- /dev/null +++ b/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; +} + +interface AreaName { + name: string; + locations: Array; +} + +interface AreaType { + name: string; + area: Array; +} + +export { + Action, + Category, + AreaName, + AreaType +}; diff --git a/src/app/_models/transaction.ts b/src/app/_models/transaction.ts index 1c3ab5c..2a8b27e 100644 --- a/src/app/_models/transaction.ts +++ b/src/app/_models/transaction.ts @@ -30,6 +30,7 @@ class Transaction { token: TxToken; tx: Tx; value: number; + type?: string; } class Conversion { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 388b553..cecd933 100644 --- a/src/app/app.component.ts +++ b/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 { - 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 { - const conversion = event.detail.tx; + const conversion: any = event.detail.tx; await this.transactionService.setConversion(conversion, 100); } } diff --git a/src/app/auth/_directives/password-toggle.directive.ts b/src/app/auth/_directives/password-toggle.directive.ts index c6b998b..5c2b8fb 100644 --- a/src/app/auth/_directives/password-toggle.directive.ts +++ b/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 diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts index 372bf53..dff3cbe 100644 --- a/src/app/auth/auth.component.ts +++ b/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 { diff --git a/src/app/pages/accounts/account-details/account-details.component.spec.ts b/src/app/pages/accounts/account-details/account-details.component.spec.ts index 3b9b288..6af8f5b 100644 --- a/src/app/pages/accounts/account-details/account-details.component.spec.ts +++ b/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'); - }); }); 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 986fd65..d9cd130 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/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; - transactionsDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type']; - transactionsDefaultPageSize = 10; - transactionsPageSizeOptions = [10, 20, 50, 100]; + transactionsDisplayedColumns: Array = ['sender', 'recipient', 'value', 'created', 'type']; + transactionsDefaultPageSize: number = 10; + transactionsPageSizeOptions: Array = [10, 20, 50, 100]; @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator; @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort; userDataSource: MatTableDataSource; - userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'location']; - usersDefaultPageSize = 10; - usersPageSizeOptions = [10, 20, 50, 100]; + userDisplayedColumns: Array = ['name', 'phone', 'created', 'balance', 'location']; + usersDefaultPageSize: number = 10; + usersPageSizeOptions: Array = [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 = []; + accountsType: string = 'all'; + categories: Array; + areaNames: Array; + areaTypes: Array; transaction: any; - transactions: any[]; - transactionsType = 'all'; - accountTypes: any[]; - transactionsTypes: any[]; - genders: any[]; - matcher = new CustomErrorStateMatcher(); + transactions: Array; + transactionsType: string = 'all'; + accountTypes: Array; + transactionsTypes: Array; + genders: Array; + 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}`); }); } diff --git a/src/app/pages/accounts/account-search/account-search.component.ts b/src/app/pages/accounts/account-search/account-search.component.ts index 4219118..0d94aa0 100644 --- a/src/app/pages/accounts/account-search/account-search.component.ts +++ b/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 { diff --git a/src/app/pages/accounts/accounts.component.ts b/src/app/pages/accounts/accounts.component.ts index f45dacc..c84e50e 100644 --- a/src/app/pages/accounts/accounts.component.ts +++ b/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; - accounts: any[] = []; - displayedColumns = ['name', 'phone', 'created', 'balance', 'location']; - defaultPageSize = 10; - pageSizeOptions = [10, 20, 50, 100]; - accountsType = 'all'; - accountTypes: any[]; + accounts: Array = []; + displayedColumns: Array = ['name', 'phone', 'created', 'balance', 'location']; + defaultPageSize: number = 10; + pageSizeOptions: Array = [10, 20, 50, 100]; + accountsType: string = 'all'; + accountTypes: Array; @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}); diff --git a/src/app/pages/accounts/create-account/create-account.component.ts b/src/app/pages/accounts/create-account/create-account.component.ts index f2f6ebd..5443f15 100644 --- a/src/app/pages/accounts/create-account/create-account.component.ts +++ b/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; + areaNames: Array; + accountTypes: Array; + genders: Array; constructor( private formBuilder: FormBuilder, diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts index 6e133f4..a28fc44 100644 --- a/src/app/pages/admin/admin.component.ts +++ b/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; - displayedColumns = ['expand', 'user', 'role', 'action', 'status', 'approve']; - action: any; - actions: any; + displayedColumns: Array = ['expand', 'user', 'role', 'action', 'status', 'approve']; + action: Action; + actions: Array; @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); }); } diff --git a/src/app/pages/settings/organization/organization.component.ts b/src/app/pages/settings/organization/organization.component.ts index e8b6126..2e9b966 100644 --- a/src/app/pages/settings/organization/organization.component.ts +++ b/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 diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 5d733bc..7195ee3 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/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; - displayedColumns = ['name', 'email', 'userId']; - trustedUsers: Staff[]; + displayedColumns: Array = ['name', 'email', 'userId']; + trustedUsers: Array; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; diff --git a/src/app/pages/tokens/token-details/token-details.component.ts b/src/app/pages/tokens/token-details/token-details.component.ts index 46277fe..042800f 100644 --- a/src/app/pages/tokens/token-details/token-details.component.ts +++ b/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, diff --git a/src/app/pages/tokens/tokens.component.ts b/src/app/pages/tokens/tokens.component.ts index 0e73d1c..44bf7a6 100644 --- a/src/app/pages/tokens/tokens.component.ts +++ b/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; - columnsToDisplay = ['name', 'symbol', 'address', 'supply']; + columnsToDisplay: Array = ['name', 'symbol', 'address', 'supply']; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; - tokens: any; + tokens: Array>; constructor( private tokenService: TokenService, diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts index 397bf97..0444fce 100644 --- a/src/app/pages/transactions/transactions.component.ts +++ b/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; - transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type']; - defaultPageSize = 10; - pageSizeOptions = [10, 20, 50, 100]; - transactions: any[]; - transaction: any; - transactionsType = 'all'; - transactionsTypes: any[]; + transactionDisplayedColumns: Array = ['sender', 'recipient', 'value', 'created', 'type']; + defaultPageSize: number = 10; + pageSizeOptions: Array = [10, 20, 50, 100]; + transactions: Array; + transaction: Transaction; + transactionsType: string = 'all'; + transactionsTypes: Array; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; diff --git a/src/app/shared/_directives/menu-selection.directive.ts b/src/app/shared/_directives/menu-selection.directive.ts index 1c7534a..fcc3de9 100644 --- a/src/app/shared/_directives/menu-selection.directive.ts +++ b/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'); } diff --git a/src/app/shared/_directives/menu-toggle.directive.ts b/src/app/shared/_directives/menu-toggle.directive.ts index 5e7c873..9d43941 100644 --- a/src/app/shared/_directives/menu-toggle.directive.ts +++ b/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'); } }