Add login and notification services to inject into components

src/app/layout/notifications/notifications.component.ts

@@ -1,14 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
-type Role = 'Officer'|'Investigator'|'Hod'|'Panel'|'Customer';
-
-interface Notification {
-    text: string,
-    timeStamp: string,
-    roles: Array<Role>,
-    description?: string,
-    redirectionUrl?: string,        
-}
+import { Notification, NotificationService } from 'src/app/services/notification.service';
 
 @Component({
     selector: 'app-notifications',
@@ -16,76 +7,10 @@ interface Notification {
     styleUrls: ['./notifications.component.scss']
 })
 export class NotificationsComponent implements OnInit {
-    loginRole: Role;
-
-    notifications: Array<Notification> = [{
-        text: 'New name application has been submitted',
-        description: 'A new Applicant in the company name Kimao has applied for an appeal',
-        roles: ['Officer'],
-        timeStamp: '1 hour ago',
-    }, {
-        text: 'Entity Corp. flagged for investigation',
-        roles: ['Investigator'],
-        timeStamp: '2 days ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'Request to create a panel',
-        roles: ['Hod'],
-        timeStamp: '1 day ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'Review non-compliance for Entity Corp.',
-        roles: ['Investigator'],
-        timeStamp: '4 hours ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'Concur non-compliance for Entity Corp.',
-        roles: ['Panel'],
-        timeStamp: '2 hours ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'Prepare preliminary letter',
-        roles: ['Investigator'],
-        timeStamp: '2 hours ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'Investigation complete',
-        roles: ['Investigator'],
-        timeStamp: '1 hours ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }, {
-        text: 'New name application has been submitted',
-        roles: ['Officer'],
-        description: 'A new Applicant in the company name Kimao has applied for an appeal',
-        timeStamp: '1 hour ago',
-    }, {
-        text: 'Request to create a new Committee',
-        roles: ['Officer'],
-        timeStamp: '2 hours ago',
-    }, {
-        text: 'Respond to non-compliance preliminary letter',
-        roles: ['Customer'],
-        timeStamp: '1 hour ago',
-        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
-    }];
     allowedNotifications: Array<Notification> = [];
 
-    constructor() {
-        const loginEmail = localStorage.getItem('loginEmail');
-
-        if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
-            this.loginRole = 'Hod';
-        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('panel')) {
-            this.loginRole = 'Panel';
-        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('customer')) {
-            this.loginRole = 'Customer';
-        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('investigator')) {
-            this.loginRole = 'Investigator';
-        } else {
-            this.loginRole = 'Officer';
-        }
-
-        this.allowedNotifications = this.notifications.filter(notification => notification.roles.includes(this.loginRole));
+    constructor(notificationService: NotificationService) {
+        this.allowedNotifications = notificationService.getAllowedNotifications();
     }
 
     ngOnInit(): void {

src/app/layout/tabs/tabs.component.html

@@ -17,13 +17,13 @@
     [ngClass]="{'active' : showNotifications}">
         <img src="assets/icons/bell.svg" alt="bell icon">
 
-        <span class="badge"> 9+ </span>
+        <span class="badge"> {{ notificationsCount }} </span>
     </button>
 
     <section class="profile-actions" (mouseover)="showLogout=true" (mouseout)="showLogout=false">
         <ng-container *ngIf="!showLogout">
             <img src="assets/icons/user.svg" alt="user icon">
-            <span> Hi, Joe Ghatto </span>
+            <span> Hi, {{ loginName }} </span>
             <img src="assets/icons/chevron-down.svg" alt="chevron down image">
         </ng-container>
         <ng-container *ngIf="showLogout">

src/app/layout/tabs/tabs.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginService } from 'src/app/services/login.service';
+import { NotificationService } from 'src/app/services/notification.service';
 
 @Component({
     selector: 'app-tabs',
@@ -9,7 +11,12 @@ export class TabsComponent implements OnInit {
     showNotifications: boolean = false;
     showLogout: boolean = false;
 
-    constructor() {
+    loginName: string = '';
+    notificationsCount: number = 0;
+
+    constructor(loginService: LoginService, notificationService: NotificationService) {
+        this.loginName = loginService.getLoginName();
+        this.notificationsCount = notificationService.getAllowedNotifications().length;
     }
 
     ngOnInit(): void {

src/app/services/login.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/login.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+export type Role = 'Officer'|'Investigator'|'Hod'|'Panel'|'Customer';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+    private loginRole: Role;
+
+    constructor() {
+        const loginEmail = localStorage.getItem('loginEmail');
+
+        if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
+            this.loginRole = 'Hod';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('panel')) {
+            this.loginRole = 'Panel';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('customer')) {
+            this.loginRole = 'Customer';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('investigator')) {
+            this.loginRole = 'Investigator';
+        } else {
+            this.loginRole = 'Officer';
+        }
+    }
+
+    getLoginName() {
+        const loginEmail = localStorage.getItem('loginEmail');
+        if (loginEmail && loginEmail.includes('@')) {
+            const name = loginEmail.substring(0, loginEmail.indexOf('@'));
+            return name[0].toUpperCase() + name.substring(1);
+        } else {
+            return 'Joe Ghatto';
+        }
+    }
+
+    getLoginRole() {
+        return this.loginRole;
+    }
+}

src/app/services/notification.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  let service: NotificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/notification.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { LoginService, Role } from './login.service';
+
+export interface Notification {
+    text: string,
+    timeStamp: string,
+    roles: Array<Role>,
+    description?: string,
+    redirectionUrl?: string,        
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NotificationService {
+
+    private notifications: Array<Notification> = [{
+        text: 'New name application has been submitted',
+        description: 'A new Applicant in the company name Kimao has applied for an appeal',
+        roles: ['Officer'],
+        timeStamp: '1 hour ago',
+    }, {
+        text: 'Entity Corp. flagged for investigation',
+        roles: ['Investigator'],
+        timeStamp: '2 days ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Request to create a panel',
+        roles: ['Hod'],
+        timeStamp: '1 day ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Review non-compliance for Entity Corp.',
+        roles: ['Investigator'],
+        timeStamp: '4 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Concur non-compliance for Entity Corp.',
+        roles: ['Panel'],
+        timeStamp: '2 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Prepare preliminary letter',
+        roles: ['Investigator'],
+        timeStamp: '2 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Investigation complete',
+        roles: ['Investigator'],
+        timeStamp: '1 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'New name application has been submitted',
+        roles: ['Officer'],
+        description: 'A new Applicant in the company name Kimao has applied for an appeal',
+        timeStamp: '1 hour ago',
+    }, {
+        text: 'Request to create a new Committee',
+        roles: ['Officer'],
+        timeStamp: '2 hours ago',
+    }, {
+        text: 'Respond to non-compliance preliminary letter',
+        roles: ['Customer'],
+        timeStamp: '1 hour ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }];
+    
+    private allowedNotifications: Array<Notification> = [];
+
+    constructor(loginService: LoginService) {
+        const loginRole = loginService.getLoginRole();
+        this.allowedNotifications = this.notifications.filter(notification => notification.roles.includes(loginRole));
+    }
+
+    getAllowedNotifications() {
+        return this.allowedNotifications;
+    }
+}