feat: use data api for products

client/src/app/products/products.html

@@ -56,8 +56,7 @@
 </div>
 <hr />
 <p *ngIf="products.length === 0">
-  Oh dear, it appears there are no products in this category yet! Please check
-  back later.
+  Products are loading, please wait a moment...
 </p>
 <div id="products">
   <div *ngFor="let product of products">

client/src/app/products/products.ts

@@ -6,7 +6,7 @@
 
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
-import { products } from "../config/products.js";
+import { Products as ProductService, type Product } from "../products.js";
 
 @Component({
   imports:     [ CommonModule ],
@@ -15,9 +15,9 @@ import { products } from "../config/products.js";
   templateUrl: "./products.html",
 })
 export class Products {
-  public view: (typeof products)[number]["category"] | "all"
+  public view: Product[number]["category"] | "all"
     = "all";
-  public products:         typeof products = [];
+  public products:         Product = [];
   public readonly filters: {
     wip:  boolean;
     prod: boolean;
@@ -29,16 +29,17 @@ export class Products {
       prod: true,
       wip:  true,
     };
+  private allProducts: Product = [];
 
   public constructor() {
-    this.selectCategory("all");
+    void this.fetchProducts();
   }
 
   public selectCategory(
-    category: (typeof products)[number]["category"] | "all",
+    category: Product[number]["category"] | "all",
   ): void {
     this.view = category;
-    const sortedProducts = products.sort((a, b) => {
+    const sortedProducts = [ ...this.allProducts ].sort((a, b) => {
       return a.name.localeCompare(b.name);
     });
     if (this.view === "all") {
@@ -59,7 +60,7 @@ export class Products {
 
   private applyFilters(): void {
     this.selectCategory(this.view);
-    this.products = this.products.filter((product) => {
+    this.products = [ ...this.allProducts ].filter((product) => {
       if (!this.filters.wip && product.wip) {
         return false;
       }
@@ -75,4 +76,10 @@ export class Products {
       return true;
     });
   }
+
+  private async fetchProducts(): Promise<void> {
+    const productService = new ProductService();
+    this.allProducts = await productService.getProducts();
+    this.selectCategory("all");
+  }
 }