From 8971a4e0f126fb71719003d864ed1bd9eb735645 Mon Sep 17 00:00:00 2001
From: rem <remi.arnal@etu.uca.fr>
Date: Tue, 18 Jun 2024 00:44:35 +0200
Subject: [PATCH] add routing + details for recipe + errors components

---
 src/app/app.component.css                     |  7 ++++
 src/app/app.component.html                    |  2 +-
 src/app/app.component.ts                      |  3 +-
 src/app/app.config.ts                         |  6 ++--
 src/app/app.routes.ts                         | 11 ++++--
 .../errors/errors.component.css}              |  0
 .../components/errors/errors.component.html   |  1 +
 .../errors/errors.component.spec.ts           | 23 +++++++++++++
 src/app/components/errors/errors.component.ts | 21 ++++++++++++
 .../recipe-detail/recipe-detail.component.css |  4 +++
 .../recipe-detail.component.html              |  7 ++++
 .../recipe-detail.component.spec.ts           | 23 +++++++++++++
 .../recipe-detail/recipe-detail.component.ts  | 34 +++++++++++++++++++
 .../recipe-form/recipe-form.component.css     |  0
 .../recipe-form/recipe-form.component.html    |  2 +-
 .../recipe-form/recipe-form.component.spec.ts |  0
 .../recipe-form/recipe-form.component.ts      |  6 ++--
 .../recipe-list/recipe-list.component.css     |  1 +
 .../recipe-list/recipe-list.component.html    |  2 ++
 .../recipe-mini/recipe-mini.component.css     | 16 +++++++++
 .../recipe-mini/recipe-mini.component.html    |  2 +-
 src/app/services/recipe.service.ts            |  5 +++
 22 files changed, 164 insertions(+), 12 deletions(-)
 create mode 100644 src/app/app.component.css
 rename src/app/{recipe-form/recipe-form.component.css => components/errors/errors.component.css} (100%)
 create mode 100644 src/app/components/errors/errors.component.html
 create mode 100644 src/app/components/errors/errors.component.spec.ts
 create mode 100644 src/app/components/errors/errors.component.ts
 create mode 100644 src/app/components/recipe-detail/recipe-detail.component.css
 create mode 100644 src/app/components/recipe-detail/recipe-detail.component.html
 create mode 100644 src/app/components/recipe-detail/recipe-detail.component.spec.ts
 create mode 100644 src/app/components/recipe-detail/recipe-detail.component.ts
 create mode 100644 src/app/components/recipe-form/recipe-form.component.css
 rename src/app/{ => components}/recipe-form/recipe-form.component.html (97%)
 rename src/app/{ => components}/recipe-form/recipe-form.component.spec.ts (100%)
 rename src/app/{ => components}/recipe-form/recipe-form.component.ts (92%)

diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 0000000..444c233
--- /dev/null
+++ b/src/app/app.component.css
@@ -0,0 +1,7 @@
+#page-wrapper {
+  width: 70%;
+  border: 3px solid black;
+
+  margin: 1rem auto;
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8f67211..37a62e8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
 <nav>
   <ul>
     <li><a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a></li>
-    <li><a routerLink="/add" routerLinkActive="active" ariaCurrentWhenActive="page">Add Recipe</a></li>
+    <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">Add Recipe</a></li>
   </ul>
 </nav>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d6cb23a..8b32894 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
-import { RecipeFormComponent } from './recipe-form/recipe-form.component';
+import { RecipeFormComponent } from './components/recipe-form/recipe-form.component';
 import { RecipeService } from './services/recipe.service';
 import { Recipe } from './model/recipe.model';
 import { RecipeListComponent } from './components/recipe-list/recipe-list.component';
@@ -16,6 +16,7 @@ import { RecipeListComponent } from './components/recipe-list/recipe-list.compon
   ],
   providers: [RecipeService],
   templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'bromista-nisqa-receta';
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index b021de7..06f4529 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,9 +1,11 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+  ]
 };
 
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 251c8c2..3afcf5c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,9 +1,14 @@
 import { Routes } from '@angular/router'
 
-import { RecipeFormComponent } from "./recipe-form/recipe-form.component";
+import { Error404Component } from "./components/errors/errors.component";
+import { RecipeFormComponent } from "./components/recipe-form/recipe-form.component";
 import { RecipeListComponent } from "./components/recipe-list/recipe-list.component";
+import { RecipeDetailComponent } from './components/recipe-detail/recipe-detail.component';
 
 export const routes: Routes = [
-  { path: 'add', component: RecipeFormComponent },
-  { path: '', component: RecipeListComponent }
+  { path: '', component: RecipeListComponent },
+  { path: 'error/:status', component: Error404Component},
+  
+  { path: 'recipe/add', component: RecipeFormComponent },
+  { path: 'recipe/:id', component: RecipeDetailComponent },
 ];
