fix: TT-106 asynchronous function in the EntryFields

Author: VanessaIniguezG

src/app/modules/time-clock/components/entry-fields/entry-fields.component.spec.ts

@@ -1,3 +1,4 @@
+import { Observable, of } from 'rxjs';
 import { LoadActiveEntry, EntryActionTypes, UpdateEntry } from './../../store/entry.actions';
 import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
@@ -15,6 +16,7 @@ import { formatDate } from '@angular/common';
 import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import * as moment from 'moment';
 import { DATE_FORMAT_YEAR } from 'src/environments/environment';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 
 describe('EntryFieldsComponent', () => {
   type Merged = TechnologyState & ProjectState;
@@ -24,6 +26,7 @@ describe('EntryFieldsComponent', () => {
   let mockTechnologySelector;
   let mockProjectsSelector;
   let entryForm;
+  let featureManagerService : FeatureManagerService;
   const actionSub: ActionsSubject = new ActionsSubject();
   const toastrServiceStub = {
     error: (message?: string, title?: string, override?: Partial<IndividualConfig>) => { },
@@ -114,6 +117,7 @@ describe('EntryFieldsComponent', () => {
     entryForm = TestBed.inject(FormBuilder);
     mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);
     mockProjectsSelector = store.overrideSelector(getCustomerProjects, state.projects);
+    featureManagerService = TestBed.inject(FeatureManagerService);
   }));
 
   beforeEach(() => {
@@ -412,4 +416,13 @@ describe('EntryFieldsComponent', () => {
     expect(component.selectedTechnologies).toBe(initialTechnologies);
   });
 
+  // it('When Component is created, should call the feature toggle method', () => {
+  //   spyOn(component, 'isFeatureToggleActivated').and.returnValue(of(true));
+
+  //   component.ngOnInit();
+
+  //   expect(component.isFeatureToggleActivated).toHaveBeenCalled();
+  //   expect(component.isUserRoleToggleOn).toBe(true);
+  // });
+
 });

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -1,13 +1,14 @@
 import { ActivityManagementActionTypes } from './../../../activities-management/store/activity-management.actions';
 import { EntryActionTypes, LoadActiveEntry } from './../../store/entry.actions';
-import { filter } from 'rxjs/operators';
-import { Component, OnInit } from '@angular/core';
+import { filter, map } from 'rxjs/operators';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Store, ActionsSubject, select } from '@ngrx/store';
 import { Activity, NewEntry } from '../../../shared/models';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { TechnologyState } from '../../../shared/store/technology.reducers';
 import { ActivityState, LoadActivities } from '../../../activities-management/store';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 
 import * as entryActions from '../../store/entry.actions';
 import { get } from 'lodash';
@@ -16,6 +17,7 @@ import { ToastrService } from 'ngx-toastr';
 import { formatDate } from '@angular/common';
 import { getTimeEntriesDataSource } from '../../store/entry.selectors';
 import { DATE_FORMAT } from 'src/environments/environment';
+import { Subscription } from 'rxjs';
 
 type Merged = TechnologyState & ProjectState & ActivityState;
 
@@ -24,16 +26,24 @@ type Merged = TechnologyState & ProjectState & ActivityState;
   templateUrl: './entry-fields.component.html',
   styleUrls: ['./entry-fields.component.scss'],
 })
-export class EntryFieldsComponent implements OnInit {
+export class EntryFieldsComponent implements OnInit, OnDestroy {
   entryForm: FormGroup;
   selectedTechnologies: string[] = [];
   activities: Activity[] = [];
   activeEntry;
   newData;
   lastEntry;
   showTimeInbuttons = false;
+  loadActivitiesSubscribe: Subscription;
+  loadActiveEntrySubscribe: Subscription;
+  actionSetDateSubscribe: Subscription;
+  loadActivitiesSubject;
+  loadActiveEntrySubject;
+  actionSetDateSubject;
+  exponentialGrowth: Boolean;
 
   constructor(
+    private featureManagerService: FeatureManagerService,
     private formBuilder: FormBuilder,
     private store: Store<Merged>,
     private actionsSubject$: ActionsSubject,
@@ -48,17 +58,24 @@ export class EntryFieldsComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
+    
+    this.exponentialGrowth = await this.isFeatureToggleActivated();
+  
+    console.log(this.exponentialGrowth);
+  
     this.store.dispatch(new LoadActivities());
     this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1, new Date().getFullYear()));
-    this.actionsSubject$
+    this.loadActivitiesSubject = this.actionsSubject$
       .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS))
       .subscribe((action) => {
         this.activities = action.payload;
         this.store.dispatch(new LoadActiveEntry());
       });
 
-    this.actionsSubject$
+    this.exponentialGrowth  ? this.loadActivitiesSubscribe = this.loadActivitiesSubject : this.loadActivitiesSubject;
+    
+    this.loadActiveEntrySubject = this.actionsSubject$
       .pipe(
         filter(
           (action: any) =>
@@ -77,7 +94,9 @@ export class EntryFieldsComponent implements OnInit {
         }
       });
 
-    this.actionsSubject$
+      this.exponentialGrowth  ? this.loadActiveEntrySubscribe = this.loadActiveEntrySubject : this.loadActiveEntrySubject;
+
+      this.actionSetDateSubject = this.actionsSubject$
       .pipe(filter((action: any) => action.type === EntryActionTypes.LOAD_ACTIVE_ENTRY_SUCCESS))
       .subscribe((action) => {
         this.activeEntry = action.payload;
@@ -91,6 +110,8 @@ export class EntryFieldsComponent implements OnInit {
           start_hour: formatDate(this.activeEntry.start_date, 'HH:mm', 'en'),
         };
       });
