Fix bugs

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { NgRedux } from '@angular-redux/store';
-import { IStaticDataState } from './reducers/static-data.reducer';
+import { IPizzariumState } from './app.module';
 
 @Component({
   selector: 'app-root',  
@@ -11,7 +11,7 @@ import { IStaticDataState } from './reducers/static-data.reducer';
   `
 })
 export class AppComponent {
-  constructor(private ngRedux: NgRedux<IStaticDataState>) {
+  constructor(private ngRedux: NgRedux<IPizzariumState>) {
     this.ngRedux.dispatch({
       type: 'GET_TOPPINGS',
       payload: {

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -38,7 +38,7 @@ export interface IPizzariumState {
   ],
   imports: [
     NgReduxModule,
-    BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     RouterModule.forRoot(routes),
     OrderDetailsModule,

src/app/components/top/top.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import {MenuItem} from 'primeng/api';
+import { MenuItem } from 'primeng/api';
 import { Router } from '@angular/router';
 import { select, NgRedux } from '@angular-redux/store';
 import { Observable } from 'rxjs/Observable';

src/app/containers/cart/cart.component.ts

@@ -2,15 +2,15 @@ import { Component } from '@angular/core';
 import { select, NgRedux } from '@angular-redux/store';
 import { Router } from '@angular/router';
 import { MessageService } from 'primeng/components/common/messageservice'
-import { IUIState } from '../../reducers/ui.reducer';
 import { Order } from '../../models';
+import { IPizzariumState } from '../../app.module';
 
 @Component({
   selector: 'app-cart',  
   styleUrls: ['./cart.component.css'],
   template: `
     <p-growl [(value)]="msgs"></p-growl>
-    <div *ngIf="(orders$ | async).length === 0">No items in cart</div>
+    <div *ngIf="(orders$ | async)?.length === 0">No items in cart</div>
     <div class="cart-container">
       <div *ngFor="let order of orders$ | async; let orderIndex = index" class="order">
         <div>Size: {{ order.selectedPizza.value }} - {{ order.selectedPizza.extraData.price }}₪</div>
@@ -41,7 +41,7 @@ export class CartComponent {
   @select(['ui', 'orders']) orders$;
   @select(['ui', 'totalPrice']) totalPrice$;
 
-  constructor(private ngRedux: NgRedux<IUIState>, private messageService: MessageService, private router: Router) { }
+  constructor(private ngRedux: NgRedux<IPizzariumState>, private messageService: MessageService, private router: Router) { }
 
   public deletePizzaFromCart(order: Order, pizzaIndex: number): void {
     this.ngRedux.dispatch({type: 'DELETE_ORDER', payload: {order, pizzaIndex}});

src/app/containers/cart/cart.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { NgReduxModule } from '@angular-redux/store'
 import { CartComponent } from './cart.component';
 import { GrowlModule } from 'primeng/growl';
 import { ButtonModule } from 'primeng/button';
@@ -13,14 +12,12 @@ import { MessageService } from 'primeng/components/common/messageservice';
     CartComponent
   ],
   imports: [
-    NgReduxModule,
     CommonModule,
     FormsModule,
     ButtonModule,
     GrowlModule,
   ],
-  providers: [MessageService],
-  bootstrap: [CartComponent]
+  providers: [MessageService]
 })
 export class CartModule {
 }

src/app/containers/order-details/order-details.component.ts

@@ -1,19 +1,18 @@
-import {Message} from 'primeng/api';
 import { MessageService } from 'primeng/components/common/messageservice'
 import { select, NgRedux } from '@angular-redux/store';
 import { Component, ViewChild} from '@angular/core';
 import { ImageSelectorItem } from '../../models'
-import { IUIState } from '../../reducers/ui.reducer';
 import { Order } from '../../models';
 import { ImageSelectorComponent } from '../../components/image-selector/image-selector.component';
+import { IPizzariumState } from '../../app.module';
 
 @Component({
   selector: 'app-order-details',  
   styleUrls: ['./order-details.component.css'],
   template: `
     <p-growl [(value)]="msgs"></p-growl>
-    <image-selector #sizesSelector [data]="sizes$ | async" (selectionChanged)=onSizeSelectedChanged($event)></image-selector>
-    <image-selector #toppingsSelector [data]="toppings$ | async" [multiSelect]="true" [itemsInRow]="7" (selectionChanged)=onToppingsSelectedChanged($event)></image-selector>
+    <image-selector #sizesSelector *ngIf="sizes$ | async" [data]="sizes$ | async" (selectionChanged)=onSizeSelectedChanged($event)></image-selector>
+    <image-selector #toppingsSelector *ngIf="toppings$ | async" [data]="toppings$ | async" [multiSelect]="true" [itemsInRow]="7" (selectionChanged)=onToppingsSelectedChanged($event)></image-selector>
     <div class="order-details-footer"> 
       <p-button label="Clear Order" icon="fa fa-trash" (click)=clear()></p-button>
       <p-button label="Add" icon="fa fa-cart-plus" (click)="addOrder()"></p-button>
@@ -29,7 +28,7 @@ export class OrderDetailsComponent {
 
   private currentOrder: Order;
 
-  constructor(private ngRedux: NgRedux<IUIState>, private messageService: MessageService) {
+  constructor(private ngRedux: NgRedux<IPizzariumState>, private messageService: MessageService) {
     this.resetCurrentOrder();
   }
 

src/app/containers/order-details/order-details.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { NgReduxModule } from '@angular-redux/store'
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { OrderDetailsComponent } from './order-details.component';
 import { ImageSelectorComponent } from '../../components/image-selector/image-selector.component';
 import { GrowlModule } from 'primeng/growl';
@@ -14,14 +13,12 @@ import { MessageService } from 'primeng/components/common/messageservice';
     ImageSelectorComponent
   ],
   imports: [
-    NgReduxModule,
-    BrowserAnimationsModule,
+    CommonModule,
     FormsModule,
     ButtonModule,
-    GrowlModule,
+    GrowlModule
   ],
-  providers: [MessageService],
-  bootstrap: [OrderDetailsComponent]
+  providers: [MessageService]
 })
 export class OrderDetailsModule {