optimistic updating of user places

Author: actionanand

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

@@ -41,7 +41,7 @@ export class AvailablePlacesComponent implements OnInit {
   }
 
   onSelectPlaces(selectedPlace: Place) {
-    const selectPlaceSub = this.placeServ.addPlaceToUserPlaces(selectedPlace.id).subscribe({
+    const selectPlaceSub = this.placeServ.addPlaceToUserPlaces(selectedPlace).subscribe({
       next: resp => console.log('Place added. ', resp),
     });
 

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

@@ -9,7 +9,7 @@
 
   @if (places()) {
     <app-places [places]="places()!" />
-  } @else if (places()?.length === 0) {
+  } @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

@@ -2,7 +2,7 @@ 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 { Place } from '../../models/place.model';
 import { PlacesService } from '../../services/places.service';
 
 @Component({
@@ -13,21 +13,18 @@ import { PlacesService } from '../../services/places.service';
   imports: [PlacesContainerComponent, PlacesComponent],
 })
 export class UserPlacesComponent implements OnInit {
-  places = signal<Place[] | undefined>(undefined);
   isFetching = signal(false);
   errorMsg = signal('');
 
   private placeServ = inject(PlacesService);
   private destroyRef = inject(DestroyRef);
 
+  places = this.placeServ.loadedUserPlaces;
+
   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);
       },

src/app/services/places.service.ts

@@ -21,13 +21,35 @@ export class PlacesService {
   }
 
   loadUserPlaces() {
-    return this.fetchPlaces('/api/v2/user-places', 'Error loading user places!');
+    return this.fetchPlaces('/api/v2/user-places', 'Error loading user places!').pipe(
+      tap({
+        next: resp => {
+          if (resp) {
+            this.userPlaces.set(resp.places);
+          }
+        },
+      }),
+    );
   }
 
-  addPlaceToUserPlaces(placeId: string) {
-    return this.http.put('/api/v2/user-places', {
-      placeId,
-    });
+  addPlaceToUserPlaces(place: Place) {
+    const prevPlaces = this.userPlaces();
+
+    if (!prevPlaces.some(p => p.id === place.id)) {
+      // optimistic update
+      this.userPlaces.set([...prevPlaces, place]);
+    }
+
+    return this.http
+      .put('/api/v2/user-places', {
+        placeId: place.id,
+      })
+      .pipe(
+        catchError(err => {
+          this.userPlaces.set(prevPlaces);
+          return throwError(() => new Error('Unable to store the selected place!'));
+        }),
+      );
   }
 
   removeUserPlace(place: Place) {}