fase-3

package.json

@@ -19,6 +19,9 @@
     "@angular/platform-browser": "~9.1.9",
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
+    "@ngrx/effects": "^9.2.1",
+    "@ngrx/store": "^9.2.1",
+    "@ngrx/store-devtools": "^9.2.1",
     "bootstrap": "^4.5.0",
     "js-search": "^2.0.0",
     "rxjs": "~6.5.4",

src/app/app-routing.module.ts

@@ -1,8 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { BookmarksPage } from './pages/bookmarks/bookmarks.page';
+import { HomePage } from 'src/app/pages/home/containers/home/home.page';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', component: HomePage },
+  { path: 'bookmarks', component: BookmarksPage },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -1,16 +1,33 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HomeModule } from './pages/home/home.module';
+import { BookmarksModule } from './pages/bookmarks/bookmarks.module';
+import { EffectsModule } from '@ngrx/effects';
+
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HomeModule,
+    BookmarksModule,
+    StoreModule.forRoot({}),
+    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
+    EffectsModule.forRoot([]),
+    HttpClientModule,
+
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/pages/bookmarks/bookmarks.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BookmarksPage } from './bookmarks.page';
+
+
+
+@NgModule({
+  declarations: [BookmarksPage],
+  imports: [
+    CommonModule
+  ]
+})
+export class BookmarksModule { }

src/app/pages/bookmarks/bookmarks.page.html

@@ -0,0 +1 @@
+<p>bookmarks works!</p>

src/app/pages/bookmarks/bookmarks.page.spec.ts

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

src/app/pages/bookmarks/bookmarks.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'jv-bookmarks',
+  templateUrl: './bookmarks.page.html',
+  styleUrls: ['./bookmarks.page.scss']
+})
+export class BookmarksPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/home/components/current-weather/current-weather.component.html

@@ -0,0 +1,17 @@
+<div class="card">
+    <div class="card-body">
+        <h2>{{ cityName }}</h2>
+
+        <jv-datailed-weather [weather]="cityWeather.weather"></jv-datailed-weather>
+
+        <div class="card-actions">
+            <a class="card-link" (click)="onToggleBookmark()">
+                Adicionar aos favoritos
+            </a>
+            <a class="card-link"
+                routerLink="/details"> 
+            Ver detalhes
+            </a>
+        </div>
+    </div>
+</div>

src/app/pages/home/components/current-weather/current-weather.component.spec.ts

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

src/app/pages/home/components/current-weather/current-weather.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, Output } from '@angular/core';
+import { EventEmitter } from 'events';
+import { CityWeather } from 'src/app/shared/models/weather.model';
+
+@Component({
+  selector: 'jv-current-weather',
+  templateUrl: './current-weather.component.html',
+  styleUrls: ['./current-weather.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CurrentWeatherComponent {
+
+  @Input() cityWeather: CityWeather;
+  @Output () toggleBookmark = new EventEmitter();
+
+  get cityName (): string {
+    return `${this.cityWeather.city.name}, ${this.cityWeather.city.country}`
+  };
+
+  onToggleBookmark() {
+    this.toggleBookmark.emit;
+  }
+
+}

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

@@ -0,0 +1,31 @@
+<div class="container-fluid">
+
+    <div class="search-container">
+        <div class="form-group">
+            <label></label>
+            <div>
+                <input class="form-control" [formControl]="searchControl">
+                <button class="btn btn-dark" 
+                    [disabled]="!searchControl.valid"
+                    (click)="doSearch()">Pesquisar</button>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Pesquisar com <i>autocomplete</i></label>
+        </div>
+
+    </div>
+
+    <jv-loader *ngIf="loading$ | async"></jv-loader>
+
+    <div *ngIf="!(loading$ | async) && !(error$ | async) && !!(cityWeather)">
+        <jv-current-weather [cityWeather]="cityWeather"
+                            (toggleBookmark)="onToggleBookmark()"></jv-current-weather>
+    </div>
+
+    <div *ngIf="!(loading$ | async) && error$ | async">
+        <a>Tente novamente</a>
+    </div>
+
+</div>

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

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

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

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { select, Store } from '@ngrx/store';
+
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { CityWeather } from 'src/app/shared/models/weather.model';
+import * as fromHomeActions from 'src/app/pages/home/state/home.actions';
+import * as fromHomeSelectors from 'src/app/pages/home/state/home.selector';
+import { Bookmark } from 'src/app/shared/models/bookmark.model';
+
+@Component({
+  selector: 'jv-home',
+  templateUrl: './home.page.html',
+  styleUrls: ['./home.page.scss']
+})
+export class HomePage implements OnInit {
+
+  cityWeather: CityWeather;
+  loading$: Observable<boolean>;
+  error$: Observable<boolean>;
+
+  searchControl: FormControl;
+
+  private componentDestroyed$ = new Subject();
+
+  constructor(private store: Store) { }
+
+  ngOnInit() {
+    this.searchControl = new FormControl('', Validators.required);
+
+    this.store
+    .pipe(select(fromHomeSelectors.selectCurrentWeather),
+          takeUntil(this.componentDestroyed$))
+    .subscribe(value => this.cityWeather = value)
+    this.loading$ = this.store.pipe(select(fromHomeSelectors.selectCurrentWeatherLoading));
+    this.error$ = this.store.pipe(select(fromHomeSelectors.selectCurrentWeatherError));
+  }
+
+  ngOnDestroy(){
+    this.componentDestroyed$.next();
+    this.componentDestroyed$.unsubscribe();
+  }
+
+
+  doSearch(){
+    const query = this.searchControl.value;
+    this.store.dispatch(fromHomeActions.loadCurrentWeather({ query }))
+  }
+
+  onToggleBookmark(){
+    const bookmark = new Bookmark();
+    bookmark.id = this.cityWeather.city.id
+    bookmark.name = this.cityWeather.city.name
+    bookmark.country = this.cityWeather.city.country
+    bookmark.coord = this.cityWeather.city.coord
+  }
+
+}

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

@@ -0,0 +1,25 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+
+import { HomePage } from 'src/app/pages/home/containers/home/home.page';
+import { homeReducer } from './state/home.reducer';
+import { HomeEffects } from './state/home.effects';
+import { ComponentsModule } from 'src/app/shared/components/components.module';
+import { CurrentWeatherComponent } from './components/current-weather/current-weather.component';
+
+@NgModule({
+  declarations: [HomePage, CurrentWeatherComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    StoreModule.forFeature('home', homeReducer),
+    EffectsModule.forFeature([HomeEffects]),
+    ComponentsModule,
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+})
+export class HomeModule { }

src/app/pages/home/state/home.actions.ts

@@ -0,0 +1,15 @@
+import { createAction, props } from "@ngrx/store";
+
+export const loadCurrentWeather = createAction(
+    '[Home], Load Current Weather',
+    props<{ query: string }>(),
+);
+
+export const loadCurrentWeatherSuccess = createAction(
+    '[Weather API] Load Current Weather Success',
+    props<{ entity: any }>(),
+);
+
+export const loadCurrentWeatherFailed = createAction(
+    '[Weather API] Load Current Weather Failed',
+);