Feat(datacite-tracker): replace effect with observable

angular.json

@@ -78,6 +78,17 @@
               "outputHashing": "none",
               "namedChunks": true
             },
+            "local": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
+            },
             "development": {
               "optimization": false,
               "extractLicenses": false,
@@ -101,6 +112,10 @@
             "development": {
               "buildTarget": "osf:build:development",
               "hmr": false
+            },
+            "local": {
+              "buildTarget": "osf:build:local",
+              "hmr": false
             }
           },
           "defaultConfiguration": "development"

package.json

@@ -18,6 +18,7 @@
     "ngxs:store": "ng generate @ngxs/store:store --name --path",
     "start": "ng serve",
     "start:docker": "ng serve --host 0.0.0.0 --port 4200 --poll 2000",
+    "start:docker:local": "ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration local",
     "test": "jest && npm run test:display",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage && npm run test:display",

src/app/features/project/overview/project-overview.component.ts

@@ -7,6 +7,8 @@ import { DialogService } from 'primeng/dynamicdialog';
 import { Message } from 'primeng/message';
 import { TagModule } from 'primeng/tag';
 
+import { filter, map, Observable } from 'rxjs';
+
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -18,36 +20,38 @@ import {
   inject,
   OnInit,
 } from '@angular/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { SubmissionReviewStatus } from '@osf/features/moderation/enums';
