Página de categorías

creo estaría mejor si el profe escribe el código durante la clase, pasa que cuando copia y pega se mueve de archivos y por hacerlo rapido no explica claro lo que esta haciendo y es confuso

Aquí tenemos la url de la documentación de la API

A mi me estaba saliendo error al obtener el id con:

params.get('id')

lo que hice fue obtenerlo de esta forma:

this.categoryId = params['id'];

Para que les funcione para el 2023 tienen que modificar el archivo environment.ts:

export const environment = {
  production: false,
  API_URL: 'https://api.escuelajs.co/api/v1',
};

quedaria asi para las categories:

return this.http.get<Product[]>(`${this.apiUrl}/categories/${categoryId}/products`, { params })

hay que hacer ciertas modificacioens en las demas rutas, pero se puede usar el swagger UI como guia

Estoy lista

Buenas a todos, yo me desvié un poco de la línea que mantenía el profe y creé una paginación al estilo de page up page down, entonces para ello, en estos momentos mi código es algo diferente, pero lo más asombroso es que funciona para products en el home y en categories os dejo un avance aquí y un enlace al repo.

// category.component.ts
onPageUp(){
    if (this.limit * (this.page + 1) < this.MAX_PRODUCTS_IN_BD ) {
      this.page += 1;
      this.offset = this.limit * this.page;
      this.productsService.getProductsByPage(this.limit, this.offset)
        .subscribe(data => {
          this.products = data;
      });
    }
  }

// category.component.html
<app-products [products]="products" [page]="page" (pageUp)="onPageUp()" (pageDown)="onPageDown()"></app-products>

// products.componet.ts
@Input() products: Product[] = [];
  @Input() page=0;

  @Output() pageUp = new EventEmitter();
  @Output() pageDown = new EventEmitter();
 // ...
  onPageUp(){
    this.pageUp.emit();
  }
  onPageDown(){
    this.pageDown.emit();
  }

ver todo el código en este repo de github

repositorio

Solucion del reto

loadMore(): void {
    this.route.paramMap.subscribe((params) => {
      this.categoryId = params.get('id');
      if (this.categoryId) {
        this.productsService
          .getByCategory(this.categoryId, this.limit, this.offset)
          .subscribe((data) => {
            this.products = this.products.concat(
              data.filter((product) => product.images.length > 0)
            );
            this.offset += this.limit;
          });
      }
    });
  }

Lo que hice en este caso es manejar un router a un home despues de que haga login, esto validado con Guards.

Y ya lo que hice fue manejar todas las peticiones desde el products, aunque no se si es buena practica siento que es mas ordenado la manera que lo hace el profe. Pero les comparto el codigo.

Esto sin nada de inputs ni nada de logica en el home.

products.ts component

constructor(
    private storeServices: StoreService,
    private productService: ProductsService,
    private filesService: FilesService,
    private activatedRoute: ActivatedRoute
  ) {
    this.myShoppingCart = this.storeServices.getShopingCart()

  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params => {
      this.categoryId = params['id'];
      if (this.categoryId) {
        this.loadCategoryProducts(this.categoryId)
      }
    });
    this.loadProducts()
  }

  loadCategoryProducts(categoryId: string) {
    this.categoryId = categoryId;
    this.products = [];
    this.offset = 0;
    this.loadProducts();
  }

  loadProducts() {
    const request$ = this.categoryId ?
      this.productService.getCategory(this.categoryId, this.limit, this.offset) :
      this.productService.getAllProducts(this.limit, this.offset)

    request$
      .subscribe({
        next: (data: Product[]) => {
          this.products = this.products.concat(data);
          this.offset += this.limit;
          if (data.length === 0) {
            this.offset = 0;
          }
        },
        error: (error: string) => {
          this.loadingProducts = false
          Swal.fire({
            title: 'Error!',
            text: error,
            icon: 'error',
            confirmButtonText: 'Ok',
          });
        },
      });
  }

  loadMoreProducts() {
    this.offset += this.limit;
    this.loadProducts();
  }