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

Features/1 http feature

Author: actionanand

README.md

@@ -19,6 +19,12 @@ Change the value of `target` in `proxy file` as your backend api url
 yarn develop
 ```
 
+## Generating Environmental files in Angular 15+
+
+```sh
+ng g environments
+```
+
 ## Cloning Guide
 
 1.  Clone only the remote primary HEAD (default: origin/master)

angular.json

@@ -51,7 +51,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

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

@@ -1,7 +1,15 @@
 <app-places-container title="Available Places">
+  @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()!" />
+    <app-places [places]="places()!" (selectPlace)="onSelectPlaces($event)" />
   } @else if (places()?.length === 0) {
-  <p class="fallback-text">Unfortunately, no places could be found.</p>
+    <p class="fallback-text">Unfortunately, no places could be found.</p>
   }
 </app-places-container>

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

@@ -1,8 +1,9 @@
-import { Component, signal } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 
 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',
@@ -11,6 +12,39 @@ import { PlacesContainerComponent } from '../places-container/places-container.c
   styleUrl: './available-places.component.css',
   imports: [PlacesComponent, PlacesContainerComponent],
 })
-export class AvailablePlacesComponent {
+export class AvailablePlacesComponent 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.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) {
+    const selectPlaceSub = this.placeServ.addPlaceToUserPlaces(selectedPlace.id).subscribe({
+      next: resp => console.log('Place added. ', resp),
+    });
+
+    this.destroyRef.onDestroy(() => selectPlaceSub.unsubscribe());
+  }
 }

src/app/places/places.component.html

@@ -2,10 +2,7 @@
   @for (place of places(); track place.id) {
     <li class="place-item">
       <button (click)="onSelectPlace(place)">
-        <img
-          [src]="'http://localhost:3000/' + place.image.src"
-          [alt]="place.image.alt"
-        />
+        <img [src]="url + place.image.src" [alt]="place.image.alt" />
         <h3>{{ place.title }}</h3>
       </button>
     </li>

src/app/places/places.component.ts

@@ -1,6 +1,7 @@
 import { Component, input, output } from '@angular/core';
 
 import { Place } from '../models/place.model';
+import { environment as env } from '../../environments/environment.development';
 
 @Component({
   selector: 'app-places',
@@ -13,6 +14,8 @@ export class PlacesComponent {
   places = input.required<Place[]>();
   selectPlace = output<Place>();
 
+  protected url = env.backendUrl;
+
   onSelectPlace(place: Place) {
     this.selectPlace.emit(place);
   }

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', // it'll give full response including status code
+      })
+      .pipe(
+        tap(rawResp => {
+          console.log('Raw Response: ', rawResp);
+        }),
+        map(data => data.body),
+        catchError(error => {
+          console.error(error);
+          return throwError(() => new Error(errMsg));
+        }),
+      );
+  }
 }

src/environments/environment.development.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  backendUrl: 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/',
+};