fix: TT-106 Exponential growth in the EntryFields component and ProjectListHover component

Author: VanessaIniguezG

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;
 
   constructor(
+    private featureManagerService: FeatureManagerService,
     private formBuilder: FormBuilder,
     private store: Store<Merged>,
     private actionsSubject$: ActionsSubject,
@@ -49,16 +59,23 @@ export class EntryFieldsComponent implements OnInit {
   }
 
   ngOnInit(): void {
+
+    this.isFeatureToggleActivated().subscribe((flag) => {
+      console.log(flag);
+    });
+
     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,22 @@ export class EntryFieldsComponent implements OnInit {
   onTechnologyRemoved($event: string[]) {
     this.store.dispatch(new entryActions.UpdateEntryRunning({ ...this.newData, technologies: $event }));
   }
+
+
+  ngOnDestroy(): void {
+    if(this.exponentialGrowth){
+      this.loadActivitiesSubscribe.unsubscribe();
+      this.loadActiveEntrySubscribe.unsubscribe();
+      this.actionSetDateSubscribe.unsubscribe();
+    }
+    console.log('OnDestroy');
+  }
+
+  isFeatureToggleActivated() {
+      return  this.featureManagerService.isToggleEnabledForUser('exponential-growth').pipe(
+      map((enabled) => {
+        console.log(enabled);
+      })
+    )
+  }
 }

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

@@ -3,6 +3,7 @@ import { ActionsSubject, select, Store } from '@ngrx/store';
 import { ToastrService } from 'ngx-toastr';
 import { Subscription } from 'rxjs';
 import { filter } 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';
@@ -22,6 +23,12 @@ export class TimeClockComponent implements OnInit, OnDestroy {
   clockOutSubscription: Subscription;
 
 
+  /**
+   * subscription variables
+  */
+  storeSubscribe : Subscription;
+
+
   constructor(
     private azureAdB2CService: AzureAdB2CService,
     private store: Store<Entry>,
@@ -31,11 +38,12 @@ export class TimeClockComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.clockOutSubscription.unsubscribe();
+    this.storeSubscribe.unsubscribe();
   }
 
   ngOnInit() {
     this.username = this.azureAdB2CService.isLogin() ? this.azureAdB2CService.getName() : '';
-    this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
+    this.storeSubscribe = this.store.pipe(select(getActiveTimeEntry)).subscribe((activeTimeEntry) => {
       this.activeTimeEntry = activeTimeEntry;
       if (this.activeTimeEntry) {
         this.areFieldsVisible = true;

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`);
   }