Added components for book-card, event-card, news-card, recommandation-card

mocks/feed.mock.ts

@@ -60,7 +60,7 @@ export const feedMock: FeedCard[] = <FeedCard[]> [
     },
     <FeedCard> {
         id: 5,
-        cardTitle: 'BESTSELLER',
+        cardTitle: 'NEUERSCHEINUNG FANTASY',
         type: 'BOOK',
         books: <FeedBook> {
             id: 1,

src/app/components/book-card/book-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  {{card.cardTitle}}
+</p>

src/app/components/book-card/book-card.component.spec.ts

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

src/app/components/book-card/book-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FeedCard } from 'src/app/core/models/feed-card.model';
+
+@Component({
+  selector: 'app-book-card',
+  templateUrl: './book-card.component.html',
+  styleUrls: ['./book-card.component.scss']
+})
+export class BookCardComponent implements OnInit {
+
+  @Input() card: FeedCard;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/dashboard/dashboard.component.html

@@ -1,3 +1,6 @@
-<p>
-  dashboard works!
-</p>
+<div *ngFor="let card of feed">
+  <app-book-card *ngIf="card.type === 'BOOK'" [card]="card"></app-book-card>
+  <app-event-card *ngIf="card.type === 'EVENT'" [card]="card"></app-event-card>
+  <app-news-card *ngIf="card.type === 'NEWS'" [card]="card"></app-news-card>
+  <app-recommandation-card *ngIf="card.type === 'REC'" [card]="card"></app-recommandation-card>
+</div>

src/app/components/dashboard/dashboard.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from 'src/app/app.state';
+import { Observable } from 'rxjs';
+import { FeedCard } from 'src/app/core/models/feed-card.model';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,9 +11,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  feed$: Observable<FeedCard[]>;
+  feed: FeedCard[];
+  constructor(private store: Store<AppState>) { }
 
   ngOnInit() {
+    this.feed$ = this.store.select('feed');
+    this.feed$.subscribe(
+      (data: any) => this.feed = data
+    );
   }
 
 }

src/app/components/event-card/event-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  {{card.cardTitle}}
+</p>

src/app/components/event-card/event-card.component.spec.ts

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

src/app/components/event-card/event-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FeedCard } from 'src/app/core/models/feed-card.model';
+
+@Component({
+  selector: 'app-event-card',
+  templateUrl: './event-card.component.html',
+  styleUrls: ['./event-card.component.scss']
+})
+export class EventCardComponent implements OnInit {
+
+  @Input() card: FeedCard;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/news-card/news-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  {{card.cardTitle}}
+</p>

src/app/components/news-card/news-card.component.spec.ts

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

src/app/components/news-card/news-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FeedCard } from 'src/app/core/models/feed-card.model';
+
+@Component({
+  selector: 'app-news-card',
+  templateUrl: './news-card.component.html',
+  styleUrls: ['./news-card.component.scss']
+})
+export class NewsCardComponent implements OnInit {
+
+  @Input() card: FeedCard;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/recommandation-card/recommandation-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  {{card.cardTitle}}
+</p>

src/app/components/recommandation-card/recommandation-card.component.spec.ts

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

src/app/components/recommandation-card/recommandation-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FeedCard } from 'src/app/core/models/feed-card.model';
+
+@Component({
+  selector: 'app-recommandation-card',
+  templateUrl: './recommandation-card.component.html',
+  styleUrls: ['./recommandation-card.component.scss']
+})
+export class RecommandationCardComponent implements OnInit {
+
+  @Input() card: FeedCard;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/components.module.ts

@@ -9,6 +9,10 @@ import { DashboardComponent } from 'src/app/components/dashboard/dashboard.compo
 import { AppRoutingModule } from 'src/app/app-routing.module';
 import { MenuComponent } from '../components/menu/menu.component';
 import { BreadcrumbsComponent } from '../components/breadcrumbs/breadcrumbs.component';
+import { BookCardComponent } from '../components/book-card/book-card.component';
+import { EventCardComponent } from '../components/event-card/event-card.component';
+import { NewsCardComponent } from '../components/news-card/news-card.component';
+import { RecommandationCardComponent } from '../components/recommandation-card/recommandation-card.component';
 
 @NgModule({
   declarations: [
@@ -19,7 +23,11 @@ import { BreadcrumbsComponent } from '../components/breadcrumbs/breadcrumbs.comp
     ArticleSearchComponent,
     DashboardComponent,
     MenuComponent,
-    BreadcrumbsComponent
+    BreadcrumbsComponent,
+    BookCardComponent,
+    EventCardComponent,
+    NewsCardComponent,
+    RecommandationCardComponent
   ],
   imports: [
     CommonModule,
@@ -33,7 +41,11 @@ import { BreadcrumbsComponent } from '../components/breadcrumbs/breadcrumbs.comp
     ArticleSearchComponent,
     DashboardComponent,
     MenuComponent,
-    BreadcrumbsComponent
+    BreadcrumbsComponent,
+    BookCardComponent,
+    EventCardComponent,
+    NewsCardComponent,
+    RecommandationCardComponent
   ]
 })
 export class ComponentsModule { }