diff --git a/src/app/recipe-form/recipe-form.component.css b/src/app/components/errors/errors.component.css
similarity index 100%
rename from src/app/recipe-form/recipe-form.component.css
rename to src/app/components/errors/errors.component.css
diff --git a/src/app/components/errors/errors.component.html b/src/app/components/errors/errors.component.html
new file mode 100644
index 0000000..22fba2c
--- /dev/null
+++ b/src/app/components/errors/errors.component.html
@@ -0,0 +1 @@
+<h1>{{ status }}</h1>
\ No newline at end of file
diff --git a/src/app/components/errors/errors.component.spec.ts b/src/app/components/errors/errors.component.spec.ts
new file mode 100644
index 0000000..3cf2c6b
--- /dev/null
+++ b/src/app/components/errors/errors.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Error404Component } from './error404.component';
+
+describe('Error404Component', () => {
+  let component: Error404Component;
+  let fixture: ComponentFixture<Error404Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Error404Component]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(Error404Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/errors/errors.component.ts b/src/app/components/errors/errors.component.ts
new file mode 100644
index 0000000..f279d84
--- /dev/null
+++ b/src/app/components/errors/errors.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-errors',
+  standalone: true,
+  imports: [],
+  templateUrl: './errors.component.html',
+  styleUrl: './errors.component.css'
+})
+export class Error404Component {
+  status: string | null = "Unknown error";
+
+  constructor(private route: ActivatedRoute){}
+
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      this.status = params.get('status');
+    })
+  }
+}
diff --git a/src/app/components/recipe-detail/recipe-detail.component.css b/src/app/components/recipe-detail/recipe-detail.component.css
new file mode 100644
index 0000000..ba6717e
--- /dev/null
+++ b/src/app/components/recipe-detail/recipe-detail.component.css
@@ -0,0 +1,4 @@
+img {
+  max-height: 300px;
+  height: 300px;
+}
\ No newline at end of file
diff --git a/src/app/components/recipe-detail/recipe-detail.component.html b/src/app/components/recipe-detail/recipe-detail.component.html
new file mode 100644
index 0000000..2562890
--- /dev/null
+++ b/src/app/components/recipe-detail/recipe-detail.component.html
@@ -0,0 +1,7 @@
+<div id="recipe-detail">
+  <img src="{{ recipe.image }}" />
+  <h1>{{ recipe.name }}</h1>
+  <p>{{ recipe.description }}</p>
+
+  <h2>Ingredients</h2>
+</div>
\ No newline at end of file
diff --git a/src/app/components/recipe-detail/recipe-detail.component.spec.ts b/src/app/components/recipe-detail/recipe-detail.component.spec.ts
new file mode 100644
index 0000000..43f4942
--- /dev/null
+++ b/src/app/components/recipe-detail/recipe-detail.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeDetailComponent } from './recipe-detail.component';
+
+describe('RecipeDetailComponent', () => {
+  let component: RecipeDetailComponent;
+  let fixture: ComponentFixture<RecipeDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecipeDetailComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(RecipeDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/recipe-detail/recipe-detail.component.ts b/src/app/components/recipe-detail/recipe-detail.component.ts
new file mode 100644
index 0000000..1c18ff7
--- /dev/null
+++ b/src/app/components/recipe-detail/recipe-detail.component.ts
@@ -0,0 +1,34 @@
+import { Component} from '@angular/core';
+import { Recipe } from '../../model/recipe.model';
+import { RecipeService } from '../../services/recipe.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-recipe-detail',
+  standalone: true,
+  imports: [],
+  templateUrl: './recipe-detail.component.html',
+  styleUrl: './recipe-detail.component.css'
+})
+export class RecipeDetailComponent {
+
+  recipe!: Recipe;
+  id: string | null = null;
+
+  constructor(private router: Router, private route: ActivatedRoute, private recipeService: RecipeService) {
+    this.recipeService.getRecipes();
+  }
+
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      this.id = params.get('id');
+      if (this.id) {
+        this.recipe = this.recipeService.getRecipeById(Number(this.id))!;
+      }
+      if (this.recipe === undefined) {
+        this.router.navigate(['/error/404'])
+      }
+    });
+  }
+
+}
diff --git a/src/app/components/recipe-form/recipe-form.component.css b/src/app/components/recipe-form/recipe-form.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/recipe-form/recipe-form.component.html b/src/app/components/recipe-form/recipe-form.component.html
similarity index 97%
rename from src/app/recipe-form/recipe-form.component.html
rename to src/app/components/recipe-form/recipe-form.component.html
index 2badad1..5a451e1 100644
--- a/src/app/recipe-form/recipe-form.component.html
+++ b/src/app/components/recipe-form/recipe-form.component.html
@@ -1,4 +1,4 @@
-<h2>New Recipe</h2>
+<h1>New Recipe</h1>
 <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
   <label for="name">Name:</label>
   <input id="name" formControlName="name">
