[DSC-1570] set up store for datadog rum

Author: Andrea Barbasso

src/app/core/core-state.model.ts

@@ -11,6 +11,7 @@ import { JsonPatchOperationsState } from './json-patch/json-patch-operations.red
 import { MetaTagState } from './metadata/meta-tag.reducer';
 import { RouteState } from './services/route.reducer';
 import { RequestState } from './data/request-state.model';
+import { DatadogRumState } from '../shared/datadog-rum/datadog-rum.reducer';
 
 /**
  * The core sub-state in the NgRx store
@@ -27,4 +28,5 @@ export interface CoreState {
     'json/patch': JsonPatchOperationsState;
     'metaTag': MetaTagState;
     'route': RouteState;
+    'datadogRum': DatadogRumState;
 }

src/app/core/core.reducers.ts

@@ -14,6 +14,7 @@ import {
 import { historyReducer } from './history/history.reducer';
 import { metaTagReducer } from './metadata/meta-tag.reducer';
 import { CoreState } from './core-state.model';
+import { datadogRumReducer } from '../shared/datadog-rum/datadog-rum.reducer';
 
 export const coreReducers: ActionReducerMap<CoreState> = {
   'bitstreamFormats': bitstreamFormatReducer,
@@ -26,5 +27,6 @@ export const coreReducers: ActionReducerMap<CoreState> = {
   'auth': authReducer,
   'json/patch': jsonPatchOperationsReducer,
   'metaTag': metaTagReducer,
-  'route': routeReducer
+  'route': routeReducer,
+  'datadogRum': datadogRumReducer,
 };

src/app/shared/datadog-rum/datadog-rum.actions.ts

@@ -0,0 +1,20 @@
+import { Action } from '@ngrx/store';
+import { type } from '../ngrx/type';
+
+export const DatadogRumActionTypes = {
+  SET_STATUS: type('dspace/datadog-rum/SET_IS_INITIALIZED'),
+};
+
+export class setDatadogRumStatusAction implements Action {
+  type = DatadogRumActionTypes.SET_STATUS;
+  payload: {
+    isInitialized?: boolean;
+    isRunning?: boolean;
+  };
+
+  constructor(status: { isInitialized?: boolean, isRunning?: boolean }) {
+    this.payload = status;
+  }
+}
+
+export type DatadogRumAction = setDatadogRumStatusAction;

src/app/shared/datadog-rum/datadog-rum.reducer.ts

@@ -0,0 +1,29 @@
+import { DatadogRumAction, DatadogRumActionTypes } from './datadog-rum.actions';
+
+export interface DatadogRumState {
+  isInitialized: boolean;
+  isRunning: boolean;
+}
+
+const initialState: DatadogRumState = Object.create({isInitialized: false, isRunning: false});
+
+export function datadogRumReducer(state = initialState, action: DatadogRumAction): DatadogRumState {
+
+  switch (action.type) {
+
+    case DatadogRumActionTypes.SET_STATUS: {
+      return setDatadogRumStatus(state, action);
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
+
+function setDatadogRumStatus(state: DatadogRumState, action: DatadogRumAction) {
+  return {
+    ...state,
+    ...action.payload
+  };
+}

src/app/shared/datadog-rum/datadog-rum.service.ts

@@ -2,41 +2,67 @@ import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { datadogRum } from '@datadog/browser-rum';
 import { CookieConsents, KlaroService } from '../cookies/klaro.service';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { createSelector, Store } from '@ngrx/store';
+import { setDatadogRumStatusAction } from './datadog-rum.actions';
+import { DatadogRumState } from './datadog-rum.reducer';
+import { distinctUntilChanged, take } from 'rxjs/operators';
+import { coreSelector } from '../../core/core.selectors';
+import { CoreState } from '../../core/core-state.model';
+
+export const getDatadogRumState = createSelector(coreSelector, (state: CoreState) => state.datadogRum);
 
 @Injectable({
   providedIn: 'root'
 })
 export class DatadogRumService {
 
   consentUpdates$: BehaviorSubject<CookieConsents>;
-  isDatadogInitialized = false;
-  isDatadogRunning = false;
 
   constructor(
-    private klaroService: KlaroService
+    private klaroService: KlaroService,
+    private store: Store
   ) {
   }
 
   initDatadogRum() {
     this.klaroService.watchConsentUpdates();
     this.consentUpdates$ = this.klaroService.consentsUpdates$;
     this.consentUpdates$.subscribe(savedPreferences => {
-      if (savedPreferences?.datadog &&
-        environment.datadogRum?.clientToken && environment.datadogRum?.applicationId &&
-        environment.datadogRum?.service && environment.datadogRum?.env) {
-        if (!this.isDatadogInitialized) {
-          this.isDatadogInitialized = true;
-          this.isDatadogRunning = true;
-          datadogRum.init(environment.datadogRum);
-        } else if (!this.isDatadogRunning) {
-          this.isDatadogRunning = true;
-          datadogRum.startSessionReplayRecording();
+      this.getDatadogRumState().subscribe((state) => {
+        if (savedPreferences?.datadog &&
+          environment.datadogRum?.clientToken && environment.datadogRum?.applicationId &&
+          environment.datadogRum?.service && environment.datadogRum?.env) {
+          if (!state.isInitialized) {
+            this.store.dispatch(new setDatadogRumStatusAction({
+              isInitialized: true,
+              isRunning: true
+            }));
+            datadogRum.init(environment.datadogRum);
+          } else if (!state.isRunning) {
+            this.store.dispatch(new setDatadogRumStatusAction({
+              isRunning: true
+            }));
+            datadogRum.startSessionReplayRecording();
+          }
+        } else {
+          datadogRum.stopSessionReplayRecording();
+          this.store.dispatch(new setDatadogRumStatusAction({
+            isRunning: false
+          }));
         }
-      } else {
-        datadogRum.stopSessionReplayRecording();
-        this.isDatadogRunning = false;
-      }
+      });
     });
   }
+
+
+  getDatadogRumState(): Observable<DatadogRumState> {
+    return this.store
+      .select(getDatadogRumState)
+      .pipe(
+        distinctUntilChanged(),
+        take(1),
+    );
+  }
 }
+