feat(json-server): removed part of json server

Author: Ismaestro

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "npm run server | npm run ng",
-    "server": "json-server --port 3000 --watch server/db.json --routes server/routes.json",
+    "start": "npm run ng",
     "ng": "ng serve --proxy-config proxy.conf.json",
+    "deploy": "ng build --prod --base-href /angular4-sample-app/ && angular-cli-ghpages",
     "tslint": "tslint \"src/**/*.ts\"; exit 0",
     "test": "ng test",
     "e2e": "npm run pree2e | protractor",
@@ -25,27 +25,27 @@
     "@angular/platform-browser-dynamic": "4.2.4",
     "@angular/platform-server": "4.2.4",
     "@angular/router": "4.2.4",
-    "bootstrap": "4.0.0-alpha.6",
-    "core-js": "2.4.1",
-    "font-awesome": "4.7.0",
-    "json-server": "0.10.1",
-    "ng2-translate": "5.0.0",
-    "rxjs": "5.4.1",
-    "ts-helpers": "1.1.2",
-    "zone.js": "0.8.12",
     "@types/jasmine": "2.5.53",
     "@types/node": "8.0.2",
+    "angular-cli-ghpages": "0.5.1",
+    "bootstrap": "4.0.0-alpha.6",
     "codelyzer": "3.1.1",
+    "core-js": "2.4.1",
+    "font-awesome": "4.7.0",
     "jasmine-core": "2.6.4",
     "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-jasmine": "1.1.0",
     "karma-remap-istanbul": "0.6.0",
+    "ng2-translate": "5.0.0",
     "protractor": "5.1.2",
+    "rxjs": "5.4.1",
+    "ts-helpers": "1.1.2",
     "ts-node": "3.1.0",
     "tslint": "5.4.3",
-    "typescript": "2.3.4"
+    "typescript": "2.3.4",
+    "zone.js": "0.8.12"
   }
 }

server/db.json

@@ -1,5 +1,5 @@
 import {TranslateStaticLoader} from 'ng2-translate';
 
 export function TranslateLoaderFactory(http: any) {
-  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
+  return new TranslateStaticLoader(http, 'assets/i18n', '.json');
 }

server/routes.json

@@ -11,7 +11,7 @@ export const AppConfig: IAppConfig = {
     heroById: heroesRoute + '/:id'
   },
   endpoints: {
-    heroes: 'api/heroes',
-    heroesPowers: 'api/heroesPowers'
+    heroes: 'https://jsonblob.com/api/jsonBlob/11ba5f87-5997-11e7-ae4c-997a6628ed33',
+    heroesPowers: 'https://jsonblob.com/api/jsonBlob/f8234363-5991-11e7-ae4c-eb7c024ddb08'
   }
 };

src/app/app.translate.factory.ts

@@ -12,7 +12,7 @@ import {HeroesModule}      from '../heroes/heroes.module';
 import {HeroRoutingModule} from '../heroes/heroes-routing.module';
 
 import {NavComponent}    from './nav/nav.component';
-import {FooterComponent} from "./footer/footer.component";
+import {FooterComponent} from './footer/footer.component';
 
 
 @NgModule({

src/app/config/app.config.ts

@@ -25,8 +25,8 @@ export class HeroFormComponent {
 
   onSubmit() {
     this.heroService.create(this.hero)
-      .then(hero => {
-        this.heroes.push(hero);
+      .then(heroes => {
+        this.heroes = heroes;
         this.selectedHero = null;
       });
   }

src/app/core/core.module.ts

@@ -27,7 +27,10 @@ export class HeroListComponent implements OnInit {
   }
 
   getHeroes(): void {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroService.getHeroes().then((heroes) => {
+      this.heroes = heroes;
+      localStorage.setItem('heroes', JSON.stringify(heroes));
+    });
   }
 
   ngOnInit(): void {

src/app/heroes/hero-create-new/hero-create-new.component.ts

@@ -1,17 +1,19 @@
-import {Injectable}     from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import {Http, Response} from '@angular/http';
-import {Observable}     from 'rxjs';
-
+import {Observable} from 'rxjs';
 import {Hero} from '../shared/hero.model';
+import {IAppConfig} from '../../config/iapp.config';
+import {APP_CONFIG} from '../../config/app.config';
 
 @Injectable()
 export class HeroSearchService {
-  constructor(private http: Http) {
+  constructor(private http: Http,
+              @Inject(APP_CONFIG) private appConfig: IAppConfig) {
   }
 
   search(term: string): Observable<Hero[]> {
     return this.http
-      .get(`api/heroes`)
+      .get(this.appConfig.endpoints.heroes)
       .map((res: Response) => {
         let matchedHeroes = [];
         let heroes = res.json();

src/app/heroes/hero-list/hero-list.component.ts

@@ -36,20 +36,28 @@ export class HeroService {
   }
 
   getHeroById(id: number): Promise<Hero> {
-    const url = `${this.heroesUrl}/${id}`;
+    const url = `${this.heroesUrl}`;
     return this.http.get(url)
       .toPromise()
-      .then(response => response.json() as Hero)
+      .then((response) => {
+        const heroesWithId = response.json().filter((hero) => {
+          return hero.id === id;
+        });
+        return heroesWithId.length === 1 ? heroesWithId[0] : {};
+      })
       .catch(HeroService.handleError);
   }
 
-  create(hero: Hero): Promise<Hero> {
+  create(hero: Hero): Promise<Array<Hero>> {
+    let allHeroes = JSON.parse(localStorage.getItem('heroes'));
+    allHeroes.push({
+      id: '' + parseInt((Math.random() * (99999 - 100 + 1)), 10) + 100,
+      name: hero.name,
+      alterEgo: hero.alterEgo,
+      power: hero.power
+    });
     return this.http
-      .post(this.heroesUrl, JSON.stringify({
-        name: hero.name,
-        alterEgo: hero.alterEgo,
-        power: hero.power
-      }), {headers: this.headers})
+      .put(this.heroesUrl, JSON.stringify(allHeroes), {headers: this.headers})
       .toPromise()
       .then(res => res.json())
       .catch(HeroService.handleError);
@@ -66,7 +74,7 @@ export class HeroService {
 
   remove(id: number): Promise<void> {
     const url = `${this.heroesUrl}/${id}`;
-    return this.http.delete(url, {headers: this.headers})
+    return this.http.put(url, {headers: this.headers})
       .toPromise()
       .then(() => null)
       .catch(HeroService.handleError);