Skip to content

Commit 24e99a4

Browse files
emp74arkemp74ark
authored
Merge pull request #36
feat: show error message in the bottom sheet
2 parents 0ac8c4c + 58c6441 commit 24e99a4

File tree

6 files changed

+93
-8
lines changed

6 files changed

+93
-8
lines changed

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import { ChangeDetectionStrategy, Component } from '@angular/core'
1+
import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit } from '@angular/core'
22
import { NavComponent } from '../../components/nav/nav.component'
33
import { RouterOutlet } from '@angular/router'
4+
import { NotificationsService } from '../../services/notifications-service'
5+
import { catchError, of, tap } from 'rxjs'
6+
import { MatBottomSheet } from '@angular/material/bottom-sheet'
7+
import { BottomErrorSheet } from '../../components/bottom-error-sheet/bottom-error-sheet'
8+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
49

510
@Component({
611
selector: 'app-private-outlet',
@@ -9,4 +14,28 @@ import { RouterOutlet } from '@angular/router'
914
styleUrl: './private-outlet.css',
1015
changeDetection: ChangeDetectionStrategy.OnPush,
1116
})
12-
export class PrivateOutlet {}
17+
export class PrivateOutlet implements OnInit {
18+
private readonly notificationsService = inject(NotificationsService)
19+
private readonly notification = this.notificationsService.$notification
20+
private readonly errorSheet = inject(MatBottomSheet)
21+
private readonly destroyRef = inject(DestroyRef)
22+
23+
ngOnInit() {
24+
this.notification
25+
.pipe(
26+
tap((n) => {
27+
if (n === null) {
28+
this.errorSheet.dismiss()
29+
} else {
30+
this.errorSheet.open(BottomErrorSheet, { data: { error: n?.message } })
31+
}
32+
}),
33+
takeUntilDestroyed(this.destroyRef),
34+
catchError((error) => {
35+
console.error(error)
36+
return of(null)
37+
}),
38+
)
39+
.subscribe()
40+
}
41+
}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { HttpErrorResponse } from '@angular/common/http'
2323
import { TagService } from '../../services/tag-service'
2424
import { TitleService } from '../../services/title-service'
2525
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
26+
import { NotificationsService } from '../../services/notifications-service'
2627

