Skip to content

Conversation

@lukasz-lepa
Copy link
Contributor

@@ -0,0 +1,5 @@
<div class="toast-container">
@for (toast of toasts; track toast) {
<step-toast [message]="toast.message" [actions]="toast.actions" [duration]="toast.duration"> </step-toast>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<step-toast [message]="toast.message" [actions]="toast.actions" [duration]="toast.duration"> </step-toast>
<step-toast [message]="toast.message" [actions]="toast.actions" [duration]="toast.duration"/>

Comment on lines 9 to 21
private toastSubject = new Subject<{ message: string; actions?: NotificationAction[]; duration?: number }[]>();
toastMessages = this.toastSubject.asObservable();
private toasts: { message: string; actions: NotificationAction[]; duration: number }[] = [];

showToast(message: string, actions?: NotificationAction[], duration?: number): void {
this.toasts.push({ message, actions: actions || [], duration: duration || 3000 });
this.toastSubject.next(this.toasts);
}

removeToast(message: string): void {
this.toasts = this.toasts.filter((toast) => toast.message !== message);
this.toastSubject.next(this.toasts);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the usage of signals could simplify this code

Suggested change
private toastSubject = new Subject<{ message: string; actions?: NotificationAction[]; duration?: number }[]>();
toastMessages = this.toastSubject.asObservable();
private toasts: { message: string; actions: NotificationAction[]; duration: number }[] = [];
showToast(message: string, actions?: NotificationAction[], duration?: number): void {
this.toasts.push({ message, actions: actions || [], duration: duration || 3000 });
this.toastSubject.next(this.toasts);
}
removeToast(message: string): void {
this.toasts = this.toasts.filter((toast) => toast.message !== message);
this.toastSubject.next(this.toasts);
}
private toastsInternal = signal<{ message: string; actions?: NotificationAction[]; duration?: number }[]>([]);
readonly toastMessages = this.toastsInternal.asReadonly();
showToast(message: string, actions: NotificationAction[] = [], duration: number = 3000): void {
this.toastsInternal.update((toasts) => toasts.concat({message, actions, duration})) ;
}
removeToast(message: string): void {
this.toastsInternal.update((toasts) => toasts.filter((toast) => toast.message !== message));
}

Comment on lines 11 to 19
toasts: { message: string; actions?: NotificationAction[]; duration?: number }[] = [];

constructor(private toastService: ToastService) {}

ngOnInit(): void {
this.toastService.toastMessages.subscribe((toasts) => {
this.toasts = toasts;
});
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, check the comment below in ToastService. With signal usage the code of current component could look like this

Suggested change
toasts: { message: string; actions?: NotificationAction[]; duration?: number }[] = [];
constructor(private toastService: ToastService) {}
ngOnInit(): void {
this.toastService.toastMessages.subscribe((toasts) => {
this.toasts = toasts;
});
}
protected readonly _toasts = inject(ToastService).toastMessages;

@@ -0,0 +1,14 @@
@if (message) {
<div class="toast">
<span class="success-icon">&#10003;</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@neogucky @lukasz-lepa
Shouldn't we use feather-icons here instead of unicode symbols?

@dvladir dvladir marked this pull request as draft October 29, 2024 15:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants