feat(pmp-web): implement fetching data from api for single repository

Fix invalid property name at shared because API returns prsStatistics instead stat property.
valueadd-poland · Jan 31, 2020 · 8ddf192 · 8ddf192
1 parent 8e86766
commit 8ddf192
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 45 deletions.
diff --git a/...ository/repository-statistics/data-access/src/lib/+state/repository-statistics.actions.ts b/...ository/repository-statistics/data-access/src/lib/+state/repository-statistics.actions.ts
@@ -1,7 +1,7 @@
 import { Action } from '@ngrx/store';
 import { HttpErrorResponse } from '@angular/common/http';
 import { GetRepositoryStatisticsPayload } from '@pimp-my-pr/pmp-web/repository/domain';
-import { RepositoryModel } from '@pimp-my-pr/shared/domain';
+import { RepositoryStatistics } from '@pimp-my-pr/shared/domain';
 
 export namespace fromSingleRepositoryStatisticsActions {
   export enum Types {
@@ -25,7 +25,7 @@ export namespace fromSingleRepositoryStatisticsActions {
   export class GetRepositoryStatisticsSuccess implements Action {
     readonly type = Types.GetRepositoryStatisticsSuccess;
 
-    constructor(public payload: RepositoryModel) {}
+    constructor(public payload: RepositoryStatistics) {}
   }
 
   export type CollectiveType =

diff --git a/...ository/repository-statistics/data-access/src/lib/+state/repository-statistics.reducer.ts b/...ository/repository-statistics/data-access/src/lib/+state/repository-statistics.reducer.ts
@@ -1,11 +1,11 @@
 import { fromSingleRepositoryStatisticsActions } from './repository-statistics.actions';
 import { HttpErrorResponse } from '@angular/common/http';
-import { RepositoryModel } from '@pimp-my-pr/shared/domain';
+import { RepositoryStatistics } from '@pimp-my-pr/shared/domain';
 
 export const SINGLEREPOSITORYSTATISTICS_FEATURE_KEY = 'singleRepositoryStatistics';
 
 export interface SingleRepositoryStatisticsState {
-  repositoryStatistics: RepositoryModel | null;
+  repositoryStatistics: RepositoryStatistics | null;
   repositoryStatisticsLoading: boolean;
   repositoryStatisticsLoadError: HttpErrorResponse | null;
 }

diff --git a/.../repository-statistics/data-access/src/lib/services/repository-statistics-data.service.ts b/.../repository-statistics/data-access/src/lib/services/repository-statistics-data.service.ts
@@ -1,43 +1,26 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { GetRepositoryStatisticsPayload } from '@pimp-my-pr/pmp-web/repository/domain';
-import { RepositoryModel } from '@pimp-my-pr/shared/domain';
-
-const mockedData: RepositoryModel = {
-  // TODO mocked data for repository
-  owner: 'valueadd',
-  fullName: 'pimp-my-pr',
-  name: 'pmp',
-  pictureUrl: 'https://picsum.photos/id/1025/200/300',
-  prsStatistics: [
-    {
-      author: {
-        name: 'MockUser',
-        avatarUrl: 'https://picsum.photos/id/237/200/300',
-        id: 1231
-      },
-      commentsCount: 123,
-      createdAt: '12/12/12',
-      linesOfCodeToCheck: 3245,
-      reviewCommentsCount: 234,
-      id: 2345,
-      timeWaiting: '124',
-      title: '12414',
-      url: 'https://picsum.photos/id/1050/200/300'
-    }
-  ]
-};
+import { IResponse, RepositoryStatistics } from '@pimp-my-pr/shared/domain';
+import { urlFactory } from '@valueadd/typed-urls';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class RepositoryStatisticsDataService {
   readonly endpoints = {
-    // TODO missing API url to get details about repository
-    getRepositoryStatistics: ''
+    getRepositoryStatistics: urlFactory<'repositoryId'>('/api/repository/:repositoryId', true)
   };
+
   constructor(private http: HttpClient) {}
 
-  getRepositoryStatistics(payload: GetRepositoryStatisticsPayload): Observable<RepositoryModel> {
-    return of(mockedData);
+  getRepositoryStatistics(
+    payload: GetRepositoryStatisticsPayload
+  ): Observable<RepositoryStatistics> {
+    return this.http
+      .get<IResponse<RepositoryStatistics, null>>(
+        this.endpoints.getRepositoryStatistics.url({ repositoryId: payload.id })
+      )
+      .pipe(map((res: IResponse<RepositoryStatistics, null>) => res.data));
   }
 }
diff --git a/...ory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.html b/...ory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.html
@@ -1,13 +1,14 @@
 <div class="repository-statistics__container">
   <pmp-header-container
+    *ngIf="repository$ | async"
     [avatarLabel]="(repository$ | async).name"
     [avatarUrl]="(repository$ | async).pictureUrl"
     label="Pull requests pending"
   ></pmp-header-container>
-  <!-- TODO missing property from API model -->
-  <!-- TODO change 'comments' to 'reviewers' when property is ready -->
   <pmp-table-pr-statistic
+    *ngIf="(repository$ | async)?.prsStatistics"
     [tableData]="(repository$ | async).prsStatistics"
-    columnPropertyName="comments"
+    (navigateItem)="onNavigateItem($event)"
+    columnPropertyName="reviewers"
   ></pmp-table-pr-statistic>
 </div>
diff --git a/...itory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.ts b/...itory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.ts
@@ -2,14 +2,15 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { first } from 'rxjs/operators';
 import { RepositoryStatisticsFacade } from '@pimp-my-pr/pmp-web/repository/repository-statistics/data-access';
+import { PrStatistics } from '@pimp-my-pr/shared/domain';
 
 @Component({
   selector: 'pimp-my-pr-repository-statistics',
   templateUrl: './repository-statistics.component.html',
   styleUrls: ['./repository-statistics.component.scss']
 })
 export class RepositoryStatisticsComponent implements OnDestroy, OnInit {
-  repositoryName: string | null;
+  repositoryId: number | null;
   repository$ = this.facade.repositoryStatistics$;
 
   constructor(private route: ActivatedRoute, private facade: RepositoryStatisticsFacade) {}
@@ -20,10 +21,14 @@ export class RepositoryStatisticsComponent implements OnDestroy, OnInit {
     this.initGetRepositoryStatistics();
   }
 
+  onNavigateItem(prStatistics: PrStatistics): void {
+    window.open(prStatistics.url, '_blank');
+  }
+
   private initGetRepositoryStatistics(): void {
     this.route.params.pipe(first()).subscribe(params => {
-      this.repositoryName = params.repositoryName;
-      this.facade.getRepositoryStatistics({ id: this.repositoryName });
+      this.repositoryId = params.repositoryId;
+      this.facade.getRepositoryStatistics({ id: this.repositoryId });
     });
   }
 }
diff --git a/...shared/ui-table-pr-statistic/src/lib/table-pr-statistic/table-pr-statistic.component.html b/...shared/ui-table-pr-statistic/src/lib/table-pr-statistic/table-pr-statistic.component.html
@@ -58,8 +58,10 @@
       <mat-header-cell *matHeaderCellDef class="reviewers-column">
         <span> {{ 'Reviewers' }}</span>
       </mat-header-cell>
-      <mat-cell *matCellDef="let element" class="reviewers-column" #customCell>
-        <span>Placeholder</span>
+      <mat-cell *matCellDef="let element" class="reviewers-column">
+        <!-- TODO Bind reviewers data. Missing API property -->
+        <pmp-picture-label label="Placeholder" picture="https://picsum.photos/id/1074/200/300">
+        </pmp-picture-label>
       </mat-cell>
     </ng-container>
 

diff --git a/...shared/ui-table-pr-statistic/src/lib/table-pr-statistic/table-pr-statistic.component.scss b/...shared/ui-table-pr-statistic/src/lib/table-pr-statistic/table-pr-statistic.component.scss
@@ -12,7 +12,7 @@
   }
 }
 
-.custom-column {
+.comments-column {
   color: rgba(0, 0, 0, 0.6);
   flex: unset;
   width: 96px;

diff --git a/libs/shared/domain/src/lib/interfaces/repository-statistics.interface.ts b/libs/shared/domain/src/lib/interfaces/repository-statistics.interface.ts
@@ -8,5 +8,5 @@ export interface RepositoryStatistics {
   pendingPrs?: number;
   pictureUrl: string;
   sumOfHoursPrsWaiting?: number;
-  stat?: PrStatistics[];
+  prsStatistics?: PrStatistics[];
 }