Desafio da DIO - Alteracoes ao blog post Angular

package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.1.2",
-    "@angular/cli": "~14.1.2",
+    "@angular/cli": "^18.2.5",
     "@angular/compiler-cli": "^14.1.0",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.2.0",

src/app/app-routing.module.ts

@@ -7,11 +7,13 @@ import { HomeComponent } from './pages/home/home.component';
 const routes: Routes = [
   {
     path:'',
-    component:HomeComponent
+    component:HomeComponent,
+    title: 'Lista de Blogs'
   },
   {
     path:'content/:id',
-    component:ContentComponent
+    component:ContentComponent,
+    title: 'Detalhes do post'
   }
 ];
 

src/app/blog-post.ts

@@ -0,0 +1,6 @@
+export interface BlogPost {
+    id: number;
+    title: string;
+    description: string;
+    photoCover: string;
+}

src/app/blogging.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { BlogPost } from './blog-post';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BloggingService {
+
+  constructor() { }
+
+  protected blogPostList: BlogPost[] = [
+    {
+      id:1,
+      title: "NOVO HOMEM DE FERRO EM 3D",
+      description: "marvel anuncia um novo filme do homem de ferro, confira",
+      photoCover:"https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/7F51FA9F6CBD9F0C9B1394B1CC0A6A842D07091318674E234CD33CBF7C28CDC3/scale?width=1200&aspectRatio=1.78&format=jpeg"
+    },
+    {
+      id:2,
+      title: "Nova Série anunciada no Disney +",
+      description: "bla blabla",
+      photoCover:"https://disneyplusbrasil.com.br/wp-content/uploads/2021/07/Series-Marvel-Disney-Plus-1024x576.jpg"
+    },
+    {
+      id:3,
+      title: "NOVO HOMEM DE FERRO EM 3D",
+      description: "marvel anuncia um novo filme do homem de ferro, confira",
+      photoCover:"https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/7F51FA9F6CBD9F0C9B1394B1CC0A6A842D07091318674E234CD33CBF7C28CDC3/scale?width=1200&aspectRatio=1.78&format=jpeg"
+    },
+    {
+      id:4,
+      title: "Nova Série anunciada no Disney +",
+      description: "bla blabla",
+      photoCover:"https://disneyplusbrasil.com.br/wp-content/uploads/2021/07/Series-Marvel-Disney-Plus-1024x576.jpg"
+    }
+  ];
+
+  getAllBlogPosts() : BlogPost[] {
+    return this.blogPostList
+  }
+
+  getBlogPostById(id: number): BlogPost | undefined {
+    return this.blogPostList.find(blogPost => blogPost.id === id);
+  }
+}

src/app/components/big-card/big-card.component.css

