Skip to content

Commit

Permalink
more refactorings
Browse files Browse the repository at this point in the history
  • Loading branch information
d-koppenhagen committed Dec 10, 2023
1 parent 02bbdf7 commit 4e9fe80
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 73 deletions.
62 changes: 18 additions & 44 deletions src/app/alert-region/alert-region.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
Component,
Input,
Output,
EventEmitter,
} from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {
animate,
state,
Expand All @@ -16,15 +11,7 @@ import {
AriaLivePoliteness,
LiveAnnouncer,
} from '@angular/cdk/a11y';
import {
Observable,
concatMap,
of,
switchMap,
take,
tap,
timer
} from 'rxjs';
import { concat, defer, map, tap, timer } from 'rxjs';
import { AsyncPipe } from '@angular/common';

@Component({
Expand Down Expand Up @@ -62,44 +49,31 @@ export class AlertRegionComponent {
@Output() deactivated = new EventEmitter<void>();
@Input() toastState: string = 'active'; // You can use this to trigger enter/leave animations

readonly show$ = new Observable<boolean>(observer => {
console.log(`[Creation: ${this.title} - sec: ${new Date().getSeconds()}]`)
const firstTimer = timer(this.timer); // Emit "true" after 3 seconds
const secondTimer = timer(this.timer + this.duration); // Emit "false" after 20 seconds
readonly show$ = defer(() => {
// Emit "true" after e.g. 3 seconds and announce
const firstTimer = timer(this.timer).pipe(
map(() => true),
tap(() => this.announce())
);

const subscription1 = firstTimer.subscribe(() => {
observer.next(true);
console.log(`[Start: ${this.title} - sec: ${new Date().getSeconds()}]`)
this.announce()
});
// Emit "false" after e.g. 20 seconds
const secondTimer = timer(this.duration).pipe(
map(() => false),
tap(() => this.closeMessage())
);

const subscription2 = secondTimer.subscribe(() => {
observer.next(false);
observer.complete();
});

// Clean up subscriptions when the source observable is unsubscribed
return () => {
subscription1.unsubscribe();
subscription2.unsubscribe();
console.log(`[End: ${this.title} - sec: ${new Date().getSeconds()}]`)
this.closeMessage()
};
return concat(firstTimer, secondTimer);
});

constructor(private liveAnnouncer: LiveAnnouncer) {}

private announce() {
const description = this.description ? `: ${this.description}` : ""
this.liveAnnouncer.announce(`${this.title}${description}`)
const description = this.description ? `: ${this.description}` : '';
this.liveAnnouncer.announce(`${this.title}${description}`);
}

private closeMessage() {
this.deactivated.emit()
this.liveAnnouncer.clear()
this.deactivated.emit();
this.liveAnnouncer.clear();
}

// ngOnDestroy() {
// this.subscription?.unsubscribe();
// }
}
42 changes: 22 additions & 20 deletions src/app/alert-table-entry/alert-table-entry.component.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
<th scope="row">{{ alert.title }}</th>
<td>{{ alert.description }}</td>
<td>{{ alert.role }}</td>
<td>{{ alert.politeness }}</td>
<td>{{ alert.timer }}</td>
<td>{{ alert.duration }}</td>
<td>
<button
(click)="removeAlert(alert.title)"
title="Remove Alert"
aria-label="Remove Alert"
>
🗑️
</button>
</td>
<td>
<button (click)="startAlert(alert.title)" [disabled]="!!alert.active">
{{ alert.active ? "Active" : "Activate" }}
</button>
</td>
@if(alert) {
<th scope="row">{{ alert.title }}</th>
<td>{{ alert.description }}</td>
<td>{{ alert.role }}</td>
<td>{{ alert.politeness }}</td>
<td>{{ alert.timer }}</td>
<td>{{ alert.duration }}</td>
<td>
<button
(click)="removeAlert(alert.title)"
title="Remove Alert"
aria-label="Remove Alert"
>
🗑️
</button>
</td>
<td>
<button (click)="startAlert(alert.title)" [disabled]="!!alert.active">
{{ alert.active ? "Active" : "Activate" }}
</button>
</td>
}
4 changes: 2 additions & 2 deletions src/app/alert-table-entry/alert-table-entry.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ import { RemoveAlertDialogComponent } from '../remove-alert-dialog/remove-alert-
styleUrl: './alert-table-entry.component.scss',
})
export class AlertTableEntryComponent {
@Input({ required: true }) alert!: Alert;
@Input({ required: true }) alert?: Alert;

constructor(private alertService: AlertService, public dialog: Dialog) {}
constructor(private alertService: AlertService, private dialog: Dialog) {}

removeAlert(title: string) {
const dialogRef = this.dialog.open<string>(RemoveAlertDialogComponent, {
Expand Down
10 changes: 5 additions & 5 deletions src/app/alert.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,15 @@ export class AlertService {
constructor() {}

addAlert(alert: Alert) {
this.alerts.set([
...this.alerts(),
this.alerts.update((value) => [
...value,
{ ...alert, active: true }
])
}

private activateOrDeactivateAlert(title: string, active: boolean) {
this.alerts.set([
...this.alerts().map(a => {
this.alerts.update((value) => [
...value.map(a => {
if (a.title === title) {
a.active = active
}
Expand All @@ -95,7 +95,7 @@ export class AlertService {
}

removeAlert(title: string) {
this.alerts.set(this.alerts().filter(a => a.title !== title))
this.alerts.update( (value) => value.filter(a => a.title !== title))
}

activateAlert(title: string) {
Expand Down
4 changes: 2 additions & 2 deletions src/app/nav/nav.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
selector: 'app-nav',
standalone: true,
imports: [RouterModule],
imports: [RouterLink, RouterLinkActive],
templateUrl: './nav.component.html',
styleUrl: './nav.component.scss'
})
Expand Down

0 comments on commit 4e9fe80

Please sign in to comment.