-import {
-  ClearCollectionModeration,
-  CollectionsModerationSelectors,
-  GetSubmissionsReviewActions,
-} from '@osf/features/moderation/store/collections-moderation';
+import { IS_XSMALL } from '@osf/shared/helpers';
 import {
   LoadingSpinnerComponent,
   MakeDecisionDialogComponent,
   ResourceMetadataComponent,
   SubHeaderComponent,
-} from '@osf/shared/components';
-import { Mode, ResourceType, UserPermissions } from '@osf/shared/enums';
-import { IS_XSMALL } from '@osf/shared/helpers';
-import { MapProjectOverview } from '@osf/shared/mappers';
-import { ToastService } from '@osf/shared/services';
+} from '@shared/components';
+import { DataciteTrackerComponent } from '@shared/components/datacite-tracker/datacite-tracker.component';
+import { Mode, ResourceType, UserPermissions } from '@shared/enums';
+import { MapProjectOverview } from '@shared/mappers/resource-overview.mappers';
+import { ToastService } from '@shared/services';
 import {
-  ClearCollections,
   ClearWiki,
   CollectionsSelectors,
   GetBookmarksCollectionId,
   GetCollectionProvider,
   GetHomeWiki,
   GetLinkedResources,
-} from '@osf/shared/stores';
-import { GetActivityLogs } from '@osf/shared/stores/activity-logs';
+} from '@shared/stores';
+import { GetActivityLogs } from '@shared/stores/activity-logs';
+import { ClearCollections } from '@shared/stores/collections';
+
+import {
+  ClearCollectionModeration,
+  CollectionsModerationSelectors,
+  GetSubmissionsReviewActions,
+} from '../../moderation/store/collections-moderation';
 
 import {
   LinkedResourcesComponent,
@@ -88,7 +92,7 @@ import {
   providers: [DialogService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProjectOverviewComponent implements OnInit {
+export class ProjectOverviewComponent extends DataciteTrackerComponent implements OnInit {
   @HostBinding('class') classes = 'flex flex-1 flex-column w-full h-full';
 
   private readonly route = inject(ActivatedRoute);
@@ -105,7 +109,6 @@ export class ProjectOverviewComponent implements OnInit {
   isProjectLoading = select(ProjectOverviewSelectors.getProjectLoading);
   isCollectionProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
   isReviewActionsLoading = select(CollectionsModerationSelectors.getCurrentReviewActionLoading);
-
   readonly activityPageSize = 5;
   readonly activityDefaultPage = 1;
   readonly SubmissionReviewStatus = SubmissionReviewStatus;
@@ -149,6 +152,7 @@ export class ProjectOverviewComponent implements OnInit {
   });
 
   protected currentProject = select(ProjectOverviewSelectors.getProject);
+  private currentProject$ = toObservable(this.currentProject);
   protected userPermissions = computed(() => {
     return this.currentProject()?.currentUserPermissions || [];
   });
@@ -187,7 +191,15 @@ export class ProjectOverviewComponent implements OnInit {
     return null;
   });
 
+  protected getDoi(): Observable<string | null> {
+    return this.currentProject$.pipe(
+      filter((project) => project != null),
+      map((project) => project?.identifiers?.find((item) => item.category == 'doi')?.value ?? null)
+    );
+  }
+
   constructor() {
+    super();
     this.setupCollectionsEffects();
     this.setupCleanup();
   }
@@ -205,6 +217,7 @@ export class ProjectOverviewComponent implements OnInit {
       this.actions.getComponents(projectId);
       this.actions.getLinkedProjects(projectId);
       this.actions.getActivityLogs(projectId, this.activityDefaultPage.toString(), this.activityPageSize.toString());
+      this.setupDataciteViewTrackerEffect().subscribe();
     }
   }
 

src/app/shared/components/datacite-tracker/datacite-tracker.component.ts

@@ -0,0 +1,33 @@
+import { filter, Observable, switchMap, take } from 'rxjs';
+
+import { inject, Injectable } from '@angular/core';
+
+import { DataciteService } from '@shared/services/datacite/datacite.service';
+
+@Injectable()
+export abstract class DataciteTrackerComponent {
+  private dataciteService = inject(DataciteService);
+
+  /**
+   * Abstract method to retrieve the DOI (Digital Object Identifier) of the resource.
+   * Must be implemented by subclasses.
+   *
+   * @returns An Observable that emits a string DOI or null if unavailable.
+   */
+  protected abstract getDoi(): Observable<string | null>;
+
+  /**
+   * Sets up a one-time effect to log a "view" event to Datacite for the resource DOI.
+   * It waits until the DOI is available, takes the first non-null value,
+   * and then calls `DataciteService.logView`.
+   *
+   * @returns An Observable that completes after logging the view.
+   */
+  protected setupDataciteViewTrackerEffect(): Observable<void> {
+    return this.getDoi().pipe(
+      take(1),
+      filter((doi): doi is string => !!doi),
+      switchMap((doi) => this.dataciteService.logView(doi))
+    );
+  }
+}

src/app/shared/models/datacite/datacite-event.enum.ts

@@ -0,0 +1,4 @@
+export const enum DataciteEvent {
+  VIEW = 'view',
+  DOWNLOAD = 'download',
+}

src/app/shared/services/datacite/datacite.service.spec.ts

@@ -0,0 +1,117 @@
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { ENVIRONMENT } from '@core/constants/environment.token';
+import { DataciteEvent } from '@shared/models/datacite/datacite-event.enum';
+
+import { DataciteService } from './datacite.service';
+
+describe('DataciteService', () => {
+  let service: DataciteService;
+  let httpMock: HttpTestingController;
+
+  const dataciteTrackerAddress = 'https://tracker.test';
+  const dataciteTrackerRepoId = 'repo-123';
+  describe('with proper configuration', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          DataciteService,
+          provideHttpClient(),
+          provideHttpClientTesting(),
+          {
+            provide: ENVIRONMENT,
+            useValue: {
+              dataciteTrackerRepoId,
+              dataciteTrackerAddress,
+            },
+          },
+        ],
+      });
+
+      service = TestBed.inject(DataciteService);
+      httpMock = TestBed.inject(HttpTestingController);
+    });
+
+    afterEach(() => {
+      httpMock.verify();
+    });
+
+    it('logView should POST with correct payload', () => {
+      const doi = '10.1234/abcd';
+      service.logView(doi).subscribe({
+        next: (result) => expect(result).toBeUndefined(),
+      });
+
+      const req = httpMock.expectOne(dataciteTrackerAddress);
+      expect(req.request.method).toBe('POST');
+      expect(req.request.body).toEqual({
+        n: DataciteEvent.VIEW,
+        u: window.location.href,
+        i: dataciteTrackerRepoId,
+        p: doi,
+      });
+      expect(req.request.headers.get('Content-Type')).toBe('application/json');
+      req.flush({});
+    });
+
+    it('logDownload should POST with correct payload', () => {
+      const doi = '10.1234/abcd';
+      service.logDownload(doi).subscribe({
+        next: (result) => expect(result).toBeUndefined(),
+      });
+
+      const req = httpMock.expectOne(dataciteTrackerAddress);
+      expect(req.request.body).toEqual({
+        n: DataciteEvent.DOWNLOAD,
+        u: window.location.href,
+        i: dataciteTrackerRepoId,
+        p: doi,
+      });
+      req.flush({});
+    });
+
+    it('should return EMPTY when doi is missing', (done: () => void) => {
+      service.logView('').subscribe({
+        next: (result) => expect(result).toBeUndefined(),
+        complete: () => done(),
+      });
+      httpMock.expectNone(dataciteTrackerAddress);
+    });
+  });
+
+  describe('on local setup (without dataciteTrackerRepoId configured)', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          DataciteService,
+          provideHttpClient(),
+          provideHttpClientTesting(),
+          {
+            provide: ENVIRONMENT,
+            useValue: {
+              dataciteTrackerRepoId: null,
+              dataciteTrackerAddress: dataciteTrackerAddress,
+            },
+          },
+        ],
+      });
+
+      service = TestBed.inject(DataciteService);
+      httpMock = TestBed.inject(HttpTestingController);
+    });
+
+    it('should return EMPTY when dataciteTrackerRepoId is missing', (done: () => void) => {
+      service.logView('10.1234/abcd').subscribe({
+        next: (result) => expect(result).toBeUndefined(),
+        complete: () => done(),
+      });
+      httpMock.expectNone(dataciteTrackerAddress);
+    });
+
+    afterEach(() => {
+      httpMock.verify();
+    });
+  });
+});

