# CICADA

### File

`src/app/app.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-root`
styleUrls | `./app.component.scss`
templateUrl | `./app.component.html`

### Index

###### Properties

- mediaQuery
- readyState
- readyStateTarget
- title

###### Methods

- Async ngOnInit
- onResize

###### HostListeners

- window:cic_convert
- window:cic_transfer

### Constructor

`constructor(authService: AuthService, transactionService: TransactionService, loggingService: LoggingService, errorDialogService: ErrorDialogService, swUpdate: SwUpdate)`
Defined in src/app/app.component.ts:21

Parameters :

Name | Type | Optional
authService | `AuthService` | No
transactionService | `TransactionService` | No
loggingService | `LoggingService` | No
errorDialogService | `ErrorDialogService` | No
swUpdate | `SwUpdate` | No

### HostListeners

window:cic_convert
Arguments : `'$event'`
`window:cic_convert(event: CustomEvent)`
Defined in src/app/app.component.ts:88

window:cic_transfer
Arguments : `'$event'`
`window:cic_transfer(event: CustomEvent)`
Defined in src/app/app.component.ts:82

### Methods

Async ngOnInit
`ngOnInit()`
Defined in src/app/app.component.ts:34
Returns : `Promise<void>`

onResize
`onResize(e)`
Defined in src/app/app.component.ts:57

Parameters :

Name | Optional
e | No

Returns : `void`

### Properties

mediaQuery
Type : `MediaQueryList`
Default value : `window.matchMedia('(max-width: 768px)')`
Defined in src/app/app.component.ts:21

readyState
Type : `number`
Default value : `0`
Defined in src/app/app.component.ts:20

readyStateTarget
Type : `number`
Default value : `3`
Defined in src/app/app.component.ts:19

title
Type : `string`
Default value : `'CICADA'`
Defined in src/app/app.component.ts:18

    import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
    import {
      AuthService,
      ErrorDialogService,
      LoggingService,
      TransactionService,
    } from '@app/_services';
    import { catchError } from 'rxjs/operators';
    import { SwUpdate } from '@angular/service-worker';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class AppComponent implements OnInit {
      title = 'CICADA';
      readyStateTarget: number = 3;
      readyState: number = 0;
      mediaQuery: MediaQueryList = window.matchMedia('(max-width: 768px)');

      constructor(
        private authService: AuthService,
        private transactionService: TransactionService,
        private loggingService: LoggingService,
        private errorDialogService: ErrorDialogService,
        private swUpdate: SwUpdate
      ) {
        this.mediaQuery.addEventListener('change', this.onResize);
        this.onResize(this.mediaQuery);
      }

      async ngOnInit(): Promise<void> {
        await this.authService.init();
        await this.transactionService.init();
        try {
          const publicKeys = await this.authService.getPublicKeys();
          await this.authService.mutableKeyStore.importPublicKey(publicKeys);
          this.authService.getTrustedUsers();
        } catch (error) {
          this.errorDialogService.openDialog({
            message: 'Trusted keys endpoint cannot be reached. Please try again later.',
          });
          // TODO do something to halt user progress...show a sad cicada page 🦗?
        }
        if (!this.swUpdate.isEnabled) {
          this.swUpdate.available.subscribe(() => {
            if (confirm('New Version available. Load New Version?')) {
              window.location.reload();
            }
          });
        }
      }

      // Load resize
      onResize(e): void {
        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');
        }
        if (e.matches) {
          if (!sidebar?.classList.contains('active')) {
            sidebar?.classList.add('active');
          }
          if (!content?.classList.contains('active')) {
            content?.classList.add('active');
          }
        } else {
          if (sidebar?.classList.contains('active')) {
            sidebar?.classList.remove('active');
          }
          if (content?.classList.contains('active')) {
            content?.classList.remove('active');
          }
        }
      }

      @HostListener('window:cic_transfer', ['$event'])
      async cicTransfer(event: CustomEvent): Promise<void> {
        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: any = event.detail.tx;
        await this.transactionService.setConversion(conversion, 100);
      }
    }

    <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

`./app.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""