hubbycoder
diff --git a/‎src/app/add-todo/add-todo.component.css b/‎src/app/add-todo/add-todo.component.css
diff --git a/‎src/app/app.component.css b/‎src/app/app.component.css
diff --git a/‎src/app/app.component.html
Lines changed: 1 addition & 1 deletion b/‎src/app/app.component.html
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/app/app.component.ts
Lines changed: 24 additions & 3 deletions b/‎src/app/app.component.ts
Lines changed: 24 additions & 3 deletions
diff --git a/‎src/app/app.module.ts
Lines changed: 2 additions & 2 deletions b/‎src/app/app.module.ts
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/app/footer/footer.component.css b/‎src/app/footer/footer.component.css
diff --git a/‎src/app/footer/footer.component.html
Lines changed: 1 addition & 1 deletion b/‎src/app/footer/footer.component.html
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/app/footer/footer.component.ts
Lines changed: 7 additions & 24 deletions b/‎src/app/footer/footer.component.ts
Lines changed: 7 additions & 24 deletions
diff --git a/‎src/app/add-todo/add-todo.component.html renamed to ‎src/app/new-todo/new-todo.component.html b/‎src/app/add-todo/add-todo.component.html renamed to ‎src/app/new-todo/new-todo.component.html
diff --git a/‎src/app/add-todo/add-todo.component.spec.ts renamed to ‎src/app/new-todo/new-todo.component.spec.ts b/‎src/app/add-todo/add-todo.component.spec.ts renamed to ‎src/app/new-todo/new-todo.component.spec.ts
@@ -1,7 +1,7 @@
 <section class="todoapp">
   <header class="header">
     <h1>todos</h1>
-    <app-add-todo></app-add-todo>
+    <app-new-todo></app-new-todo>
   </header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
 
@@ -1,12 +1,33 @@
 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { AppState } from './../redux/app.reducer';
+import { Todo } from './../redux/todo/todo.model';
+import * as TodoActions from './../redux/todo/todo.actions';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
 
-  constructor() {}
+  constructor(
+    private store: Store<AppState>,
+  ) {
+    this.populateTodos();
+    this.updateTodos();
+  }
+
+  private populateTodos() {
+    const todos: Todo[] = JSON.parse(localStorage.getItem('angular-todos') || '[]');
+    this.store.dispatch(new TodoActions.PopulateTodosAction(todos));
+  }
+
+  private updateTodos() {
+    this.store.select('todos')
+    .subscribe(todos => {
+      localStorage.setItem('angular-todos', JSON.stringify(todos));
+    });
+  }
 
 }
@@ -10,7 +10,7 @@ import { AppComponent } from './app.component';
 import { TodoComponent } from './todo/todo.component';
 import { TodoListComponent } from './todo-list/todo-list.component';
 import { FooterComponent } from './footer/footer.component';
-import { AddTodoComponent } from './add-todo/add-todo.component';
+import { NewTodoComponent } from './new-todo/new-todo.component';
 
 const routes: Routes = [
   // basic routes
@@ -24,7 +24,7 @@ const routes: Routes = [
     TodoComponent,
     TodoListComponent,
     FooterComponent,
-    AddTodoComponent
+    NewTodoComponent
   ],
   imports: [
     BrowserModule,
 
@@ -1,4 +1,4 @@
-<footer class="footer" *ngIf="countTodos > 0">
+<footer class="footer" *ngIf="showFooter">
   <span class="todo-count">{{ countTodos }} items left</span>
   <ul class="filters">
     <li>
 
@@ -4,52 +4,35 @@ import { Store } from '@ngrx/store';
 import { AppState } from './../../redux/app.reducer';
 import * as FilterActions from './../../redux/filter/filter.actions';
 import * as TodoActions from './../../redux/todo/todo.actions';
-import { getCountTodos, getStateCompleted } from './../../redux/todo/todo.selectors';
+import { getStateCompleted } from './../../redux/todo/todo.selectors';
 
 @Component({
   selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
+  templateUrl: './footer.component.html'
 })
 export class FooterComponent implements OnInit {
 
   countTodos: number;
-  stateCompleted: boolean;
   currentFilter: string;
+  showFooter: boolean;
 
   constructor(
     private store: Store<AppState>
   ) {
-    this.store.select(getCountTodos)
-    .subscribe(count => {
-      this.countTodos = count;
-    });
-    this.store.select(getStateCompleted)
-    .subscribe(state => {
-      this.stateCompleted = state;
+    this.store.select('todos')
+    .subscribe(todos => {
+      this.countTodos = todos.filter(t => !t.completed).length;
+      this.showFooter = todos.length > 0;
     });
     this.store.select('filter')
     .subscribe(fitler => {
       this.currentFilter = fitler;
     });
-
   }
 
   ngOnInit() {
   }
 
-  showAll() {
-    this.store.dispatch(new FilterActions.SetFilterAction('SHOW_ALL'));
-  }
-
-  showActive() {
-    this.store.dispatch(new FilterActions.SetFilterAction('SHOW_ACTIVE'));
-  }
-
-  showCompleted() {
-    this.store.dispatch(new FilterActions.SetFilterAction('SHOW_COMPLETED'));
-  }
-
   clearCompleted() {
     this.store.dispatch(new TodoActions.ClearCompletedAction());
   }
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<footer class="footer" *ngIf="countTodos > 0">`
	`1`	`+<footer class="footer" *ngIf="showFooter">`
`2`	`2`	`<span class="todo-count">{{ countTodos }} items left</span>`
`3`	`3`	`<ul class="filters">`
`4`	`4`	`<li>`