refactoring

Author: actionanand

src/app/places/available-places/available-places.component.html

@@ -1,8 +1,12 @@
 <app-places-container title="Available Places">
-  @if (isFetching()) {
+  @if (isFetching() && !errorMsg()) {
     <p class="fallback-text">fetching available places!</p>
   }
 
+  @if (errorMsg()) {
+    <p class="fallback-text">{{ errorMsg() }}</p>
+  }
+
   @if (places()) {
     <app-places [places]="places()!" (selectPlace)="onSelectPlaces($event)" />
   } @else if (places()?.length === 0) {

src/app/places/available-places/available-places.component.ts

@@ -1,12 +1,9 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import { catchError, map, tap } from 'rxjs/operators';
-import { throwError } from 'rxjs';
 
 import { Place } from '../../models/place.model';
 import { PlacesComponent } from '../places.component';
 import { PlacesContainerComponent } from '../places-container/places-container.component';
+import { PlacesService } from '../../services/places.service';
 
 @Component({
   selector: 'app-available-places',
@@ -18,49 +15,36 @@ import { PlacesContainerComponent } from '../places-container/places-container.c
 export class AvailablePlacesComponent implements OnInit {
   places = signal<Place[] | undefined>(undefined);
   isFetching = signal(false);
+  errorMsg = signal('');
 
-  private http = inject(HttpClient);
+  private placeServ = inject(PlacesService);
   private destroyRef = inject(DestroyRef);
 
   ngOnInit(): void {
     this.isFetching.set(true);
 
-    const availablePlaceSub = this.http
-      .get<{ places: Place[] }>('/api/v2/places', {
-        observe: 'response',
-      })
-      .pipe(
-        tap(rawResp => {
-          console.log('Raw Response: ', rawResp);
-        }),
-        map(data => data.body),
-        catchError(error => {
-          console.error(error);
-          return throwError(() => new Error('Something went wrong!'));
-        }),
-      )
-      .subscribe({
-        next: resp => {
-          this.places.set(resp?.places);
-        },
-        complete: () => {
-          this.isFetching.set(false);
-        },
-        error: (err: Error) => {
-          console.error(err.message);
-        },
-      });
+    const availablePlaceSub = this.placeServ.loadAvailablePlaces().subscribe({
+      next: resp => {
+        this.places.set(resp?.places);
+        this.errorMsg.set('');
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      },
+      error: (err: Error) => {
+        console.error(err.message);
+        this.errorMsg.set(err.message);
+      },
+    });
 
     this.destroyRef.onDestroy(() => availablePlaceSub.unsubscribe());
   }
 
   onSelectPlaces(selectedPlace: Place) {
-    this.http
-      .put('/api/v2/user-places', {
-        placeId: selectedPlace.id,
-      })
-      .subscribe({
-        next: resp => console.log('Place added. ', resp),
-      });
+    const selectPlaceSub = this.placeServ.addPlaceToUserPlaces(selectedPlace.id).subscribe({
+      next: resp => console.log('Place added. ', resp),
+    });
+
+    this.destroyRef.onDestroy(() => selectPlaceSub.unsubscribe());
   }
 }

src/app/places/user-places/user-places.component.html

@@ -1,3 +1,15 @@
 <app-places-container title="Your Favorite Places">
-  <p>Todo...</p>
+  @if (isFetching() && !errorMsg()) {
+    <p class="fallback-text">fetching available places!</p>
+  }
+
+  @if (errorMsg()) {
+    <p class="fallback-text">{{ errorMsg() }}</p>
+  }
+
+  @if (places()) {
+    <app-places [places]="places()!" />
+  } @else if (places()?.length === 0) {
+    <p class="fallback-text">Unfortunately, no places could be found.</p>
+  }
 </app-places-container>

src/app/places/user-places/user-places.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 
 import { PlacesContainerComponent } from '../places-container/places-container.component';
 import { PlacesComponent } from '../places.component';
+import { Place } from '../../models/place.model';
+import { PlacesService } from '../../services/places.service';
 
 @Component({
   selector: 'app-user-places',
@@ -10,5 +12,31 @@ import { PlacesComponent } from '../places.component';
   styleUrl: './user-places.component.css',
   imports: [PlacesContainerComponent, PlacesComponent],
 })
-export class UserPlacesComponent {
+export class UserPlacesComponent implements OnInit {
+  places = signal<Place[] | undefined>(undefined);
+  isFetching = signal(false);
+  errorMsg = signal('');
+
+  private placeServ = inject(PlacesService);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.isFetching.set(true);
+
+    const availablePlaceSub = this.placeServ.loadUserPlaces().subscribe({
+      next: resp => {
+        this.places.set(resp?.places);
+        this.errorMsg.set('');
+      },
+      complete: () => {
+        this.isFetching.set(false);
+      },
+      error: (err: Error) => {
+        console.error(err.message);
+        this.errorMsg.set(err.message);
+      },
+    });
+
+    this.destroyRef.onDestroy(() => availablePlaceSub.unsubscribe());
+  }
 }

src/app/services/places.service.ts

@@ -1,5 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Injectable, signal } from '@angular/core';
+import { inject, Injectable, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { catchError, map, tap } from 'rxjs/operators';
+import { throwError } from 'rxjs';
 
 import { Place } from '../models/place.model';
 
@@ -8,15 +12,40 @@ import { Place } from '../models/place.model';
 })
 export class PlacesService {
   private userPlaces = signal<Place[]>([]);
-  private readonly url = '/api/v2/places';
-
   loadedUserPlaces = this.userPlaces.asReadonly();
 
-  loadAvailablePlaces() {}
+  private http = inject(HttpClient);
 
-  loadUserPlaces() {}
+  loadAvailablePlaces() {
+    return this.fetchPlaces('/api/v2/places', 'Error loading available places!');
+  }
 
-  addPlaceToUserPlaces(place: Place) {}
+  loadUserPlaces() {
+    return this.fetchPlaces('/api/v2/user-places', 'Error loading user places!');
+  }
+
+  addPlaceToUserPlaces(placeId: string) {
+    return this.http.put('/api/v2/user-places', {
+      placeId,
+    });
+  }
 
   removeUserPlace(place: Place) {}
+
+  private fetchPlaces(url: string, errMsg: string) {
+    return this.http
+      .get<{ places: Place[] }>(url, {
+        observe: 'response',
+      })
+      .pipe(
+        tap(rawResp => {
+          console.log('Raw Response: ', rawResp);
+        }),
+        map(data => data.body),
+        catchError(error => {
+          console.error(error);
+          return throwError(() => new Error(errMsg));
+        }),
+      );
+  }
 }