fix: error management

Author: c4ffein

src/app/features/article/pages/article/article.component.html

@@ -1,13 +1,22 @@
-@if (article()) {
-  <div class="article-page">
+<div class="article-page">
+  @if (errors()) {
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <app-list-errors [errors]="errors()" />
+        </div>
+      </div>
+    </div>
+  }
+  @if (article(); as a) {
     <div class="banner">
       <div class="container">
-        <h1>{{ article().title }}</h1>
+        <h1>{{ a.title }}</h1>
 
-        <app-article-meta [article]="article()">
+        <app-article-meta [article]="a">
           @if (canModify()) {
             <span>
-              <a class="btn btn-sm btn-outline-secondary" [routerLink]="['/editor', article().slug]">
+              <a class="btn btn-sm btn-outline-secondary" [routerLink]="['/editor', a.slug]">
                 <i class="ion-edit"></i> Edit Article
               </a>
 
@@ -21,11 +30,11 @@ <h1>{{ article().title }}</h1>
             </span>
           } @else {
             <span>
-              <app-follow-button [profile]="article().author" (toggle)="toggleFollowing($event)"> </app-follow-button>
+              <app-follow-button [profile]="a.author" (toggle)="toggleFollowing($event)"> </app-follow-button>
 
-              <app-favorite-button [article]="article()" (toggle)="onToggleFavorite($event)">
-                {{ article().favorited ? 'Unfavorite' : 'Favorite' }} Article
-                <span class="counter">({{ article().favoritesCount }})</span>
+              <app-favorite-button [article]="a" (toggle)="onToggleFavorite($event)">
+                {{ a.favorited ? 'Unfavorite' : 'Favorite' }} Article
+                <span class="counter">({{ a.favoritesCount }})</span>
               </app-favorite-button>
             </span>
           }
@@ -36,10 +45,10 @@ <h1>{{ article().title }}</h1>
     <div class="container page">
       <div class="row article-content">
         <div class="col-md-12">
-          <div [innerHTML]="article().body | markdown | async"></div>
+          <div [innerHTML]="a.body | markdown | async"></div>
 
           <ul class="tag-list">
-            @for (tag of article().tagList; track tag) {
+            @for (tag of a.tagList; track tag) {
               <li class="tag-default tag-pill tag-outline">
                 {{ tag }}
               </li>
@@ -51,10 +60,10 @@ <h1>{{ article().title }}</h1>
       <hr />
 
       <div class="article-actions">
-        <app-article-meta [article]="article()">
+        <app-article-meta [article]="a">
           @if (canModify()) {
             <span>
-              <a class="btn btn-sm btn-outline-secondary" [routerLink]="['/editor', article().slug]">
+              <a class="btn btn-sm btn-outline-secondary" [routerLink]="['/editor', a.slug]">
                 <i class="ion-edit"></i> Edit Article
               </a>
 
@@ -68,11 +77,11 @@ <h1>{{ article().title }}</h1>
             </span>
           } @else {
             <span>
-              <app-follow-button [profile]="article().author" (toggle)="toggleFollowing($event)" />
+              <app-follow-button [profile]="a.author" (toggle)="toggleFollowing($event)" />
 
-              <app-favorite-button [article]="article()" (toggle)="onToggleFavorite($event)">
-                {{ article().favorited ? 'Unfavorite' : 'Favorite' }} Article
-                <span class="counter">({{ article().favoritesCount }})</span>
+              <app-favorite-button [article]="a" (toggle)="onToggleFavorite($event)">
+                {{ a.favorited ? 'Unfavorite' : 'Favorite' }} Article
+                <span class="counter">({{ a.favoritesCount }})</span>
               </app-favorite-button>
             </span>
           }
@@ -106,11 +115,13 @@ <h1>{{ article().title }}</h1>
             this article.
           </div>
 
+          <app-list-errors [errors]="deleteCommentErrors()" />
+
           @for (comment of comments(); track comment) {
             <app-article-comment [comment]="comment" (delete)="deleteComment(comment)" />
           }
         </div>
       </div>
     </div>
-  </div>
-}
+  }
+</div>

src/app/features/article/pages/article/article.component.ts

@@ -12,7 +12,7 @@ import { MarkdownPipe } from '../../../../shared/pipes/markdown.pipe';
 import { ListErrorsComponent } from '../../../../shared/components/list-errors.component';
 import { ArticleCommentComponent } from '../../components/article-comment.component';
 import { catchError } from 'rxjs/operators';
-import { combineLatest, throwError } from 'rxjs';
+import { combineLatest, EMPTY } from 'rxjs';
 import { Comment } from '../../models/comment.model';
 import { IfAuthenticatedDirective } from '../../../../core/auth/if-authenticated.directive';
 import { Errors } from '../../../../core/models/errors.model';
@@ -41,13 +41,15 @@ import { FollowButtonComponent } from '../../../profile/components/follow-button
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ArticleComponent implements OnInit {
-  article = signal<Article>(null!);
+  article = signal<Article | null>(null);
   currentUser = signal<User | null>(null);
   comments = signal<Comment[]>([]);
   canModify = signal(false);
+  errors = signal<Errors | null>(null);
 
   commentControl = new FormControl<string>('', { nonNullable: true });
   commentFormErrors = signal<Errors | null>(null);
+  deleteCommentErrors = signal<Errors | null>(null);
 
   isSubmitting = signal(false);
   isDeleting = signal(false);
@@ -66,8 +68,8 @@ export default class ArticleComponent implements OnInit {
     combineLatest([this.articleService.get(slug), this.commentsService.getAll(slug), this.userService.currentUser])
       .pipe(
         catchError(err => {
-          void this.router.navigate(['/']);
-          return throwError(() => err);
+          this.errors.set(err.errors || { error: ['Failed to load article'] });
+          return EMPTY;
         }),
         takeUntilDestroyed(this.destroyRef),
       )
@@ -80,37 +82,49 @@ export default class ArticleComponent implements OnInit {
   }
 
   onToggleFavorite(favorited: boolean): void {
-    this.article.update(article => ({
-      ...article,
-      favorited,
-      favoritesCount: favorited ? article.favoritesCount + 1 : article.favoritesCount - 1,
-    }));
+    this.article.update(article => {
+      if (!article) return article;
+      return {
+        ...article,
+        favorited,
+        favoritesCount: favorited ? article.favoritesCount + 1 : article.favoritesCount - 1,
+      };
+    });
   }
 
   toggleFollowing(profile: Profile): void {
-    this.article.update(article => ({
-      ...article,
-      author: { ...article.author, following: profile.following },
-    }));
+    this.article.update(article => {
+      if (!article) return article;
+      return {
+        ...article,
+        author: { ...article.author, following: profile.following },
+      };
+    });
   }
 
   deleteArticle(): void {
+    const article = this.article();
+    if (!article) return;
+
     this.isDeleting.set(true);
 
     this.articleService
-      .delete(this.article().slug)
+      .delete(article.slug)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         void this.router.navigate(['/']);
       });
   }
 
   addComment() {
+    const article = this.article();
+    if (!article) return;
+
     this.isSubmitting.set(true);
     this.commentFormErrors.set(null);
 
     this.commentsService
-      .add(this.article().slug, this.commentControl.value)
+      .add(article.slug, this.commentControl.value)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: comment => {
@@ -126,11 +140,20 @@ export default class ArticleComponent implements OnInit {
   }
 
   deleteComment(comment: Comment): void {
+    const article = this.article();
+    if (!article) return;
+
+    this.deleteCommentErrors.set(null);
     this.commentsService
-      .delete(comment.id, this.article().slug)
+      .delete(comment.id, article.slug)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.comments.update(comments => comments.filter(item => item !== comment));
+      .subscribe({
+        next: () => {
+          this.comments.update(comments => comments.filter(item => item !== comment));
+        },
+        error: errors => {
+          this.deleteCommentErrors.set(errors);
+        },
       });
   }
 }

src/app/features/profile/pages/profile/profile.component.html

@@ -1,14 +1,23 @@
-@if (profile()) {
-  <div class="profile-page">
+<div class="profile-page">
+  @if (errors()) {
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12 col-md-10 offset-md-1">
+          <app-list-errors [errors]="errors()" />
+        </div>
+      </div>
+    </div>
+  }
+  @if (profile(); as p) {
     <div class="user-info">
       <div class="container">
         <div class="row">
           <div class="col-xs-12 col-md-10 offset-md-1">
-            <img [src]="profile().image" class="user-img" />
-            <h4>{{ profile().username }}</h4>
-            <p>{{ profile().bio }}</p>
+            <img [src]="p.image" class="user-img" />
+            <h4>{{ p.username }}</h4>
+            <p>{{ p.bio }}</p>
             @if (!isUser()) {
-              <app-follow-button [profile]="profile()" (toggle)="onToggleFollowing($event)" />
+              <app-follow-button [profile]="p" (toggle)="onToggleFollowing($event)" />
             }
             @if (isUser()) {
               <a [routerLink]="['/settings']" class="btn btn-sm btn-outline-secondary action-btn">
@@ -30,7 +39,7 @@ <h4>{{ profile().username }}</h4>
                   class="nav-link"
                   routerLinkActive="active"
                   [routerLinkActiveOptions]="{ exact: true }"
-                  [routerLink]="['/profile', profile().username]"
+                  [routerLink]="['/profile', p.username]"
                 >
                   My Posts
                 </a>
@@ -40,7 +49,7 @@ <h4>{{ profile().username }}</h4>
                   class="nav-link"
                   routerLinkActive="active"
                   [routerLinkActiveOptions]="{ exact: true }"
-                  [routerLink]="['/profile', profile().username, 'favorites']"
+                  [routerLink]="['/profile', p.username, 'favorites']"
                 >
                   Favorited Posts
                 </a>
@@ -52,5 +61,5 @@ <h4>{{ profile().username }}</h4>
         </div>
       </div>
     </div>
-  </div>
-}
+  }
+</div>

src/app/features/profile/pages/profile/profile.component.ts

@@ -1,22 +1,32 @@
 import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { catchError, switchMap } from 'rxjs/operators';
-import { combineLatest, of, throwError } from 'rxjs';
+import { combineLatest, EMPTY, of } from 'rxjs';
 import { UserService } from '../../../../core/auth/services/user.service';
 import { Profile } from '../../models/profile.model';
 import { ProfileService } from '../../services/profile.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FollowButtonComponent } from '../../components/follow-button.component';
+import { Errors } from '../../../../core/models/errors.model';
+import { ListErrorsComponent } from '../../../../shared/components/list-errors.component';
 
 @Component({
   selector: 'app-profile-page',
   templateUrl: './profile.component.html',
-  imports: [FollowButtonComponent, RouterLink, RouterLinkActive, RouterOutlet, FollowButtonComponent],
+  imports: [
+    FollowButtonComponent,
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet,
+    FollowButtonComponent,
+    ListErrorsComponent,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileComponent implements OnInit {
-  profile = signal<Profile>(null!);
+  profile = signal<Profile | null>(null);
   isUser = signal(false);
+  errors = signal<Errors | null>(null);
   destroyRef = inject(DestroyRef);
 
   constructor(
@@ -31,8 +41,8 @@ export class ProfileComponent implements OnInit {
       .get(this.route.snapshot.params['username'])
       .pipe(
         catchError(error => {
-          void this.router.navigate(['/']);
-          return throwError(() => error);
+          this.errors.set(error.errors || { error: ['Failed to load profile'] });
+          return EMPTY;
         }),
         switchMap(profile => {
           return combineLatest([of(profile), this.userService.currentUser]);

src/app/features/profile/services/profile.service.ts

@@ -4,6 +4,13 @@ import { map, shareReplay } from 'rxjs/operators';
 import { Profile } from '../models/profile.model';
 import { HttpClient } from '@angular/common/http';
 
+/**
+ * ProfileService - Fetches public profile data for any user by username.
+ *
+ * Note: This is different from UserService which uses GET /user:
+ * - GET /profiles/:username → Public profile for any user (this service)
+ * - GET /user → Current authenticated user's own data (UserService)
+ */
 @Injectable({ providedIn: 'root' })
 export class ProfileService {
   constructor(private readonly http: HttpClient) {}