feat(app): add data service for heroes

Author: ismaelramosmeta

src/app/configs/app.config.ts

@@ -33,4 +33,9 @@ export const AppConfig: any = {
       'https://*.google-analytics.com',
     ],
   },
+  storage: {
+    keys: {
+      heroes: 'heroes',
+    },
+  },
 };

src/app/modules/hero/shared/hero-data.service.spec.ts

@@ -0,0 +1,57 @@
+/*
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { HeroDataService } from './hero-data.service';
+import { of } from 'rxjs';
+import { UsersService } from '~core/services/users.service';
+
+const userMock: any = { name: 'Isma', lang: 'es' };
+
+describe('ApplyDataService', () => {
+  let service: HeroDataService;
+  let usersServiceSpy: jasmine.SpyObj<UsersService>;
+
+  const spyUser = jasmine.createSpyObj('UsersService', ['getUser']);
+  const mockUser = () => {
+    usersServiceSpy = TestBed.inject(UsersService) as jasmine.SpyObj<UsersService>;
+    usersServiceSpy.getUser.and.returnValue(of(userMock));
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: [
+        HeroDataService,
+        { provide: UsersService, useValue: spyUser },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = TestBed.inject(HeroDataService);
+    mockUser();
+  });
+
+  it('#getUser', done => {
+    service.getUser().subscribe(user => {
+      expect(user.name).toBe(userMock.name);
+      done();
+    });
+  });
+
+  it('#setUser', done => {
+    service.setUser(userMock);
+
+    service.getUser().subscribe(user => {
+      expect(user.name).toBe(userMock.name);
+      done();
+    });
+  });
+
+  it('#cleanData', () => {
+    service.cleanData();
+    expect((service as any).call).toBeNull();
+  });
+});
+*/

src/app/modules/hero/shared/hero-data.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Observable, of, take } from 'rxjs';
+import { Hero } from '~modules/hero/shared/hero.model';
+import { AppConfig } from '~app/configs/app.config';
+import { HeroService } from '~modules/hero/shared/hero.service';
+import { StorageService } from '~shared/services/storage.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroDataService {
+  private heroes: Hero[] | null;
+
+  constructor(private readonly heroService: HeroService) {
+    this.heroes = StorageService.get(AppConfig.storage.keys.heroes) as unknown as Hero[];
+  }
+
+  searchHeroes(): Observable<Hero[]> {
+    if (this.heroes) {
+      return of(this.heroes);
+    }
+
+    const heroes$ = this.heroService.searchHeroes({ fetchPolicy: 'no-cache' });
+    heroes$.pipe(take(1)).subscribe(heroes => {
+      StorageService.set(AppConfig.storage.keys.heroes, JSON.stringify(heroes));
+    });
+    return heroes$;
+  }
+
+  flushCache() {
+    this.heroes = null;
+    StorageService.remove(AppConfig.storage.keys.heroes);
+  }
+}

src/app/modules/root/pages/home-page/home-page.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Hero } from '../../../hero/shared/hero.model';
 import { Observable, Subject, takeUntil } from 'rxjs';
-import { HeroService } from '../../../hero/shared/hero.service';
 import { EventsService, EventsTypes } from '../../../core/services/events.servide';
+import { HeroDataService } from '~modules/hero/shared/hero-data.service';
 
 @Component({
   selector: 'app-home-page',
@@ -14,7 +14,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
   heroes$: Observable<Hero[]> | undefined;
 
-  constructor(private heroService: HeroService, private eventsService: EventsService) {
+  constructor(private heroDataService: HeroDataService, private eventsService: EventsService) {
     // @ts-ignore
     if (window.Cypress) {
       // @ts-ignore
@@ -23,11 +23,12 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.heroes$ = this.heroService.searchHeroes({ fetchPolicy: 'no-cache' });
+    this.heroes$ = this.heroDataService.searchHeroes();
 
     this.eventsService.events$.pipe(takeUntil(this.destroy$)).subscribe(event => {
       if (event.type === EventsTypes.UPDATE_HEROES) {
-        this.heroes$ = this.heroService.searchHeroes({ fetchPolicy: 'no-cache' });
+        this.heroDataService.flushCache();
+        this.heroes$ = this.heroDataService.searchHeroes();
       }
     });
   }

src/app/modules/root/shared/search-bar/search-bar.component.ts

@@ -3,7 +3,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Hero } from '../../../hero/shared/hero.model';
 import { ROUTES_CONFIG } from '~app/configs/routes.config';
-import { HeroService } from '../../../hero/shared/hero.service';
+import { HeroDataService } from '~modules/hero/shared/hero-data.service';
 
 @Component({
   selector: 'app-search-bar',
@@ -15,13 +15,16 @@ export class SearchBarComponent implements OnInit {
   heroFormControl: FormControl;
   filteredHeroes: any;
 
-  constructor(private heroService: HeroService, @Inject(ROUTES_CONFIG) public routesConfig: any) {
+  constructor(
+    private heroDataService: HeroDataService,
+    @Inject(ROUTES_CONFIG) public routesConfig: any
+  ) {
     this.defaultHeroes = [];
     this.heroFormControl = new FormControl();
   }
 
   ngOnInit() {
-    this.heroService.searchHeroes({ fetchPolicy: 'no-cache' }).subscribe((heroes: Array<Hero>) => {
+    this.heroDataService.searchHeroes().subscribe((heroes: Array<Hero>) => {
       this.defaultHeroes = heroes;
 
       this.heroFormControl.valueChanges

src/app/shared/services/storage.service.ts

@@ -13,6 +13,22 @@ export enum StorageKey {
 export class StorageService {
   constructor() {}
 
+  static get(name: string): string | null {
+    try {
+      return JSON.parse(localStorage.getItem(name) as string);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  static set(name: string, value: any): void {
+    localStorage.setItem(name, value);
+  }
+
+  static remove(name: string): void {
+    localStorage.removeItem(name);
+  }
+
   getCookie(name: StorageKey): string | undefined {
     return Cookies.get(name);
   }