user removed

Author: actionanand

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

@@ -8,7 +8,7 @@
   }
 
   @if (places()) {
-    <app-places [places]="places()!" />
+    <app-places [places]="places()!" (selectPlace)="onSelectPlaceRemoce($event)" />
   } @else if (places().length === 0) {
     <p class="fallback-text">Unfortunately, no places could be found.</p>
   }

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

@@ -2,8 +2,8 @@ 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';
+import { Place } from '../../models/place.model';
 
 @Component({
   selector: 'app-user-places',
@@ -36,4 +36,12 @@ export class UserPlacesComponent implements OnInit {
 
     this.destroyRef.onDestroy(() => availablePlaceSub.unsubscribe());
   }
+
+  onSelectPlaceRemoce(place: Place) {
+    const removePlSub = this.placeServ.removeUserPlace(place).subscribe({
+      next: resp => console.log('Place renoved! ', resp),
+    });
+
+    this.destroyRef.onDestroy(() => removePlSub.unsubscribe());
+  }
 }

src/app/services/places.service.ts

@@ -55,7 +55,22 @@ export class PlacesService {
       );
   }
 
-  removeUserPlace(place: Place) {}
+  removeUserPlace(place: Place) {
+    const prevPlaces = this.userPlaces();
+
+    if (prevPlaces.some(p => p.id === place.id)) {
+      // optimistic update
+      this.userPlaces.set(prevPlaces.filter(pl => pl.id !== place.id));
+    }
+
+    return this.http.delete('/api/v2/user-places/' + place.id).pipe(
+      catchError(err => {
+        this.userPlaces.set(prevPlaces);
+        this.errorServ.showError('Unable to remove the selected place!');
+        return throwError(() => new Error('Unable to remove the selected place!'));
+      }),
+    );
+  }
 
   private fetchPlaces(url: string, errMsg: string) {
     return this.http