Merge pull request #6 from actionanand/features/1-http-feature

Features/1 http feature

Author: actionanand

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "develop": "ng serve --proxy-config proxy.json",
+    "develop": "ng serve --port 5600 --proxy-config proxy.conf.js",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "build:gh": "ng build --base-href /angular-http-project/",

proxy.conf.js

@@ -0,0 +1,25 @@
+// var defaultTarget = 'http://localhost:3000';
+var defaultTarget = 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io';
+
+module.exports = [
+  {
+    context: ['/api/v2/*'],
+    target: defaultTarget,
+    secure: false,
+    logLevel: 'debug',
+    changeOrigin: true,
+    pathRewrite: {
+      '^/api/v2/': '/',
+    },
+  },
+  {
+    context: ['/api/v2/**'],
+    target: defaultTarget,
+    secure: false,
+    logLevel: 'debug',
+    changeOrigin: true,
+    pathRewrite: {
+      '^/api/v2/': '/',
+    },
+  },
+];

proxy.json

@@ -1,20 +1,20 @@
 {
   "/api/v2/*": {
-    "target": "https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io",
+    "target": "http://localhost:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {
       "^/api/v2/": "/"
     }
   },
-  "/api/v1/*": {
+  "/api/v2/**": {
     "target": "http://localhost:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {
-      "^/api/v1/": "/"
+      "^/api/v2/": "/"
     }
   }
 }

src/app/app.component.html

@@ -1,10 +1,11 @@
+@if (error()) {
+  <app-error-modal title="An Error  has occurred!" [message]="error()" />
+}
+
 <header>
   <img src="logo.png" alt="Stylized globe" />
   <h1>PlacePicker</h1>
-  <p>
-    Create your personal collection of places you would like to visit or you
-    have visited.
-  </p>
+  <p>Create your personal collection of places you would like to visit or you have visited.</p>
 </header>
 
 <main>

src/app/app.component.ts

@@ -1,17 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 
 import { AvailablePlacesComponent } from './places/available-places/available-places.component';
 import { UserPlacesComponent } from './places/user-places/user-places.component';
+import { ErrorService } from './services/error.service';
+import { ErrorModalComponent } from './shared/modal/error-modal/error-modal.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [AvailablePlacesComponent, UserPlacesComponent],
+  imports: [AvailablePlacesComponent, UserPlacesComponent, ErrorModalComponent],
 })
 export class AppComponent {
-  styles = ['color: indigo', 'background: #90EE90', 'font-weight: bold', 'font-size: 18px'].join(';');
+  private styles = ['color: indigo', 'background: #90EE90', 'font-weight: bold', 'font-size: 18px'].join(';');
+  private errorServ = inject(ErrorService);
+  protected error = this.errorServ.error;
 
   constructor() {
     console.log(

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

@@ -8,8 +8,8 @@
   }
 
   @if (places()) {
-    <app-places [places]="places()!" />
-  } @else if (places()?.length === 0) {
+    <app-places [places]="places()!" (selectPlace)="onSelectPlaceRemove($event)" />
+  } @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,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',
@@ -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);
       },
@@ -39,4 +36,12 @@ export class UserPlacesComponent implements OnInit {
 
     this.destroyRef.onDestroy(() => availablePlaceSub.unsubscribe());
   }
+
+  onSelectPlaceRemove(place: Place) {
+    const removePlSub = this.placeServ.removeUserPlace(place).subscribe({
+      next: resp => console.log('Place renoved! ', resp),
+    });
+
+    this.destroyRef.onDestroy(() => removePlSub.unsubscribe());
+  }
 }

src/app/services/error.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorService {
+  private _error = signal('');
+
+  error = this._error.asReadonly();
+
+  showError(message: string) {
+    console.error(message);
+    this._error.set(message);
+  }
+
+  clearError() {
+    this._error.set('');
+  }
+}

src/app/services/places.service.ts

@@ -6,6 +6,7 @@ import { catchError, map, tap } from 'rxjs/operators';
 import { throwError } from 'rxjs';
 
 import { Place } from '../models/place.model';
+import { ErrorService } from './error.service';
 
 @Injectable({
   providedIn: 'root',
@@ -15,22 +16,61 @@ export class PlacesService {
   loadedUserPlaces = this.userPlaces.asReadonly();
 
   private http = inject(HttpClient);
+  private errorServ = inject(ErrorService);
 
   loadAvailablePlaces() {
     return this.fetchPlaces('/api/v2/places', 'Error loading available places!');
   }
 
   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);
+          this.errorServ.showError('Unable to store the selected place!');
+          return throwError(() => new Error('Unable to store the selected place!'));
+        }),
+      );
   }
 
-  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