feat(locations): add locations component with API integration and upd…

.github/workflows/website-lint.yml

@@ -0,0 +1,26 @@
+name: Website Linter check
+
+on:
+  pull_request:
+    paths:
+      - 'apps/website/**'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install Dependencies
+        working-directory: ./apps/website
+        run: npm ci
+
+      - name: Run ESLint
+        working-directory: ./apps/website
+        run: npm run lint

apps/website/src/app/app.routes.ts

@@ -24,6 +24,10 @@ export const routes: Routes = [
             './domains/products/pages/product-detail/product-detail.component'
           ),
       },
+      {
+        path: 'locations',
+        loadComponent: () => import('./domains/locations/locations.component'),
+      },
     ],
   },
   {

apps/website/src/app/domains/locations/locations.component.html

@@ -1 +1,9 @@
-<p>locations works!</p>
+<ul>
+  @for (location of locations; track location.id) {
+    <li>
+      <a>
+        {{ location.name }}
+      </a>
+    </li>
+  }
+</ul>

apps/website/src/app/domains/locations/locations.component.ts

@@ -1,9 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+interface Location {
+  id: number;
+  name: string;
+  description: string;
+  latitude: number;
+  longitude: number;
+}
 
 @Component({
   selector: 'app-locations',
   imports: [],
   templateUrl: './locations.component.html',
-  styleUrl: './locations.component.css',
 })
-export default class LocationsComponent {}
+export default class LocationsComponent implements OnInit {
+  locations: Location[] = [];
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.http
+      .get<Location[]>('https://api.escuelajs.co/api/v1/locations')
+      .subscribe(data => {
+        this.locations = data;
+      });
+  }
+
+  get name() {
+    return this.locations.map(location => location.name).join(', ');
+  }
+}