From 4f7b429843bd0003191a736273cec82cf9fd95d3 Mon Sep 17 00:00:00 2001
From: layokaminski <layokaminski@gmail.com>
Date: Thu, 12 Oct 2023 11:26:30 -0300
Subject: [PATCH] refactor: implementa database e service

---
 src/app/app-routing.module.ts                 |  9 +++-
 src/app/app.component.html                    |  1 -
 .../card-pricing/card-pricing.component.ts    |  2 +-
 src/app/components/card/card.component.ts     | 21 +++++++--
 src/app/components/data/dataFake.ts           | 44 +++++++++++++++++++
 src/app/pages/home/home.component.html        | 33 +++-----------
 src/app/pages/home/home.component.ts          |  4 +-
 src/app/service/game.service.ts               | 15 +++++++
 8 files changed, 94 insertions(+), 35 deletions(-)
 create mode 100644 src/app/components/data/dataFake.ts
 create mode 100644 src/app/service/game.service.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0297262..f7274ea 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './pages/home/home.component';
+import { CardComponent } from './components/card/card.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path:'',
+    component: HomeComponent
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2e9100f..926b69f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,2 @@
 <app-menu-bar></app-menu-bar>
-<app-home></app-home>
 <router-outlet></router-outlet>
diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts
index 5dc831e..5f749a6 100644
--- a/src/app/components/card/card-pricing/card-pricing.component.ts
+++ b/src/app/components/card/card-pricing/card-pricing.component.ts
@@ -8,7 +8,7 @@ import { Component, Input, OnInit } from '@angular/core';
 export class CardPricingComponent implements OnInit {
 
 	@Input()
-	gameType:string ="Digital PS4"
+	gameType:string =""
 	@Input()
 	gamePrice:string = "R$ 399,90"
   constructor() { }
diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts
index d2c9e49..a55d5ed 100644
--- a/src/app/components/card/card.component.ts
+++ b/src/app/components/card/card.component.ts
@@ -1,4 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { dataFake } from '../data/dataFake';
+import { GameService } from 'src/app/service/game.service';
 
 @Component({
   selector: 'app-card',
@@ -12,13 +15,25 @@ export class CardComponent implements OnInit {
 	@Input()
 	gameLabel:string=""
 	@Input()
-	gameType:string ="XPTO | PS4"
+	gameType:string =""
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	gamePrice:string = ""
+	@Input()
+	id:string = ""
 
-  constructor() { }
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
+    this.setValuesToComponent(this.id)
   }
 
+  setValuesToComponent(id: string | null){
+		const response = this.gameService.getGameById(id)
+		if (!response) return
+
+		this.gameCover = response.gameCover
+		this.gameLabel = response.gameLabel
+		this.gameType = response.gameType
+		this.gamePrice = response.gamePrice
+  }
 }
diff --git a/src/app/components/data/dataFake.ts b/src/app/components/data/dataFake.ts
new file mode 100644
index 0000000..4b95afb
--- /dev/null
+++ b/src/app/components/data/dataFake.ts
@@ -0,0 +1,44 @@
+export const dataFake = [
+  {
+    "id":"1",
+    "gameCover": "assets/ac-cover.jpg",
+    "gameLabel": "Jogo novo assassin's creed",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"2",
+    "gameCover": "assets/bt-1.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"3",
+    "gameCover": "assets/bt-4.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"4",
+    "gameCover": "assets/bt-5.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"5",
+    "gameCover": "assets/bt-bad-company-2.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"6",
+    "gameCover": "assets/bt-hardline.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+]
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 4613fb7..5a1171b 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,31 +1,8 @@
 <div class="home__container">
-	<app-card
-		gameCover="assets/bt-1.jpg"
-		gameLabel="DIGITAL"
-		gameType="DIGITAL | PS4"
-		gamePrice="R$ 129,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-4.jpg"
-		gameLabel="EXCLUSIVE"
-		gameType="DISC | PS5"
-		gamePrice="R$ 269,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/ac-cover.jpg"
-		gameLabel="BEST OF YEAR"
-		gameType="DIGITAL | PS5"
-		gamePrice="R$ 369,99"
-		>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-hardline.jpg"
-		gameLabel="NEW"
-		gameType="DIGITAL | PS3 PS4 PS5"
-		gamePrice="R$ 369,99"
-	>
-	</app-card>
+	<li *ngFor="let game of dataGame">
+		<app-card
+		id={{game.id}}
+		></app-card>
+	</li>
 </div>
 
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 007fef0..c5a16bd 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { dataFake } from 'src/app/components/data/dataFake';
 
 @Component({
   selector: 'app-home',
@@ -6,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-
+  dataGame = dataFake;
+  
   constructor() { }
 
   ngOnInit(): void {
diff --git a/src/app/service/game.service.ts b/src/app/service/game.service.ts
new file mode 100644
index 0000000..a4b42d0
--- /dev/null
+++ b/src/app/service/game.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { dataFake } from '../components/data/dataFake';
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class GameService {
+
+  constructor() { }
+
+  getGameById(id: string | null) {
+    return dataFake.find(({ id: idGame }) => idGame === id);
+  }
+}
\ No newline at end of file