refactoring (#532)

src/app/shared/components/map/map.component.ts

@@ -23,9 +23,6 @@ export class MapComponent implements AfterViewInit, OnDestroy{
   @Select(FilterState.city)
   city$ :Observable<City>;
 
-  @Select(FilterState.filteredWorkshops)
-  filteredWorkshops$: Observable<WorkshopFilterCard>;
-
   destroy$: Subject<boolean> = new Subject<boolean>();
 
   public defaultCoords: Coords;
@@ -34,6 +31,7 @@ export class MapComponent implements AfterViewInit, OnDestroy{
 
   @Input() addressFormGroup: FormGroup;
   @Input() isCreateWorkShops: boolean ;
+  @Input() filteredWorkshops$: Observable<WorkshopFilterCard>;
 
   @Output() setAddressEvent = new EventEmitter<Address>();
   @Output() selectedAddress = new EventEmitter<Address>();
@@ -111,29 +109,27 @@ export class MapComponent implements AfterViewInit, OnDestroy{
         this.flyTo(this.defaultCoords);
     });
 
-    if (!this.isCreateWorkShops) {
-
-      this.filteredWorkshops$
+    this.filteredWorkshops$ && this.filteredWorkshops$
       .pipe(takeUntil(this.destroy$), filter((filteredWorkshops)=> !!filteredWorkshops))
       .subscribe(filteredWorkshops => {
         this.workshopMarkers.map((m) => this.map.removeLayer(m.marker));
         this.workshopMarkers = [];
         this.workshops = filteredWorkshops.entities;
         filteredWorkshops.entities.forEach((workshop: WorkshopCard) => this.setAddressLocation(workshop.address));
       });
-    } else {
-      //cheking if user edit workshop information
-      if (this.addressFormGroup.value.latitude) this.setAddressLocation(this.addressFormGroup.value);
+
+
+    // cheking if user edit workshop information
+    if (this.addressFormGroup) {
+      this.addressFormGroup.value.latitude && this.setAddressLocation(this.addressFormGroup.value);
 
       this.addressFormGroup.valueChanges.pipe(
         debounceTime(500)
       ).subscribe((address: Address) => {
         this.setAddressLocation(address);
       });
-
     }
 
-
   }
 
   /**

src/app/shell/personal-cabinet/provider/create-workshop/create-address/create-address.component.html

@@ -28,6 +28,6 @@
     <p>Або позначте на карті</p>
   </div>
   <div class="map">
-    <app-map [addressFormGroup]="AddressFormGroup" [isCreateWorkShops]="true" (setAddressEvent)="onReceiveAddressFromMap($event)"></app-map>
+    <app-map [addressFormGroup]="AddressFormGroup" (setAddressEvent)="onReceiveAddressFromMap($event)"></app-map>
   </div>
 </form>

src/app/shell/result/result.component.html

@@ -16,7 +16,7 @@ <h3>Знайдено {{(filteredWorkshops$ | async)?.totalAmount}} гурткі
   </mat-drawer>
   <mat-drawer-content [style.marginLeft]="isFiltersVisible ? '326px' : '0'">
     <div *ngIf="currentView === viewType.map; else ShowData;" fxLayout='row wrap' fxLayoutAlign='start'>
-      <app-workshop-map-view-list [filteredWorkshops]="filteredWorkshops$ | async"></app-workshop-map-view-list>
+      <app-workshop-map-view-list [filteredWorkshops$]="filteredWorkshops$"></app-workshop-map-view-list>
 
     </div>
     <ng-template #ShowData>

src/app/shell/result/result.component.spec.ts

@@ -7,7 +7,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormGroup } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
-import { Workshop, WorkshopCard } from 'src/app/shared/models/workshop.model';
+import { Workshop, WorkshopCard, WorkshopFilterCard } from 'src/app/shared/models/workshop.model';
 import { Observable } from 'rxjs';
 
 describe('ResultComponent', () => {
@@ -79,7 +79,7 @@ class MockWorkshopCardsListComponent {
   template: ''
 })
 class MockWorkshopMapViewListComponent {
-  @Input() filteredWorkshops: Workshop[];
+  @Input() filteredWorkshops$: Observable<WorkshopFilterCard>;
 }
 @Component({
   selector: 'app-scroll-to-top',

src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html

@@ -12,7 +12,7 @@
 
   <div [ngClass]="selectedWorkshops.length ? 'map-half' : 'map-full'">
     <div fxLayout="row" fxLayoutAlign="center">
-      <app-map class="map" (selectedAddress)="onSelectedAddress($event)"></app-map>
+      <app-map class="map" [filteredWorkshops$]="filteredWorkshops$" (selectedAddress)="onSelectedAddress($event)"></app-map>
     </div>
   </div>
 
@@ -21,4 +21,4 @@
       [workshop]="selectedWorkshop" [isMainPage]="true" [isHorizontalView]="true"
       [@fade]="workshopDetailsAnimationState" (@fade.done)="fadeAnimationDone()">
     </app-workshop-card>
-  </div>
+  </div>

src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.spec.ts

@@ -8,9 +8,9 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { NgxsModule, Store } from '@ngxs/store';
 import { PaginationElement } from 'src/app/shared/models/paginationElement.model';
 import { Parent } from 'src/app/shared/models/parent.model';
-import { Workshop } from 'src/app/shared/models/workshop.model';
-
+import { Workshop, WorkshopFilterCard } from 'src/app/shared/models/workshop.model';
 import { WorkshopMapViewListComponent } from './workshop-map-view-list.component';
+import { Observable, of } from 'rxjs';
 
 describe('WorkshopMapViewListComponent', () => {
   let component: WorkshopMapViewListComponent;
@@ -38,6 +38,7 @@ describe('WorkshopMapViewListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WorkshopMapViewListComponent);
     component = fixture.componentInstance;
+    component.filteredWorkshops$ = of(null);
     fixture.detectChanges();
   });
 
@@ -64,6 +65,7 @@ class MockMapListWorkshopCardComponent {
 class MockResultMapComponent {
   @Input() addressFormGroup: FormGroup;
   @Input() workshops: Workshop[];
+  @Input() filteredWorkshops$: Observable<WorkshopFilterCard>;
 }
 @Component({
   selector: 'app-paginator',
@@ -72,4 +74,4 @@ class MockResultMapComponent {
 class MockMapWorkshopCardPaginatorComponent {
   @Input() totalEntities: number;
   @Input() currentPage: PaginationElement;
-}
+}

src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.ts

@@ -1,7 +1,8 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild,OnDestroy } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 import { Constants } from 'src/app/shared/constants/constants';
 import { Address } from 'src/app/shared/models/address.model';
 import { PaginationElement } from 'src/app/shared/models/paginationElement.model';
@@ -23,11 +24,11 @@ import { Util } from 'src/app/shared/utils/utils';
     ])
   ]
 })
-export class WorkshopMapViewListComponent implements OnInit {
+export class WorkshopMapViewListComponent implements OnInit, OnDestroy {
 
   constructor(private store: Store) { }
-
-  @Input() public filteredWorkshops: WorkshopFilterCard;
+  destroy$: Subject<boolean> = new Subject<boolean>();
+  @Input() public filteredWorkshops$: Observable<WorkshopFilterCard>;
   workshops: WorkshopCard[];
   public selectedWorkshops: WorkshopCard[] = [];
   public isSelectedMarker = false;
@@ -43,8 +44,12 @@ export class WorkshopMapViewListComponent implements OnInit {
   widthOfWorkshopCard = Constants.WIDTH_OF_WORKSHOP_CARD;
 
   ngOnInit() {
-    this.workshops = this.filteredWorkshops?.entities;
-
+    this.filteredWorkshops$
+      .pipe(takeUntil(this.destroy$), filter((filteredWorkshops)=> !!filteredWorkshops))
+      .subscribe(filteredWorkshops => {
+        this.workshops = filteredWorkshops.entities
+      });
+
   }
 
   onSelectedAddress(address: Address): void {
@@ -72,4 +77,9 @@ export class WorkshopMapViewListComponent implements OnInit {
     this.store.dispatch(new PageChange(page));
   }
 
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
+  }
+
 }