Features/1 http feature

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/',
+};

src/environments/environment.ts

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