From 09bd29d69bf6f8fb7ffaf9faf5fabe36ca610d67 Mon Sep 17 00:00:00 2001 From: romandivonchuk <74153212+romandivonchuk@users.noreply.github.com> Date: Tue, 12 Oct 2021 16:22:35 +0300 Subject: [PATCH] refactoring (#532) --- .../shared/components/map/map.component.ts | 18 ++++++-------- .../create-address.component.html | 2 +- src/app/shell/result/result.component.html | 2 +- src/app/shell/result/result.component.spec.ts | 4 ++-- .../workshop-map-view-list.component.html | 4 ++-- .../workshop-map-view-list.component.spec.ts | 8 ++++--- .../workshop-map-view-list.component.ts | 24 +++++++++++++------ 7 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/app/shared/components/map/map.component.ts b/src/app/shared/components/map/map.component.ts index 5fbe6fbb3e..c08712629f 100644 --- a/src/app/shared/components/map/map.component.ts +++ b/src/app/shared/components/map/map.component.ts @@ -23,9 +23,6 @@ export class MapComponent implements AfterViewInit, OnDestroy{ @Select(FilterState.city) city$ :Observable; - @Select(FilterState.filteredWorkshops) - filteredWorkshops$: Observable; - destroy$: Subject = new Subject(); public defaultCoords: Coords; @@ -34,6 +31,7 @@ export class MapComponent implements AfterViewInit, OnDestroy{ @Input() addressFormGroup: FormGroup; @Input() isCreateWorkShops: boolean ; + @Input() filteredWorkshops$: Observable; @Output() setAddressEvent = new EventEmitter
(); @Output() selectedAddress = new EventEmitter
(); @@ -111,9 +109,7 @@ 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)); @@ -121,19 +117,19 @@ export class MapComponent implements AfterViewInit, OnDestroy{ 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); }); - } - } /** diff --git a/src/app/shell/personal-cabinet/provider/create-workshop/create-address/create-address.component.html b/src/app/shell/personal-cabinet/provider/create-workshop/create-address/create-address.component.html index 9f5a715a62..7be21ebeb3 100644 --- a/src/app/shell/personal-cabinet/provider/create-workshop/create-address/create-address.component.html +++ b/src/app/shell/personal-cabinet/provider/create-workshop/create-address/create-address.component.html @@ -28,6 +28,6 @@

Або позначте на карті

- +
diff --git a/src/app/shell/result/result.component.html b/src/app/shell/result/result.component.html index 2c5e01816c..5f18d4d307 100644 --- a/src/app/shell/result/result.component.html +++ b/src/app/shell/result/result.component.html @@ -16,7 +16,7 @@

Знайдено {{(filteredWorkshops$ | async)?.totalAmount}} гурткі
- +
diff --git a/src/app/shell/result/result.component.spec.ts b/src/app/shell/result/result.component.spec.ts index 86c136f534..36ce5f0433 100644 --- a/src/app/shell/result/result.component.spec.ts +++ b/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; } @Component({ selector: 'app-scroll-to-top', diff --git a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html index 69ddc4b642..ae112f519c 100644 --- a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html +++ b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html @@ -12,7 +12,7 @@
- +
@@ -21,4 +21,4 @@ [workshop]="selectedWorkshop" [isMainPage]="true" [isHorizontalView]="true" [@fade]="workshopDetailsAnimationState" (@fade.done)="fadeAnimationDone()"> - \ No newline at end of file + diff --git a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.spec.ts b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.spec.ts index c5a6db6a10..0bdcc63b9e 100644 --- a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.spec.ts +++ b/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; } @Component({ selector: 'app-paginator', @@ -72,4 +74,4 @@ class MockResultMapComponent { class MockMapWorkshopCardPaginatorComponent { @Input() totalEntities: number; @Input() currentPage: PaginationElement; -} \ No newline at end of file +} diff --git a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.ts b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.ts index 19b90b9843..adcbb20fa3 100644 --- a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.ts +++ b/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 = new Subject(); + @Input() public filteredWorkshops$: Observable; 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(); + } + }