Merge pull request 'routing' (#3) from routing into master

Reviewed-on: #3

src/app/app.component.css

@@ -0,0 +1,7 @@
+#page-wrapper {
+  width: 70%;
+  border: 3px solid black;
+
+  margin: 1rem auto;
+  padding: 1rem;
+}

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>
 

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';

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()),
+  ]
 };
 

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 },
 ];

src/app/components/errors/errors.component.html

@@ -0,0 +1 @@
+<h1>{{ status }}</h1>

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();
+  });
+});

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');
+    })
+  }
+}

src/app/components/recipe-detail/recipe-detail.component.css

@@ -0,0 +1,4 @@
+img {
+  max-height: 300px;
+  height: 300px;
+}

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>

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();
+  });
+});

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'])
+      }
+    });
+  }
+
+}

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">

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',

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;
 }

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>

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;

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>

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));
   }