+
+      this.exponentialGrowth  ? this.actionSetDateSubscribe = this.actionSetDateSubject : this.actionSetDateSubject;
   }
 
   get activity_id() {
@@ -174,4 +195,23 @@ export class EntryFieldsComponent implements OnInit {
   onTechnologyRemoved($event: string[]) {
     this.store.dispatch(new entryActions.UpdateEntryRunning({ ...this.newData, technologies: $event }));
   }
+
+
+  ngOnDestroy(): void {
+    console.log(this.exponentialGrowth);
+    if(this.exponentialGrowth){
+      this.loadActivitiesSubscribe.unsubscribe();
+      this.loadActiveEntrySubscribe.unsubscribe();
+      this.actionSetDateSubscribe.unsubscribe();
+    }
+    console.log('Entry Fields OnDestroy');
+  }
+
+  isFeatureToggleActivated() {
+     return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
+        map((enabled) => {
+          return enabled === true ? true : false;
+        })
+      ).toPromise();
+  }
 }

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -26,6 +26,13 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   updateEntrySubscription: Subscription;
   isLoading$: Observable<boolean>;
 
+
+  /**
+   * subscription variables
+  */
+  projectsSubscribe : Subscription;
+  activeEntrySubscribe : Subscription;
+
   constructor(private formBuilder: FormBuilder, private store: Store<ProjectState>,
               private actionsSubject$: ActionsSubject, private toastrService: ToastrService) {
     this.projectsForm = this.formBuilder.group({ project_id: null, });
@@ -35,7 +42,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.store.dispatch(new actions.LoadProjects());
     const projects$ = this.store.pipe(select(getProjects));
-    projects$.subscribe((projects) => {
+    this.projectsSubscribe = projects$.subscribe((projects) => {
       this.listProjects = [];
       projects.forEach((project) => {
           const projectWithSearchField = {...project};
@@ -61,7 +68,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   loadActiveTimeEntry() {
     this.store.dispatch(new entryActions.LoadActiveEntry());
     const activeEntry$ = this.store.pipe(select(getActiveTimeEntry));
-    activeEntry$.subscribe((activeEntry) => {
+    this.activeEntrySubscribe = activeEntry$.subscribe((activeEntry) => {
       this.activeEntry = activeEntry;
       if (activeEntry) {
         this.showClockIn = false;
@@ -111,5 +118,7 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.updateEntrySubscription.unsubscribe();
+    this.projectsSubscribe.unsubscribe();
+    this.activeEntrySubscribe.unsubscribe();
   }
 }

src/app/modules/time-clock/pages/time-clock.component.ts

@@ -2,12 +2,14 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { ToastrService } from 'ngx-toastr';
 import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
+import { threadId } from 'worker_threads';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 import { EntryFieldsComponent } from '../components/entry-fields/entry-fields.component';
 import { Entry } from './../../shared/models/entry.model';
 import { EntryActionTypes, LoadEntriesSummary, StopTimeEntryRunning } from './../store/entry.actions';
 import { getActiveTimeEntry } from './../store/entry.selectors';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 @Component({
   selector: 'app-time-clock',
   templateUrl: './time-clock.component.html',
@@ -22,20 +24,39 @@ export class TimeClockComponent implements OnInit, OnDestroy {
   clockOutSubscription: Subscription;
 
 
+  /**
+   * subscription variables
+  */
+  storeSubscribe : Subscription;
+  storeSubject;
+  exponentialGrowth;
+
+
   constructor(
+    private featureManagerService: FeatureManagerService,
     private azureAdB2CService: AzureAdB2CService,
     private store: Store<Entry>,
     private toastrService: ToastrService,
     private actionsSubject$: ActionsSubject
   ) {}
 
   ngOnDestroy(): void {
+    // if(this.exponentialGrowth){
+    //   this.storeSubscribe.unsubscribe();
+    // }
     this.clockOutSubscription.unsubscribe();
   }
 
   ngOnInit() {
+
+    this.isFeatureToggleActivated().subscribe((flag) => {
+      this.exponentialGrowth = flag;
+      // console.log('Time-clock', this.exponentialGrowth);
+    });
+    // console.log('Time-clock', this.exponentialGrowth);
+
     this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : '';
-    this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
+    this.storeSubject = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
       this.activeTimeEntry = activeTimeEntry;
       if (this.activeTimeEntry) {
         this.areFieldsVisible = true;
@@ -44,6 +65,8 @@ export class TimeClockComponent implements OnInit, OnDestroy {
       }
     });
 
+    this.exponentialGrowth ? this.storeSubscribe = this.storeSubject : this.storeSubject;
+
     this.reloadSummariesOnClockOut();
 
   }
@@ -72,4 +95,14 @@ export class TimeClockComponent implements OnInit, OnDestroy {
       this.toastrService.error('Activity is required');
     }
   }
+
+  isFeatureToggleActivated() {
+    return this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
+       map((enabled) => {
+         return enabled === true ? true : false;
+       })
+     );
+ }
 }
+
+

src/app/modules/time-clock/services/entry.service.ts

@@ -20,6 +20,7 @@ export class EntryService {
   baseUrl = `${environment.timeTrackerApiUrl}/time-entries`;
 
   loadActiveEntry(): Observable<any> {
+    console.log('Method Call');
     return this.http.get(`${this.baseUrl}/running`);
   }