diff --git a/src/app/recipe-form/recipe-form.component.spec.ts b/src/app/components/recipe-form/recipe-form.component.spec.ts
similarity index 100%
rename from src/app/recipe-form/recipe-form.component.spec.ts
rename to src/app/components/recipe-form/recipe-form.component.spec.ts
diff --git a/src/app/recipe-form/recipe-form.component.ts b/src/app/components/recipe-form/recipe-form.component.ts
similarity index 92%
rename from src/app/recipe-form/recipe-form.component.ts
rename to src/app/components/recipe-form/recipe-form.component.ts
index 9adf8d5..fa31f89 100644
--- a/src/app/recipe-form/recipe-form.component.ts
+++ b/src/app/components/recipe-form/recipe-form.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Recipe } from '../model/recipe.model';
-import { Ingredient } from '../model/ingredient.model';
+import { Recipe } from '../../model/recipe.model';
+import { Ingredient } from '../../model/ingredient.model';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { RecipeService } from '../services/recipe.service';
+import { RecipeService } from '../../services/recipe.service';
 
 @Component({
   selector: 'app-recipe-form',
diff --git a/src/app/components/recipe-list/recipe-list.component.css b/src/app/components/recipe-list/recipe-list.component.css
index 71f8b27..c7244bb 100644
--- a/src/app/components/recipe-list/recipe-list.component.css
+++ b/src/app/components/recipe-list/recipe-list.component.css
@@ -1,5 +1,6 @@
 #recipe-list {
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
   gap: 2rem;
 }
\ No newline at end of file
diff --git a/src/app/components/recipe-list/recipe-list.component.html b/src/app/components/recipe-list/recipe-list.component.html
index 8d0d34b..ad65c94 100644
--- a/src/app/components/recipe-list/recipe-list.component.html
+++ b/src/app/components/recipe-list/recipe-list.component.html
@@ -1,3 +1,5 @@
+<h1>Recipe List</h1>
+
 <div id="recipe-list">
   <app-recipe-mini *ngFor="let recipe of recipes" [recipe]="recipe"></app-recipe-mini>
 </div>
\ No newline at end of file
diff --git a/src/app/components/recipe-mini/recipe-mini.component.css b/src/app/components/recipe-mini/recipe-mini.component.css
index 437f992..7c461e9 100644
--- a/src/app/components/recipe-mini/recipe-mini.component.css
+++ b/src/app/components/recipe-mini/recipe-mini.component.css
@@ -27,6 +27,22 @@
   color: #666;
 }
 
+a {
+  display: flex;
+  justify-content: center;
+  border: 3px solid black;
+  padding: 10px 20px;
+  color: white;
+  background-color: black;
+  text-decoration: none;
+  transition: .3s;
+}
+
+a:hover {
+  color: inherit;
+  background-color: #fff;
+}
+
 button {
   position: relative;
   background: #444;
diff --git a/src/app/components/recipe-mini/recipe-mini.component.html b/src/app/components/recipe-mini/recipe-mini.component.html
index 5c579ca..e19fd41 100644
--- a/src/app/components/recipe-mini/recipe-mini.component.html
+++ b/src/app/components/recipe-mini/recipe-mini.component.html
@@ -6,6 +6,6 @@
   <div class="recipe-details">
     <h2>{{recipe.name}}</h2>
     <p>{{recipe.description}}</p>
-    <button (click)="navigateToRecipe()" style="--clr:#39FF14"><span>Voir la recette</span><i></i></button>
+    <a href="/recipe/{{ recipe.id }}">Voir la recette</a>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts
index ee27432..a4b04ac 100644
--- a/src/app/services/recipe.service.ts
+++ b/src/app/services/recipe.service.ts
@@ -10,6 +10,10 @@ export class RecipeService {
 
   constructor() { }
 
+  getRecipeById(id: number) {
+    return this.recipes.find(e => e.id === id);
+  }
+
   // Get recipes from local storage
   getRecipes(): Recipe[] {
     const recipesJson = localStorage.getItem(this.localStorageKey) || "[]";
@@ -20,6 +24,7 @@ export class RecipeService {
   // Add a new recipe
   addRecipe(recipe: Recipe): void {
     this.getRecipes();
+    recipe.id = this.recipes.length
     this.recipes.push(recipe);
     localStorage.setItem(this.localStorageKey, JSON.stringify(this.recipes));
   }