@@ -1,5 +1,4 @@
 .container__big-card{
-
   margin-left: 20px;
   margin-right: 20px;
   margin-bottom: 40px;

src/app/components/big-card/big-card.component.html

@@ -10,13 +10,13 @@
   </div>
 
   <div class="big-card__title">
-    <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
+    <h1><a [routerLink]="['content', Id]">{{ cardTitle | titlecase }}</a></h1>
   </div>
 
   <div class="big-card__description">
     <p>
       <a [routerLink]="['content', Id]">
-          {{ cardDescription }}
+          {{ cardDescription  }}
       </a>
     </p>
   </div>

src/app/components/menu-bar/menu-bar.component.html

@@ -1,9 +1,9 @@
 <div class="container__menu-bar">
   <ul>
-    <li><a href="https://www.linkedin.com/in/flora-martins-299631a3/">Linkedin</a></li>
+    <li><a href="https://www.linkedin.com/in/jonilson-da-silva-7152a390/">Linkedin</a></li>
     <li><span>•</span></li>
-    <li><a href="https://github.com/codefloracode">Github</a></li>
+    <li><a href="https://github.com/jonilsongomes/angular-blog">Github</a></li>
     <li><span>•</span></li>
-    <li><a href="https://www.instagram.com/hiimf/">Instagram</a></li>
+    <li><a href="#">Instagram</a></li>
   </ul>
 </div>

src/app/components/small-card/small-card.component.css

@@ -1,6 +1,5 @@
 .container__small-card{
   margin-bottom: 15px;
-
   @media(min-width: 1000px) {
     width: 700px;
   }

src/app/components/small-card/small-card.component.html

@@ -3,17 +3,16 @@
   <div class="container__small-card-content">
     <div class="small-card__photo">
       <img
-        src="{{ photoCover }}"
+        src="{{ blogPost.photoCover }}"
         alt=""
         srcset=""
       >
     </div>
-
     <div class="small-card__title">
-      <h1><a [routerLink]="['content', Id]" >{{ cardTitle }}</a></h1>
-    </div>
+      <h1><a [routerLink]="['content', blogPost.id]" >{{ blogPost.title | titlecase }}</a></h1>
+    </div> 
   </div>
-
+  {{ blogPost.description}}
   <div class="container__small-card__separator">
     <hr>
   </div>

src/app/components/small-card/small-card.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { BlogPost } from 'src/app/blog-post';
 
 @Component({
   selector: 'app-small-card',
@@ -7,14 +8,7 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class SmallCardComponent implements OnInit {
 
-  @Input()
-  photoCover:string = ""
-
-  @Input()
-  cardTitle:string = ""
-
-  @Input()
-  Id:string="0"
+  @Input() blogPost!: BlogPost;
 
   constructor() { }
 

src/app/pages/content/content.component.html

@@ -1,15 +1,16 @@
 <div class="container__content">
   <div class="content__cover">
-    <img src="{{ photoCover }}" alt="" srcset="">
+    <img src="{{ blogPost?.photoCover }}" alt="" srcset="">
   </div>
   <div class="content__title">
-    <h1>{{ contentTitle }}</h1>
+    <h1>{{ blogPost?.title | titlecase }}</h1>
     <hr />
   </div>
   <div class="content__description">
-    <a [routerLink]="['']"> << VOLTAR </a>
     <p>
-      {{ contentDescription }}
+      {{ blogPost?.description }}
     </p>
+    <br/>
+    <a [routerLink]="['']"> << VOLTAR </a>
   </div>
 </div>

src/app/pages/content/content.component.ts

@@ -1,36 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import {dataFake} from '../../data/dataFake'
+import { BloggingService } from 'src/app/blogging.service';
+import { BlogPost } from 'src/app/blog-post';
 
 @Component({
   selector: 'app-content',
   templateUrl: './content.component.html',
   styleUrls: ['./content.component.css']
 })
-export class ContentComponent implements OnInit {
-  photoCover:string = ""
-  contentTitle:string = ""
-  contentDescription:string = ""
-  private id:string | null = "0"
+export class ContentComponent {
+  route: ActivatedRoute = inject(ActivatedRoute);
+  blogPost: BlogPost | undefined; 
+  blogginService: BloggingService = inject(BloggingService);
 
-  constructor(
-    private route:ActivatedRoute
-  ) { }
 
-  ngOnInit(): void {
-    this.route.paramMap.subscribe( value =>
-     this.id = value.get("id")
-    )
-
-    this.setValuesToComponent(this.id)
-  }
-
-  setValuesToComponent(id:string | null){
-    const result = dataFake.filter(article => article.id == id)[0]
-
-    this.contentTitle = result.title
-    this.contentDescription = result.description
-    this.photoCover = result.photoCover
-  }
+  constructor() {
+    const blogPostId = parseInt(this.route.snapshot.params['id'], 0);
+    this.blogPost = this.blogginService.getBlogPostById(blogPostId);
+   }
 
 }

src/app/pages/home/home.component.css

@@ -8,4 +8,25 @@
   }
 }
 
+.container__searchbar {
+  justify-content: center;
+}
+
+input[type=text] {
+  width: 50%;
+  padding: 12px 20px;
+  margin: 8px 10px;
+  box-sizing: border-box;  
+  border: 1px solid #04AA6D;
+}
 
+.button {
+  background-color: #04AA6D; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+}

src/app/pages/home/home.component.html

@@ -1,5 +1,12 @@
 <app-menu-title></app-menu-title>
 
+<div class="container__searchbar">
+  <form>
+    <input type="text" placeholder="Filter by blog title" #filter>
+    <button class="button" type="button" (click)="filterResults(filter.value)">Search</button>
+  </form>
+</div>
+
 <div class="container__articles">
   <div class="articles__main">
 
@@ -13,26 +20,9 @@
 
   </div>
   <div class="articles__others">
-    <app-small-card
-      Id="2"
-      cardTitle="Nova Série anunciada no Disney +"
-      photoCover="https://disneyplusbrasil.com.br/wp-content/uploads/2021/07/Series-Marvel-Disney-Plus-1024x576.jpg"
-    >
-    </app-small-card>
-
-    <app-small-card
-      Id="3"
-      cardTitle="Novo filme do pantera negra lançado em breve"
-      photoCover="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/35720ACD323F927C3A83D809D0F460BD3651740DA519BCC184B6F042057EA14D/scale?width=1200&aspectRatio=1.78&format=jpeg"
-    >
-    </app-small-card
-    >
-
-    <app-small-card
-      Id="4"
-      cardTitle="Novo filme dos X-men está em pós produção, afirma diretor"
-      photoCover="https://midias.correiobraziliense.com.br/_midias/jpg/2022/07/22/675x450/1_xmen-26096415.jpeg?20220722171339?20220722171339"
-    >
+    <app-small-card 
+      *ngFor="let blogPost of filteredBlogPostList"
+      [blogPost]="blogPost" >
     </app-small-card>
   </div>
 </div>

src/app/pages/home/home.component.ts

@@ -1,15 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { BlogPost } from 'src/app/blog-post';
+import { BloggingService } from 'src/app/blogging.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent  {
+  blogPostList: BlogPost[] = [];
+  blogginService: BloggingService = inject(BloggingService);
+  filteredBlogPostList: BlogPost[] = [];
 
-  constructor() { }
 
-  ngOnInit(): void {
+  constructor() { 
+    this.blogPostList = this.blogginService.getAllBlogPosts();
+    this.filteredBlogPostList = this.blogPostList;
+  }
+
+  filterResults(text: string){
+    if(!text) {
+      this.filteredBlogPostList = this.blogPostList;
+      return;
+    }
+
+    this.filteredBlogPostList = this.blogPostList.filter( 
+      post => post?.title.toLocaleLowerCase().includes(text.toLocaleLowerCase())
+    ) ;
   }
 
 }