refactor: use components for home page

app/src/app/components/map/map.component.html

@@ -0,0 +1 @@
+<capacitor-google-map #mapRef></capacitor-google-map>

app/src/app/components/map/map.component.scss

@@ -0,0 +1,9 @@
+capacitor-google-map {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+ion-content {
+  --background: none;
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [MapComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { destroyMap, loadMap } from '../../state/map/map.actions';
+import { AppState } from '../../state/app.state';
+import { Store } from '@ngrx/store';
+import { MapConfiguration } from './map-configuration';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss'],
+})
+export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('mapRef', { static: false }) mapRef?: ElementRef;
+
+  constructor(private store: Store<AppState>) {}
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    if (this.mapRef) {
+      this.store.dispatch(
+        loadMap({ map: this.mapRef, config: MapConfiguration }),
+      );
+    } else {
+      console.log('TODO: MapRef is undefined');
+    }
+  }
+
+  ngOnDestroy() {
+    this.store.dispatch(destroyMap());
+  }
+}

app/src/app/components/refuge-modal/refuge-modal.component.html

@@ -0,0 +1,18 @@
+<ng-container *ngIf="modalState$ | async as state">
+  <ion-modal
+    #modal
+    [isOpen]="state.isOpen"
+    [breakpoints]="[0, 0.3, 1]"
+    [initialBreakpoint]="0.3"
+    (ionModalDidDismiss)="dismissedModal()"
+    class="ion-modal"
+  >
+    <ng-template class="example-modal">
+      <app-refuge
+        class="example-modal"
+        [refuge]="state.refuge"
+        (clickedBar)="changeCurrentModalSize(modal)"
+      ></app-refuge>
+    </ng-template>
+  </ion-modal>
+</ng-container>

app/src/app/components/refuge-modal/refuge-modal.component.scss

@@ -0,0 +1,3 @@
+.ion-modal {
+  --width: 100%;
+}

app/src/app/components/refuge-modal/refuge-modal.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { RefugeModalComponent } from './refuge-modal.component';
+
+describe('RefugeModalComponent', () => {
+  let component: RefugeModalComponent;
+  let fixture: ComponentFixture<RefugeModalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RefugeModalComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RefugeModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app/src/app/components/refuge-modal/refuge-modal.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { closeModal } from '../../state/components/modal/modal.actions';
+import { selectModalState } from '../../state/components/modal/modal.selectors';
+import { AppState } from '../../state/app.state';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-refuge-modal',
+  templateUrl: './refuge-modal.component.html',
+  styleUrls: ['./refuge-modal.component.scss'],
+})
+export class RefugeModalComponent implements OnInit {
+  modalState$ = this.store.select(selectModalState);
+
+  constructor(private store: Store<AppState>) {}
+
+  ngOnInit() {}
+
+  dismissedModal() {
+    this.store.dispatch(closeModal());
+  }
+
+  changeCurrentModalSize(modal: IonModal) {
+    modal.getCurrentBreakpoint().then((breakpoint) => {
+      if (breakpoint == 1) modal.setCurrentBreakpoint(0.3).then();
+      if (breakpoint == 0.3) modal.setCurrentBreakpoint(1).then();
+    });
+  }
+}

app/src/app/pages/home/home.module.ts

@@ -8,6 +8,8 @@ import { HomePageRoutingModule } from './home-routing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { RefugePageModule } from '../refuge/refuge.module';
 import { SearchbarLocationComponent } from '../../components/searchbar-location/searchbar-location.component';