src/app/shared/services/datacite/datacite.service.ts

@@ -0,0 +1,69 @@
+import { EMPTY, map, Observable } from 'rxjs';
+
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+
+import { ENVIRONMENT } from '@core/constants/environment.token';
+import { DataciteEvent } from '@shared/models/datacite/datacite-event.enum';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataciteService {
+  #http: HttpClient = inject(HttpClient);
+  #environment = inject(ENVIRONMENT);
+
+  /**
+   * Logs a "view" event for a given DOI to the Datacite tracker.
+   * If the DOI is null/empty or the tracker repository ID is not configured,
+   * (in most cases, due to being used in dev environment),
+   * returns an empty observable.
+   *
+   * @param doi - The DOI (Digital Object Identifier) of the resource.
+   * @returns An Observable that completes when the request is sent.
+   */
+  logView(doi: string): Observable<void> {
+    return this.logActivity(DataciteEvent.VIEW, doi);
+  }
+
+  /**
+   * Logs a "download" event for a given DOI to the Datacite tracker.
+   * If the DOI is null/empty or the tracker repository ID is not configured
+   * (in most cases, due to being used in dev environment),
+   * returns an empty observable.
+   *
+   * @param doi - The DOI (Digital Object Identifier) of the resource.
+   * @returns An Observable that completes when the request is sent.
+   */
+  logDownload(doi: string): Observable<void> {
+    return this.logActivity(DataciteEvent.DOWNLOAD, doi);
+  }
+
+  /**
+   * Internal helper to log a specific Datacite event for a given DOI.
+   *
+   * @param event - The Datacite event type (VIEW or DOWNLOAD).
+   * @param doi - The DOI (Digital Object Identifier) of the resource.
+   * @returns An Observable that completes when the HTTP POST is sent,
+   *          or EMPTY if DOI or repo ID is missing.
+   */
+  private logActivity(event: DataciteEvent, doi: string): Observable<void> {
+    if (!doi || !this.#environment.dataciteTrackerRepoId) {
+      return EMPTY;
+    }
+    const payload = {
+      n: event,
+      u: window.location.href,
+      i: this.#environment.dataciteTrackerRepoId,
+      p: doi,
+    };
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+    return this.#http.post(this.#environment.dataciteTrackerAddress, payload, { headers }).pipe(
+      map(() => {
+        return;
+      })
+    );
+  }
+}

src/environments/environment.development.ts

@@ -74,6 +74,8 @@ export const environment = {
    * Default provider for OSF content and routing.
    */
   defaultProvider: 'osf',
+  dataciteTrackerRepoId: null,
+  dataciteTrackerAddress: 'https://analytics.datacite.org/api/metric',
   /**
    * Google File Picker configuration values.
    */