feat: show error message in the bottom sheet

src/app/outlet/private-outlet/private-outlet.ts

@@ -1,6 +1,11 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit } from '@angular/core'
 import { NavComponent } from '../../components/nav/nav.component'
 import { RouterOutlet } from '@angular/router'
+import { NotificationsService } from '../../services/notifications-service'
+import { catchError, of, tap } from 'rxjs'
+import { MatBottomSheet } from '@angular/material/bottom-sheet'
+import { BottomErrorSheet } from '../../components/bottom-error-sheet/bottom-error-sheet'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 
 @Component({
   selector: 'app-private-outlet',
@@ -9,4 +14,28 @@ import { RouterOutlet } from '@angular/router'
   styleUrl: './private-outlet.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PrivateOutlet {}
+export class PrivateOutlet implements OnInit {
+  private readonly notificationsService = inject(NotificationsService)
+  private readonly notification = this.notificationsService.$notification
+  private readonly errorSheet = inject(MatBottomSheet)
+  private readonly destroyRef = inject(DestroyRef)
+
+  ngOnInit() {
+    this.notification
+      .pipe(
+        tap((n) => {
+          if (n === null) {
+            this.errorSheet.dismiss()
+          } else {
+            this.errorSheet.open(BottomErrorSheet, { data: { error: n?.message } })
+          }
+        }),
+        takeUntilDestroyed(this.destroyRef),
+        catchError((error) => {
+          console.error(error)
+          return of(null)
+        }),
+      )
+      .subscribe()
+  }
+}

src/app/pages/article-page/article-page.ts

@@ -23,6 +23,7 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { TagService } from '../../services/tag-service'
 import { TitleService } from '../../services/title-service'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { NotificationsService } from '../../services/notifications-service'
 
 @Component({
   selector: 'app-article-page',
@@ -47,6 +48,7 @@ export class ArticlePage implements OnInit {
   private readonly titleService = inject(TitleService)
   private readonly destroyRef = inject(DestroyRef)
   private readonly domSanitizer = inject(DomSanitizer)
+  private readonly notificationsService = inject(NotificationsService)
 
   readonly article = signal<Article | null>(null)
   readonly fullText = signal<SafeHtml | undefined>(undefined)
@@ -86,6 +88,9 @@ export class ArticlePage implements OnInit {
         takeUntilDestroyed(this.destroyRef),
         catchError((error: HttpErrorResponse) => {
           console.error(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )
@@ -117,6 +122,9 @@ export class ArticlePage implements OnInit {
           takeUntilDestroyed(this.destroyRef),
           catchError((error: HttpErrorResponse) => {
             console.error(error)
+            this.notificationsService.setNotification({
+              message: error.error.message,
+            })
             return of(null)
           }),
         )
@@ -147,6 +155,9 @@ export class ArticlePage implements OnInit {
           takeUntilDestroyed(this.destroyRef),
           catchError((error: HttpErrorResponse) => {
             console.error(error)
+            this.notificationsService.setNotification({
+              message: error.error.message,
+            })
             return of(null)
           }),
         )
@@ -171,9 +182,12 @@ export class ArticlePage implements OnInit {
       .getFullText({ articleId })
       .pipe(
         takeUntilDestroyed(this.destroyRef),
-        catchError((e) => {
-          console.error(e)
+        catchError((error) => {
+          console.error(error)
           this.isLoading.set(false)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )

src/app/pages/articles-page/articles-page.ts

@@ -21,6 +21,7 @@ import { PageService } from '../../services/page-service'
 import { PageDisplayToggle } from '../../components/page-display-toggle/page-display-toggle'
 import { AsyncPipe } from '@angular/common'
 import { SortOrder } from '../../entities/base/base.enums'
+import { NotificationsService } from '../../services/notifications-service'
 
 @Component({
   selector: 'app-articles-page',
@@ -48,6 +49,7 @@ export class ArticlesPage implements OnInit {
   private readonly tagService = inject(TagService)
   private readonly titleService = inject(TitleService)
   private readonly pageService = inject(PageService)
+  private readonly notificationsService = inject(NotificationsService)
 
   readonly articles = signal<Article[]>([])
   readonly articleIds = computed(() => this.articles().map(({ _id }) => _id))
@@ -68,6 +70,9 @@ export class ArticlesPage implements OnInit {
         takeUntilDestroyed(this.destroyRef),
         catchError((error: HttpErrorResponse) => {
           console.log(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )
@@ -203,6 +208,9 @@ export class ArticlesPage implements OnInit {
         takeUntilDestroyed(this.destroyRef),
         catchError((error: HttpErrorResponse) => {
           console.log(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )
@@ -236,9 +244,12 @@ export class ArticlesPage implements OnInit {
       .refreshAllFeeds()
       .pipe(
         takeUntilDestroyed(this.destroyRef),
-        catchError((e) => {
+        catchError((error) => {
           this.isRefreshingAll.set(false)
-          console.error(e)
+          console.error(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )

src/app/pages/bookmarks-page/bookmarks-page.ts

@@ -12,6 +12,7 @@ import { MatToolbarRow } from '@angular/material/toolbar'
 import { Paginator } from '../../components/paginator/paginator'
 import { PageService } from '../../services/page-service'
 import { PageDisplayToggle } from '../../components/page-display-toggle/page-display-toggle'
+import { NotificationsService } from '../../services/notifications-service'
 
 @Component({
   selector: 'app-bookmarks-page',
@@ -25,6 +26,7 @@ export class BookmarksPage implements OnInit {
   private readonly tagService = inject(TagService)
   private readonly pageService = inject(PageService)
   private readonly titleService = inject(TitleService)
+  private readonly notificationsService = inject(NotificationsService)
 
   articles = signal<Article[]>([])
 
@@ -73,6 +75,9 @@ export class BookmarksPage implements OnInit {
         takeUntilDestroyed(this.destroyRef),
         catchError((error: HttpErrorResponse) => {
           console.log(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )

src/app/pages/feeds-page/feeds-page.ts

@@ -24,6 +24,7 @@ import { FeedAddForm } from '../../components/feed-add-form/feed-add-form'
 import { FeedEditForm } from '../../components/feed-edit-form/feed-edit-form'
 import { MatBottomSheet } from '@angular/material/bottom-sheet'
 import { BottomErrorSheet } from '../../components/bottom-error-sheet/bottom-error-sheet'
+import { NotificationsService } from '../../services/notifications-service'
 
 @Component({
   selector: 'app-feed-page',
@@ -57,6 +58,7 @@ export class FeedsPage implements OnInit {
   private readonly destroyRef = inject(DestroyRef)
   private readonly titleService = inject(TitleService)
   private readonly bottomError = inject(MatBottomSheet)
+  private readonly notificationsService = inject(NotificationsService)
 
   readonly feeds = signal<Feed[]>([])
   readonly isRefreshing = signal<Record<string, boolean>>({})
@@ -128,9 +130,12 @@ export class FeedsPage implements OnInit {
       .refreshAllFeeds()
       .pipe(
         takeUntilDestroyed(this.destroyRef),
-        catchError((e) => {
+        catchError((error) => {
           this.isRefreshingAll.set(false)
-          console.error(e)
+          console.error(error)
+          this.notificationsService.setNotification({
+            message: error.error.message,
+          })
           return of(null)
         }),
       )

src/app/services/notifications-service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+
+type AppNotification = {
+  message: string
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationsService {
+  private $$notification = new BehaviorSubject<AppNotification | null>(null)
+  $notification = this.$$notification.asObservable()
+
+  setNotification(notification: AppNotification) {
+    this.$$notification.next(notification)
+    setTimeout(() => {
+      this.$$notification.next(null)
+    }, 3000)
+  }
+}