Merge pull request #16 from FelipeDuarteLuna/08-01-23

08-01-2024 - Observables e Subjects

modules/data-access/product/src/index.ts

@@ -2,3 +2,4 @@ export * from './lib/models/product.model';
 export * from './lib/mocks/product.mock';
 export * from './lib/services/product-search/product-search.service';
 export * from './lib/services/recommended-products/recommended-products.service';
+export * from './lib/state/cart/cart.service';

modules/data-access/product/src/lib/state/cart/cart.service.ts

@@ -1,8 +1,20 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject, map } from 'rxjs';
+import { Product } from '../../models/product.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CartService {
-  constructor() {}
+  private CartSubject = new BehaviorSubject<Product[]>([]);
+  cart$ = this.CartSubject.asObservable();
+
+  productQuantity$ = this.CartSubject.pipe(map((products) => products.length));
+
+  addToCart(product: Product): void {
+    const cart = this.CartSubject.getValue();
+    this.CartSubject.next([...cart, product]);
+    // eslint-disable-next-line no-console
+    console.log(this.CartSubject.getValue());
+  }
 }

modules/feature/product/detail/src/lib/product-detail/product-detail.component.html

@@ -5,7 +5,13 @@
       <div class="product-detail__info">
         <h2>{{ product.description }}</h2>
         <p>{{ product.quantity | quantityDescription }}</p>
-        <button mat-raised-button color="primary">Adicionar ao carrinho</button>
+        <button
+          (click)="cartService.addToCart(product)"
+          mat-raised-button
+          color="primary"
+        >
+          Adicionar ao carrinho
+        </button>
       </div>
     </ng-container>
   </section>

modules/feature/product/detail/src/lib/product-detail/product-detail.component.ts

@@ -1,4 +1,8 @@
-import { Product, ProductSearchService } from 'product-data-access';
+import {
+  CartService,
+  Product,
+  ProductSearchService,
+} from 'product-data-access';
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
@@ -24,7 +28,10 @@ function getParamsId(): Observable<string> {
   styleUrl: './product-detail.component.scss',
 })
 export class ProductDetailComponent {
-  constructor(private productSearchService: ProductSearchService) {}
+  constructor(
+    private productSearchService: ProductSearchService,
+    public cartService: CartService
+  ) {}
 
   product$: Observable<Product> = getParamsId().pipe(
     switchMap((id) => this.productSearchService.getById(id))

modules/ui/product/src/components/cart/cart.component.html

@@ -0,0 +1,9 @@
+<button
+  mat-icon-button
+  [matBadge]="quantity"
+  matBadgeColor="warn"
+  color="accent"
+  attr.aria-label="Carrinho de compras com {{ quantity }} produtos"
+>
+  <mat-icon>shopping_cart</mat-icon>
+</button>

modules/ui/product/src/components/cart/cart.component.scss

@@ -0,0 +1,3 @@
+button {
+  color: #fff;
+}

modules/ui/product/src/components/cart/cart.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CartComponent } from './cart.component';
+
+describe('CartComponent', () => {
+  let component: CartComponent;
+  let fixture: ComponentFixture<CartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

modules/ui/product/src/components/cart/cart.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'lib-cart',
+  standalone: true,
+  imports: [CommonModule, MatBadgeModule, MatIconModule, MatButtonModule],
+  templateUrl: './cart.component.html',
+  styleUrl: './cart.component.scss',
+})
+export class CartComponent {
+  @Input() quantity!: number | null;
+}

modules/ui/product/src/index.ts

@@ -1 +1,3 @@
 export * from './components/product-card.component';
+
+export * from './components/cart/cart.component';

src/app/app.component.html

@@ -1,5 +1,5 @@
 <lib-header title="Ecommerce">
   <lib-product-search></lib-product-search>
-  <a> login</a>
+  <lib-cart [quantity]="cartService.productQuantity$ | async"></lib-cart>
 </lib-header>
 <router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { LayoutModule } from 'modules/layout';
 import { ProductSearchComponent } from 'product-search';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CartComponent } from 'product-ui';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
@@ -15,6 +16,7 @@ describe('AppComponent', () => {
         LayoutModule,
         ProductSearchComponent,
         HttpClientTestingModule,
+        CartComponent,
       ],
       declarations: [AppComponent],
     }).compileComponents();

src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { CartService } from 'product-data-access';
 import { Component } from '@angular/core';
 
 @Component({
@@ -7,4 +8,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'ecommerce';
+
+  constructor(public cartService: CartService) {}
 }

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ProductSearchComponent } from 'product-search';
 import { HttpErrorsInterceptor } from './interceptors/http-errors/http-errors.interceptor';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { CartComponent } from 'product-ui';
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,6 +21,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     BrowserAnimationsModule,
     ProductSearchComponent,
     MatSnackBarModule,
+    CartComponent,
   ],
   providers: [
     {