Merge pull request #1162 from ORCID/homeComponent

Home component

ui/src/app/account/login/login.component.spec.ts

@@ -27,7 +27,7 @@ describe('LoginComponent', () => {
         { provide: StateStorageService, useValue: stateStorageServiceSpy },
         { provide: AccountService, useValue: accountServiceSpy },
       ],
-    }).compileComponents()
+    })
 
     fixture = TestBed.createComponent(LoginComponent)
     component = fixture.componentInstance

ui/src/app/account/service/account.service.ts

@@ -21,14 +21,12 @@ export class AccountService {
     private languageService: LanguageService,
     private sessionStorage: SessionStorageService,
     private router: Router,
-    private http: HttpClient
-  ) // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
-  //private memberService: MSMemberService
+    private http: HttpClient // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
+  ) //private memberService: MSMemberService
   {}
 
   private fetchAccountData() {
-    console.log('Fetching account data from the back end')
-
+    this.isFetchingAccountData = true
     return this.http
       .get<IAccount>('/services/userservice/api/account', {
         observe: 'response',
@@ -139,7 +137,6 @@ export class AccountService {
       this.stopFetchingAccountData.next(true)
     }
     if ((this.accountData.value === undefined && !this.isFetchingAccountData) || force) {
-      this.isFetchingAccountData = true
       this.fetchAccountData().subscribe()
     }
 

ui/src/app/app.module.ts

@@ -15,20 +15,13 @@ import { HeaderInterceptor } from './shared/interceptor/header.interceptor'
 import { ErrorService } from './error/service/error.service'
 import { ErrorComponent } from './error/error.component'
 import { FormsModule } from '@angular/forms'
-import { UserModule } from './user/user.module'
-import { AffiliationModule } from './affiliation/affiliation.module'
-import { MembersComponent } from './member/members.component'
-import { MemberModule } from './member/member.module'
 
 @NgModule({
   declarations: [AppComponent, NavbarComponent, FooterComponent, ErrorComponent],
   imports: [
     BrowserModule,
-    UserModule,
-    AffiliationModule,
-    MemberModule,
-    AccountModule,
     HomeModule,
+    AccountModule,
     HttpClientModule,
     AppRoutingModule,
     NgxWebstorageModule.forRoot(),

ui/src/app/home/generic-landing.component.html

@@ -0,0 +1,14 @@
+<div>
+  <H1 class="mb-4">Something has gone wrong...</H1>
+  <p class="mb-4">
+    We can't display your member details at the moment. Please try refreshing your browser window to see if that fixes
+    the problem.
+  </p>
+  <p>
+    If your member details are still not being displayed please contact
+    <a href="mailto:membership@orcid.org?subject=Member Portal - Member details not displayed"
+      >membership&#64;orcid.org</a
+    >
+    for more help.
+  </p>
+</div>

ui/src/app/home/generic-landing.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenericLandingComponent } from './generic-landing.component';
+
+describe('GenericLandingComponent', () => {
+  let component: GenericLandingComponent;
+  let fixture: ComponentFixture<GenericLandingComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GenericLandingComponent]
+    });
+    fixture = TestBed.createComponent(GenericLandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/home/generic-landing.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-generic-landing',
+  templateUrl: './generic-landing.component.html',
+  styleUrls: ['./generic-landing.component.scss']
+})
+export class GenericLandingComponent {
+
+}

ui/src/app/home/home.component.html

@@ -1 +1,13 @@
-<p>home works!</p>
+<div class="row h-100">
+  <div class="col-md-12">
+    <div class="h-100">
+      <div class="d-flex flex-column h-100">
+        <div class="alert alert-success mt-3">{{ loggedInMessage }}</div>
+        <div *ngIf="memberData || memberData === null" class="h-100 home-container mb-3">
+          <router-outlet *ngIf="memberData"></router-outlet>
+          <app-generic-landing *ngIf="memberData === null" class="p-4 d-flex"></app-generic-landing>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

ui/src/app/home/home.component.scss

@@ -0,0 +1,12 @@
+:host {
+    max-width: 1250px;
+    display: block;
+    margin: auto;
+    height: 100%;
+  }
+
+  .home-container {
+    border: 2px solid #eeeeee;
+    border-radius: 5px 0px 0px 5px;
+  }
+

ui/src/app/home/home.component.spec.ts

@@ -1,21 +1,69 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { HomeComponent } from './home.component'
+import { MemberService } from '../member/service/member.service'
+import { AccountService } from '../account'
+import { of } from 'rxjs'
 
 describe('HomeComponent', () => {
   let component: HomeComponent
   let fixture: ComponentFixture<HomeComponent>
+  let memberServiceSpy: jasmine.SpyObj<MemberService>
+  let accountServiceSpy: jasmine.SpyObj<AccountService>
 
   beforeEach(() => {
+    accountServiceSpy = jasmine.createSpyObj('AccountService', ['getAccountData'])
+    memberServiceSpy = jasmine.createSpyObj('MemberService', ['getMemberData'])
+
     TestBed.configureTestingModule({
       declarations: [HomeComponent],
+      providers: [
+        { provide: MemberService, useValue: memberServiceSpy },
+        { provide: AccountService, useValue: accountServiceSpy },
+      ],
     })
     fixture = TestBed.createComponent(HomeComponent)
     component = fixture.componentInstance
-    fixture.detectChanges()
+
+    accountServiceSpy = TestBed.inject(AccountService) as jasmine.SpyObj<AccountService>
+    memberServiceSpy = TestBed.inject(MemberService) as jasmine.SpyObj<MemberService>
   })
 
-  it('should create', () => {
+  it('should call getAccountData but not getMemberData', () => {
+    accountServiceSpy.getAccountData.and.returnValue(of(null))
+
     expect(component).toBeTruthy()
+
+    component.ngOnInit()
+
+    expect(accountServiceSpy.getAccountData).toHaveBeenCalled()
+    expect(memberServiceSpy.getMemberData).toHaveBeenCalledTimes(0)
+  })
+
+  it('should call getMemberData if account data is not null', () => {
+    accountServiceSpy.getAccountData.and.returnValue(
+      of({
+        activated: true,
+        authorities: ['test', 'test'],
+        email: 'email@email.com',
+        firstName: 'name',
+        langKey: 'en',
+        lastName: 'surname',
+        imageUrl: 'url',
+        salesforceId: 'sfid',
+        loggedAs: false,
+        loginAs: 'sfid',
+        mainContact: false,
+        mfaEnabled: false,
+      })
+    )
+    memberServiceSpy.getMemberData.and.returnValue(of({}))
+
+    expect(component).toBeTruthy()
+
+    component.ngOnInit()
+
+    expect(accountServiceSpy.getAccountData).toHaveBeenCalled()
+    expect(memberServiceSpy.getMemberData).toHaveBeenCalled()
   })
 })

ui/src/app/home/home.component.ts

@@ -1,8 +1,50 @@
-import { Component } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { AccountService } from '../account'
+import { MemberService } from '../member/service/member.service'
+import { Subscription } from 'rxjs/internal/Subscription'
+import { ISFMemberData } from '../member/model/salesforce-member-data.model'
+import { IAccount } from '../account/model/account.model'
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit, OnDestroy {
+  account: IAccount | undefined | null
+  memberData: ISFMemberData | undefined | null
+  authenticationStateSubscription: Subscription | undefined
+  memberDataSubscription: Subscription | undefined
+  manageMemberSubscription: Subscription | undefined
+  salesforceId: string | undefined
+  loggedInMessage: string | undefined
+
+  constructor(
+    private accountService: AccountService,
+    private memberService: MemberService
+  ) {}
+
+  ngOnInit() {
+    this.accountService.getAccountData().subscribe((account) => {
+      this.account = account
+      if (account) {
+        this.memberDataSubscription = this.memberService.getMemberData(account.salesforceId).subscribe((data) => {
+          this.memberData = data
+        })
+        this.loggedInMessage = $localize`:@@home.loggedIn.message.string:You are logged in as user ${account.email}`
+      }
+    })
+  }
+
+  ngOnDestroy() {
+    if (this.authenticationStateSubscription) {
+      this.authenticationStateSubscription.unsubscribe()
+    }
+    if (this.memberDataSubscription) {
+      this.memberDataSubscription.unsubscribe()
+    }
+    if (this.manageMemberSubscription) {
+      this.manageMemberSubscription.unsubscribe()
+    }
+  }
+}

ui/src/app/home/home.module.ts

@@ -3,9 +3,10 @@ import { CommonModule } from '@angular/common'
 import { RouterModule } from '@angular/router'
 import { routes } from './home.route'
 import { HomeComponent } from './home.component'
+import { GenericLandingComponent } from './generic-landing.component'
 
 @NgModule({
-  declarations: [HomeComponent],
   imports: [CommonModule, RouterModule.forChild(routes)],
+  declarations: [HomeComponent, GenericLandingComponent],
 })
 export class HomeModule {}