2728
@Component({
2829
selector: 'app-article-page',
@@ -47,6 +48,7 @@ export class ArticlePage implements OnInit {
4748
private readonly titleService = inject(TitleService)
4849
private readonly destroyRef = inject(DestroyRef)
4950
private readonly domSanitizer = inject(DomSanitizer)
51+
private readonly notificationsService = inject(NotificationsService)
5052

5153
readonly article = signal<Article | null>(null)
5254
readonly fullText = signal<SafeHtml | undefined>(undefined)
@@ -86,6 +88,9 @@ export class ArticlePage implements OnInit {
8688
takeUntilDestroyed(this.destroyRef),
8789
catchError((error: HttpErrorResponse) => {
8890
console.error(error)
91+
this.notificationsService.setNotification({
92+
message: error.error.message,
93+
})
8994
return of(null)
9095
}),
9196
)
@@ -117,6 +122,9 @@ export class ArticlePage implements OnInit {
117122
takeUntilDestroyed(this.destroyRef),
118123
catchError((error: HttpErrorResponse) => {
119124
console.error(error)
125+
this.notificationsService.setNotification({
126+
message: error.error.message,
127+
})
120128
return of(null)
121129
}),
122130
)
@@ -147,6 +155,9 @@ export class ArticlePage implements OnInit {
147155
takeUntilDestroyed(this.destroyRef),
148156
catchError((error: HttpErrorResponse) => {
149157
console.error(error)
158+
this.notificationsService.setNotification({
159+
message: error.error.message,
160+
})
150161
return of(null)
151162
}),
152163
)
@@ -171,9 +182,12 @@ export class ArticlePage implements OnInit {
171182
.getFullText({ articleId })
172183
.pipe(
173184
takeUntilDestroyed(this.destroyRef),
174-
catchError((e) => {
175-
console.error(e)
185+
catchError((error) => {
186+
console.error(error)
176187
this.isLoading.set(false)
188+
this.notificationsService.setNotification({
189+
message: error.error.message,
190+
})
177191
return of(null)
178192
}),
179193
)

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { PageService } from '../../services/page-service'
2121
import { PageDisplayToggle } from '../../components/page-display-toggle/page-display-toggle'
2222
import { AsyncPipe } from '@angular/common'
2323
import { SortOrder } from '../../entities/base/base.enums'
24+
import { NotificationsService } from '../../services/notifications-service'
2425

2526
@Component({
2627
selector: 'app-articles-page',
@@ -48,6 +49,7 @@ export class ArticlesPage implements OnInit {
4849
private readonly tagService = inject(TagService)
4950
private readonly titleService = inject(TitleService)
5051
private readonly pageService = inject(PageService)
52+
private readonly notificationsService = inject(NotificationsService)
5153

5254
readonly articles = signal<Article[]>([])
5355
readonly articleIds = computed(() => this.articles().map(({ _id }) => _id))
@@ -68,6 +70,9 @@ export class ArticlesPage implements OnInit {
6870
takeUntilDestroyed(this.destroyRef),
6971
catchError((error: HttpErrorResponse) => {
7072
console.log(error)
73+
this.notificationsService.setNotification({
74+
message: error.error.message,
75+
})
7176
return of(null)
7277
}),
7378
)
@@ -203,6 +208,9 @@ export class ArticlesPage implements OnInit {
203208
takeUntilDestroyed(this.destroyRef),
204209
catchError((error: HttpErrorResponse) => {
205210
console.log(error)
211+
this.notificationsService.setNotification({
212+
message: error.error.message,
213+
})
206214
return of(null)
207215
}),
208216
)
@@ -236,9 +244,12 @@ export class ArticlesPage implements OnInit {
236244
.refreshAllFeeds()
237245
.pipe(
238246
takeUntilDestroyed(this.destroyRef),
239-
catchError((e) => {
247+
catchError((error) => {
240248
this.isRefreshingAll.set(false)
241-
console.error(e)
249+
console.error(error)
250+
this.notificationsService.setNotification({
251+
message: error.error.message,
252+
})
242253
return of(null)
243254
}),
244255
)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { MatToolbarRow } from '@angular/material/toolbar'
1212
import { Paginator } from '../../components/paginator/paginator'
1313
import { PageService } from '../../services/page-service'
1414
import { PageDisplayToggle } from '../../components/page-display-toggle/page-display-toggle'
15+
import { NotificationsService } from '../../services/notifications-service'
1516

1617
@Component({
1718
selector: 'app-bookmarks-page',
@@ -25,6 +26,7 @@ export class BookmarksPage implements OnInit {
2526
private readonly tagService = inject(TagService)
2627
private readonly pageService = inject(PageService)
2728
private readonly titleService = inject(TitleService)
29+
private readonly notificationsService = inject(NotificationsService)
2830

2931
articles = signal<Article[]>([])
3032

@@ -73,6 +75,9 @@ export class BookmarksPage implements OnInit {
7375
takeUntilDestroyed(this.destroyRef),
7476
catchError((error: HttpErrorResponse) => {
7577
console.log(error)
78+
this.notificationsService.setNotification({
79+
message: error.error.message,
80+
})
7681
return of(null)
7782
}),
7883
)

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { FeedAddForm } from '../../components/feed-add-form/feed-add-form'
2424
import { FeedEditForm } from '../../components/feed-edit-form/feed-edit-form'
2525
import { MatBottomSheet } from '@angular/material/bottom-sheet'
2626
import { BottomErrorSheet } from '../../components/bottom-error-sheet/bottom-error-sheet'
27+
import { NotificationsService } from '../../services/notifications-service'
2728

2829
@Component({
2930
selector: 'app-feed-page',
@@ -57,6 +58,7 @@ export class FeedsPage implements OnInit {
5758
private readonly destroyRef = inject(DestroyRef)
5859
private readonly titleService = inject(TitleService)
5960
private readonly bottomError = inject(MatBottomSheet)
61+
private readonly notificationsService = inject(NotificationsService)
6062

6163
readonly feeds = signal<Feed[]>([])
6264
readonly isRefreshing = signal<Record<string, boolean>>({})
@@ -128,9 +130,12 @@ export class FeedsPage implements OnInit {
128130
.refreshAllFeeds()
129131
.pipe(
130132
takeUntilDestroyed(this.destroyRef),
131-
catchError((e) => {
133+
catchError((error) => {
132134
this.isRefreshingAll.set(false)
133-
console.error(e)
135+
console.error(error)
136+
this.notificationsService.setNotification({
137+
message: error.error.message,
138+
})
134139
return of(null)
135140
}),
136141
)

‎src/app/services/notifications-service.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Injectable } from '@angular/core'
2+
import { BehaviorSubject } from 'rxjs'
3+
4+
type AppNotification = {
5+
message: string
6+
}
7+
8+
@Injectable({
9+
providedIn: 'root',
10+
})
11+
export class NotificationsService {
12+
private $$notification = new BehaviorSubject<AppNotification | null>(null)
13+
$notification = this.$$notification.asObservable()
14+
15+
setNotification(notification: AppNotification) {
16+
this.$$notification.next(notification)
17+
setTimeout(() => {
18+
this.$$notification.next(null)
19+
}, 3000)
20+
}
21+
}

0 commit comments

Comments
 (0)