(feat): add local storage service

todo-workspace/frontend/src/app/app.component.html

-<app-todo-list />
+<router-outlet />

todo-workspace/frontend/src/app/app.component.ts

 import { Component, inject } from '@angular/core';
-import TodoListComponent from '@features/todo-list/todo-list.component';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faIcons } from '@shared/fa-icons';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [TodoListComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

todo-workspace/frontend/src/app/app.config.ts

@@ -4,15 +4,20 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { TodoService } from '@core/ports/todo.service';
-import { InMemoryTodoService } from '@core/adapters/in-memory-todo.service';
-import { TodoBuilder } from '@core/models/builder/todo.builder';
+import { LocalStorageTodoService } from '@core/adapters/local-storage-todo.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(),
+
     {
+      provide: TodoService,
+      useFactory: () => new LocalStorageTodoService(),
+    },
+
+    /*{
       provide: TodoService,
       useFactory: () =>
         new InMemoryTodoService().withTodos([
@@ -20,6 +25,6 @@ export const appConfig: ApplicationConfig = {
           new TodoBuilder().withId(2).withName('Apprendre Java Spring Boot').complete().build(),
           new TodoBuilder().withId(3).withName('Apprendre PostgreSQL').uncomplete().build(),
         ]),
-    },
+    },*/
   ],
 };

todo-workspace/frontend/src/app/app.routes.ts

 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [{ path: '', loadComponent: () => import('./features/todo-list/todo-list.component') }];

todo-workspace/frontend/src/app/core/adapters/local-storage-todo.service.ts

+import { TodoService } from '@core/ports/todo.service';
+import { Observable, of } from 'rxjs';
+import { Todo, Todos } from '@core/models/todo';
+import { TodoBuilder } from '@core/models/builder/todo.builder';
+
+export class LocalStorageTodoService implements TodoService {
+  add(todoName: string): Observable<Todo> {
+    const todos = this.getTodos();
+    const newTodo = new TodoBuilder()
+      .withId(todos.length + 1)
+      .withName(todoName)
+      .uncomplete()
+      .build();
+    this.setTodos([...todos, newTodo]);
+    return of(newTodo);
+  }
+
+  getAll(): Observable<Todos> {
+    return of(this.getTodos());
+  }
+
+  remove(todoId: number): Observable<void> {
+    const todos = this.getTodos().filter((todo) => todo.id !== todoId);
+    this.setTodos(todos);
+    return of(void 0);
+  }
+
+  toggleCompleted(todoId: number): Observable<Todo> {
+    const todo = this.getTodos().find((todo) => todo.id === todoId)!;
+    todo.completed = !todo.completed;
+    const todos = this.getTodos().map((todo) => (todo.id === todoId ? { ...todo, completed: true } : todo));
+    this.setTodos(todos);
+    return of(todo);
+  }
+
+  private getTodos(): Todos {
+    const todos = localStorage.getItem('todos');
+    return todos ? JSON.parse(todos) : [];
+  }
+
+  private setTodos(todos: Todos): void {
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }
+}

todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts

-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TodoService } from '@core/ports/todo.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
@@ -12,6 +12,7 @@ import { TodoListItemComponent } from '@features/todo-list/components/todo-list-
   imports: [FormsModule, AddTodoFormComponent, TodoListItemComponent, TodoListItemComponent],
   templateUrl: './todo-list.component.html',
   styleUrl: './todo-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class TodoListComponent {
   private reload$$ = new BehaviorSubject<void>(void 0);