Merge pull request #38 from MarshMapper/add-breakpoint-service

Create common breakpoint service for responsive controls

src/app/components/arc-map/arc-map.component.ts

@@ -1,12 +1,9 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { defineCustomElements } from "@arcgis/map-components/dist/loader";
 import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
 import { CommonModule } from '@angular/common';
 import { ComponentLibraryModule } from '@arcgis/map-components-angular';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { MatTabsModule } from '@angular/material/tabs';
-
-import { map, shareReplay } from 'rxjs/operators';
 import { CalciteComponentsModule } from '@esri/calcite-components-angular';
 import { ProtectedAreasService } from '../../services/protected-areas.service';
 import { UnprotectedAreasService } from '../../services/unprotected-areas.service';
@@ -22,6 +19,7 @@ import Layer from '@arcgis/core/layers/Layer';
 import { FeatureListComponent } from "../feature-list/feature-list.component";
 import { BehaviorSubject, Subject } from 'rxjs';
 import { LayerControlPanelComponent } from "../layer-control-panel/layer-control-panel.component";
+import { BreakpointService } from '../../services/breakpoint.service';
 
 @Component({
   selector: 'app-arc-map',
@@ -35,21 +33,14 @@ export class ArcMapComponent implements OnInit {
   public isLoading: boolean = true;
   public showInfoPanel: boolean = true;
   public isSmallPortrait: boolean = false;
-  private breakpointObserver = inject(BreakpointObserver);
   public protectedLayerViewSubject: Subject<__esri.FeatureLayerView> = new Subject<__esri.FeatureLayerView>();
   public overlayLayersSubject: BehaviorSubject<Layer[]> = new BehaviorSubject<Layer[]>([]);
 
-  isSmallPortrait$ = this.breakpointObserver.observe([
-    Breakpoints.TabletPortrait,
-    Breakpoints.HandsetPortrait])
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
   constructor(private protectedAreasService: ProtectedAreasService,
     private unprotectedAreasService: UnprotectedAreasService,
     private njHistoricalMapsService: NjHistoricalMapsService,
-    private progressService: ProgressService
+    private progressService: ProgressService,
+    private breakpointService: BreakpointService
   ) { }
 
   arcgisViewReadyChange(event: any) {
@@ -110,7 +101,7 @@ export class ArcMapComponent implements OnInit {
   ngOnInit(): void {
     defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" });
     defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.5.1/assets" });
-    this.isSmallPortrait$.subscribe((isSmallPortrait) => {
+    this.breakpointService.isSmallPortrait$.subscribe((isSmallPortrait) => {
       this.isSmallPortrait = isSmallPortrait;
     });
     this.progressService.setWorkInProgress(true);

src/app/components/feature-list/feature-list.component.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { map, Observable, shareReplay } from 'rxjs';
-import { AfterViewInit, Component, inject, Input, OnInit, ViewChild } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { when, whenOnce } from '@arcgis/core/core/reactiveUtils';
+import { BreakpointService } from '../../services/breakpoint.service';
 
 function getRangeLabel(page: number, pageSize: number, length: number): string {
   if (length === 0 || pageSize === 0) {
@@ -36,7 +36,6 @@ function CustomPaginator() {
 })
 export class FeatureListComponent implements OnInit, AfterViewInit {
   public isSmallPortrait: boolean = false;
-  private breakpointObserver = inject(BreakpointObserver);
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @Input() featureLayerView$!: Observable<__esri.FeatureLayerView>;
   featureLayerView!: __esri.FeatureLayerView;
@@ -45,15 +44,10 @@ export class FeatureListComponent implements OnInit, AfterViewInit {
   displayedColumns: string[] = ['name']; // Only 'name' column is displayed
   dataSource = new MatTableDataSource();
 
-  isSmallPortrait$ = this.breakpointObserver.observe([
-    Breakpoints.TabletPortrait,
-    Breakpoints.HandsetPortrait])
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
- ngOnInit(): void {
-    this.isSmallPortrait$.subscribe((isSmallPortrait) => {
+  constructor(private breakpointService: BreakpointService) { }
+
+  ngOnInit(): void {
+    this.breakpointService.isSmallPortrait$.subscribe((isSmallPortrait) => {
       this.isSmallPortrait = isSmallPortrait;
     });
     // parent component will pass in the featureLayerView observable and emit a new value

src/app/components/layer-control-panel/layer-control-panel.component.ts

@@ -1,10 +1,10 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import Layer from '@arcgis/core/layers/Layer';
-import { map, Observable, shareReplay } from 'rxjs';
+import { Observable } from 'rxjs';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { BreakpointService } from '../../services/breakpoint.service';
 
 @Component({
   selector: 'app-layer-control-panel',
@@ -16,16 +16,11 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 export class LayerControlPanelComponent implements OnInit {
   @Input() overlayLayers$!: Observable<Layer[]>;
   public isSmallPortrait: boolean = false;
-  private breakpointObserver = inject(BreakpointObserver);
-  isSmallPortrait$ = this.breakpointObserver.observe([
-    Breakpoints.TabletPortrait,
-    Breakpoints.HandsetPortrait])
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
+
+  constructor(private breakpointService: BreakpointService) { }
+
   ngOnInit(): void {
-    this.isSmallPortrait$.subscribe((isSmallPortrait) => {
+    this.breakpointService.isSmallPortrait$.subscribe((isSmallPortrait) => {
       this.isSmallPortrait = isSmallPortrait;
     });
   }

src/app/services/breakpoint.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BreakpointService } from './breakpoint.service';
+
+describe('BreakpointService', () => {
+  let service: BreakpointService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BreakpointService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/breakpoint.service.ts

@@ -0,0 +1,18 @@
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { inject, Injectable } from '@angular/core';
+import { map, shareReplay } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BreakpointService {
+  private breakpointObserver = inject(BreakpointObserver);
+  isSmallPortrait$ = this.breakpointObserver.observe([
+    Breakpoints.TabletPortrait,
+    Breakpoints.HandsetPortrait])
+    .pipe(
+      map(result => result.matches),
+      shareReplay()
+    );
+  constructor() { }
+}