+import { RefugeModalComponent } from '../../components/refuge-modal/refuge-modal.component';
+import { MapComponent } from '../../components/map/map.component';
 
 @NgModule({
   imports: [
@@ -18,7 +20,12 @@ import { SearchbarLocationComponent } from '../../components/searchbar-location/
     TranslateModule,
     RefugePageModule,
   ],
-  declarations: [HomePage, SearchbarLocationComponent],
+  declarations: [
+    HomePage,
+    SearchbarLocationComponent,
+    RefugeModalComponent,
+    MapComponent,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class HomePageModule {}

app/src/app/pages/home/home.page.html

@@ -1,22 +1,5 @@
 <app-searchbar-location></app-searchbar-location>
 <ion-content [fullscreen]="true">
-  <ng-container *ngIf="modalState$ | async as state">
-    <ion-modal
-      #modal
-      [isOpen]="state.isOpen"
-      [breakpoints]="[0, 0.3, 1]"
-      [initialBreakpoint]="0.3"
-      (ionModalDidDismiss)="dismissedModal()"
-      class="ion-modal"
-    >
-      <ng-template class="example-modal">
-        <app-refuge
-          class="example-modal"
-          [refuge]="state.refuge"
-          (clickedBar)="changeCurrentModalSize(modal)"
-        ></app-refuge>
-      </ng-template>
-    </ion-modal>
-  </ng-container>
-  <capacitor-google-map #mapRef></capacitor-google-map>
+  <app-refuge-modal></app-refuge-modal>
+  <app-map></app-map>
 </ion-content>

app/src/app/pages/home/home.page.scss

@@ -1,71 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-
-capacitor-google-map {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-ion-content {
-  --background: none;
-}
-
-#container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-
-ion-list {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.ion-modal {
-  --width: 100%;
-}

app/src/app/pages/home/home.page.ts

@@ -1,31 +1,9 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnDestroy,
-  ViewChild,
-} from '@angular/core';
-import { Coordinates } from '../../services/search/search.service';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { MapConfiguration } from './map-configuration';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../state/app.state';
-import { selectModalState } from '../../state/components/modal/modal.selectors';
-import {
-  closeModal,
-  openModal,
-} from '../../state/components/modal/modal.actions';
-import { destroyMap, loadMap, moveMapTo } from '../../state/map/map.actions';
-import {
-  selectAutoCompletion,
-  selectCurrentSearch,
-} from '../../state/components/search/search.selectors';
-import {
-  addSearch,
-  clearSearch,
-} from '../../state/components/search/search.actions';
-import { first, map, takeWhile } from 'rxjs';
-import { IonModal, SearchbarCustomEvent } from '@ionic/angular';
+import { openModal } from '../../state/components/modal/modal.actions';
+import { map, takeWhile } from 'rxjs';
 import { getRefuges } from '../../state/map/map.selectors';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { resourceNotFound } from '../../state/errors/error.actions';
@@ -35,11 +13,7 @@ import { resourceNotFound } from '../../state/errors/error.actions';
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
-export class HomePage implements AfterViewInit, OnDestroy {
-  @ViewChild('mapRef', { static: false }) mapRef?: ElementRef;
-  modalState$ = this.store.select(selectModalState);
-  searchCompletion$ = this.store.select(selectAutoCompletion);
-  searchValue$ = this.store.select(selectCurrentSearch);
+export class HomePage implements OnInit {
   refuge$ = this.store.select(getRefuges).pipe(
     takeWhile(() => this.route.snapshot.paramMap.get('id') !== null),
     map((refuges) =>
@@ -59,45 +33,5 @@ export class HomePage implements AfterViewInit, OnDestroy {
     });
   }
 
-  moveMapTo(coordinates: Coordinates) {
-    this.store.dispatch(moveMapTo({ coordinates }));
-    this.store.dispatch(clearSearch());
-  }
-
-  selectFirstSearchResult() {
-    this.searchCompletion$.pipe(first()).subscribe((completion) => {
-      if (completion.length === 0) return;
-      this.moveMapTo(completion[0].coordinate);
-    });
-  }
-
-  onSearchChange(value: SearchbarCustomEvent) {
-    const search = value.detail.value as string;
-    this.store.dispatch(addSearch({ search }));
-  }
-
-  ngAfterViewInit() {
-    if (this.mapRef) {
-      this.store.dispatch(
-        loadMap({ map: this.mapRef, config: MapConfiguration }),
-      );
-    } else {
-      console.log('MapRef is undefined');
-    }
-  }
-
-  dismissedModal() {
-    this.store.dispatch(closeModal());
-  }
-
-  ngOnDestroy() {
-    this.store.dispatch(destroyMap());
-  }
-
-  changeCurrentModalSize(modal: IonModal) {
-    modal.getCurrentBreakpoint().then((breakpoint) => {
-      if (breakpoint == 1) modal.setCurrentBreakpoint(0.3).then();
-      if (breakpoint == 0.3) modal.setCurrentBreakpoint(1).then();
-    });
-  }
+  ngOnInit() {}
 }