adds dataService and passes data

bank-advisor/src/app/components/all-expenses/all-expenses.component.html

@@ -1,12 +1,5 @@
 <div class="margin-x">
-  <app-big-expenses
-    *ngIf="this.route === 'bigTransactions'"
-    [bigTransactions]="bigTransactions"
-  ></app-big-expenses>
-  <app-regular-expenses
-    [regularTransactions]="regularTransactions"
-  ></app-regular-expenses>
-  <app-contract-expenses
-    [contractTransactions]="contractTransactions"
-  ></app-contract-expenses>
+  <app-big-expenses></app-big-expenses>
+  <app-regular-expenses></app-regular-expenses>
+  <app-contract-expenses></app-contract-expenses>
 </div>

bank-advisor/src/app/components/all-expenses/all-expenses.component.ts

@@ -3,6 +3,7 @@ import { User } from '../../models/user.interface';
 import { Account } from '../../models/account.interface';
 import { Transaction } from '../../models/transaction.interface';
 import { formatDate } from '../../util/date.util';
+import { DataService } from '../../services/data.service';
 
 @Component({
   selector: 'app-all-expenses',
@@ -17,7 +18,7 @@ export class AllExpensesComponent {
   contractTransactions: Transaction[] = [];
   route: string | null = '';
 
-  constructor() {
+  constructor(dataService: DataService) {
     this.route = localStorage.getItem('route');
     this.user = {
       userId: '1',
@@ -83,6 +84,8 @@ export class AllExpensesComponent {
     } as Account;
     this.requestValuesFromDevPortal();
     this.filterTransactionsIntoGroups(this.account);
+    dataService.setUser(this.user);
+    dataService.setAccount(this.account);
   }
 
   requestValuesFromDevPortal() {}

bank-advisor/src/app/components/big-expenses/big-expenses.component.html

@@ -4,7 +4,7 @@ <h1 class="display-5">Big expenses</h1>
   analyze what you are spending your money on.
 </p>
 
-<ul *ngFor="let bigTransaction of this.bigTransactions" class="list-group">
+<ul *ngFor="let bigTransaction of bigTransactions" class="list-group">
   <li class="d-flex align-items-center justify-content-center mb-2 rounded">
     <div class="card mb-3 w-100 border border-success rounded">
       <div class="row g-0">

bank-advisor/src/app/components/big-expenses/big-expenses.component.ts

@@ -1,11 +1,24 @@
 import { Component, Input } from '@angular/core';
 import { Transaction } from '../../models/transaction.interface';
+import { User } from '../../models/user.interface';
+import { Account } from '../../models/account.interface';
+import { DataService } from '../../services/data.service';
 
 @Component({
   selector: 'app-big-expenses',
   templateUrl: './big-expenses.component.html',
   styleUrls: ['./big-expenses.component.css'],
 })
 export class BigExpensesComponent {
-  @Input() bigTransactions: Transaction[] = [];
+  private user: User = {} as User;
+  private account: Account = {} as Account;
+  bigTransactions: Transaction[] = [];
+
+  constructor(dataService: DataService) {
+    this.user = dataService.getUser();
+    this.account = dataService.getAccount();
+    this.bigTransactions = this.account.transactions.filter((t) => {
+      return t.amount > 300;
+    });
+  }
 }

bank-advisor/src/app/services/data.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { User } from '../models/user.interface';
+import { Account } from '../models/account.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {
+  private sharedUser: User = {} as User;
+  private sharedAccount: Account = {} as Account;
+
+  setUser(user: User) {
+    this.sharedUser = user;
+  }
+
+  setAccount(account: Account) {
+    this.sharedAccount = account;
+  }
+
+  getUser() {
+    return this.sharedUser;
+  }
+
+  getAccount() {
+    return this.sharedAccount;
+  }
+}