Reset new task input after creation;

package.json

@@ -20,7 +20,6 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
-    "ngx-cookie-service": "^12.0.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",

src/app/active-list-tasks/active-list-tasks.component.html

@@ -1,7 +1,10 @@
 <div class="container">
-    <app-task-display class="task" *ngFor="let i of [0,1,2,3,4,5,6,7,8,9]" class="task"></app-task-display>
+    <app-task-display *ngFor="let task of activeTaskList?.tasks"
+        [task]="task" class="task"></app-task-display>
     <div class="task new">
         <mat-icon>add</mat-icon>
-        <input />
+        <input placeholder="Nouvelle tâche..."
+                (keydown)="onNewTaskKeyDown($event)"
+                [formControl]="newTaskControl"/>
     </div>
 </div>

src/app/active-list-tasks/active-list-tasks.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { Task } from '../core/entity/task';
 import { TaskList } from '../core/entity/task-list';
 import { TaskListService } from '../core/service/task-list.service';
 
@@ -11,8 +13,9 @@ import { TaskListService } from '../core/service/task-list.service';
   styleUrls: ['./active-list-tasks.component.scss']
 })
 export class ActiveListTasksComponent implements OnInit, OnDestroy {
-  private _activeTaskList?: TaskList;
   private _storeSubscription?: Subscription;
+  activeTaskList?: TaskList;
+  newTaskControl: FormControl = new FormControl(undefined, Validators.required);
 
   constructor(
     private _router: Router,
@@ -23,8 +26,8 @@ export class ActiveListTasksComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._storeSubscription = this._taskListService.store$.subscribe(store => {
       if (store.activeTaskListId) {
-        this._activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
-        if (!this._activeTaskList) {
+        this.activeTaskList = store.taskLists.find(taskList => taskList.id === store.activeTaskListId);
+        if (!this.activeTaskList) {
           this._backToTaskListPane();
         }
       }
@@ -36,7 +39,22 @@ export class ActiveListTasksComponent implements OnInit, OnDestroy {
   }
 
   private _backToTaskListPane(): void {
-    this._snackBar.open('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
+    console.error('La task-list active n\'existe pas dans le store.', 'Fermer', {duration: 5000});
     this._router.navigate(['/']);
   }
+
+  onNewTaskKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      if (this.newTaskControl.valid) {
+        const newTask = {
+          title: this.newTaskControl.value as string,
+          creationDate: new Date(),
+          description: undefined as unknown as string
+        } as Task;
+
+        this._taskListService.addTask(newTask);
+        this.newTaskControl.reset();
+      }
+    }
+  }
 }

src/app/active-list-tasks/task-display/task-display.component.html

@@ -3,7 +3,7 @@
         <mat-icon class="drag-n-drop">drag_handle</mat-icon>
         <mat-checkbox class="example-margin"></mat-checkbox>
         <div class="input-container">
-            <input type="text" [formControl]="taskNameControl" />
+            <input type="text" [formControl]="titleControl" />
         </div>
         <button mat-button type="button" class="expand">
             <mat-icon>expand_more</mat-icon>

src/app/active-list-tasks/task-display/task-display.component.scss

@@ -35,13 +35,11 @@
                 padding: 0 .8rem;
                 margin: 0 .8rem;
                 background-color: #444;
-
                 border-style: solid;
                 border-width: .1rem;
                 border-color: rgba(0,0,0, 0);
                 border-radius: .2rem;
 
-
                 width: 100%;
 
                 transition: background-color .2s ease-out,

src/app/active-list-tasks/task-display/task-display.component.ts

@@ -1,16 +1,23 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Task } from 'src/app/core/entity/task';
+import { TaskListService } from 'src/app/core/service/task-list.service';
 
 @Component({
   selector: 'app-task-display',
   templateUrl: './task-display.component.html',
   styleUrls: ['./task-display.component.scss']
 })
-export class TaskDisplayComponent implements OnInit {
-  taskNameControl = new FormControl(undefined);
+export class TaskDisplayComponent implements AfterViewInit {
+  @Input() task?: Task;
+  titleControl = new FormControl(this.task?.title);
 
-  constructor() { }
+  constructor(
+    private _taskListService: TaskListService
+  ) {}
+  
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+    this.titleControl.setValue(this?.task?.title);
   }
 }

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';
 
@@ -20,6 +20,8 @@ import { HeaderComponent } from './core/components/header/header.component';
 import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
 import { TaskDisplayComponent } from './active-list-tasks/task-display/task-display.component';
 import {MatCheckboxModule} from '@angular/material/checkbox'; 
+import { TaskListService } from './core/service/task-list.service';
+import { StorePersistenceService } from './core/service/store-persistence.service';
 
 @NgModule({
   declarations: [
@@ -47,6 +49,12 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   ],
   providers: [
     CookieService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (taskListService: TaskListService) => () => taskListService.removeActiveTaskList(),
+      deps: [TaskListService, StorePersistenceService],
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

src/app/core/service/store-persistence.service.ts

@@ -1,30 +1,25 @@
 import { Injectable } from "@angular/core";
-import { CookieService } from "ngx-cookie-service";
 import { Store } from "../entity/store";
 
-const COOKIE_NAME = 'todo-store';
+const STORE_NAME = 'todo-store';
 
 @Injectable({
   providedIn: 'root'
 })
 export class StorePersistenceService {
-  constructor(
-    private _cookieService: CookieService
-  ) {}
-
   save(store: Store): void {
     const serializedStore = JSON.stringify(store);
-    this._cookieService.set(COOKIE_NAME, serializedStore);
+    localStorage.setItem(STORE_NAME, serializedStore);
   }
 
   load(): Store {
-    const serializedStore = this._cookieService.get(COOKIE_NAME);
+    const serializedStore = localStorage.getItem(STORE_NAME);
 
-    if (serializedStore?.length) {
+    if (serializedStore?.length && serializedStore !== 'undefined') {
       try {
         return JSON.parse(serializedStore);
       } catch (jsonParseError) {
-        throw new Error(`JsonSerializationException: Invalid format for store in cookie "${COOKIE_NAME}".`);
+        throw new Error(`JsonSerializationException: Invalid format for store in cookie "${STORE_NAME}".`);
       }
     } else {
       return {